[{"name":"About 1","fileName":"BlockAbout1.vue","file":"<template>\n  <!-- \n    Simple Centered About Section\n    Features: Clean centered layout with mission statement\n  -->\n  <UiContainer class=\"py-16 md:py-24\">\n    <div class=\"mx-auto max-w-3xl text-center\">\n      <h2 class=\"text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl\">About Our Company</h2>\n      <p class=\"mt-6 text-lg text-balance text-muted-foreground\">\n        We're a team of passionate individuals dedicated to creating innovative solutions that make\n        a difference. Our mission is to empower businesses with cutting-edge technology while\n        maintaining a human-centered approach.\n      </p>\n      <div class=\"mt-8 space-y-6\">\n        <div>\n          <h3 class=\"text-2xl font-semibold lg:text-3xl\">Our Mission</h3>\n          <p class=\"mt-2 text-balance text-muted-foreground\">\n            To deliver exceptional products and services that exceed expectations and drive success\n            for our clients worldwide.\n          </p>\n        </div>\n        <div>\n          <h3 class=\"text-2xl font-semibold lg:text-3xl\">Our Vision</h3>\n          <p class=\"mt-2 text-balance text-muted-foreground\">\n            To be the leading innovator in our industry, recognized for our commitment to quality,\n            sustainability, and customer satisfaction.\n          </p>\n        </div>\n      </div>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup></script>\n","category":"About","path":"About/BlockAbout1.vue","components":["container"]},{"name":"About 10","fileName":"BlockAbout10.vue","file":"<template>\n  <!-- \n    Culture & Values About Section\n    Features: Comprehensive culture showcase\n  -->\n  <div class=\"container py-16 md:py-24\">\n    <div class=\"text-center\">\n      <h2 class=\"text-3xl font-bold tracking-tight md:text-4xl\">Our Culture & Values</h2>\n      <p class=\"mx-auto mt-4 max-w-2xl text-lg text-muted-foreground\">\n        What makes us unique and drives our success\n      </p>\n    </div>\n\n    <div class=\"mt-12 grid gap-8 lg:grid-cols-2\">\n      <div>\n        <h3 class=\"text-2xl font-bold\">Culture First</h3>\n        <p class=\"mt-4 text-muted-foreground\">\n          We believe that a strong culture is the foundation of success. Our workplace is built on\n          trust, respect, and a shared commitment to excellence.\n        </p>\n\n        <div class=\"mt-8 space-y-6\">\n          <div v-for=\"benefit in benefits\" :key=\"benefit.title\" class=\"flex gap-4\">\n            <Icon :name=\"benefit.icon\" class=\"size-4 text-muted-foreground\" />\n            <div>\n              <h4 class=\"leading-none font-semibold\">{{ benefit.title }}</h4>\n              <p class=\"mt-1.5 text-sm text-muted-foreground\">{{ benefit.description }}</p>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"space-y-4\">\n        <UiCard v-for=\"culture in culturePoints\" :key=\"culture.title\">\n          <UiCardContent>\n            <div class=\"flex items-start gap-4\">\n              <div\n                class=\"flex size-12 shrink-0 items-center justify-center rounded-xl bg-primary/10\"\n              >\n                <Icon :name=\"culture.icon\" class=\"size-6 text-primary\" />\n              </div>\n              <div>\n                <h4 class=\"font-semibold\">{{ culture.title }}</h4>\n                <p class=\"mt-2 text-sm text-muted-foreground\">{{ culture.description }}</p>\n                <div class=\"mt-3 flex flex-wrap gap-2\">\n                  <UiBadge\n                    v-for=\"tag in culture.tags\"\n                    :key=\"tag\"\n                    variant=\"secondary\"\n                    class=\"text-xs\"\n                  >\n                    {{ tag }}\n                  </UiBadge>\n                </div>\n              </div>\n            </div>\n          </UiCardContent>\n        </UiCard>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  const benefits = [\n    {\n      icon: \"lucide:home\",\n      title: \"Remote-First\",\n      description: \"Work from anywhere with flexible hours and unlimited PTO\",\n    },\n    {\n      icon: \"lucide:graduation-cap\",\n      title: \"Learning Budget\",\n      description: \"$5,000 annual budget for courses, conferences, and certifications\",\n    },\n    {\n      icon: \"lucide:heart-pulse\",\n      title: \"Health & Wellness\",\n      description: \"Comprehensive health insurance and mental health support\",\n    },\n    {\n      icon: \"lucide:sparkles\",\n      title: \"Career Growth\",\n      description: \"Clear paths for advancement with regular reviews and mentorship\",\n    },\n  ];\n\n  const culturePoints = [\n    {\n      icon: \"lucide:users\",\n      title: \"Diversity & Inclusion\",\n      description:\n        \"We celebrate differences and create an environment where everyone feels valued and heard.\",\n      tags: [\"Inclusive\", \"Equal Opportunity\", \"Belonging\"],\n    },\n    {\n      icon: \"lucide:lightbulb\",\n      title: \"Innovation & Experimentation\",\n      description:\n        \"We encourage trying new things, learning from failures, and pushing boundaries.\",\n      tags: [\"Creative\", \"Bold\", \"Forward-Thinking\"],\n    },\n    {\n      icon: \"lucide:handshake\",\n      title: \"Transparency & Trust\",\n      description:\n        \"Open communication, honest feedback, and building trust at every level of the organization.\",\n      tags: [\"Open\", \"Honest\", \"Accountable\"],\n    },\n  ];\n</script>\n","category":"About","path":"About/BlockAbout10.vue","components":["badge","card","cardcontent"]},{"name":"About 11","fileName":"BlockAbout11.vue","file":"<template>\n  <!-- \n    Testimonials About Section\n    Features: Customer testimonials with avatars\n  -->\n  <div class=\"container py-16 md:py-24\">\n    <div class=\"text-center\">\n      <h2 class=\"text-3xl font-bold tracking-tight md:text-4xl\">What People Say About Us</h2>\n      <p class=\"mx-auto mt-4 max-w-2xl text-lg text-muted-foreground\">\n        Trusted by companies worldwide\n      </p>\n    </div>\n\n    <div class=\"mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      <UiCard v-for=\"testimonial in testimonials\" :key=\"testimonial.name\">\n        <UiCardContent>\n          <div class=\"flex items-center gap-1 text-yellow-500\">\n            <Icon v-for=\"i in 5\" :key=\"i\" name=\"lucide:star\" class=\"size-4 fill-current\" />\n          </div>\n          <p class=\"mt-4 text-sm text-muted-foreground\">\"{{ testimonial.quote }}\"</p>\n          <div class=\"mt-6 flex items-center gap-3\">\n            <UiAvatar :src=\"testimonial.avatar\" :alt=\"testimonial.name\" class=\"size-10\" />\n            <div>\n              <p class=\"text-sm font-semibold\">{{ testimonial.name }}</p>\n              <p class=\"text-xs text-muted-foreground\">{{ testimonial.role }}</p>\n            </div>\n          </div>\n        </UiCardContent>\n      </UiCard>\n    </div>\n\n    <div class=\"mx-auto mt-12 max-w-3xl text-center\">\n      <div class=\"inline-flex items-center gap-8 rounded-2xl border bg-card p-8\">\n        <div v-for=\"stat in stats\" :key=\"stat.label\" class=\"text-center\">\n          <div class=\"text-3xl font-bold text-primary\">{{ stat.value }}</div>\n          <div class=\"mt-1 text-sm text-muted-foreground\">{{ stat.label }}</div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  const testimonials = [\n    {\n      name: \"Sarah Johnson\",\n      role: \"CEO, TechCorp\",\n      avatar: \"https://randomuser.me/api/portraits/women/75.jpg\",\n      quote:\n        \"This company transformed how we operate. Their solutions are intuitive, powerful, and have saved us countless hours.\",\n    },\n    {\n      name: \"Michael Brown\",\n      role: \"CTO, InnovateLabs\",\n      avatar: \"https://randomuser.me/api/portraits/men/75.jpg\",\n      quote:\n        \"Outstanding service and support. They truly understand our needs and deliver beyond expectations every time.\",\n    },\n    {\n      name: \"Emily Davis\",\n      role: \"Director, GlobalTech\",\n      avatar: \"https://randomuser.me/api/portraits/women/76.jpg\",\n      quote:\n        \"A game-changer for our business. The ROI has been incredible and their team is always there when we need them.\",\n    },\n    {\n      name: \"David Wilson\",\n      role: \"Founder, StartupXYZ\",\n      avatar: \"https://randomuser.me/api/portraits/men/77.jpg\",\n      quote:\n        \"From implementation to ongoing support, everything has been seamless. I recommend them to everyone I meet.\",\n    },\n    {\n      name: \"Lisa Anderson\",\n      role: \"VP Operations, MegaCorp\",\n      avatar: \"https://randomuser.me/api/portraits/women/78.jpg\",\n      quote:\n        \"Their platform scales beautifully with our growth. The feature set is comprehensive and constantly improving.\",\n    },\n    {\n      name: \"James Martinez\",\n      role: \"Head of IT, Enterprise Co\",\n      avatar: \"https://randomuser.me/api/portraits/men/79.jpg\",\n      quote:\n        \"Security, reliability, and performance - they excel in all areas. We couldn't be happier with our decision.\",\n    },\n  ];\n\n  const stats = [\n    { value: \"10k+\", label: \"Happy Customers\" },\n    { value: \"4.9/5\", label: \"Average Rating\" },\n    { value: \"99%\", label: \"Satisfaction\" },\n  ];\n</script>\n","category":"About","path":"About/BlockAbout11.vue","components":["avatar","card","cardcontent"]},{"name":"About 12","fileName":"BlockAbout12.vue","file":"<template>\n  <!-- \n    Journey Map About Section\n    Features: Interactive company journey visualization\n  -->\n  <div class=\"container py-16 md:py-24\">\n    <div class=\"text-center\">\n      <h2 class=\"text-3xl font-bold tracking-tight md:text-4xl\">Our Journey</h2>\n      <p class=\"mx-auto mt-4 max-w-2xl text-lg text-muted-foreground\">\n        From humble beginnings to industry leaders\n      </p>\n    </div>\n\n    <div class=\"relative mt-12\">\n      <!-- Connecting Line -->\n      <div\n        class=\"absolute top-8 left-4 hidden h-full w-0.5 bg-linear-to-b from-border via-border to-transparent md:left-1/2 md:block\"\n      />\n\n      <div class=\"space-y-12\">\n        <div v-for=\"(milestone, index) in milestones\" :key=\"milestone.year\" class=\"relative\">\n          <div class=\"flex items-start gap-4 md:grid md:grid-cols-2 md:gap-8\">\n            <!-- Left Side (odd items on mobile, even items on desktop) -->\n            <div :class=\"index % 2 === 0 ? 'md:col-start-1' : 'md:col-start-2'\">\n              <UiCard class=\"md:mx-4\">\n                <UiCardContent>\n                  <UiBadge class=\"mb-3\">{{ milestone.year }}</UiBadge>\n                  <h3 class=\"text-xl font-bold\">{{ milestone.title }}</h3>\n                  <p class=\"mt-2 text-sm text-muted-foreground\">{{ milestone.description }}</p>\n                  <div\n                    class=\"mt-4 flex flex-wrap gap-2\"\n                    :class=\"index % 2 === 0 ? 'md:justify-end' : ''\"\n                  >\n                    <UiBadge\n                      v-for=\"tag in milestone.tags\"\n                      :key=\"tag\"\n                      variant=\"outline\"\n                      class=\"text-xs\"\n                    >\n                      {{ tag }}\n                    </UiBadge>\n                  </div>\n                </UiCardContent>\n              </UiCard>\n            </div>\n\n            <!-- Center Dot -->\n            <div\n              class=\"absolute left-4 hidden size-10 -translate-x-1/2 items-center justify-center rounded-full border-4 border-background bg-primary from-primary via-background to-background md:left-1/2 md:flex dark:bg-linear-to-b\"\n            >\n              <Icon\n                :name=\"milestone.icon\"\n                class=\"size-4 text-primary-foreground dark:text-primary\"\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  const milestones = [\n    {\n      year: \"2015\",\n      title: \"The Beginning\",\n      description:\n        \"Founded in a small garage with a vision to revolutionize the industry. Started with just 3 passionate individuals.\",\n      icon: \"lucide:rocket\",\n      tags: [\"Startup\", \"Vision\"],\n    },\n    {\n      year: \"2017\",\n      title: \"First Major Product Launch\",\n      description:\n        \"Released our flagship product to critical acclaim. Secured Series A funding of $5M and grew team to 15 members.\",\n      icon: \"lucide:package\",\n      tags: [\"Product\", \"Growth\"],\n    },\n    {\n      year: \"2019\",\n      title: \"Global Expansion\",\n      description:\n        \"Opened offices in London and Singapore. Reached 1,000+ customers across 25 countries.\",\n      icon: \"lucide:globe\",\n      tags: [\"International\", \"Scale\"],\n    },\n    {\n      year: \"2021\",\n      title: \"Innovation Award\",\n      description:\n        \"Recognized as 'Most Innovative Company' by Tech Magazine. Launched AI-powered features that changed the game.\",\n      icon: \"lucide:trophy\",\n      tags: [\"Recognition\", \"Innovation\"],\n    },\n    {\n      year: \"2023\",\n      title: \"Unicorn Status\",\n      description:\n        \"Reached $1B valuation with Series C funding. Team grew to 500+ across 10 global offices.\",\n      icon: \"lucide:trending-up\",\n      tags: [\"Milestone\", \"Investment\"],\n    },\n    {\n      year: \"2025\",\n      title: \"The Future\",\n      description:\n        \"Continuing to innovate and push boundaries. Committed to sustainability and making a positive global impact.\",\n      icon: \"lucide:sparkles\",\n      tags: [\"Vision\", \"Sustainability\"],\n    },\n  ];\n</script>\n","category":"About","path":"About/BlockAbout12.vue","components":["badge","card","cardcontent"]},{"name":"About 13","fileName":"BlockAbout13.vue","file":"<template>\n  <!-- \n    Meet the Founders About Section\n    Features: Detailed founder stories\n  -->\n  <div class=\"container py-16 md:py-24\">\n    <div class=\"text-center\">\n      <h2 class=\"text-3xl font-bold tracking-tight md:text-4xl\">Meet Our Founders</h2>\n      <p class=\"mx-auto mt-4 max-w-2xl text-lg text-muted-foreground\">\n        The visionaries behind our success story\n      </p>\n    </div>\n\n    <div class=\"mt-12 space-y-16\">\n      <div\n        v-for=\"(founder, index) in founders\"\n        :key=\"founder.name\"\n        class=\"grid gap-8 lg:grid-cols-2 lg:gap-12\"\n        :class=\"index % 2 === 1 ? 'lg:flex-row-reverse' : ''\"\n      >\n        <div :class=\"index % 2 === 1 ? 'lg:order-2' : ''\">\n          <div class=\"overflow-hidden rounded-2xl lg:aspect-square\">\n            <img\n              :src=\"founder.image\"\n              :alt=\"founder.name\"\n              class=\"size-[300px] rounded-2xl object-cover lg:size-full\"\n            />\n          </div>\n        </div>\n\n        <div class=\"flex flex-col justify-center\" :class=\"index % 2 === 1 ? 'lg:order-1' : ''\">\n          <UiBadge class=\"w-fit\">{{ founder.role }}</UiBadge>\n          <h3 class=\"mt-4 text-3xl font-bold\">{{ founder.name }}</h3>\n          <p class=\"mt-2 text-primary\">{{ founder.title }}</p>\n\n          <div class=\"mt-6 space-y-4 text-muted-foreground\">\n            <p v-for=\"paragraph in founder.bio\" :key=\"paragraph\">{{ paragraph }}</p>\n          </div>\n\n          <div class=\"mt-6 space-y-4\">\n            <div>\n              <h4 class=\"text-sm font-semibold\">Background</h4>\n              <ul class=\"mt-2 space-y-1 text-sm text-muted-foreground\">\n                <li v-for=\"item in founder.background\" :key=\"item\" class=\"flex items-start gap-2\">\n                  <Icon name=\"lucide:check\" class=\"mt-0.5 size-4 shrink-0 text-primary\" />\n                  <span>{{ item }}</span>\n                </li>\n              </ul>\n            </div>\n\n            <div>\n              <h4 class=\"text-sm font-semibold\">Specialties</h4>\n              <div class=\"mt-2 flex flex-wrap gap-2\">\n                <UiBadge\n                  v-for=\"specialty in founder.specialties\"\n                  :key=\"specialty\"\n                  variant=\"secondary\"\n                >\n                  {{ specialty }}\n                </UiBadge>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"mt-6 flex gap-1\">\n            <UiButton\n              v-for=\"social in founder.socials\"\n              :key=\"social.platform\"\n              variant=\"ghost\"\n              size=\"icon-sm\"\n            >\n              <Icon :name=\"social.icon\" class=\"size-5\" />\n            </UiButton>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  const founders = [\n    {\n      name: \"Emma Thompson\",\n      role: \"Co-Founder\",\n      title: \"Chief Executive Officer\",\n      image:\n        \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&auto=format&fit=crop&q=80\",\n      bio: [\n        \"Emma's entrepreneurial journey began at MIT, where she developed a passion for building technology that solves real-world problems. After leading product teams at Fortune 500 companies, she decided to start her own venture.\",\n        \"With over 15 years in the tech industry, Emma brings a unique blend of technical expertise and business acumen. Her vision has been instrumental in shaping our company's direction and culture.\",\n      ],\n      background: [\n        \"BS in Computer Science, MIT\",\n        \"Former VP of Product at TechGiant Inc.\",\n        \"Forbes 30 Under 30 recipient\",\n        \"Published author on product strategy\",\n      ],\n      specialties: [\"Product Strategy\", \"Leadership\", \"Innovation\"],\n      socials: [\n        { platform: \"twitter\", icon: \"logos:twitter\" },\n        { platform: \"linkedin\", icon: \"logos:linkedin-icon\" },\n        { platform: \"github\", icon: \"simple-icons:github\" },\n      ],\n    },\n    {\n      name: \"Marcus Chen\",\n      role: \"Co-Founder\",\n      title: \"Chief Technology Officer\",\n      image:\n        \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&auto=format&fit=crop&q=80\",\n      bio: [\n        \"Marcus is a technology visionary who has been coding since the age of 12. His expertise in distributed systems and AI has been crucial in building our robust and scalable platform.\",\n        \"Before co-founding the company, Marcus was a principal engineer at a leading cloud infrastructure company. He holds multiple patents in distributed computing and has contributed to several open-source projects.\",\n      ],\n      background: [\n        \"PhD in Computer Science, Stanford\",\n        \"Former Principal Engineer at CloudScale\",\n        \"10+ patents in distributed systems\",\n        \"Open-source contributor with 50k+ GitHub stars\",\n      ],\n      specialties: [\"System Architecture\", \"AI/ML\", \"Cloud Infrastructure\"],\n      socials: [\n        { platform: \"github\", icon: \"simple-icons:github\" },\n        { platform: \"linkedin\", icon: \"logos:linkedin-icon\" },\n        { platform: \"twitter\", icon: \"logos:twitter\" },\n      ],\n    },\n  ];\n</script>\n","category":"About","path":"About/BlockAbout13.vue","components":["badge","button"]},{"name":"About 14","fileName":"BlockAbout14.vue","file":"<template>\n  <!-- \n    Office Locations About Section\n    Features: Multi-location showcase\n  -->\n  <div class=\"container py-16 md:py-24\">\n    <div class=\"text-center\">\n      <h2 class=\"text-3xl font-bold tracking-tight md:text-4xl\">Our Global Presence</h2>\n      <p class=\"mx-auto mt-4 max-w-2xl text-lg text-muted-foreground\">\n        Operating across continents to serve you better\n      </p>\n    </div>\n\n    <div class=\"mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      <UiCard\n        v-for=\"office in offices\"\n        :key=\"office.city\"\n        class=\"group py-0 pb-6 transition-shadow hover:shadow-lg\"\n      >\n        <div class=\"overflow-hidden rounded-t-xl\">\n          <img\n            :src=\"office.image\"\n            :alt=\"`${office.city} office`\"\n            class=\"h-48 w-full object-cover transition-transform group-hover:scale-105\"\n          />\n        </div>\n        <UiCardContent>\n          <div class=\"flex items-start justify-between\">\n            <div>\n              <UiBadge v-if=\"office.isHQ\" variant=\"default\" class=\"mb-2\">Headquarters</UiBadge>\n              <h3 class=\"text-xl font-bold\">{{ office.city }}</h3>\n              <p class=\"text-sm text-muted-foreground\">{{ office.country }}</p>\n            </div>\n            <div class=\"rounded-lg bg-primary/10 p-2\">\n              <Icon name=\"lucide:map-pin\" class=\"size-5 text-primary\" />\n            </div>\n          </div>\n\n          <div class=\"mt-4 space-y-3 text-sm\">\n            <div class=\"flex items-start gap-2 text-muted-foreground\">\n              <Icon name=\"lucide:building\" class=\"mt-0.5 size-4 shrink-0\" />\n              <span>{{ office.address }}</span>\n            </div>\n            <div class=\"flex items-center gap-2 text-muted-foreground\">\n              <Icon name=\"lucide:users\" class=\"size-4 shrink-0\" />\n              <span>{{ office.employees }} employees</span>\n            </div>\n            <div class=\"flex items-center gap-2 text-muted-foreground\">\n              <Icon name=\"lucide:phone\" class=\"size-4 shrink-0\" />\n              <span>{{ office.phone }}</span>\n            </div>\n          </div>\n\n          <div class=\"mt-4\">\n            <h4 class=\"mb-2 text-xs font-semibold tracking-wide text-muted-foreground uppercase\">\n              Departments\n            </h4>\n            <div class=\"flex flex-wrap gap-2\">\n              <UiBadge\n                v-for=\"dept in office.departments\"\n                :key=\"dept\"\n                variant=\"outline\"\n                class=\"text-xs\"\n              >\n                {{ dept }}\n              </UiBadge>\n            </div>\n          </div>\n        </UiCardContent>\n      </UiCard>\n    </div>\n\n    <div class=\"mx-auto mt-12 max-w-3xl rounded-2xl border bg-card p-8 text-center\">\n      <Icon name=\"lucide:globe\" class=\"mx-auto size-12 text-primary\" />\n      <h3 class=\"mt-4 text-xl font-semibold\">Looking to expand globally?</h3>\n      <p class=\"mt-2 text-muted-foreground\">\n        We're constantly growing and opening new offices. Check back to see where we're headed next.\n      </p>\n      <UiButton class=\"mt-6\">View Career Opportunities</UiButton>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  const offices = [\n    {\n      city: \"San Francisco\",\n      country: \"United States\",\n      image:\n        \"https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=400&auto=format&fit=crop&q=80\",\n      address: \"123 Market Street, Suite 500, CA 94103\",\n      employees: 250,\n      phone: \"+1 (415) 555-0100\",\n      isHQ: true,\n      departments: [\"Engineering\", \"Sales\", \"Marketing\", \"Support\"],\n    },\n    {\n      city: \"London\",\n      country: \"United Kingdom\",\n      image:\n        \"https://images.unsplash.com/photo-1513635269975-59663e0ac1ad?w=400&auto=format&fit=crop&q=80\",\n      address: \"45 Liverpool Street, EC2M 7AE\",\n      employees: 120,\n      phone: \"+44 20 7946 0958\",\n      isHQ: false,\n      departments: [\"Sales\", \"Marketing\", \"Support\"],\n    },\n    {\n      city: \"Singapore\",\n      country: \"Singapore\",\n      image:\n        \"https://images.unsplash.com/photo-1525625293386-3f8f99389edd?w=400&auto=format&fit=crop&q=80\",\n      address: \"1 Marina Boulevard, #28-00, 018989\",\n      employees: 85,\n      phone: \"+65 6789 1234\",\n      isHQ: false,\n      departments: [\"Engineering\", \"Sales\", \"Support\"],\n    },\n    {\n      city: \"Berlin\",\n      country: \"Germany\",\n      image:\n        \"https://images.unsplash.com/photo-1560969184-10fe8719e047?w=400&auto=format&fit=crop&q=80\",\n      address: \"Friedrichstraße 100, 10117\",\n      employees: 95,\n      phone: \"+49 30 1234 5678\",\n      isHQ: false,\n      departments: [\"Engineering\", \"Product\"],\n    },\n    {\n      city: \"Tokyo\",\n      country: \"Japan\",\n      image:\n        \"https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?w=400&auto=format&fit=crop&q=80\",\n      address: \"1-2-3 Shibuya, Tokyo 150-0002\",\n      employees: 70,\n      phone: \"+81 3-1234-5678\",\n      isHQ: false,\n      departments: [\"Sales\", \"Support\"],\n    },\n    {\n      city: \"Sydney\",\n      country: \"Australia\",\n      image:\n        \"https://images.unsplash.com/photo-1506973035872-a4ec16b8e8d9?w=400&auto=format&fit=crop&q=80\",\n      address: \"100 George Street, NSW 2000\",\n      employees: 60,\n      phone: \"+61 2 9876 5432\",\n      isHQ: false,\n      departments: [\"Sales\", \"Marketing\"],\n    },\n  ];\n</script>\n","category":"About","path":"About/BlockAbout14.vue","components":["badge","button","card","cardcontent"]},{"name":"About 15","fileName":"BlockAbout15.vue","file":"<template>\n  <!-- \n    Awards & Recognition About Section\n    Features: Showcase achievements and awards\n  -->\n  <div class=\"container py-16 md:py-24\">\n    <div class=\"text-center\">\n      <h2 class=\"text-3xl font-bold tracking-tight md:text-4xl\">Awards & Recognition</h2>\n      <p class=\"mx-auto mt-4 max-w-2xl text-lg text-muted-foreground\">\n        Honored by industry leaders and innovation champions\n      </p>\n    </div>\n\n    <div class=\"mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-3\">\n      <UiCard v-for=\"award in awards\" :key=\"award.title\" class=\"group\">\n        <UiCardContent>\n          <div class=\"flex items-start justify-between\">\n            <div\n              class=\"flex size-14 items-center justify-center rounded-xl bg-primary/10 transition-transform group-hover:scale-110\"\n            >\n              <Icon :name=\"award.icon\" class=\"size-7 text-primary\" />\n            </div>\n            <UiBadge variant=\"outline\">{{ award.year }}</UiBadge>\n          </div>\n          <h3 class=\"mt-4 font-bold\">{{ award.title }}</h3>\n          <p class=\"mt-1 text-sm text-primary\">{{ award.organization }}</p>\n          <p class=\"mt-3 text-sm text-muted-foreground\">{{ award.description }}</p>\n        </UiCardContent>\n      </UiCard>\n    </div>\n\n    <div class=\"mt-16\">\n      <h3 class=\"text-center text-2xl font-bold\">Certifications & Partnerships</h3>\n      <div class=\"mx-auto mt-8 grid max-w-4xl gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n        <div\n          v-for=\"cert in certifications\"\n          :key=\"cert.name\"\n          class=\"flex flex-col items-center rounded-xl border bg-card p-6 text-center transition-colors hover:border-primary/50\"\n        >\n          <div class=\"flex size-16 items-center justify-center rounded-full bg-primary/10\">\n            <Icon :name=\"cert.icon\" class=\"size-8 text-primary\" />\n          </div>\n          <h4 class=\"mt-4 text-sm font-semibold\">{{ cert.name }}</h4>\n          <p class=\"mt-1 text-xs text-muted-foreground\">{{ cert.type }}</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"mx-auto mt-16 max-w-3xl text-center\">\n      <UiCard class=\"bg-primary/5\">\n        <UiCardContent>\n          <Icon name=\"lucide:award\" class=\"mx-auto size-12 text-primary\" />\n          <h3 class=\"mt-4 text-xl font-bold\">Industry Recognition</h3>\n          <p class=\"mt-2 text-muted-foreground\">\n            Featured in Forbes, TechCrunch, and The Wall Street Journal as one of the most\n            innovative companies reshaping the industry.\n          </p>\n          <div class=\"mt-6 flex flex-wrap items-center justify-center gap-6\">\n            <div\n              v-for=\"mention in mediaMentions\"\n              :key=\"mention\"\n              class=\"text-sm font-semibold text-muted-foreground\"\n            >\n              {{ mention }}\n            </div>\n          </div>\n        </UiCardContent>\n      </UiCard>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  const awards = [\n    {\n      icon: \"lucide:trophy\",\n      title: \"Best SaaS Product of the Year\",\n      organization: \"Tech Innovation Awards\",\n      year: \"2024\",\n      description:\n        \"Recognized for outstanding innovation and user experience in the SaaS category.\",\n    },\n    {\n      icon: \"lucide:star\",\n      title: \"Top 100 Companies to Watch\",\n      organization: \"Business Weekly\",\n      year: \"2024\",\n      description: \"Named among the most promising companies driving industry transformation.\",\n    },\n    {\n      icon: \"lucide:zap\",\n      title: \"Innovation Excellence Award\",\n      organization: \"Global Tech Summit\",\n      year: \"2023\",\n      description: \"Honored for breakthrough AI-powered features and technical excellence.\",\n    },\n    {\n      icon: \"lucide:award\",\n      title: \"Customer Choice Award\",\n      organization: \"G2 Software Reviews\",\n      year: \"2023\",\n      description: \"Voted #1 by customers for satisfaction, ease of use, and value for money.\",\n    },\n    {\n      icon: \"lucide:users\",\n      title: \"Best Place to Work\",\n      organization: \"Tech Employers Association\",\n      year: \"2023\",\n      description: \"Recognized for exceptional workplace culture and employee satisfaction.\",\n    },\n    {\n      icon: \"lucide:shield-check\",\n      title: \"Security Excellence Award\",\n      organization: \"Cybersecurity Alliance\",\n      year: \"2022\",\n      description: \"Awarded for maintaining the highest standards in data security and privacy.\",\n    },\n  ];\n\n  const certifications = [\n    {\n      name: \"ISO 27001\",\n      type: \"Security\",\n      icon: \"lucide:shield-check\",\n    },\n    {\n      name: \"SOC 2 Type II\",\n      type: \"Compliance\",\n      icon: \"lucide:file-check\",\n    },\n    {\n      name: \"GDPR Compliant\",\n      type: \"Privacy\",\n      icon: \"lucide:lock\",\n    },\n    {\n      name: \"AWS Partner\",\n      type: \"Technology\",\n      icon: \"lucide:cloud\",\n    },\n  ];\n\n  const mediaMentions = [\"Forbes\", \"TechCrunch\", \"WSJ\", \"Bloomberg\", \"CNBC\"];\n</script>\n","category":"About","path":"About/BlockAbout15.vue","components":["badge","card","cardcontent"]},{"name":"About 16","fileName":"BlockAbout16.vue","file":"<template>\n  <!-- \n    Team Carousel About Section\n    Features: Team showcase with navigation\n  -->\n  <div class=\"container py-16 md:py-24\">\n    <div class=\"text-center\">\n      <h2 class=\"text-3xl font-bold tracking-tight md:text-4xl\">Meet Our Team</h2>\n      <p class=\"mx-auto mt-4 max-w-2xl text-lg text-muted-foreground\">\n        The talented people behind our success\n      </p>\n    </div>\n\n    <div class=\"mt-12\">\n      <swiper-container ref=\"swiperRef\" :modules=\"[Autoplay]\">\n        <swiper-slide v-for=\"member in teamMembers\" :key=\"member.name\">\n          <UiCard class=\"group pt-0\">\n            <div class=\"h-[300px] overflow-hidden rounded-t-xl\">\n              <img\n                :src=\"member.image\"\n                :alt=\"member.name\"\n                class=\"size-full object-cover transition-transform group-hover:scale-105\"\n              />\n            </div>\n            <UiCardContent>\n              <h3 class=\"font-semibold\">{{ member.name }}</h3>\n              <p class=\"text-sm text-primary\">{{ member.role }}</p>\n              <p class=\"mt-2 text-xs text-muted-foreground\">{{ member.department }}</p>\n              <div class=\"mt-3 flex gap-2\">\n                <a\n                  v-for=\"social in member.socials\"\n                  :key=\"social.platform\"\n                  :href=\"social.url\"\n                  class=\"text-muted-foreground transition-colors hover:text-foreground\"\n                >\n                  <Icon :name=\"social.icon\" class=\"size-4\" />\n                </a>\n              </div>\n            </UiCardContent>\n          </UiCard>\n        </swiper-slide>\n      </swiper-container>\n\n      <div class=\"mt-8 flex items-center gap-4\">\n        <UiButton\n          :disabled=\"swiper.isBeginning.value\"\n          variant=\"outline\"\n          size=\"icon\"\n          class=\"size-11 rounded-full\"\n          @click=\"swiper.prev()\"\n        >\n          <Icon name=\"lucide:chevron-left\" class=\"size-4\" />\n        </UiButton>\n        <UiButton\n          :disabled=\"swiper.isEnd.value\"\n          variant=\"outline\"\n          size=\"icon\"\n          class=\"size-11 rounded-full\"\n          @click=\"swiper.next()\"\n        >\n          <Icon name=\"lucide:chevron-right\" class=\"size-4\" />\n        </UiButton>\n      </div>\n    </div>\n\n    <div class=\"mx-auto mt-12 max-w-2xl text-center\">\n      <h3 class=\"text-xl font-bold\">Join Our Growing Team</h3>\n      <p class=\"mt-2 text-muted-foreground\">\n        We're always looking for talented individuals who share our passion for innovation and\n        excellence.\n      </p>\n      <UiButton class=\"mt-6\">View Open Positions</UiButton>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { Autoplay } from \"swiper/modules\";\n\n  const teamMembers = [\n    {\n      name: \"Alice Cooper\",\n      role: \"Senior Designer\",\n      department: \"Design Team\",\n      image: \"https://randomuser.me/api/portraits/women/44.jpg\",\n      socials: [\n        { platform: \"twitter\", icon: \"logos:twitter\", url: \"#\" },\n        { platform: \"linkedin\", icon: \"logos:linkedin-icon\", url: \"#\" },\n      ],\n    },\n    {\n      name: \"Bob Anderson\",\n      role: \"Lead Engineer\",\n      department: \"Engineering\",\n      image: \"https://randomuser.me/api/portraits/men/45.jpg\",\n      socials: [\n        { platform: \"github\", icon: \"simple-icons:github\", url: \"#\" },\n        { platform: \"linkedin\", icon: \"logos:linkedin-icon\", url: \"#\" },\n      ],\n    },\n    {\n      name: \"Carol Smith\",\n      role: \"Product Manager\",\n      department: \"Product\",\n      image: \"https://randomuser.me/api/portraits/women/46.jpg\",\n      socials: [\n        { platform: \"linkedin\", icon: \"logos:linkedin-icon\", url: \"#\" },\n        { platform: \"twitter\", icon: \"logos:twitter\", url: \"#\" },\n      ],\n    },\n    {\n      name: \"David Lee\",\n      role: \"Marketing Director\",\n      department: \"Marketing\",\n      image: \"https://randomuser.me/api/portraits/men/47.jpg\",\n      socials: [\n        { platform: \"twitter\", icon: \"logos:twitter\", url: \"#\" },\n        { platform: \"linkedin\", icon: \"logos:linkedin-icon\", url: \"#\" },\n      ],\n    },\n    {\n      name: \"Emma White\",\n      role: \"Data Scientist\",\n      department: \"Analytics\",\n      image: \"https://randomuser.me/api/portraits/women/48.jpg\",\n      socials: [\n        { platform: \"github\", icon: \"simple-icons:github\", url: \"#\" },\n        { platform: \"linkedin\", icon: \"logos:linkedin-icon\", url: \"#\" },\n      ],\n    },\n    {\n      name: \"Frank Green\",\n      role: \"Customer Success\",\n      department: \"Support\",\n      image: \"https://randomuser.me/api/portraits/men/49.jpg\",\n      socials: [{ platform: \"linkedin\", icon: \"logos:linkedin-icon\", url: \"#\" }],\n    },\n    {\n      name: \"Grace Kim\",\n      role: \"UX Researcher\",\n      department: \"Research\",\n      image: \"https://randomuser.me/api/portraits/women/50.jpg\",\n      socials: [\n        { platform: \"twitter\", icon: \"logos:twitter\", url: \"#\" },\n        { platform: \"linkedin\", icon: \"logos:linkedin-icon\", url: \"#\" },\n      ],\n    },\n    {\n      name: \"Henry Black\",\n      role: \"DevOps Engineer\",\n      department: \"Operations\",\n      image: \"https://randomuser.me/api/portraits/men/51.jpg\",\n      socials: [\n        { platform: \"github\", icon: \"simple-icons:github\", url: \"#\" },\n        { platform: \"linkedin\", icon: \"logos:linkedin-icon\", url: \"#\" },\n      ],\n    },\n  ];\n\n  const swiperRef = ref(null);\n  const swiper = useSwiper(swiperRef, {\n    slidesPerView: 1.2,\n    spaceBetween: 10,\n    grabCursor: true,\n    autoplay: {\n      delay: 4000,\n      disableOnInteraction: false,\n    },\n    speed: 800,\n    breakpoints: {\n      1024: {\n        slidesPerView: 3,\n        spaceBetween: 24,\n        slidesPerGroup: 3,\n      },\n      768: {\n        slidesPerView: 2,\n        spaceBetween: 16,\n        slidesPerGroup: 2,\n      },\n    },\n  });\n</script>\n","category":"About","path":"About/BlockAbout16.vue","components":["button","card","cardcontent"]},{"name":"About 17","fileName":"BlockAbout17.vue","file":"<template>\n  <!-- \n    Split Content About Section\n    Features: Alternating content sections\n  -->\n  <div class=\"container py-16 md:py-24\">\n    <div class=\"text-center\">\n      <h2 class=\"text-3xl font-bold tracking-tight md:text-4xl\">Why Choose Us</h2>\n      <p class=\"mx-auto mt-4 max-w-2xl text-lg text-muted-foreground\">\n        What sets us apart from the competition\n      </p>\n    </div>\n\n    <div class=\"mt-12 space-y-24\">\n      <div\n        v-for=\"(section, index) in sections\"\n        :key=\"section.title\"\n        class=\"grid gap-8 lg:grid-cols-2 lg:gap-12\"\n      >\n        <div :class=\"index % 2 === 1 ? 'lg:order-2' : ''\">\n          <div class=\"overflow-hidden rounded-2xl\">\n            <img :src=\"section.image\" :alt=\"section.title\" class=\"aspect-4/3 w-full object-cover\" />\n          </div>\n        </div>\n\n        <div class=\"flex flex-col justify-center\" :class=\"index % 2 === 1 ? 'lg:order-1' : ''\">\n          <UiBadge class=\"w-fit\">{{ section.category }}</UiBadge>\n          <h3 class=\"mt-4 text-3xl font-bold\">{{ section.title }}</h3>\n          <p class=\"mt-4 text-lg text-muted-foreground\">{{ section.description }}</p>\n\n          <ul class=\"mt-6 space-y-4\">\n            <li v-for=\"feature in section.features\" :key=\"feature.title\" class=\"flex gap-3\">\n              <div\n                class=\"flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/10\"\n              >\n                <Icon :name=\"feature.icon\" class=\"size-5 text-primary\" />\n              </div>\n              <div>\n                <h4 class=\"font-semibold\">{{ feature.title }}</h4>\n                <p class=\"text-sm text-muted-foreground\">{{ feature.description }}</p>\n              </div>\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  const sections = [\n    {\n      category: \"Innovation\",\n      title: \"Cutting-Edge Technology\",\n      description:\n        \"We leverage the latest technologies and methodologies to deliver solutions that are not just current, but future-ready.\",\n      image:\n        \"https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=800&auto=format&fit=crop&q=80\",\n      features: [\n        {\n          icon: \"lucide:cpu\",\n          title: \"AI-Powered Solutions\",\n          description: \"Intelligent automation that learns and adapts to your needs\",\n        },\n        {\n          icon: \"lucide:rocket\",\n          title: \"Continuous Innovation\",\n          description: \"Regular updates and new features based on user feedback\",\n        },\n        {\n          icon: \"lucide:zap\",\n          title: \"Lightning Fast\",\n          description: \"Optimized performance delivering results in milliseconds\",\n        },\n      ],\n    },\n    {\n      category: \"Support\",\n      title: \"World-Class Customer Service\",\n      description:\n        \"Our dedicated support team is available 24/7 to ensure you get the help you need, when you need it.\",\n      image:\n        \"https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=800&auto=format&fit=crop&q=80\",\n      features: [\n        {\n          icon: \"lucide:headphones\",\n          title: \"24/7 Support\",\n          description: \"Round-the-clock assistance across all time zones\",\n        },\n        {\n          icon: \"lucide:graduation-cap\",\n          title: \"Comprehensive Training\",\n          description: \"Onboarding and ongoing education for your team\",\n        },\n        {\n          icon: \"lucide:users\",\n          title: \"Dedicated Success Manager\",\n          description: \"Personal advisor to help you achieve your goals\",\n        },\n      ],\n    },\n    {\n      category: \"Security\",\n      title: \"Enterprise-Grade Security\",\n      description:\n        \"Your data security is our top priority. We employ industry-leading security measures to protect your information.\",\n      image:\n        \"https://images.unsplash.com/photo-1563986768609-322da13575f3?w=800&auto=format&fit=crop&q=80\",\n      features: [\n        {\n          icon: \"lucide:shield\",\n          title: \"SOC 2 Certified\",\n          description: \"Independently verified security controls and compliance\",\n        },\n        {\n          icon: \"lucide:lock\",\n          title: \"End-to-End Encryption\",\n          description: \"Military-grade encryption for all data in transit and at rest\",\n        },\n        {\n          icon: \"lucide:eye\",\n          title: \"Privacy First\",\n          description: \"GDPR compliant with transparent data practices\",\n        },\n      ],\n    },\n  ];\n</script>\n","category":"About","path":"About/BlockAbout17.vue","components":["badge"]},{"name":"About 18","fileName":"BlockAbout18.vue","file":"<template>\n  <!-- \n    FAQ About Section\n    Features: Frequently asked questions with collapsible answers\n  -->\n  <div class=\"container py-16 md:py-24\">\n    <div class=\"mx-auto max-w-3xl\">\n      <div class=\"text-center\">\n        <h2 class=\"text-3xl font-bold tracking-tight md:text-4xl\">Frequently Asked Questions</h2>\n        <p class=\"mt-4 text-lg text-muted-foreground\">\n          Everything you need to know about our company\n        </p>\n      </div>\n\n      <div class=\"mt-12 space-y-4\">\n        <UiCard v-for=\"faq in faqs\" :key=\"faq.question\" class=\"gap-0 overflow-hidden py-0\">\n          <UiCollapsible v-slot=\"{ open }\">\n            <UiCollapsibleTrigger\n              class=\"flex w-full items-start justify-between gap-4 p-6 text-left transition-colors hover:bg-muted/50\"\n            >\n              <div>\n                <h3 class=\"font-semibold\">{{ faq.question }}</h3>\n              </div>\n              <Icon\n                name=\"lucide:chevron-down\"\n                class=\"size-5 shrink-0 text-muted-foreground transition-transform\"\n                :class=\"{ 'rotate-180': open }\"\n              />\n            </UiCollapsibleTrigger>\n            <UiCollapsibleContent>\n              <div class=\"px-6 pt-0 pb-6 text-sm text-muted-foreground\">\n                {{ faq.answer }}\n              </div>\n            </UiCollapsibleContent>\n          </UiCollapsible>\n        </UiCard>\n      </div>\n\n      <div class=\"mt-12 rounded-2xl border bg-card p-8 text-center\">\n        <Icon name=\"lucide:help-circle\" class=\"mx-auto size-12 text-primary\" />\n        <h3 class=\"mt-4 text-xl font-bold\">Still have questions?</h3>\n        <p class=\"mt-2 text-muted-foreground\">\n          Can't find the answer you're looking for? Our team is here to help.\n        </p>\n        <div class=\"mt-6 flex flex-wrap justify-center gap-3\">\n          <UiButton>Contact Support</UiButton>\n          <UiButton variant=\"outline\">Schedule a Call</UiButton>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  const faqs = [\n    {\n      question: \"What is your company's background and history?\",\n      answer:\n        \"We were founded in 2015 with a mission to revolutionize the industry through innovative technology. Starting with just three people in a garage, we've grown to a team of over 500 employees across 10 global offices, serving thousands of customers worldwide.\",\n    },\n    {\n      question: \"What makes your company different from competitors?\",\n      answer:\n        \"Our commitment to innovation, customer-first approach, and proven track record set us apart. We invest heavily in R&D, maintain the highest security standards, and provide 24/7 support. Our solutions are built on cutting-edge technology while remaining intuitive and user-friendly.\",\n    },\n    {\n      question: \"What are your company values?\",\n      answer:\n        \"We're guided by five core values: Customer Obsession, Innovation First, Integrity Always, Collaborative Spirit, and Excellence Driven. These principles shape our culture, guide our decisions, and define how we work with customers and each other.\",\n    },\n    {\n      question: \"How large is your team and where are you located?\",\n      answer:\n        \"We have over 500 employees working across 10 offices globally, including San Francisco (HQ), London, Singapore, Berlin, Tokyo, and Sydney. We also support remote work, allowing us to attract top talent from around the world.\",\n    },\n    {\n      question: \"What industries do you serve?\",\n      answer:\n        \"We serve a diverse range of industries including technology, finance, healthcare, retail, manufacturing, and education. Our solutions are designed to be flexible and scalable, adapting to the unique needs of different sectors.\",\n    },\n    {\n      question: \"Are you hiring?\",\n      answer:\n        \"Yes! We're always looking for talented individuals to join our team. We offer competitive compensation, comprehensive benefits, opportunities for growth, and a culture that celebrates diversity and innovation. Check our careers page for current openings.\",\n    },\n    {\n      question: \"How do you ensure data security and privacy?\",\n      answer:\n        \"Security is our top priority. We're SOC 2 Type II certified, GDPR compliant, and ISO 27001 certified. We use end-to-end encryption, conduct regular security audits, and maintain strict access controls. Your data is protected by enterprise-grade security measures.\",\n    },\n    {\n      question: \"What is your company's commitment to sustainability?\",\n      answer:\n        \"We're committed to sustainable growth and environmental responsibility. Our offices use renewable energy, we've implemented carbon offset programs, and we're working toward becoming carbon neutral by 2025. We believe in building a business that's good for both people and the planet.\",\n    },\n  ];\n</script>\n","category":"About","path":"About/BlockAbout18.vue","components":["button","card","collapsible","collapsiblecontent","collapsibletrigger"]},{"name":"About 19","fileName":"BlockAbout19.vue","file":"<template>\n  <!-- \n    Contact Integrated About Section\n    Features: About info with integrated contact form\n  -->\n  <div class=\"container py-16 md:py-24\">\n    <div class=\"grid gap-12 lg:grid-cols-2 lg:gap-16\">\n      <div>\n        <h2 class=\"text-3xl font-bold tracking-tight md:text-4xl\">Let's Work Together</h2>\n        <p class=\"mt-4 text-lg text-muted-foreground\">\n          We're passionate about helping businesses succeed. Get in touch to learn how we can\n          support your goals.\n        </p>\n\n        <div class=\"mt-8 space-y-6\">\n          <div class=\"flex gap-4\">\n            <div class=\"flex size-12 shrink-0 items-center justify-center rounded-xl bg-primary/10\">\n              <Icon name=\"lucide:mail\" class=\"size-6 text-primary\" />\n            </div>\n            <div>\n              <h3 class=\"font-semibold\">Email Us</h3>\n              <p class=\"text-sm text-muted-foreground\">hello@company.com</p>\n              <p class=\"text-sm text-muted-foreground\">support@company.com</p>\n            </div>\n          </div>\n\n          <div class=\"flex gap-4\">\n            <div class=\"flex size-12 shrink-0 items-center justify-center rounded-xl bg-primary/10\">\n              <Icon name=\"lucide:phone\" class=\"size-6 text-primary\" />\n            </div>\n            <div>\n              <h3 class=\"font-semibold\">Call Us</h3>\n              <p class=\"text-sm text-muted-foreground\">+1 (415) 555-0100</p>\n              <p class=\"text-sm text-muted-foreground\">Mon-Fri 9am-6pm PST</p>\n            </div>\n          </div>\n\n          <div class=\"flex gap-4\">\n            <div class=\"flex size-12 shrink-0 items-center justify-center rounded-xl bg-primary/10\">\n              <Icon name=\"lucide:map-pin\" class=\"size-6 text-primary\" />\n            </div>\n            <div>\n              <h3 class=\"font-semibold\">Visit Us</h3>\n              <p class=\"text-sm text-muted-foreground\">123 Market Street, Suite 500</p>\n              <p class=\"text-sm text-muted-foreground\">San Francisco, CA 94103</p>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"mt-8\">\n          <h3 class=\"font-semibold\">Follow Us</h3>\n          <div class=\"mt-3 flex gap-1\">\n            <UiButton v-for=\"social in socials\" :key=\"social.name\" variant=\"ghost\" size=\"icon\">\n              <Icon :name=\"social.icon\" class=\"size-4\" />\n            </UiButton>\n          </div>\n        </div>\n      </div>\n\n      <UiCard>\n        <UiCardContent>\n          <h3 class=\"text-xl font-bold\">Send us a message</h3>\n          <p class=\"mt-2 text-sm text-muted-foreground\">\n            Fill out the form below and we'll get back to you within 24 hours.\n          </p>\n\n          <form class=\"mt-6 space-y-4\" @submit=\"onSubmit\">\n            <div class=\"grid gap-4 sm:grid-cols-2\">\n              <UiVeeInput label=\"First Name\" name=\"firstName\" placeholder=\"John\" />\n              <UiVeeInput label=\"Last Name\" name=\"lastName\" placeholder=\"Doe\" />\n            </div>\n            <UiVeeInput label=\"Email\" name=\"email\" type=\"email\" placeholder=\"john@example.com\" />\n            <UiVeeInput label=\"Company\" name=\"company\" placeholder=\"Acme Inc.\" />\n            <UiVeeInput label=\"Subject\" name=\"subject\" placeholder=\"How can we help?\" />\n            <UiVeeTextarea\n              label=\"Message\"\n              name=\"message\"\n              placeholder=\"Tell us more about your inquiry...\"\n              :rows=\"4\"\n            />\n\n            <UiButton :loading=\"isSubmitting\" type=\"submit\" class=\"w-full\">\n              <Icon name=\"lucide:send\" class=\"mr-2 size-4\" />\n              Send Message\n            </UiButton>\n          </form>\n        </UiCardContent>\n      </UiCard>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { object, string } from \"yup\";\n\n  const socials = [\n    { name: \"Twitter\", icon: \"logos:twitter\" },\n    { name: \"LinkedIn\", icon: \"logos:linkedin-icon\" },\n    { name: \"GitHub\", icon: \"simple-icons:github\" },\n    { name: \"Facebook\", icon: \"logos:facebook\" },\n  ];\n\n  const { handleSubmit, isSubmitting } = useForm({\n    name: \"about-contact-integrated\",\n    validationSchema: toTypedSchema(\n      object({\n        firstName: string().label(\"First Name\").required(),\n        lastName: string().label(\"Last Name\").required(),\n        email: string().label(\"Email\").email().required(),\n        company: string().label(\"Company\").required(),\n        subject: string().label(\"Subject\").required(),\n        message: string().label(\"Message\").required(),\n      })\n    ),\n  });\n\n  const onSubmit = handleSubmit(async (_, { resetForm }) => {\n    // Simulate form submission\n    await new Promise((resolve) => setTimeout(resolve, 2000));\n    useSonner(\"Message sent successfully!\", {\n      description: \"Thank you for reaching out. We will get back to you soon.\",\n    });\n    resetForm();\n  });\n</script>\n","category":"About","path":"About/BlockAbout19.vue","components":["button","card","cardcontent","veeinput","veetextarea"]},{"name":"About 2","fileName":"BlockAbout2.vue","file":"<template>\n  <!-- \n    Team Grid About Section\n    Features: Grid layout with team member cards\n  -->\n  <div class=\"container py-16 md:py-24\">\n    <div class=\"text-center\">\n      <h2 class=\"text-3xl font-bold tracking-tight md:text-4xl\">Meet Our Team</h2>\n      <p class=\"mx-auto mt-4 max-w-2xl text-lg text-muted-foreground\">\n        The talented individuals who make everything possible\n      </p>\n    </div>\n\n    <div class=\"mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-4\">\n      <div v-for=\"member in teamMembers\" :key=\"member.name\" class=\"text-center\">\n        <UiAvatar :src=\"member.image\" :alt=\"member.name\" class=\"mx-auto size-24 md:size-32\" />\n        <h3 class=\"mt-4 text-lg font-semibold\">{{ member.name }}</h3>\n        <p class=\"text-sm text-primary\">{{ member.role }}</p>\n        <p class=\"mt-2 text-sm text-balance text-muted-foreground\">{{ member.bio }}</p>\n        <div class=\"mt-4 flex justify-center gap-3\">\n          <a\n            v-for=\"social in member.socials\"\n            :key=\"social.platform\"\n            :href=\"social.url\"\n            class=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            <Icon :name=\"social.icon\" class=\"size-4\" />\n          </a>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  const teamMembers = [\n    {\n      name: \"Sarah Johnson\",\n      role: \"CEO & Founder\",\n      image: \"https://randomuser.me/api/portraits/women/75.jpg\",\n      bio: \"Visionary leader with 15+ years in tech\",\n      socials: [\n        { platform: \"twitter\", icon: \"logos:twitter\", url: \"#\" },\n        { platform: \"linkedin\", icon: \"logos:linkedin-icon\", url: \"#\" },\n      ],\n    },\n    {\n      name: \"Michael Chen\",\n      role: \"CTO\",\n      image: \"https://randomuser.me/api/portraits/men/75.jpg\",\n      bio: \"Tech innovator passionate about AI\",\n      socials: [\n        { platform: \"twitter\", icon: \"logos:twitter\", url: \"#\" },\n        { platform: \"github\", icon: \"simple-icons:github\", url: \"#\" },\n      ],\n    },\n    {\n      name: \"Emily Rodriguez\",\n      role: \"Head of Design\",\n      image: \"https://randomuser.me/api/portraits/women/76.jpg\",\n      bio: \"Award-winning designer focused on UX\",\n      socials: [\n        { platform: \"twitter\", icon: \"logos:twitter\", url: \"#\" },\n        { platform: \"dribbble\", icon: \"logos:dribbble-icon\", url: \"#\" },\n      ],\n    },\n    {\n      name: \"David Kim\",\n      role: \"VP of Engineering\",\n      image: \"https://randomuser.me/api/portraits/men/76.jpg\",\n      bio: \"Building scalable systems at scale\",\n      socials: [\n        { platform: \"linkedin\", icon: \"logos:linkedin-icon\", url: \"#\" },\n        { platform: \"github\", icon: \"simple-icons:github\", url: \"#\" },\n      ],\n    },\n  ];\n</script>\n","category":"About","path":"About/BlockAbout2.vue","components":["avatar"]},{"name":"About 20","fileName":"BlockAbout20.vue","file":"<template>\n  <!-- \n    Full Page About Section\n    Features: Comprehensive about page layout\n  -->\n  <div>\n    <!-- Hero Section -->\n    <div class=\"border-b bg-muted/30\">\n      <div class=\"container py-16 md:py-24\">\n        <div class=\"mx-auto max-w-3xl text-center\">\n          <UiBadge class=\"mb-4\">About Us</UiBadge>\n          <h1 class=\"text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl\">\n            Building the Future, Together\n          </h1>\n          <p class=\"mt-6 text-xl text-muted-foreground\">\n            We're on a mission to empower businesses with technology that transforms how they work,\n            grow, and succeed.\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <!-- Stats Section -->\n    <div class=\"border-b\">\n      <div class=\"container py-12\">\n        <div class=\"grid gap-8 sm:grid-cols-2 lg:grid-cols-4\">\n          <div v-for=\"stat in stats\" :key=\"stat.label\" class=\"text-center\">\n            <div class=\"text-4xl font-bold text-primary\">{{ stat.value }}</div>\n            <div class=\"mt-2 text-sm text-muted-foreground\">{{ stat.label }}</div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Story Section -->\n    <div class=\"container py-16 md:py-24\">\n      <div class=\"grid gap-12 lg:grid-cols-2 lg:gap-16\">\n        <div>\n          <h2 class=\"text-3xl font-bold\">Our Story</h2>\n          <div class=\"mt-6 space-y-4 text-muted-foreground\">\n            <p>\n              Founded in 2015, we started with a simple idea: technology should empower people, not\n              complicate their lives. What began as a small team working from a garage has grown\n              into a global company serving thousands of customers.\n            </p>\n            <p>\n              Our journey hasn't always been easy, but it's been driven by an unwavering commitment\n              to innovation, customer success, and building a workplace where talented people can do\n              their best work.\n            </p>\n            <p>\n              Today, we're proud to be recognized as industry leaders, but we're even prouder of the\n              relationships we've built and the impact we've made on businesses around the world.\n            </p>\n          </div>\n        </div>\n        <div class=\"overflow-hidden rounded-2xl\">\n          <img\n            src=\"https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&auto=format&fit=crop&q=80\"\n            alt=\"Team collaboration\"\n            class=\"aspect-4/3 w-full object-cover\"\n          />\n        </div>\n      </div>\n    </div>\n\n    <!-- Values Section -->\n    <div class=\"border-y bg-muted/30\">\n      <div class=\"container py-16 md:py-24\">\n        <div class=\"text-center\">\n          <h2 class=\"text-3xl font-bold\">Our Values</h2>\n          <p class=\"mt-4 text-muted-foreground\">The principles that guide everything we do</p>\n        </div>\n        <div class=\"mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n          <UiCard v-for=\"value in values\" :key=\"value.title\">\n            <UiCardContent>\n              <div class=\"flex size-12 items-center justify-center rounded-xl bg-primary/10\">\n                <Icon :name=\"value.icon\" class=\"size-6 text-primary\" />\n              </div>\n              <h3 class=\"mt-4 font-bold\">{{ value.title }}</h3>\n              <p class=\"mt-2 text-sm text-muted-foreground\">{{ value.description }}</p>\n            </UiCardContent>\n          </UiCard>\n        </div>\n      </div>\n    </div>\n\n    <!-- Team Section -->\n    <div class=\"container py-16 md:py-24\">\n      <div class=\"text-center\">\n        <h2 class=\"text-3xl font-bold\">Leadership Team</h2>\n        <p class=\"mt-4 text-muted-foreground\">Meet the people driving our vision</p>\n      </div>\n      <div class=\"mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-4\">\n        <div v-for=\"leader in leaders\" :key=\"leader.name\" class=\"text-center\">\n          <UiAvatar :src=\"leader.image\" :alt=\"leader.name\" class=\"mx-auto size-24\" />\n          <h3 class=\"mt-4 font-semibold\">{{ leader.name }}</h3>\n          <p class=\"text-sm text-primary\">{{ leader.role }}</p>\n        </div>\n      </div>\n    </div>\n\n    <!-- CTA Section -->\n    <div class=\"border-t bg-muted/30\">\n      <div class=\"container py-16 md:py-24\">\n        <div class=\"mx-auto max-w-2xl text-center\">\n          <h2 class=\"text-3xl font-bold\">Ready to Get Started?</h2>\n          <p class=\"mt-4 text-lg text-muted-foreground\">\n            Join thousands of companies already using our platform to transform their business.\n          </p>\n          <div class=\"mt-8 flex flex-wrap justify-center gap-4\">\n            <UiButton size=\"lg\">Start Free Trial</UiButton>\n            <UiButton variant=\"outline\" size=\"lg\">Contact Sales</UiButton>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  const stats = [\n    { value: \"10+\", label: \"Years in Business\" },\n    { value: \"500+\", label: \"Team Members\" },\n    { value: \"10k+\", label: \"Customers Worldwide\" },\n    { value: \"99.9%\", label: \"Uptime SLA\" },\n  ];\n\n  const values = [\n    {\n      icon: \"lucide:heart\",\n      title: \"Customer First\",\n      description: \"Every decision we make starts with our customers' needs and success in mind.\",\n    },\n    {\n      icon: \"lucide:zap\",\n      title: \"Innovation\",\n      description:\n        \"We constantly push boundaries and challenge the status quo to deliver better solutions.\",\n    },\n    {\n      icon: \"lucide:shield-check\",\n      title: \"Integrity\",\n      description:\n        \"We operate with transparency, honesty, and ethical practices in everything we do.\",\n    },\n    {\n      icon: \"lucide:users\",\n      title: \"Collaboration\",\n      description:\n        \"We believe in the power of diverse perspectives working together toward common goals.\",\n    },\n    {\n      icon: \"lucide:trophy\",\n      title: \"Excellence\",\n      description:\n        \"We set high standards and are committed to delivering quality in every interaction.\",\n    },\n    {\n      icon: \"lucide:leaf\",\n      title: \"Sustainability\",\n      description:\n        \"We're building a business that's good for people, planet, and long-term success.\",\n    },\n  ];\n\n  const leaders = [\n    {\n      name: \"Sarah Johnson\",\n      role: \"CEO & Co-Founder\",\n      image: \"https://randomuser.me/api/portraits/women/44.jpg\",\n    },\n    {\n      name: \"Michael Chen\",\n      role: \"CTO & Co-Founder\",\n      image: \"https://randomuser.me/api/portraits/men/45.jpg\",\n    },\n    {\n      name: \"Emma Williams\",\n      role: \"Chief Product Officer\",\n      image: \"https://randomuser.me/api/portraits/women/46.jpg\",\n    },\n    {\n      name: \"David Martinez\",\n      role: \"Chief Revenue Officer\",\n      image: \"https://randomuser.me/api/portraits/men/47.jpg\",\n    },\n  ];\n</script>\n","category":"About","path":"About/BlockAbout20.vue","components":["avatar","badge","button","card","cardcontent"]},{"name":"About 3","fileName":"BlockAbout3.vue","file":"<template>\n  <!-- \n    Story Timeline About Section\n    Features: Timeline layout with company milestones\n  -->\n  <div class=\"container py-16 md:py-24\">\n    <div class=\"text-center\">\n      <h2 class=\"text-3xl font-bold tracking-tight md:text-4xl\">Our Journey</h2>\n      <p class=\"mx-auto mt-4 max-w-2xl text-lg text-muted-foreground\">\n        From humble beginnings to industry leader\n      </p>\n    </div>\n\n    <div class=\"mx-auto mt-12 max-w-3xl\">\n      <div class=\"relative pl-8\">\n        <div v-for=\"milestone in milestones\" :key=\"milestone.year\" class=\"relative pb-8 last:pb-0\">\n          <div class=\"absolute top-0 -left-[35px] flex h-full items-center justify-center\">\n            <div\n              class=\"h-full w-0.5 rounded-full bg-linear-to-b from-transparent via-border to-transparent\"\n            />\n          </div>\n          <div\n            class=\"absolute -left-[53px] flex size-10 items-center justify-center rounded-full border-4 border-background bg-primary\"\n          >\n            <Icon :name=\"milestone.icon\" class=\"size-4 text-primary-foreground\" />\n          </div>\n          <div class=\"pt-2\">\n            <UiBadge variant=\"outline\" class=\"mb-2\">{{ milestone.year }}</UiBadge>\n            <h3 class=\"text-xl font-semibold\">{{ milestone.title }}</h3>\n            <p class=\"mt-2 max-w-3xl text-pretty text-muted-foreground\">\n              {{ milestone.description }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  const milestones = [\n    {\n      year: \"2015\",\n      title: \"Company Founded\",\n      description:\n        \"Started with a vision to revolutionize the industry with three passionate co-founders in a small garage.\",\n      icon: \"lucide:rocket\",\n    },\n    {\n      year: \"2017\",\n      title: \"First Major Product Launch\",\n      description:\n        \"Released our flagship product that changed how businesses operate, gaining 1,000+ customers in the first month.\",\n      icon: \"lucide:package\",\n    },\n    {\n      year: \"2019\",\n      title: \"Series A Funding\",\n      description:\n        \"Secured $10M in funding to expand our team and accelerate product development across new markets.\",\n      icon: \"lucide:trending-up\",\n    },\n    {\n      year: \"2021\",\n      title: \"Global Expansion\",\n      description:\n        \"Opened offices in 5 countries and grew our team to over 200 employees worldwide.\",\n      icon: \"lucide:globe\",\n    },\n    {\n      year: \"2023\",\n      title: \"Industry Recognition\",\n      description:\n        \"Named 'Best Innovation' by Tech Leaders Magazine and reached 100,000 active users globally.\",\n      icon: \"lucide:award\",\n    },\n    {\n      year: \"2025\",\n      title: \"The Future\",\n      description:\n        \"Continuing to innovate and push boundaries with AI-powered solutions and sustainable practices.\",\n      icon: \"lucide:sparkles\",\n    },\n  ];\n</script>\n","category":"About","path":"About/BlockAbout3.vue","components":["badge"]},{"name":"About 4","fileName":"BlockAbout4.vue","file":"<template>\n  <!-- \n    Two Column About Section\n    Features: Split layout with image and content\n  -->\n  <div class=\"container py-16 md:py-24\">\n    <div class=\"grid gap-12 lg:grid-cols-2 lg:gap-16\">\n      <div class=\"relative aspect-4/3 overflow-hidden rounded-2xl bg-muted lg:aspect-auto\">\n        <img\n          src=\"https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&auto=format&fit=crop&q=80\"\n          alt=\"Team collaboration\"\n          class=\"size-full object-cover\"\n        />\n      </div>\n\n      <div class=\"flex flex-col justify-center\">\n        <h2 class=\"text-3xl font-bold tracking-tight md:text-4xl\">Building the Future Together</h2>\n        <p class=\"mt-4 text-lg text-muted-foreground\">\n          Since 2015, we've been on a mission to transform how businesses operate in the digital\n          age. Our team of experts combines creativity with technical excellence to deliver\n          solutions that drive real results.\n        </p>\n\n        <div class=\"mt-8 space-y-6\">\n          <div v-for=\"(item, i) in items\" :key=\"i\" class=\"flex gap-4\">\n            <div\n              class=\"flex size-12 shrink-0 items-center justify-center rounded-full bg-linear-to-b from-primary/50 via-transparent\"\n            >\n              <Icon :name=\"item.icon\" class=\"size-5 text-primary\" />\n            </div>\n            <div>\n              <h3 class=\"font-semibold\">{{ item.title }}</h3>\n              <p class=\"mt-1 text-sm text-muted-foreground\">\n                {{ item.description }}\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  const items = [\n    {\n      icon: \"lucide:users\",\n      title: \"People-First Approach\",\n      description:\n        \"We believe in putting people at the center of everything we do, from our team to our customers.\",\n    },\n    {\n      icon: \"lucide:lightbulb\",\n      title: \"Innovation Driven\",\n      description:\n        \"Constantly pushing boundaries and exploring new technologies to stay ahead of the curve.\",\n    },\n    {\n      icon: \"lucide:target\",\n      title: \"Results Focused\",\n      description:\n        \"Delivering measurable outcomes that make a real difference to our clients' success.\",\n    },\n  ];\n</script>\n","category":"About","path":"About/BlockAbout4.vue","components":[]},{"name":"About 5","fileName":"BlockAbout5.vue","file":"<template>\n  <!-- \n    Stats Highlight About Section\n    Features: Key statistics with prominent numbers\n  -->\n  <div class=\"container py-16 md:py-24\">\n    <div class=\"text-center\">\n      <h2 class=\"text-3xl font-bold tracking-tight md:text-4xl\">About Us in Numbers</h2>\n      <p class=\"mx-auto mt-4 max-w-2xl text-lg text-muted-foreground\">\n        Our achievements speak for themselves\n      </p>\n    </div>\n\n    <div class=\"mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-4\">\n      <UiCard v-for=\"stat in stats\" :key=\"stat.label\" class=\"text-center\">\n        <UiCardContent class=\"flex flex-col items-center justify-center\">\n          <div\n            class=\"flex size-16 items-center justify-center rounded-full bg-linear-to-b from-primary/50 via-transparent\"\n          >\n            <Icon :name=\"stat.icon\" class=\"size-8 text-primary\" />\n          </div>\n          <div class=\"mt-4 text-4xl font-bold text-primary\">{{ stat.value }}</div>\n          <div class=\"mt-2 text-sm font-medium\">{{ stat.label }}</div>\n          <p class=\"mt-2 text-xs text-muted-foreground\">{{ stat.description }}</p>\n        </UiCardContent>\n      </UiCard>\n    </div>\n\n    <div class=\"mx-auto mt-16 max-w-3xl text-center\">\n      <p class=\"text-lg text-pretty text-muted-foreground\">\n        We're a dynamic team of creators, thinkers, and doers committed to delivering exceptional\n        results. Our diverse backgrounds and shared passion for excellence drive us to continuously\n        innovate and exceed expectations.\n      </p>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  const stats = [\n    {\n      icon: \"lucide:users\",\n      value: \"500+\",\n      label: \"Team Members\",\n      description: \"Talented professionals worldwide\",\n    },\n    {\n      icon: \"lucide:building\",\n      value: \"50K+\",\n      label: \"Happy Clients\",\n      description: \"Businesses we've helped grow\",\n    },\n    {\n      icon: \"lucide:award\",\n      value: \"25+\",\n      label: \"Awards Won\",\n      description: \"Industry recognition\",\n    },\n    {\n      icon: \"lucide:globe\",\n      value: \"40+\",\n      label: \"Countries\",\n      description: \"Global presence\",\n    },\n  ];\n</script>\n","category":"About","path":"About/BlockAbout5.vue","components":["card","cardcontent"]},{"name":"About 6","fileName":"BlockAbout6.vue","file":"<template>\n  <!-- \n    Values Grid About Section\n    Features: Grid showcasing company values\n  -->\n  <div class=\"container py-16 md:py-24\">\n    <div class=\"text-center\">\n      <h2 class=\"text-3xl font-bold tracking-tight md:text-4xl\">Our Core Values</h2>\n      <p class=\"mx-auto mt-4 max-w-2xl text-lg text-muted-foreground\">\n        The principles that guide everything we do\n      </p>\n    </div>\n\n    <div class=\"mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3\">\n      <div\n        v-for=\"value in values\"\n        :key=\"value.title\"\n        class=\"group rounded-2xl border bg-card p-8 transition-colors hover:border-primary/50\"\n      >\n        <div\n          class=\"flex size-14 items-center justify-center rounded-xl bg-primary/10 transition-transform group-hover:scale-110\"\n        >\n          <Icon :name=\"value.icon\" class=\"size-7 text-primary\" />\n        </div>\n        <h3 class=\"mt-6 text-xl font-semibold\">{{ value.title }}</h3>\n        <p class=\"mt-3 text-muted-foreground\">{{ value.description }}</p>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  const values = [\n    {\n      icon: \"lucide:heart\",\n      title: \"Customer Obsessed\",\n      description:\n        \"We put our customers at the heart of every decision, constantly striving to exceed their expectations and deliver exceptional value.\",\n    },\n    {\n      icon: \"lucide:zap\",\n      title: \"Innovation First\",\n      description:\n        \"We embrace change and constantly seek new ways to improve, innovate, and push the boundaries of what's possible.\",\n    },\n    {\n      icon: \"lucide:shield-check\",\n      title: \"Integrity Always\",\n      description:\n        \"We operate with transparency, honesty, and ethical practices in all our interactions and business dealings.\",\n    },\n    {\n      icon: \"lucide:users\",\n      title: \"Collaborative Spirit\",\n      description:\n        \"We believe in the power of teamwork and diverse perspectives to create better solutions and drive success.\",\n    },\n    {\n      icon: \"lucide:trophy\",\n      title: \"Excellence Driven\",\n      description:\n        \"We set high standards for ourselves and are committed to delivering quality in everything we create.\",\n    },\n    {\n      icon: \"lucide:leaf\",\n      title: \"Sustainable Growth\",\n      description:\n        \"We're committed to responsible growth that benefits our team, customers, and the planet for the long term.\",\n    },\n  ];\n</script>\n","category":"About","path":"About/BlockAbout6.vue","components":[]},{"name":"About 7","fileName":"BlockAbout7.vue","file":"<template>\n  <!-- \n    Leadership Team About Section\n    Features: Detailed leadership profiles\n  -->\n  <div class=\"container py-16 md:py-24\">\n    <div class=\"text-center\">\n      <h2 class=\"text-3xl font-bold tracking-tight md:text-4xl\">Leadership Team</h2>\n      <p class=\"mx-auto mt-4 max-w-2xl text-lg text-muted-foreground\">\n        Meet the visionaries driving our company forward\n      </p>\n    </div>\n\n    <div class=\"mt-12 grid gap-8 lg:grid-cols-2\">\n      <UiCard v-for=\"leader in leaders\" :key=\"leader.name\">\n        <UiCardContent class=\"flex flex-col gap-6 sm:flex-row\">\n          <UiAvatar :src=\"leader.image\" :alt=\"leader.name\" class=\"size-24 shrink-0 sm:size-32\" />\n          <div class=\"flex-1\">\n            <h3 class=\"text-xl font-semibold\">{{ leader.name }}</h3>\n            <p class=\"text-sm text-primary\">{{ leader.role }}</p>\n            <p class=\"mt-3 text-sm text-muted-foreground\">{{ leader.bio }}</p>\n            <div class=\"mt-4 flex flex-wrap gap-2\">\n              <UiBadge v-for=\"skill in leader.expertise\" :key=\"skill\" variant=\"secondary\">\n                {{ skill }}\n              </UiBadge>\n            </div>\n            <div class=\"mt-4 flex gap-3\">\n              <a\n                v-for=\"social in leader.socials\"\n                :key=\"social.platform\"\n                :href=\"social.url\"\n                class=\"text-muted-foreground transition-colors hover:text-foreground\"\n              >\n                <Icon :name=\"social.icon\" class=\"size-5\" />\n              </a>\n            </div>\n          </div>\n        </UiCardContent>\n      </UiCard>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  const leaders = [\n    {\n      name: \"Alexandra Martinez\",\n      role: \"Chief Executive Officer\",\n      image: \"https://randomuser.me/api/portraits/women/75.jpg\",\n      bio: \"Alexandra brings over 20 years of experience in tech leadership. She's passionate about building inclusive teams and creating products that make a real difference. Under her leadership, the company has grown 300%.\",\n      expertise: [\"Strategy\", \"Leadership\", \"Product Vision\"],\n      socials: [\n        { platform: \"twitter\", icon: \"logos:twitter\", url: \"#\" },\n        { platform: \"linkedin\", icon: \"logos:linkedin-icon\", url: \"#\" },\n      ],\n    },\n    {\n      name: \"James Wilson\",\n      role: \"Chief Technology Officer\",\n      image: \"https://randomuser.me/api/portraits/men/65.jpg\",\n      bio: \"James is a technology visionary with a track record of building scalable systems. He's led engineering teams at Fortune 500 companies and holds multiple patents in distributed computing.\",\n      expertise: [\"Architecture\", \"Cloud\", \"AI/ML\"],\n      socials: [\n        { platform: \"github\", icon: \"simple-icons:github\", url: \"#\" },\n        { platform: \"linkedin\", icon: \"logos:linkedin-icon\", url: \"#\" },\n      ],\n    },\n    {\n      name: \"Sophia Chen\",\n      role: \"Chief Marketing Officer\",\n      image: \"https://randomuser.me/api/portraits/women/5.jpg\",\n      bio: \"Sophia has revolutionized how we connect with customers. Her data-driven approach to marketing has helped us reach new markets and build a brand that resonates globally.\",\n      expertise: [\"Brand Strategy\", \"Growth\", \"Analytics\"],\n      socials: [\n        { platform: \"twitter\", icon: \"logos:twitter\", url: \"#\" },\n        { platform: \"linkedin\", icon: \"logos:linkedin-icon\", url: \"#\" },\n      ],\n    },\n    {\n      name: \"Robert Taylor\",\n      role: \"Chief Financial Officer\",\n      image: \"https://randomuser.me/api/portraits/men/32.jpg\",\n      bio: \"Robert ensures our financial health while driving strategic growth. With experience in both startups and public companies, he brings a balanced perspective to our financial strategy.\",\n      expertise: [\"Finance\", \"Strategy\", \"M&A\"],\n      socials: [{ platform: \"linkedin\", icon: \"logos:linkedin-icon\", url: \"#\" }],\n    },\n  ];\n</script>\n","category":"About","path":"About/BlockAbout7.vue","components":["avatar","badge","card","cardcontent"]},{"name":"About 8","fileName":"BlockAbout8.vue","file":"<template>\n  <!-- \n    Mission Vision About Section\n    Features: Side-by-side mission and vision cards\n  -->\n  <div class=\"container py-16 md:py-24\">\n    <div class=\"text-center\">\n      <h2 class=\"text-3xl font-bold tracking-tight md:text-4xl\">Mission & Vision</h2>\n      <p class=\"mx-auto mt-4 max-w-2xl text-lg text-muted-foreground\">\n        Our purpose and where we're headed\n      </p>\n    </div>\n\n    <div class=\"mt-12 grid gap-8 lg:grid-cols-2\">\n      <template v-for=\"(item, i) in items\" :key=\"i\">\n        <UiCard class=\"group relative overflow-hidden border-0\">\n          <div\n            class=\"absolute top-0 right-0 size-32 translate-x-8 -translate-y-8 rounded-full bg-primary/10 transition-all duration-300 group-hover:size-44\"\n          />\n          <UiCardContent class=\"relative\">\n            <div\n              class=\"flex size-16 items-center justify-center rounded-full bg-linear-to-b from-primary/30 via-transparent to-transparent\"\n            >\n              <Icon :name=\"item.icon\" class=\"size-8 text-primary\" />\n            </div>\n            <h3 class=\"mt-6 text-2xl font-bold\">{{ item.title }}</h3>\n            <p class=\"mt-4 text-muted-foreground\">\n              {{ item.description }}\n            </p>\n            <ul class=\"mt-6 space-y-3\">\n              <template v-for=\"point in item.points\" :key=\"point\">\n                <li class=\"flex items-start gap-3\">\n                  <Icon name=\"lucide:sparkles\" class=\"mt-0.5 size-5 shrink-0 text-primary\" />\n                  <span class=\"text-sm\">{{ point }}</span>\n                </li>\n              </template>\n            </ul>\n          </UiCardContent>\n          <UiBorderBeam\n            :duration=\"20\"\n            class=\"from-transparent via-primary to-transparent opacity-0 group-hover:opacity-100\"\n            :size=\"200\"\n          />\n        </UiCard>\n      </template>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  const items = [\n    {\n      title: \"Our Mission\",\n      description:\n        \"To empower businesses worldwide with innovative technology solutions that drive growth, efficiency, and sustainable success. We're committed to delivering exceptional value through cutting-edge products and unparalleled customer service.\",\n      icon: \"lucide:target\",\n      points: [\n        \"Deliver world-class solutions\",\n        \"Foster innovation and creativity\",\n        \"Build lasting customer relationships\",\n      ],\n    },\n    {\n      title: \"Our Vision\",\n      description:\n        \"To be the global leader in our industry, recognized for transforming how businesses operate through technology. We envision a future where our solutions enable every organization to reach its full potential.\",\n      icon: \"lucide:eye\",\n      points: [\n        \"Shape the future of technology\",\n        \"Expand to 100+ countries\",\n        \"Impact 1 million businesses\",\n      ],\n    },\n  ];\n</script>\n","category":"About","path":"About/BlockAbout8.vue","components":["borderbeam","card","cardcontent"]},{"name":"About 9","fileName":"BlockAbout9.vue","file":"<template>\n  <!-- \n    Image Gallery About Section\n    Features: Gallery showcasing office and team culture\n  -->\n  <div class=\"container py-16 md:py-24\">\n    <div class=\"text-center\">\n      <h2 class=\"text-3xl font-bold tracking-tight md:text-4xl\">Life at Our Company</h2>\n      <p class=\"mx-auto mt-4 max-w-2xl text-lg text-muted-foreground\">\n        A glimpse into our workspace, culture, and the people who make it all happen\n      </p>\n    </div>\n\n    <div class=\"mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      <div\n        class=\"group relative aspect-square overflow-hidden rounded-2xl sm:col-span-2 sm:row-span-2 sm:aspect-auto\"\n      >\n        <img\n          src=\"https://images.unsplash.com/photo-1497366754035-f200968a6e72?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1300\"\n          alt=\"Modern office space\"\n          class=\"size-full object-cover transition-transform duration-300 group-hover:scale-105\"\n        />\n        <div class=\"absolute inset-0 bg-linear-to-t from-black/60 to-transparent\" />\n        <div class=\"absolute bottom-4 left-4 text-white\">\n          <h3 class=\"text-xl font-semibold\">Our Modern Workspace</h3>\n          <p class=\"mt-1 text-sm opacity-90\">Designed for collaboration and creativity</p>\n        </div>\n      </div>\n\n      <div\n        v-for=\"(image, index) in galleryImages\"\n        :key=\"index\"\n        class=\"group relative aspect-square overflow-hidden rounded-2xl sm:last:col-span-2 lg:last:col-span-1\"\n      >\n        <img\n          :src=\"image.src\"\n          :alt=\"image.alt\"\n          class=\"size-full object-cover transition-transform duration-300 group-hover:scale-105\"\n        />\n        <div class=\"absolute inset-0 bg-linear-to-t from-black/60 to-transparent\" />\n        <div class=\"absolute bottom-3 left-3 text-white\">\n          <h4 class=\"text-sm font-semibold\">{{ image.title }}</h4>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"mx-auto mt-12 max-w-3xl text-center\">\n      <p class=\"text-lg text-muted-foreground\">\n        We've created an environment where innovation thrives and people love to work. Our offices\n        are designed to foster collaboration, creativity, and well-being.\n      </p>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  const galleryImages = [\n    {\n      src: \"https://images.unsplash.com/photo-1543269865-cbf427effbad?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1200\",\n      alt: \"Team collaboration\",\n      title: \"Team Collaboration\",\n    },\n    {\n      src: \"https://images.unsplash.com/photo-1659301254614-8d6a9d46f26a?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1000\",\n      alt: \"Innovation workshop\",\n      title: \"Innovation Workshops\",\n    },\n    {\n      src: \"https://images.unsplash.com/photo-1568992688065-536aad8a12f6?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1000\",\n      alt: \"Team meeting\",\n      title: \"Strategic Planning\",\n    },\n    {\n      src: \"https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1000\",\n      alt: \"Team celebration\",\n      title: \"Team Celebrations\",\n    },\n    {\n      src: \"https://images.unsplash.com/photo-1530541930197-ff16ac917b0e?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1000\",\n      alt: \"Casual hangout\",\n      title: \"Casual Hangouts\",\n    },\n  ];\n</script>\n","category":"About","path":"About/BlockAbout9.vue","components":[]},{"name":"Banner 1","fileName":"BlockBanner1.vue","file":"<template>\n  <UiContainer\n    class=\"flex flex-col gap-4 rounded-lg border p-4 shadow-md lg:flex-row lg:items-start lg:p-3\"\n  >\n    <div class=\"hidden size-10 shrink-0 items-center justify-center rounded-lg border lg:flex\">\n      <Icon :name=\"icon\" />\n    </div>\n    <div>\n      <div class=\"flex items-start justify-between gap-2\">\n        <p class=\"font-semibold\">{{ title }}</p>\n        <UiButton class=\"-mt-1 shrink-0 lg:hidden\" size=\"icon-sm\" variant=\"ghost\">\n          <Icon name=\"lucide:x\" class=\"h-5 w-5 text-muted-foreground\" />\n        </UiButton>\n      </div>\n      <p class=\"text-muted-foreground lg:text-sm\">{{ description }}</p>\n    </div>\n    <form\n      class=\"flex w-full shrink-0 flex-col gap-3 lg:ml-auto lg:w-[400px] lg:flex-row lg:items-end\"\n    >\n      <div class=\"w-full lg:w-[70%]\">\n        <UiVeeInput required placeholder=\"Enter your email\" aria-label=\"Enter your email\" />\n      </div>\n      <div>\n        <UiButton class=\"w-full whitespace-nowrap lg:w-auto\" type=\"submit\">Subscribe</UiButton>\n      </div>\n    </form>\n    <UiButton class=\"hidden shrink-0 lg:flex\" size=\"icon\" variant=\"ghost\">\n      <Icon name=\"lucide:x\" class=\"h-5 w-5 text-muted-foreground\" />\n    </UiButton>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  withDefaults(\n    defineProps<{\n      title?: string;\n      description?: string;\n      icon?: string;\n    }>(),\n    {\n      title: \"Stay up to date with our newsletter\",\n      icon: \"lucide:mail\",\n      description: \"Subscribe to our newsletter and stay up to date\",\n    }\n  );\n</script>\n","category":"Banner","path":"Banner/BlockBanner1.vue","components":["button","container","veeinput"]},{"name":"Banner 10","fileName":"BlockBanner10.vue","file":"<template>\n  <Motion\n    while-in-view=\"animate\"\n    initial=\"initial\"\n    :variants=\"{\n      initial: { opacity: 0, y: 5 },\n      animate: {\n        opacity: 1,\n        y: 0,\n        transition: { when: 'beforeChildren', delayChildren: stagger(0.1) },\n      },\n    }\"\n    class=\"w-full overflow-hidden border-b p-4\"\n  >\n    <div class=\"relative flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between\">\n      <div class=\"flex flex-1 items-start gap-4\">\n        <Motion\n          :variants=\"{\n            initial: { scale: 0, rotate: -180 },\n            animate: { scale: 1, rotate: 0 },\n          }\"\n          class=\"flex size-16 items-center justify-center rounded-full bg-radial via-primary/5 to-primary/40\"\n        >\n          <Icon :name=\"icon\" class=\"size-6 text-primary\" />\n        </Motion>\n\n        <div class=\"flex-1\">\n          <Motion\n            :variants=\"{\n              initial: { opacity: 0, y: 10 },\n              animate: { opacity: 1, y: 0 },\n            }\"\n            as-child\n          >\n            <h3 class=\"text-lg font-bold\" v-html=\"title\" />\n          </Motion>\n\n          <Motion\n            as-child\n            :variants=\"{\n              initial: { opacity: 0, y: 10 },\n              animate: { opacity: 1, y: 0 },\n            }\"\n          >\n            <p class=\"text-sm text-muted-foreground\" v-html=\"description\" />\n          </Motion>\n\n          <div class=\"mt-2 flex items-center gap-3\">\n            <Motion\n              v-for=\"(stat, i) in stats\"\n              :key=\"i\"\n              :variants=\"{\n                initial: { opacity: 0, y: 10 },\n                animate: { opacity: 1, y: 0 },\n              }\"\n              class=\"flex items-center gap-1.5\"\n            >\n              <Icon :name=\"stat.icon\" class=\"size-4 text-muted-foreground\" />\n              <span class=\"text-sm font-semibold\">{{ stat.value }}</span>\n              <span class=\"text-sm text-muted-foreground\">{{ stat.label }}</span>\n            </Motion>\n          </div>\n        </div>\n      </div>\n\n      <Motion\n        :variants=\"{\n          initial: { opacity: 0, y: 10 },\n          animate: { opacity: 1, y: 0 },\n        }\"\n        as-child\n      >\n        <div class=\"grid grid-cols-2 gap-2 pl-20 lg:flex lg:items-center lg:pl-0\">\n          <UiButton size=\"sm\" variant=\"outline\">\n            {{ secondaryButtonText }}\n          </UiButton>\n          <UiButton size=\"sm\">\n            {{ primaryButtonText }}\n            <Icon name=\"lucide:external-link\" class=\"size-4\" />\n          </UiButton>\n          <UiButton class=\"hidden lg:flex\" size=\"icon-sm\" variant=\"ghost\">\n            <Icon name=\"lucide:x\" class=\"size-3.5 text-muted-foreground\" />\n          </UiButton>\n        </div>\n      </Motion>\n\n      <UiButton class=\"absolute top-0 right-2 z-10 lg:hidden\" size=\"icon-sm\" variant=\"ghost\">\n        <Icon name=\"lucide:x\" class=\"size-3.5 text-muted-foreground\" />\n      </UiButton>\n    </div>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n\n  withDefaults(\n    defineProps<{\n      title?: string;\n      description?: string;\n      icon?: string;\n      badgeText?: string;\n      primaryButtonText?: string;\n      secondaryButtonText?: string;\n      linkText?: string;\n      stats?: Array<{ icon: string; value: string; label: string }>;\n    }>(),\n    {\n      title: \"Summer Sale Event\",\n      description:\n        \"Don't miss out on our biggest sale of the year. Exclusive deals on all products.\",\n      icon: \"lucide:gift\",\n      badgeText: \"Limited Time\",\n      primaryButtonText: \"Shop Now\",\n      secondaryButtonText: \"Browse\",\n      linkText: \"Terms apply\",\n      stats: () => [\n        { icon: \"lucide:clock\", value: \"3\", label: \"days left\" },\n        { icon: \"lucide:tag\", value: \"50%\", label: \"off\" },\n      ],\n    }\n  );\n</script>\n","category":"Banner","path":"Banner/BlockBanner10.vue","components":["button"]},{"name":"Banner 2","fileName":"BlockBanner2.vue","file":"<template>\n  <UiContainer\n    class=\"flex flex-col justify-between gap-4 rounded-lg border p-4 shadow-md lg:flex-row lg:items-center lg:p-3\"\n  >\n    <div class=\"flex items-center justify-between\">\n      <div class=\"flex size-10 shrink-0 items-center justify-center rounded-lg border\">\n        <Icon :name=\"icon\" />\n      </div>\n      <UiButton class=\"shrink-0 lg:hidden\" size=\"icon-sm\" variant=\"ghost\">\n        <Icon name=\"lucide:x\" class=\"size-4 text-muted-foreground\" />\n      </UiButton>\n    </div>\n    <div class=\"flex flex-col gap-2 lg:flex-row lg:items-center\">\n      <p class=\"font-semibold\">{{ title }}</p>\n      <p class=\"text-muted-foreground lg:text-sm\">{{ description }}</p>\n    </div>\n    <UiButton\n      size=\"sm\"\n      class=\"ml-auto w-full whitespace-nowrap lg:w-auto\"\n      variant=\"outline\"\n      type=\"submit\"\n      >Read update</UiButton\n    >\n    <UiButton class=\"hidden shrink-0 lg:flex\" size=\"icon-sm\" variant=\"ghost\">\n      <Icon name=\"lucide:x\" class=\"text-muted-foreground\" />\n    </UiButton>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  withDefaults(\n    defineProps<{\n      title?: string;\n      description?: string;\n      icon?: string;\n    }>(),\n    {\n      title: \"We've just announced our Series A!\",\n      icon: \"lucide:sparkle\",\n      description: \"Read about it from our CEO.\",\n    }\n  );\n</script>\n","category":"Banner","path":"Banner/BlockBanner2.vue","components":["button","container"]},{"name":"Banner 3","fileName":"BlockBanner3.vue","file":"<template>\n  <UiContainer\n    class=\"flex flex-col justify-between gap-4 rounded-lg border p-4 shadow-md lg:flex-row lg:items-center lg:p-3\"\n  >\n    <div class=\"flex items-center justify-between\">\n      <div class=\"flex size-10 shrink-0 items-center justify-center rounded-lg border\">\n        <Icon :name=\"icon\" />\n      </div>\n      <UiButton class=\"shrink-0 lg:hidden\" size=\"icon-sm\" variant=\"ghost\">\n        <Icon name=\"lucide:x\" class=\"size-4 text-muted-foreground\" />\n      </UiButton>\n    </div>\n    <div class=\"flex grow flex-col gap-2 lg:flex-row lg:items-center\">\n      <p class=\"font-semibold lg:text-sm\">{{ title }}</p>\n      <p class=\"text-muted-foreground lg:text-sm\">{{ description }}</p>\n    </div>\n    <div class=\"ml-auto grid w-full grid-cols-2 gap-3 lg:flex lg:w-auto lg:items-center\">\n      <UiButton size=\"sm\" class=\"\" variant=\"outline\">Decline</UiButton>\n      <UiButton size=\"sm\" class=\"\">Allow</UiButton>\n    </div>\n    <UiButton class=\"hidden shrink-0 lg:flex\" size=\"icon-sm\" variant=\"ghost\">\n      <Icon name=\"lucide:x\" class=\"text-muted-foreground\" />\n    </UiButton>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  withDefaults(\n    defineProps<{\n      title?: string;\n      description?: string;\n      icon?: string;\n    }>(),\n    {\n      title: \"We use third-party cookies in order to personalize your experience\",\n      icon: \"lucide:flag\",\n      description: \"Read our Cookie Policy.\",\n    }\n  );\n</script>\n","category":"Banner","path":"Banner/BlockBanner3.vue","components":["button","container"]},{"name":"Banner 4","fileName":"BlockBanner4.vue","file":"<template>\n  <UiContainer\n    class=\"flex justify-between gap-4 rounded-lg border p-4 shadow-md lg:items-center lg:p-3\"\n  >\n    <div class=\"flex grow flex-col justify-center gap-2 lg:flex-row lg:items-center\">\n      <p class=\"font-semibold lg:text-sm\">{{ title }}</p>\n      <p class=\"text-muted-foreground lg:text-sm\">{{ description }}</p>\n    </div>\n    <UiButton class=\"shrink-0\" size=\"icon\" variant=\"ghost\">\n      <Icon name=\"lucide:x\" class=\"h-5 w-5 text-muted-foreground\" />\n    </UiButton>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  withDefaults(\n    defineProps<{\n      title?: string;\n      description?: string;\n      icon?: string;\n    }>(),\n    {\n      title: \"We've just launched a new feature!\",\n      description: \"Check out the new dashboard.\",\n      icon: \"lucide:x\",\n    }\n  );\n</script>\n","category":"Banner","path":"Banner/BlockBanner4.vue","components":["button","container"]},{"name":"Banner 5","fileName":"BlockBanner5.vue","file":"<template>\n  <Motion\n    :initial=\"{ opacity: 0, y: -20 }\"\n    :animate=\"{ opacity: 1, y: 0 }\"\n    :transition=\"{ type: 'spring', stiffness: 300, damping: 25 }\"\n  >\n    <UiContainer\n      class=\"relative overflow-hidden rounded-lg border bg-linear-to-r from-primary/10 via-primary/5 to-background p-4 shadow-lg lg:p-5\"\n    >\n      <div class=\"absolute -top-8 -right-8 size-32 rounded-full bg-primary/10 blur-3xl\" />\n      <div class=\"absolute -bottom-8 -left-8 size-32 rounded-full bg-primary/10 blur-3xl\" />\n\n      <div class=\"relative flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between\">\n        <div class=\"flex flex-col gap-4 lg:flex-row lg:items-start\">\n          <Motion\n            :initial=\"{ scale: 0, rotate: -180 }\"\n            :animate=\"{ scale: 1, rotate: 0 }\"\n            :transition=\"{ type: 'spring', stiffness: 300, damping: 20, delay: 0.1 }\"\n            class=\"flex size-12 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg\"\n          >\n            <Icon :name=\"icon\" class=\"size-6\" />\n          </Motion>\n          <div class=\"flex-1\">\n            <Motion\n              :initial=\"{ opacity: 0, x: -10 }\"\n              :animate=\"{ opacity: 1, x: 0 }\"\n              :transition=\"{ delay: 0.2 }\"\n            >\n              <h3 class=\"text-lg font-bold\" v-html=\"title\" />\n            </Motion>\n            <Motion\n              :initial=\"{ opacity: 0, x: -10 }\"\n              :animate=\"{ opacity: 1, x: 0 }\"\n              :transition=\"{ delay: 0.3 }\"\n            >\n              <p class=\"mt-1 text-sm text-muted-foreground\" v-html=\"description\" />\n            </Motion>\n          </div>\n        </div>\n        <Motion\n          :initial=\"{ opacity: 0, scale: 0.8 }\"\n          :animate=\"{ opacity: 1, scale: 1 }\"\n          :transition=\"{ delay: 0.4, type: 'spring', stiffness: 300, damping: 25 }\"\n          class=\"grid grid-cols-2 gap-2 lg:flex lg:flex-wrap\"\n        >\n          <UiButton size=\"sm\" class=\"shadow-sm\">\n            <Icon name=\"lucide:arrow-right\" class=\"size-4\" />\n            Get Started\n          </UiButton>\n          <UiButton size=\"sm\" variant=\"outline\" class=\"bg-transparent shadow-sm\">\n            Learn More\n          </UiButton>\n          <UiButton class=\"hidden lg:flex\" size=\"icon-sm\" variant=\"ghost\" aria-label=\"Close banner\">\n            <Icon name=\"lucide:x\" class=\"size-4 text-muted-foreground\" />\n          </UiButton>\n        </Motion>\n      </div>\n\n      <UiButton\n        class=\"absolute top-2 right-2 lg:hidden\"\n        size=\"icon-sm\"\n        variant=\"ghost\"\n        aria-label=\"Close banner\"\n      >\n        <Icon name=\"lucide:x\" class=\"size-4 text-muted-foreground\" />\n      </UiButton>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  withDefaults(\n    defineProps<{\n      title?: string;\n      description?: string;\n      icon?: string;\n    }>(),\n    {\n      title: \"🎉 New Feature Available!\",\n      description:\n        \"We've just launched our most requested feature. Try it now and boost your productivity.\",\n      icon: \"lucide:rocket\",\n    }\n  );\n</script>\n","category":"Banner","path":"Banner/BlockBanner5.vue","components":["button","container"]},{"name":"Banner 6","fileName":"BlockBanner6.vue","file":"<template>\n  <Motion :variants=\"parentVariant\" while-in-view=\"animate\" initial=\"initial\">\n    <div class=\"flex flex-col gap-4 p-4 lg:flex-row lg:items-start lg:p-5\">\n      <Motion\n        :variants=\"iconVariant\"\n        :transition=\"{ type: 'spring', stiffness: 200, damping: 25 }\"\n        class=\"flex size-16 shrink-0 items-center justify-center rounded-xl border-2 border-dashed border-primary/50 bg-primary/5\"\n      >\n        <Icon :name=\"icon\" class=\"size-6 text-primary\" />\n      </Motion>\n\n      <div class=\"flex-1\">\n        <div class=\"flex items-start justify-between gap-3\">\n          <div>\n            <Motion :variants=\"childVariant\" :transition=\"{ delay: 0.1 }\">\n              <div class=\"flex items-center gap-2\">\n                <h3 class=\"font-bold\" v-html=\"title\" />\n                <UiBadge variant=\"default\" class=\"h-5 text-xs\">\n                  {{ badgeText }}\n                </UiBadge>\n              </div>\n            </Motion>\n            <Motion :variants=\"childVariant\" :transition=\"{ delay: 0.2 }\">\n              <p class=\"text-sm text-muted-foreground\" v-html=\"description\" />\n            </Motion>\n            <Motion :variants=\"childVariant\" :transition=\"{ delay: 0.3 }\">\n              <div class=\"mt-2 flex flex-wrap gap-2\">\n                <UiBadge v-for=\"feature in features\" :key=\"feature\" variant=\"outline\">\n                  <Icon name=\"lucide:check\" class=\"size-3.5\" />\n                  {{ feature }}\n                </UiBadge>\n              </div>\n            </Motion>\n          </div>\n          <UiButton\n            class=\"absolute top-4 right-4 shrink-0 lg:hidden\"\n            size=\"icon-sm\"\n            variant=\"ghost\"\n          >\n            <Icon name=\"lucide:x\" class=\"size-4 text-muted-foreground\" />\n          </UiButton>\n        </div>\n      </div>\n\n      <Motion\n        :variants=\"buttonVariant\"\n        :transition=\"{ delay: 0.4 }\"\n        class=\"grid shrink-0 grid-cols-2 gap-2 lg:flex lg:items-end\"\n      >\n        <UiButton size=\"sm\">\n          Upgrade Now\n          <Icon name=\"lucide:arrow-right\" class=\"size-4\" />\n        </UiButton>\n        <UiButton variant=\"outline\" size=\"sm\"> View pricing </UiButton>\n      </Motion>\n\n      <UiButton class=\"hidden shrink-0 lg:flex\" size=\"icon-sm\" variant=\"ghost\">\n        <Icon name=\"lucide:x\" class=\"size-4 text-muted-foreground\" />\n      </UiButton>\n    </div>\n\n    <Motion\n      :variants=\"progressVariant\"\n      class=\"h-1 origin-left bg-linear-to-r from-primary via-primary/50 to-transparent\"\n    />\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: { opacity: 1, transition: { delayChildren: stagger(0.1) } },\n  };\n  const iconVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, scale: 0 },\n    animate: { opacity: 1, scale: 1 },\n  };\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 10 },\n    animate: { opacity: 1, y: 0 },\n  };\n  const buttonVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 10 },\n    animate: { opacity: 1, y: 0 },\n  };\n  const progressVariant: MotionProps[\"variants\"] = {\n    initial: { width: 0 },\n    animate: { width: \"100%\", transition: { duration: 1 } },\n  };\n  withDefaults(\n    defineProps<{\n      title?: string;\n      description?: string;\n      icon?: string;\n      badgeText?: string;\n      features?: string[];\n    }>(),\n    {\n      title: \"Upgrade to Pro\",\n      description: \"Unlock advanced features and take your experience to the next level.\",\n      icon: \"lucide:crown\",\n      badgeText: \"50% OFF\",\n      features: () => [\"Unlimited projects\", \"Priority support\", \"Advanced analytics\"],\n    }\n  );\n</script>\n","category":"Banner","path":"Banner/BlockBanner6.vue","components":["badge","button"]},{"name":"Banner 7","fileName":"BlockBanner7.vue","file":"<template>\n  <UiContainer>\n    <div class=\"rounded-md border bg-background p-4 lg:p-5\">\n      <div class=\"flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between\">\n        <div class=\"flex flex-1 items-start gap-4\">\n          <Motion\n            :initial=\"{ opacity: 0, rotate: -90 }\"\n            :while-in-view=\"{ opacity: 1, rotate: 0 }\"\n            :transition=\"{ type: 'spring', stiffness: 200, damping: 20 }\"\n            class=\"flex size-10 shrink-0 items-center justify-center rounded-lg bg-yellow-500/10 text-yellow-600 dark:text-yellow-500\"\n          >\n            <Icon :name=\"icon\" class=\"size-5\" />\n            <span class=\"sr-only\">{{ title }}</span>\n          </Motion>\n          <div class=\"flex-1\">\n            <Motion\n              :initial=\"{ opacity: 0, y: -10 }\"\n              :while-in-view=\"{ opacity: 1, y: 0 }\"\n              :transition=\"{ delay: 0.1 }\"\n            >\n              <h3 class=\"font-semibold\" v-html=\"title\" />\n            </Motion>\n            <Motion\n              :initial=\"{ opacity: 0 }\"\n              :while-in-view=\"{ opacity: 1 }\"\n              :transition=\"{ delay: 0.2 }\"\n            >\n              <p class=\"mt-1 text-sm text-muted-foreground\" v-html=\"description\" />\n            </Motion>\n            <Motion\n              :initial=\"{ opacity: 0, y: 10 }\"\n              :while-in-view=\"{ opacity: 1, y: 0 }\"\n              :transition=\"{ delay: 0.3 }\"\n            >\n              <div class=\"mt-3 flex items-center gap-2 text-xs text-muted-foreground\">\n                <Icon name=\"lucide:clock\" class=\"size-3.5\" />\n                <span>{{ timeText }}</span>\n                <UiSeparator orientation=\"vertical\" class=\"h-3\" />\n                <Icon name=\"lucide:users\" class=\"size-3.5\" />\n                <span>{{ usersText }}</span>\n              </div>\n            </Motion>\n          </div>\n        </div>\n\n        <Motion\n          :initial=\"{ opacity: 0, scale: 0.9 }\"\n          :while-in-view=\"{ opacity: 1, scale: 1 }\"\n          :transition=\"{ delay: 0.4 }\"\n          class=\"grid shrink-0 grid-cols-2 gap-2 lg:flex lg:items-center\"\n        >\n          <UiButton size=\"sm\" variant=\"outline\"> Remind me later </UiButton>\n          <UiButton size=\"sm\"> View details </UiButton>\n          <UiButton\n            size=\"icon-sm\"\n            variant=\"ghost\"\n            class=\"hidden shrink-0 lg:flex\"\n            aria-label=\"Close banner\"\n          >\n            <Icon name=\"lucide:x\" class=\"size-4 text-muted-foreground\" />\n          </UiButton>\n        </Motion>\n      </div>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  withDefaults(\n    defineProps<{\n      title?: string;\n      description?: string;\n      icon?: string;\n      timeText?: string;\n      usersText?: string;\n    }>(),\n    {\n      title: \"System Maintenance Scheduled\",\n      description:\n        \"We'll be performing scheduled maintenance on our systems. Expect brief interruptions.\",\n      icon: \"lucide:alert-triangle\",\n      timeText: \"Tomorrow at 2:00 AM\",\n      usersText: \"Affects all users\",\n    }\n  );\n</script>\n","category":"Banner","path":"Banner/BlockBanner7.vue","components":["button","container","separator"]},{"name":"Banner 8","fileName":"BlockBanner8.vue","file":"<template>\n  <Motion\n    :variants=\"parentVariant\"\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    class=\"relative overflow-hidden\"\n  >\n    <div class=\"absolute inset-0 bg-linear-to-br from-primary/5 via-background to-background\" />\n\n    <div class=\"relative flex flex-col gap-4 p-4 lg:flex-row lg:items-center lg:p-5\">\n      <div class=\"flex flex-1 items-center gap-4\">\n        <Motion\n          :variants=\"dotParentVariant\"\n          initial=\"initial\"\n          while-in-view=\"animate\"\n          class=\"flex size-16 shrink-0 items-center justify-center gap-2 rounded-full border border-primary/50\"\n        >\n          <Motion\n            v-for=\"dot in 3\"\n            :key=\"dot\"\n            :variants=\"dotVariant\"\n            class=\"size-2 rounded-full bg-primary\"\n          />\n        </Motion>\n        <div class=\"flex-1\">\n          <Motion\n            :variants=\"{\n              initial: { opacity: 0, x: -20 },\n              animate: { opacity: 1, x: 0 },\n            }\"\n          >\n            <div class=\"flex items-center gap-2\">\n              <h3 class=\"font-semibold\" v-html=\"title\" />\n              <UiBadge variant=\"secondary\" class=\"h-5\">\n                <Icon name=\"lucide:sparkles\" class=\"size-3\" />\n                {{ badgeText }}\n              </UiBadge>\n            </div>\n          </Motion>\n          <Motion\n            :variants=\"{\n              initial: { opacity: 0, x: -20 },\n              animate: { opacity: 1, x: 0 },\n            }\"\n          >\n            <p class=\"mt-1 text-sm text-muted-foreground\" v-html=\"description\" />\n          </Motion>\n        </div>\n      </div>\n\n      <Motion\n        :variants=\"{\n          initial: { opacity: 0, x: -10 },\n          animate: { opacity: 1, x: 0 },\n        }\"\n        class=\"grid shrink-0 items-center gap-2 lg:flex\"\n      >\n        <UiButton size=\"sm\" variant=\"default\" class=\"group shadow-sm\">\n          {{ buttonText }}\n          <Icon\n            name=\"lucide:arrow-right\"\n            class=\"size-4 transition-transform group-hover:translate-x-1\"\n          />\n        </UiButton>\n        <UiButton aria-label=\"Close banner\" size=\"icon-sm\" variant=\"ghost\" class=\"hidden lg:flex\">\n          <Icon name=\"lucide:x\" class=\"size-4 text-muted-foreground\" />\n        </UiButton>\n      </Motion>\n    </div>\n\n    <Motion\n      :variants=\"{\n        initial: { width: 0 },\n        animate: { width: progressWidth, transition: { duration: 1, ease: 'easeOut' } },\n      }\"\n      class=\"relative h-1 bg-primary\"\n    />\n    <Motion\n      as-child\n      :variants=\"{\n        initial: { opacity: 0, scale: 0.8 },\n        animate: { opacity: 1, scale: 1 },\n      }\"\n    >\n      <UiButton\n        aria-label=\"Close banner\"\n        size=\"icon-sm\"\n        variant=\"ghost\"\n        class=\"absolute top-4 right-4 lg:hidden\"\n      >\n        <Icon name=\"lucide:x\" class=\"size-4 text-muted-foreground\" />\n      </UiButton>\n    </Motion>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: { delayChildren: stagger(0.1) },\n    },\n  };\n  const dotParentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: { duration: 1, when: \"beforeChildren\", delayChildren: stagger(0.1) },\n    },\n  };\n  const dotVariant: MotionProps[\"variants\"] = {\n    initial: { scale: 0.5, opacity: 0, x: -10 },\n    animate: {\n      scale: 1,\n      opacity: 1,\n      x: 0,\n    },\n  };\n  withDefaults(\n    defineProps<{\n      title?: string;\n      description?: string;\n      buttonText?: string;\n      badgeText?: string;\n      progressWidth?: string;\n    }>(),\n    {\n      title: \"Limited Time Offer\",\n      description: \"Get 3 months free when you sign up for an annual plan today.\",\n      buttonText: \"Claim offer\",\n      badgeText: \"Trending\",\n      progressWidth: \"60%\",\n    }\n  );\n</script>\n","category":"Banner","path":"Banner/BlockBanner8.vue","components":["badge","button"]},{"name":"Banner 9","fileName":"BlockBanner9.vue","file":"<template>\n  <Motion\n    as-child\n    initial=\"init\"\n    while-in-view=\"animate\"\n    :variants=\"{\n      init: { opacity: 0, y: 10 },\n      animate: {\n        opacity: 1,\n        y: 0,\n        transition: { when: 'beforeChildren', delayChildren: stagger(0.1) },\n      },\n    }\"\n  >\n    <UiContainer class=\"relative rounded-lg border bg-background shadow-md\">\n      <Motion\n        as-child\n        :variants=\"{\n          init: { opacity: 0, scale: 0.8 },\n          animate: { opacity: 1, scale: 1 },\n        }\"\n      >\n        <UiButton\n          aria-label=\"Close banner\"\n          size=\"icon-sm\"\n          variant=\"ghost\"\n          class=\"absolute top-3 right-4 z-10 lg:hidden\"\n        >\n          <Icon name=\"lucide:x\" class=\"size-4 text-muted-foreground\" />\n        </UiButton>\n      </Motion>\n      <div class=\"flex flex-col gap-y-3 py-4 lg:flex-row\">\n        <div class=\"flex flex-1 items-start gap-4\">\n          <div class=\"relative shrink-0\">\n            <Motion\n              :variants=\"{\n                init: { scale: 0, opacity: 0 },\n                animate: { scale: 1, opacity: 1 },\n              }\"\n              class=\"flex size-12 items-center justify-center rounded-full bg-radial via-primary/5 to-primary dark:bg-linear-to-b dark:from-primary/50 dark:via-primary/10 dark:to-transparent\"\n            >\n              <Icon :name=\"icon\" class=\"size-6 text-primary\" />\n            </Motion>\n          </div>\n          <div>\n            <Motion\n              :variants=\"{\n                init: { opacity: 0, y: 10 },\n                animate: { opacity: 1, y: 0 },\n              }\"\n              as-child\n            >\n              <h3 class=\"text-sm font-semibold\" v-html=\"title\" />\n            </Motion>\n            <Motion\n              :variants=\"{\n                init: { opacity: 0, y: 10 },\n                animate: { opacity: 1, y: 0 },\n              }\"\n              as-child\n            >\n              <p class=\"text-sm text-muted-foreground\" v-html=\"description\" />\n            </Motion>\n            <div class=\"mt-3 grid grid-cols-2 gap-2 md:flex md:items-center\">\n              <Motion\n                v-for=\"(action, i) in actions\"\n                :key=\"i\"\n                :variants=\"{\n                  init: { opacity: 0, y: 10 },\n                  animate: { opacity: 1, y: 0 },\n                }\"\n                as-child\n              >\n                <UiButton\n                  size=\"sm\"\n                  :variant=\"i === 0 ? 'default' : 'outline'\"\n                  class=\"h-8 px-3 text-xs\"\n                >\n                  <Icon :name=\"action.icon\" class=\"size-3.5\" />\n                  {{ action.label }}\n                </UiButton>\n              </Motion>\n            </div>\n          </div>\n        </div>\n\n        <Motion\n          :variants=\"{\n            init: { opacity: 0, y: 10 },\n            animate: { opacity: 1, y: 0 },\n          }\"\n          class=\"flex shrink-0 items-start gap-2 pl-16 lg:flex-col lg:items-end lg:pl-0\"\n        >\n          <div class=\"lg:text-right\">\n            <p class=\"text-xs text-muted-foreground\">{{ timeLabel }}</p>\n            <p class=\"text-sm font-semibold\">{{ timeValue }}</p>\n          </div>\n        </Motion>\n      </div>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n\n  withDefaults(\n    defineProps<{\n      title?: string;\n      description?: string;\n      icon?: string;\n      count?: number;\n      timeLabel?: string;\n      timeValue?: string;\n      actions?: Array<{ label: string; icon: string }>;\n    }>(),\n    {\n      title: \"You have new notifications\",\n      description: \"Check your inbox for important updates and messages from your team.\",\n      icon: \"lucide:bell\",\n      count: 5,\n      timeLabel: \"Last updated\",\n      timeValue: \"2 min ago\",\n      actions: () => [\n        { label: \"View all\", icon: \"lucide:eye\" },\n        { label: \"Mark as read\", icon: \"lucide:check\" },\n      ],\n    }\n  );\n</script>\n","category":"Banner","path":"Banner/BlockBanner9.vue","components":["button","container"]},{"name":"Career 1","fileName":"BlockCareer1.vue","file":"<template>\n  <!-- \n    Simple centered career listing\n    Features: Centered header, clean job list with badges, location and employment type\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"pb-16\">\n      <UiContainer class=\"py-16 text-center lg:py-24\">\n        <Motion\n          as=\"h2\"\n          :variants=\"childVariant\"\n          class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:mb-6 lg:text-5xl\"\n        >\n          Open positions\n        </Motion>\n        <Motion\n          as=\"p\"\n          :variants=\"childVariant\"\n          class=\"mx-auto max-w-[800px] text-lg text-muted-foreground lg:text-xl\"\n        >\n          We're a 100% remote team spread all across the world. Join us!\n        </Motion>\n      </UiContainer>\n\n      <ul class=\"mx-auto flex max-w-[768px] flex-col gap-8\">\n        <Motion\n          v-for=\"n in 4\"\n          :key=\"n\"\n          :variants=\"childVariant\"\n          :transition=\"{\n            delay: n * 0.05,\n          }\"\n          as=\"li\"\n          class=\"group border-t pt-6 transition-colors hover:border-primary/50\"\n        >\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <span class=\"text-lg font-semibold transition-colors group-hover:text-primary\"\n              >Product Designer</span\n            >\n            <UiBadge class=\"text-sm font-medium\" variant=\"outline\">Design</UiBadge>\n          </div>\n          <p class=\"mt-2 text-muted-foreground\">\n            We're looking for a mid-level product designer to join our team.\n          </p>\n          <ul class=\"mt-5 flex flex-wrap items-center gap-5\">\n            <li class=\"flex items-center gap-2 text-muted-foreground\">\n              <Icon class=\"opacity-80\" name=\"heroicons:map-pin\" /> Remote\n            </li>\n            <li class=\"flex items-center gap-2 text-muted-foreground\">\n              <Icon class=\"opacity-80\" name=\"heroicons:clock\" /> Full-time\n            </li>\n            <li class=\"md:ml-auto\">\n              <UiButton\n                variant=\"ghost\"\n                size=\"sm\"\n                class=\"group-hover:bg-primary group-hover:text-primary-foreground hover:bg-primary/90\"\n              >\n                View details\n                <Icon\n                  name=\"lucide:arrow-right\"\n                  class=\"ml-2 h-4 w-4 transition-transform group-hover:translate-x-1\"\n                />\n              </UiButton>\n            </li>\n          </ul>\n        </Motion>\n      </ul>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n</script>\n","category":"Career","path":"Career/BlockCareer1.vue","components":["badge","button","container"]},{"name":"Career 2","fileName":"BlockCareer2.vue","file":"<template>\n  <!-- \n    Two-column career section with left header\n    Features: Side-by-side layout, descriptive header, job listings with badges\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"flex flex-col gap-x-16 py-16 lg:flex-row lg:py-24\">\n      <Motion :variants=\"childVariant\" class=\"w-full pb-16 lg:w-1/2 lg:pb-0\">\n        <UiContainer class=\"text-center lg:text-left\">\n          <p class=\"font-semibold text-primary\">We're hiring!</p>\n          <h2 class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:mb-6 lg:text-5xl\">Join our team</h2>\n          <p class=\"mx-auto max-w-[800px] text-lg text-muted-foreground lg:mx-0 lg:text-xl\">\n            Our philosophy is simple — hire a team of diverse, passionate people and foster a\n            culture that empowers you to do your best work.\n          </p>\n        </UiContainer>\n      </Motion>\n\n      <ul class=\"flex w-full flex-col gap-8 lg:w-1/2\">\n        <Motion\n          v-for=\"n in 4\"\n          :key=\"n\"\n          :variants=\"childVariant\"\n          :transition=\"{\n            delay: n * 0.05,\n          }\"\n          as=\"li\"\n          class=\"group border-t pt-6 transition-colors hover:border-primary/50\"\n        >\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <span class=\"text-lg font-semibold transition-colors group-hover:text-primary\"\n              >Product Designer</span\n            >\n            <UiBadge class=\"text-sm font-medium\" variant=\"outline\">Design</UiBadge>\n          </div>\n          <p class=\"mt-2 text-muted-foreground\">\n            We're looking for a mid-level product designer to join our team.\n          </p>\n          <ul class=\"mt-5 flex flex-wrap items-center gap-5\">\n            <li class=\"flex items-center gap-2 text-muted-foreground\">\n              <Icon class=\"opacity-80\" name=\"heroicons:map-pin\" /> Remote\n            </li>\n            <li class=\"flex items-center gap-2 text-muted-foreground\">\n              <Icon class=\"opacity-80\" name=\"heroicons:clock\" /> Full-time\n            </li>\n            <li class=\"md:ml-auto\">\n              <UiButton\n                variant=\"ghost\"\n                size=\"sm\"\n                class=\"group-hover:bg-primary group-hover:text-primary-foreground\"\n              >\n                Apply now\n                <Icon\n                  name=\"lucide:arrow-right\"\n                  class=\"ml-2 h-4 w-4 transition-transform group-hover:translate-x-1\"\n                />\n              </UiButton>\n            </li>\n          </ul>\n        </Motion>\n      </ul>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n</script>\n","category":"Career","path":"Career/BlockCareer2.vue","components":["badge","button","container"]},{"name":"Career 3","fileName":"BlockCareer3.vue","file":"<template>\n  <!-- \n    Career section with image showcase\n    Features: Centered header, job list with team image, visual appeal\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"pb-16\">\n      <UiContainer class=\"py-16 text-center lg:py-24\">\n        <Motion as=\"p\" :variants=\"childVariant\" class=\"font-semibold text-primary\">\n          We're hiring!\n        </Motion>\n        <Motion\n          as=\"h2\"\n          :variants=\"childVariant\"\n          class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:mb-6 lg:text-5xl\"\n        >\n          Join our team\n        </Motion>\n        <Motion\n          as=\"p\"\n          :variants=\"childVariant\"\n          class=\"mx-auto max-w-[768px] text-lg text-muted-foreground lg:text-xl\"\n        >\n          Our philosophy is simple — hire a team of diverse, passionate people and foster a culture\n          that empowers you to do your best work.\n        </Motion>\n      </UiContainer>\n      <div class=\"flex flex-col gap-x-16 gap-y-16 lg:flex-row\">\n        <ul class=\"flex w-full flex-col gap-8 lg:w-1/2\">\n          <Motion\n            v-for=\"n in 4\"\n            :key=\"n\"\n            :variants=\"childVariant\"\n            :transition=\"{\n              delay: n * 0.05,\n            }\"\n            as=\"li\"\n            class=\"group border-t pt-6 transition-colors hover:border-primary/50\"\n          >\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <span class=\"text-lg font-semibold transition-colors group-hover:text-primary\"\n                >Product Designer</span\n              >\n              <UiBadge class=\"text-sm font-medium\" variant=\"outline\">Design</UiBadge>\n            </div>\n            <p class=\"mt-2 text-muted-foreground\">\n              We're looking for a mid-level product designer to join our team.\n            </p>\n            <ul class=\"mt-5 flex flex-wrap items-center gap-5\">\n              <li class=\"flex items-center gap-2 text-muted-foreground\">\n                <Icon class=\"opacity-80\" name=\"heroicons:map-pin\" /> Remote\n              </li>\n              <li class=\"flex items-center gap-2 text-muted-foreground\">\n                <Icon class=\"opacity-80\" name=\"heroicons:clock\" /> Full-time\n              </li>\n              <li class=\"md:ml-auto\">\n                <UiButton\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  class=\"group-hover:bg-primary group-hover:text-primary-foreground\"\n                >\n                  Learn more\n                  <Icon\n                    name=\"lucide:arrow-right\"\n                    class=\"ml-2 h-4 w-4 transition-transform group-hover:translate-x-1\"\n                  />\n                </UiButton>\n              </li>\n            </ul>\n          </Motion>\n        </ul>\n        <Motion\n          :variants=\"{\n            initial: { opacity: 0, x: 30 },\n            animate: {\n              opacity: 1,\n              x: 0,\n              transition: {\n                type: 'spring',\n                stiffness: 200,\n                damping: 25,\n              },\n            },\n          }\"\n          class=\"w-full lg:w-1/2\"\n        >\n          <img\n            src=\"https://images.unsplash.com/photo-1521790797524-b2497295b8a0?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n            alt=\"Careers image\"\n            height=\"650\"\n            width=\"600\"\n            loading=\"lazy\"\n            class=\"h-[250px] w-full rounded-lg object-cover shadow-lg transition-shadow duration-300 hover:shadow-xl lg:h-full\"\n          />\n        </Motion>\n      </div>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n</script>\n","category":"Career","path":"Career/BlockCareer3.vue","components":["badge","button","container"]},{"name":"Career 4","fileName":"BlockCareer4.vue","file":"<template>\n  <!-- \n    Card-based career listings with department filtering\n    Features: Department tabs, card layout with hover effects, salary ranges, benefits\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <!-- Header -->\n      <div class=\"mb-12 text-center lg:mb-16\">\n        <Motion as=\"p\" :variants=\"childVariant\" class=\"mb-2 font-semibold text-primary\">\n          Careers\n        </Motion>\n        <Motion as=\"h2\" :variants=\"childVariant\" class=\"mb-4 text-4xl font-bold lg:text-5xl\">\n          Find your next role\n        </Motion>\n        <Motion\n          as=\"p\"\n          :variants=\"childVariant\"\n          class=\"mx-auto max-w-2xl text-lg text-muted-foreground lg:text-xl\"\n        >\n          Join a team of passionate individuals working on cutting-edge products\n        </Motion>\n      </div>\n\n      <!-- Department filter tabs -->\n      <Motion :variants=\"childVariant\" class=\"mb-12\">\n        <UiTabs default-value=\"all\" class=\"w-full\">\n          <UiTabsList class=\"mx-auto w-full justify-start overflow-x-auto\">\n            <UiTabsTrigger value=\"all\">All positions (12)</UiTabsTrigger>\n            <UiTabsTrigger value=\"engineering\">Engineering (5)</UiTabsTrigger>\n            <UiTabsTrigger value=\"design\">Design (3)</UiTabsTrigger>\n            <UiTabsTrigger value=\"product\">Product (2)</UiTabsTrigger>\n            <UiTabsTrigger value=\"marketing\">Marketing (2)</UiTabsTrigger>\n          </UiTabsList>\n        </UiTabs>\n      </Motion>\n\n      <!-- Job cards grid -->\n      <div class=\"grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3\">\n        <Motion\n          v-for=\"n in 6\"\n          :key=\"n\"\n          :variants=\"childVariant\"\n          :transition=\"{\n            delay: n * 0.05,\n          }\"\n        >\n          <UiCard class=\"group h-full py-0 transition-all hover:border-primary/50 hover:shadow-lg\">\n            <UiCardContent class=\"p-6\">\n              <div class=\"mb-4 flex items-start justify-between\">\n                <UiBadge variant=\"secondary\">Design</UiBadge>\n                <UiButton variant=\"ghost\" size=\"icon\" class=\"h-8 w-8\">\n                  <Icon name=\"lucide:bookmark\" class=\"h-4 w-4\" />\n                </UiButton>\n              </div>\n\n              <h3 class=\"mb-2 text-xl font-semibold transition-colors group-hover:text-primary\">\n                Senior Product Designer\n              </h3>\n              <p class=\"mb-4 text-sm text-muted-foreground\">\n                Lead design initiatives for our flagship products and mentor junior designers.\n              </p>\n\n              <div class=\"mb-4 space-y-2 text-sm\">\n                <div class=\"flex items-center gap-2 text-muted-foreground\">\n                  <Icon name=\"lucide:map-pin\" class=\"h-4 w-4\" />\n                  Remote · San Francisco, CA\n                </div>\n                <div class=\"flex items-center gap-2 text-muted-foreground\">\n                  <Icon name=\"lucide:briefcase\" class=\"h-4 w-4\" />\n                  Full-time · Senior level\n                </div>\n                <div class=\"flex items-center gap-2 text-muted-foreground\">\n                  <Icon name=\"lucide:dollar-sign\" class=\"h-4 w-4\" />\n                  $120k - $160k\n                </div>\n              </div>\n\n              <UiDivider class=\"my-4\" />\n\n              <div class=\"flex flex-wrap gap-2\">\n                <UiBadge variant=\"outline\" size=\"sm\">Health insurance</UiBadge>\n                <UiBadge variant=\"outline\" size=\"sm\">401(k)</UiBadge>\n                <UiBadge variant=\"outline\" size=\"sm\">Remote</UiBadge>\n              </div>\n\n              <UiButton class=\"mt-6 w-full\" variant=\"outline\">\n                View details\n                <Icon name=\"lucide:arrow-right\" class=\"ml-2 h-4 w-4\" />\n              </UiButton>\n            </UiCardContent>\n          </UiCard>\n        </Motion>\n      </div>\n\n      <!-- Load more -->\n      <Motion :variants=\"childVariant\" class=\"mt-12 text-center\">\n        <UiButton size=\"lg\" variant=\"outline\">Load more positions</UiButton>\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n</script>\n","category":"Career","path":"Career/BlockCareer4.vue","components":["badge","button","card","cardcontent","container","divider","tabs","tabslist","tabstrigger"]},{"name":"Career 5","fileName":"BlockCareer5.vue","file":"<template>\n  <!-- \n    Minimal career page with search and featured positions\n    Features: Search bar, featured job highlight, clean minimal design\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <!-- Header with search -->\n      <div class=\"mx-auto mb-16 max-w-3xl text-center\">\n        <Motion as=\"h1\" :variants=\"childVariant\" class=\"mb-4 text-4xl font-bold lg:text-5xl\">\n          Work with us\n        </Motion>\n        <Motion as=\"p\" :variants=\"childVariant\" class=\"mb-8 text-lg text-muted-foreground\">\n          Help us build products that millions of people love to use\n        </Motion>\n\n        <Motion :variants=\"childVariant\">\n          <div class=\"relative mx-auto max-w-md\">\n            <UiVeeInput placeholder=\"Search positions...\" icon=\"lucide:search\" />\n          </div>\n        </Motion>\n      </div>\n\n      <!-- Featured position -->\n      <Motion :variants=\"childVariant\" class=\"mb-12\">\n        <UiCard class=\"overflow-hidden border-2 border-primary/20 bg-primary/5 py-0\">\n          <UiCardContent class=\"p-0\">\n            <div class=\"grid grid-cols-1 gap-6 md:grid-cols-12\">\n              <!-- Image -->\n              <div class=\"md:col-span-4\">\n                <img\n                  src=\"https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=2070&auto=format&fit=crop\"\n                  alt=\"Featured role\"\n                  class=\"h-full w-full object-cover md:min-h-[300px]\"\n                />\n              </div>\n\n              <!-- Content -->\n              <div class=\"p-6 md:col-span-8 md:flex md:flex-col md:justify-center\">\n                <UiBadge class=\"mb-3 w-fit bg-primary text-primary-foreground\">Featured</UiBadge>\n                <h3 class=\"mb-2 text-2xl font-bold lg:text-3xl\">Head of Engineering</h3>\n                <p class=\"mb-4 text-muted-foreground lg:text-lg\">\n                  Lead our engineering team and shape the future of our technology stack. We're\n                  looking for a visionary leader with deep technical expertise.\n                </p>\n\n                <div class=\"mb-4 flex flex-wrap gap-4 text-sm\">\n                  <span class=\"flex items-center gap-2\">\n                    <Icon name=\"lucide:map-pin\" class=\"h-4 w-4 text-primary\" />\n                    San Francisco, CA / Remote\n                  </span>\n                  <span class=\"flex items-center gap-2\">\n                    <Icon name=\"lucide:briefcase\" class=\"h-4 w-4 text-primary\" />\n                    Full-time\n                  </span>\n                  <span class=\"flex items-center gap-2\">\n                    <Icon name=\"lucide:dollar-sign\" class=\"h-4 w-4 text-primary\" />\n                    $180k - $250k\n                  </span>\n                </div>\n\n                <div class=\"flex flex-wrap gap-3\">\n                  <UiButton>\n                    Apply now\n                    <Icon name=\"lucide:arrow-right\" class=\"ml-2 h-4 w-4\" />\n                  </UiButton>\n                  <UiButton variant=\"outline\">Learn more</UiButton>\n                </div>\n              </div>\n            </div>\n          </UiCardContent>\n        </UiCard>\n      </Motion>\n\n      <!-- All positions list -->\n      <Motion :variants=\"childVariant\" class=\"mb-8\">\n        <h2 class=\"text-2xl font-semibold\">All open positions</h2>\n      </Motion>\n\n      <div class=\"space-y-4\">\n        <Motion\n          v-for=\"n in 8\"\n          :key=\"n\"\n          :variants=\"childVariant\"\n          :transition=\"{\n            delay: n * 0.05,\n          }\"\n        >\n          <UiCard class=\"group transition-all hover:border-primary/30 hover:shadow-md\">\n            <UiCardContent class=\"p-6\">\n              <div class=\"flex flex-col gap-4 md:flex-row md:items-center md:justify-between\">\n                <div class=\"flex-1\">\n                  <div class=\"mb-2 flex flex-wrap items-center gap-2\">\n                    <h3 class=\"text-lg font-semibold transition-colors group-hover:text-primary\">\n                      Software Engineer\n                    </h3>\n                    <UiBadge variant=\"outline\" size=\"sm\">Engineering</UiBadge>\n                  </div>\n                  <div class=\"flex flex-wrap gap-4 text-sm text-muted-foreground\">\n                    <span class=\"flex items-center gap-1\">\n                      <Icon name=\"lucide:map-pin\" class=\"h-3.5 w-3.5\" />\n                      Remote\n                    </span>\n                    <span class=\"flex items-center gap-1\">\n                      <Icon name=\"lucide:clock\" class=\"h-3.5 w-3.5\" />\n                      Full-time\n                    </span>\n                    <span class=\"flex items-center gap-1\">\n                      <Icon name=\"lucide:dollar-sign\" class=\"h-3.5 w-3.5\" />\n                      $100k - $140k\n                    </span>\n                  </div>\n                </div>\n\n                <div class=\"flex gap-2\">\n                  <UiButton variant=\"outline\" size=\"sm\"> View details </UiButton>\n                  <UiButton size=\"sm\">Apply</UiButton>\n                </div>\n              </div>\n            </UiCardContent>\n          </UiCard>\n        </Motion>\n      </div>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n</script>\n","category":"Career","path":"Career/BlockCareer5.vue","components":["badge","button","card","cardcontent","container","veeinput"]},{"name":"Career 6","fileName":"BlockCareer6.vue","file":"<template>\n  <!-- \n    Modern career page with team culture showcase\n    Features: Gradient header, team stats, perks highlights, accordion job listings\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <div class=\"py-16 lg:py-24\">\n      <!-- Gradient hero section -->\n      <Motion\n        :variants=\"childVariant\"\n        class=\"relative mb-16 overflow-hidden rounded-2xl bg-linear-to-br from-primary/20 via-primary/10 to-transparent p-8 lg:mb-24 lg:p-16\"\n      >\n        <UiContainer class=\"relative z-10 text-center\">\n          <h1 class=\"mb-4 text-4xl font-bold lg:text-6xl\">Join our mission</h1>\n          <p class=\"mx-auto mb-8 max-w-2xl text-lg text-muted-foreground lg:text-xl\">\n            We're building the future of technology. Come help us make a difference.\n          </p>\n\n          <!-- Team stats -->\n          <div class=\"mx-auto flex max-w-2xl flex-wrap justify-center gap-8 lg:gap-12\">\n            <div class=\"text-center\">\n              <p class=\"text-3xl font-bold lg:text-4xl\">150+</p>\n              <p class=\"text-sm text-muted-foreground\">Team members</p>\n            </div>\n            <UiSeparator orientation=\"vertical\" class=\"hidden h-auto md:block\" />\n            <div class=\"text-center\">\n              <p class=\"text-3xl font-bold lg:text-4xl\">25+</p>\n              <p class=\"text-sm text-muted-foreground\">Countries</p>\n            </div>\n            <UiSeparator orientation=\"vertical\" class=\"hidden h-auto md:block\" />\n            <div class=\"text-center\">\n              <p class=\"text-3xl font-bold lg:text-4xl\">100%</p>\n              <p class=\"text-sm text-muted-foreground\">Remote</p>\n            </div>\n          </div>\n        </UiContainer>\n      </Motion>\n\n      <UiContainer>\n        <!-- Perks section -->\n        <Motion :variants=\"childVariant\" class=\"mb-16\">\n          <h2 class=\"mb-8 text-center text-2xl font-semibold lg:text-3xl\">Why join us?</h2>\n          <div class=\"grid grid-cols-1 gap-6 md:grid-cols-3\">\n            <Motion\n              v-for=\"(perk, index) in perks\"\n              :key=\"perk.title\"\n              :variants=\"{\n                initial: { opacity: 0, y: 20 },\n                animate: {\n                  opacity: 1,\n                  y: 0,\n                  transition: {\n                    delay: index * 0.1,\n                  },\n                },\n              }\"\n            >\n              <UiCard class=\"py-0 text-center\">\n                <UiCardContent class=\"p-6\">\n                  <div\n                    class=\"mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10\"\n                  >\n                    <Icon :name=\"perk.icon\" class=\"h-6 w-6 text-primary\" />\n                  </div>\n                  <h3 class=\"mb-2 line-clamp-2 font-semibold\">{{ perk.title }}</h3>\n                  <p :title=\"perk.description\" class=\"line-clamp-2 text-sm text-muted-foreground\">\n                    {{ perk.description }}\n                  </p>\n                </UiCardContent>\n              </UiCard>\n            </Motion>\n          </div>\n        </Motion>\n\n        <!-- Job listings with accordion -->\n        <Motion :variants=\"childVariant\">\n          <h2 class=\"mb-8 text-2xl font-semibold\">Open positions</h2>\n\n          <UiAccordion type=\"single\" collapsible class=\"space-y-4\">\n            <Motion\n              v-for=\"n in 6\"\n              :key=\"n\"\n              :variants=\"childVariant\"\n              :transition=\"{\n                delay: n * 0.05,\n              }\"\n            >\n              <UiAccordionItem :value=\"`item-${n}`\" class=\"rounded-lg border border-b! px-6\">\n                <UiAccordionTrigger class=\"py-6 hover:no-underline\">\n                  <div class=\"flex flex-1 items-start justify-between pr-4 text-left\">\n                    <div class=\"flex-1\">\n                      <div class=\"mb-2 flex flex-wrap items-center gap-2\">\n                        <h3 class=\"text-lg font-semibold\">Senior Full Stack Developer</h3>\n                        <UiBadge variant=\"secondary\" size=\"sm\">Engineering</UiBadge>\n                      </div>\n                      <div class=\"flex flex-wrap gap-4 text-sm text-muted-foreground\">\n                        <span class=\"flex items-center gap-1\">\n                          <Icon name=\"lucide:map-pin\" class=\"h-3.5 w-3.5\" />\n                          Remote\n                        </span>\n                        <span class=\"flex items-center gap-1\">\n                          <Icon name=\"lucide:briefcase\" class=\"h-3.5 w-3.5\" />\n                          Full-time\n                        </span>\n                        <span class=\"flex items-center gap-1\">\n                          <Icon name=\"lucide:calendar\" class=\"h-3.5 w-3.5\" />\n                          Posted 2 days ago\n                        </span>\n                      </div>\n                    </div>\n                  </div>\n                </UiAccordionTrigger>\n                <UiAccordionContent class=\"pt-2 pb-6\">\n                  <div class=\"space-y-4\">\n                    <div>\n                      <h4 class=\"mb-2 font-semibold\">About the role</h4>\n                      <p class=\"text-sm text-muted-foreground\">\n                        We're looking for a talented full stack developer to join our growing\n                        engineering team. You'll work on building and scaling our core platform.\n                      </p>\n                    </div>\n\n                    <div>\n                      <h4 class=\"mb-2 font-semibold\">Requirements</h4>\n                      <ul class=\"list-inside list-disc space-y-1 text-sm text-muted-foreground\">\n                        <li>5+ years of professional development experience</li>\n                        <li>Strong proficiency in React, Node.js, and TypeScript</li>\n                        <li>Experience with cloud platforms (AWS, GCP, or Azure)</li>\n                        <li>Excellent communication skills</li>\n                      </ul>\n                    </div>\n\n                    <div class=\"flex flex-wrap gap-2 pt-2\">\n                      <UiBadge variant=\"outline\">React</UiBadge>\n                      <UiBadge variant=\"outline\">Node.js</UiBadge>\n                      <UiBadge variant=\"outline\">TypeScript</UiBadge>\n                      <UiBadge variant=\"outline\">AWS</UiBadge>\n                    </div>\n\n                    <div class=\"flex gap-3 pt-4\">\n                      <UiButton>\n                        Apply now\n                        <Icon name=\"lucide:arrow-right\" class=\"ml-2 h-4 w-4\" />\n                      </UiButton>\n                      <UiButton variant=\"outline\">Share job</UiButton>\n                    </div>\n                  </div>\n                </UiAccordionContent>\n              </UiAccordionItem>\n            </Motion>\n          </UiAccordion>\n        </Motion>\n\n        <!-- CTA -->\n        <Motion :variants=\"childVariant\" class=\"mt-16 text-center\">\n          <UiCard class=\"bg-muted/50\">\n            <UiCardContent class=\"p-8\">\n              <h3 class=\"mb-2 text-2xl font-semibold\">Don't see a perfect fit?</h3>\n              <p class=\"mb-6 text-muted-foreground\">\n                We're always looking for talented people. Send us your resume and we'll keep you in\n                mind for future opportunities.\n              </p>\n              <UiButton size=\"lg\">Send your resume</UiButton>\n            </UiCardContent>\n          </UiCard>\n        </Motion>\n      </UiContainer>\n    </div>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const perks = [\n    {\n      icon: \"lucide:heart\",\n      title: \"Health & Wellness\",\n      description: \"Comprehensive health insurance and wellness programs for you and your family\",\n    },\n    {\n      icon: \"lucide:globe\",\n      title: \"Work from Anywhere\",\n      description: \"100% remote work with flexible hours to fit your lifestyle\",\n    },\n    {\n      icon: \"lucide:trending-up\",\n      title: \"Career Growth\",\n      description: \"Continuous learning opportunities and clear career progression paths\",\n    },\n  ];\n</script>\n","category":"Career","path":"Career/BlockCareer6.vue","components":["accordion","accordioncontent","accordionitem","accordiontrigger","badge","button","card","cardcontent","container","separator"]},{"name":"Chart Bar","fileName":"BlockChartBar.client.vue","file":"<template>\n  <div class=\"h-[550px] w-full\">\n    <apexchart width=\"100%\" height=\"100%\" type=\"bar\" :options=\"options\" :series=\"series\" />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import type { ApexOptions } from \"apexcharts\";\n\n  const series: ApexOptions[\"series\"] = [\n    {\n      name: \"Series 1\",\n      data: [500, 1200, 250, 750, 900, 1800, 350, 650, 2100, 300, 800, 1600],\n      color: \"var(--color-violet-400)\", // Example color\n    },\n    {\n      name: \"Series 2\",\n      data: [50, 25, 70, 10, 2000, 100, 5, 150, 180, 300, 120, 800],\n      color: \"var(--color-violet-700)\", // Example color\n    },\n    {\n      name: \"Series 3\",\n      data: [300, 150, 250, 50, 80, 200, 400, 100, 120, 10, 500, 300],\n      color: \"var(--color-violet-900)\", // Example color\n    },\n  ];\n\n  const options: ApexOptions = {\n    plotOptions: {\n      bar: {\n        horizontal: true,\n        borderRadius: 2,\n        borderRadiusApplication: \"end\",\n      },\n    },\n    tooltip: {},\n    legend: {\n      fontFamily: \"inherit\",\n      fontWeight: 500,\n      offsetY: 5,\n      labels: {\n        colors: \"var(--color-muted-foreground)\",\n      },\n    },\n    dataLabels: {\n      enabled: false,\n    },\n    grid: {\n      borderColor: \"var(--color-border)\",\n    },\n    chart: {\n      toolbar: {\n        show: window.innerWidth > 768,\n      },\n    },\n    yaxis: {\n      title: {\n        text: window.innerWidth > 768 ? \"Active users\" : \"\",\n        offsetX: 5,\n        style: {\n          fontWeight: 600,\n          fontFamily: \"inherit\",\n          color: \"var(--color-muted-foreground)\",\n        },\n      },\n      labels: {\n        style: {\n          colors: \"var(--color-muted-foreground)\",\n          fontFamily: \"inherit\",\n        },\n      },\n      axisBorder: {\n        show: true,\n        color: \"var(--color-border)\",\n      },\n    },\n    xaxis: {\n      title: {\n        text: window.innerWidth > 768 ? \"Months\" : \"\",\n        offsetY: -2,\n        style: {\n          fontWeight: 600,\n          color: \"var(--color-muted-foreground)\",\n          fontFamily: \"inherit\",\n        },\n      },\n      labels: {\n        style: {\n          colors: \"var(--color-muted-foreground)\",\n          fontFamily: \"inherit\",\n        },\n      },\n      axisBorder: {\n        show: true,\n        color: \"var(--color-border)\",\n      },\n      axisTicks: {\n        show: true,\n        color: \"var(--color-border)\",\n      },\n      categories: [\n        \"Jan\",\n        \"Feb\",\n        \"Mar\",\n        \"Apr\",\n        \"May\",\n        \"Jun\",\n        \"Jul\",\n        \"Aug\",\n        \"Sep\",\n        \"Oct\",\n        \"Nov\",\n        \"Dec\",\n      ],\n    },\n  };\n</script>\n\n<style>\n  @reference \"~/assets/css/tailwind.css\";\n\n  .apexcharts-menu {\n    @apply border-border bg-background text-foreground;\n    .apexcharts-menu-item {\n      @apply hover:bg-primary! hover:text-primary-foreground!;\n    }\n  }\n\n  .apexcharts-tooltip {\n    background: var(--color-background) !important;\n    color: var(--color-foreground) !important;\n    border: 1px solid var(--color-border) !important;\n    box-shadow: var(--shadow) !important;\n\n    .apexcharts-tooltip-title {\n      color: var(--color-foreground) !important;\n      background-color: var(--color-muted) !important;\n      font-family: var(--font-sans) !important;\n      border-bottom: 1px solid var(--color-border) !important;\n    }\n  }\n</style>\n","category":"Chart","path":"Chart/BlockChartBar.client.vue","components":[]},{"name":"Chart Bubble","fileName":"BlockChartBubble.client.vue","file":"<template>\n  <div class=\"h-[550px] w-full\">\n    <apexchart width=\"100%\" height=\"100%\" type=\"bubble\" :options=\"options\" :series=\"series\" />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import type { ApexOptions } from \"apexcharts\";\n\n  function generateData(baseval: number, count: number, yrange: { min: number; max: number }) {\n    let i = 0;\n    const series = [];\n    while (i < count) {\n      const x = Math.floor(Math.random() * (750 - 1 + 1)) + 1;\n      const y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;\n      const z = Math.floor(Math.random() * (75 - 15 + 1)) + 15;\n\n      series.push([x, y, z]);\n      baseval += 86400000;\n      i++;\n    }\n    return series;\n  }\n  const series: ApexOptions[\"series\"] = [\n    {\n      name: \"Series 1\",\n      data: generateData(new Date(\"11 Feb 2017 GMT\").getTime(), 20, {\n        min: 10,\n        max: 60,\n      }),\n      color: \"var(--color-violet-400)\", // Example color\n    },\n    {\n      name: \"Series 2\",\n      data: generateData(new Date(\"11 Feb 2017 GMT\").getTime(), 20, {\n        min: 10,\n        max: 60,\n      }),\n      color: \"var(--color-violet-700)\", // Example color\n    },\n    {\n      name: \"Series 3\",\n      data: generateData(new Date(\"11 Feb 2017 GMT\").getTime(), 20, {\n        min: 10,\n        max: 60,\n      }),\n      color: \"var(--color-violet-900)\", // Example color\n    },\n  ];\n\n  const options: ApexOptions = {\n    legend: {\n      fontFamily: \"inherit\",\n      fontWeight: 500,\n      offsetY: 5,\n      labels: {\n        colors: \"var(--color-muted-foreground)\",\n      },\n    },\n    dataLabels: {\n      enabled: false,\n    },\n    fill: {\n      type: \"gradient\",\n    },\n    grid: {\n      borderColor: \"var(--color-border)\",\n    },\n    chart: {\n      toolbar: {\n        show: window.innerWidth > 768,\n      },\n    },\n    yaxis: {\n      labels: {\n        style: {\n          colors: \"var(--color-muted-foreground)\",\n          fontFamily: \"inherit\",\n        },\n      },\n    },\n    markers: {\n      strokeWidth: 0,\n    },\n    xaxis: {\n      title: {\n        style: {\n          fontWeight: 600,\n          fontFamily: \"inherit\",\n          color: \"var(--color-muted-foreground)\",\n        },\n      },\n      labels: {\n        style: {\n          colors: \"var(--color-muted-foreground)\",\n          fontFamily: \"inherit\",\n        },\n      },\n      axisBorder: {\n        show: true,\n        color: \"var(--color-border)\",\n      },\n      axisTicks: {\n        show: true,\n        color: \"var(--color-border)\",\n      },\n    },\n  };\n</script>\n\n<style>\n  @reference \"~/assets/css/tailwind.css\";\n\n  .apexcharts-menu {\n    @apply border-border bg-background text-foreground;\n    .apexcharts-menu-item {\n      @apply hover:bg-primary! hover:text-primary-foreground!;\n    }\n  }\n\n  .apexcharts-tooltip {\n    background: var(--color-background) !important;\n    color: var(--color-foreground) !important;\n    border: 1px solid var(--color-border) !important;\n    box-shadow: var(--shadow) !important;\n\n    .apexcharts-tooltip-title {\n      color: var(--color-foreground) !important;\n      background-color: var(--color-muted) !important;\n      font-family: var(--font-sans) !important;\n      border-bottom: 1px solid var(--color-border) !important;\n    }\n  }\n</style>\n","category":"Chart","path":"Chart/BlockChartBubble.client.vue","components":[]},{"name":"Chart Donut","fileName":"BlockChartDonut.client.vue","file":"<template>\n  <div class=\"h-[550px] w-full\">\n    <apexchart width=\"100%\" height=\"100%\" type=\"donut\" :options=\"options\" :series=\"series\" />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import type { ApexOptions } from \"apexcharts\";\n\n  const series: ApexOptions[\"series\"] = [70, 30, 60];\n\n  const options: ApexOptions = {\n    plotOptions: {\n      pie: {\n        dataLabels: {\n          minAngleToShowLabel: 50,\n        },\n        donut: {\n          labels: {},\n          size: \"50px\",\n        },\n        expandOnClick: true,\n      },\n    },\n    dataLabels: {\n      style: {\n        fontWeight: 400,\n        fontFamily: \"inherit\",\n      },\n    },\n    legend: {\n      fontFamily: \"inherit\",\n      fontWeight: 500,\n      show: true,\n      position: \"bottom\",\n      labels: {\n        colors: \"var(--color-muted-foreground)\",\n      },\n    },\n    stroke: {\n      colors: [\"transparent\"],\n    },\n    colors: [\"var(--color-violet-400)\", \"var(--color-violet-700)\", \"var(--color-violet-900)\"],\n    chart: {\n      toolbar: {\n        show: window.innerWidth > 768,\n      },\n    },\n    labels: [\"Apples\", \"Oranges\", \"Bananas\"],\n  };\n</script>\n\n<style>\n  @reference \"~/assets/css/tailwind.css\";\n\n  .apexcharts-menu {\n    @apply border-border bg-background text-foreground;\n    .apexcharts-menu-item {\n      @apply hover:bg-primary! hover:text-primary-foreground!;\n    }\n  }\n</style>\n","category":"Chart","path":"Chart/BlockChartDonut.client.vue","components":[]},{"name":"Chart Line","fileName":"BlockChartLine.client.vue","file":"<template>\n  <div class=\"h-[550px] w-full\">\n    <apexchart width=\"100%\" height=\"100%\" type=\"line\" :options=\"options\" :series=\"series\" />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import type { ApexOptions } from \"apexcharts\";\n\n  const series: ApexOptions[\"series\"] = [\n    {\n      name: \"Series 1\",\n      data: [500, 1200, 250, 750, 900, 1800, 350, 650, 2100, 300, 800, 1600],\n      color: \"var(--color-violet-400)\", // Example color\n    },\n    {\n      name: \"Series 2\",\n      data: [50, 25, 70, 10, 2000, 100, 5, 150, 180, 3000, 120, 800],\n      color: \"var(--color-violet-700)\", // Example color\n    },\n    {\n      name: \"Series 3\",\n      data: [3000, 150, 2500, 50, 800, 200, 400, 1000, 1200, 10, 5000, 300],\n      color: \"var(--color-violet-900)\", // Example color\n    },\n  ];\n\n  const options: ApexOptions = {\n    stroke: {\n      width: 3,\n      curve: \"smooth\",\n      lineCap: \"round\",\n    },\n    legend: {\n      fontFamily: \"inherit\",\n      fontWeight: 500,\n      offsetY: 5,\n      labels: {\n        colors: \"var(--color-muted-foreground)\",\n      },\n    },\n    grid: {\n      borderColor: \"var(--color-border)\",\n    },\n    chart: {\n      toolbar: {\n        show: window.innerWidth > 768,\n      },\n    },\n    yaxis: {\n      title: {\n        text: window.innerWidth > 768 ? \"Active users\" : \"\",\n        offsetX: 5,\n        style: {\n          fontWeight: 600,\n          fontSize: \"13px\",\n          color: \"var(--color-muted-foreground)\",\n          fontFamily: \"inherit\",\n        },\n      },\n      labels: {\n        style: {\n          colors: \"var(--color-muted-foreground)\",\n          fontFamily: \"inherit\",\n        },\n      },\n    },\n    xaxis: {\n      title: {\n        text: window.innerWidth > 768 ? \"Months\" : \"\",\n        offsetY: -2,\n        style: {\n          fontWeight: 600,\n          fontSize: \"13px\",\n          color: \"var(--color-muted-foreground)\",\n          fontFamily: \"inherit\",\n        },\n      },\n      labels: {\n        style: {\n          colors: \"var(--color-muted-foreground)\",\n          fontFamily: \"inherit\",\n        },\n      },\n\n      categories: [\n        \"Jan\",\n        \"Feb\",\n        \"Mar\",\n        \"Apr\",\n        \"May\",\n        \"Jun\",\n        \"Jul\",\n        \"Aug\",\n        \"Sep\",\n        \"Oct\",\n        \"Nov\",\n        \"Dec\",\n      ],\n    },\n  };\n</script>\n\n<style>\n  @reference \"~/assets/css/tailwind.css\";\n\n  .apexcharts-menu {\n    @apply border-border bg-background text-foreground;\n    .apexcharts-menu-item {\n      @apply hover:bg-primary! hover:text-primary-foreground!;\n    }\n  }\n\n  .apexcharts-tooltip {\n    background: var(--color-background) !important;\n    color: var(--color-foreground) !important;\n    border: 1px solid var(--color-border) !important;\n    box-shadow: var(--shadow) !important;\n\n    .apexcharts-tooltip-title {\n      color: var(--color-foreground) !important;\n      background-color: var(--color-muted) !important;\n      font-family: var(--font-sans) !important;\n      border-bottom: 1px solid var(--color-border) !important;\n    }\n  }\n</style>\n","category":"Chart","path":"Chart/BlockChartLine.client.vue","components":[]},{"name":"Chart Pie","fileName":"BlockChartPie.client.vue","file":"<template>\n  <div class=\"h-[550px] w-full\">\n    <apexchart width=\"100%\" height=\"100%\" type=\"pie\" :options=\"options\" :series=\"series\" />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import type { ApexOptions } from \"apexcharts\";\n\n  const series: ApexOptions[\"series\"] = [70, 30, 60];\n\n  const options: ApexOptions = {\n    plotOptions: {\n      pie: {\n        dataLabels: {\n          minAngleToShowLabel: 50,\n          offset: -10,\n        },\n        expandOnClick: true,\n      },\n    },\n    legend: {\n      fontFamily: \"inherit\",\n      fontWeight: 500,\n      show: true,\n      position: \"bottom\",\n      labels: {\n        colors: \"var(--color-muted-foreground)\",\n      },\n    },\n    stroke: {\n      lineCap: \"round\",\n      colors: [\"transparent\"],\n      width: 2,\n    },\n    colors: [\"var(--color-violet-400)\", \"var(--color-violet-700)\", \"var(--color-violet-900)\"],\n    chart: {\n      toolbar: {\n        show: window.innerWidth > 768,\n      },\n    },\n    labels: [\"Apples\", \"Oranges\", \"Bananas\"],\n  };\n</script>\n\n<style>\n  @reference \"~/assets/css/tailwind.css\";\n\n  .apexcharts-menu {\n    @apply border-border bg-background text-foreground;\n    .apexcharts-menu-item {\n      @apply hover:bg-primary! hover:text-primary-foreground!;\n    }\n  }\n</style>\n","category":"Chart","path":"Chart/BlockChartPie.client.vue","components":[]},{"name":"Chart Radar","fileName":"BlockChartRadar.client.vue","file":"<template>\n  <div class=\"h-[550px] w-full\">\n    <apexchart width=\"100%\" height=\"100%\" type=\"radar\" :options=\"options\" :series=\"series\" />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import type { ApexOptions } from \"apexcharts\";\n\n  const series: ApexOptions[\"series\"] = [\n    {\n      name: \"Series 2\",\n      data: [50, 25, 70, 10, 20, 100, 5, 150, 180, 300, 120, 200],\n      color: \"var(--color-violet-700)\", // Example color\n    },\n    {\n      name: \"Series 3\",\n      data: [300, 150, 250, 50, 80, 200, 400, 100, 120, 10, 500, 300],\n      color: \"var(--color-violet-900)\", // Example color\n    },\n  ];\n\n  const options: ApexOptions = {\n    plotOptions: {\n      radar: {\n        polygons: {\n          connectorColors: \"var(--color-border)\",\n          strokeColors: \"var(--color-border)\",\n        },\n      },\n    },\n    legend: {\n      fontFamily: \"inherit\",\n      fontWeight: 500,\n      offsetY: 5,\n      labels: {\n        colors: \"var(--color-muted-foreground)\",\n      },\n    },\n    stroke: { show: false },\n    markers: {\n      strokeWidth: 1,\n      strokeColors: [\"var(--color-border)\"],\n    },\n    chart: {\n      toolbar: {\n        show: window.innerWidth > 768,\n      },\n    },\n    tooltip: {\n      intersect: false,\n    },\n    yaxis: {\n      labels: {\n        style: {\n          fontSize: \"12px\",\n          colors: \"var(--color-muted-foreground)\",\n          fontFamily: \"inherit\",\n        },\n      },\n    },\n    xaxis: {\n      labels: {\n        style: {\n          colors: \"var(--color-muted-foreground)\",\n          fontFamily: \"inherit\",\n        },\n      },\n      categories: [\n        \"Jan\",\n        \"Feb\",\n        \"Mar\",\n        \"Apr\",\n        \"May\",\n        \"Jun\",\n        \"Jul\",\n        \"Aug\",\n        \"Sep\",\n        \"Oct\",\n        \"Nov\",\n        \"Dec\",\n      ],\n    },\n  };\n</script>\n\n<style>\n  @reference \"~/assets/css/tailwind.css\";\n\n  .apexcharts-menu {\n    @apply border-border bg-background text-foreground;\n    .apexcharts-menu-item {\n      @apply hover:bg-primary! hover:text-primary-foreground!;\n    }\n  }\n\n  .apexcharts-tooltip {\n    background: var(--color-background) !important;\n    color: var(--color-foreground) !important;\n    border: 1px solid var(--color-border) !important;\n    box-shadow: var(--shadow) !important;\n\n    .apexcharts-tooltip-title {\n      color: var(--color-foreground) !important;\n      background-color: var(--color-muted) !important;\n      font-family: var(--font-sans) !important;\n      border-bottom: 1px solid var(--color-border) !important;\n    }\n  }\n</style>\n","category":"Chart","path":"Chart/BlockChartRadar.client.vue","components":[]},{"name":"Chart Radial Bar","fileName":"BlockChartRadialBar.client.vue","file":"<template>\n  <div class=\"h-[550px] w-full\">\n    <apexchart width=\"100%\" height=\"100%\" type=\"radialBar\" :options=\"options\" :series=\"series\" />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import type { ApexOptions } from \"apexcharts\";\n\n  const series: ApexOptions[\"series\"] = [70, 30, 60];\n\n  const options: ApexOptions = {\n    plotOptions: {\n      radialBar: {\n        track: {\n          background: \"rgba(var(--gray100),1)\",\n        },\n        dataLabels: {\n          name: {\n            fontFamily: \"inherit\",\n            fontWeight: 600,\n            fontSize: \"24px\",\n          },\n          total: {\n            show: true,\n            label: \"Total\",\n            fontFamily: \"inherit\",\n            fontWeight: 600,\n            fontSize: \"24px\",\n            formatter(opts) {\n              const total = opts.config?.series?.reduce((acc: number, cur: number) => acc + cur, 0);\n              if (!total) return \"0\";\n              return Number(total / opts.config?.series?.length).toFixed(2) + \"%\";\n            },\n          },\n          value: {\n            fontFamily: \"inherit\",\n            fontSize: \"16px\",\n            color: \"var(--color-muted-foreground)\",\n            formatter(val) {\n              return Number(val).toFixed(0) + \"%\";\n            },\n          },\n        },\n      },\n    },\n    legend: {\n      fontFamily: \"inherit\",\n      fontWeight: 500,\n      show: true,\n      position: \"bottom\",\n      labels: {\n        colors: \"var(--color-muted-foreground)\",\n      },\n    },\n    stroke: {\n      lineCap: \"round\",\n    },\n    colors: [\"var(--color-violet-400)\", \"var(--color-violet-700)\", \"var(--color-violet-900)\"],\n\n    chart: {\n      toolbar: {\n        show: window.innerWidth > 768,\n      },\n    },\n    labels: [\"Apples\", \"Oranges\", \"Bananas\"],\n  };\n</script>\n\n<style>\n  @reference \"~/assets/css/tailwind.css\";\n\n  .apexcharts-menu {\n    @apply border-border bg-background text-foreground;\n    .apexcharts-menu-item {\n      @apply hover:bg-primary! hover:text-primary-foreground!;\n    }\n  }\n</style>\n","category":"Chart","path":"Chart/BlockChartRadialBar.client.vue","components":[]},{"name":"CTA 1","fileName":"BlockCTA1.vue","file":"<template>\n  <!-- \n    Centered CTA with dual buttons\n    Features: Centered layout, staggered animations, action buttons\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.15),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"flex flex-col items-center py-16 text-center lg:py-24\">\n      <Motion\n        as=\"h3\"\n        :variants=\"childVariant\"\n        class=\"mb-4 text-3xl font-semibold md:mb-5 md:text-4xl\"\n      >\n        Start your free trial\n      </Motion>\n      <Motion as=\"p\" :variants=\"childVariant\" class=\"text-lg text-muted-foreground md:text-xl\">\n        Join over 4,000+ startups already growing with {{ COMPANY_NAME }}.\n      </Motion>\n      <Motion\n        :variants=\"childVariant\"\n        class=\"mt-8 flex w-full flex-col-reverse justify-center gap-3 md:w-auto md:flex-row\"\n      >\n        <UiButton size=\"lg\" class=\"w-full lg:w-auto\" variant=\"outline\">Learn more</UiButton>\n        <UiButton size=\"lg\" class=\"w-full whitespace-nowrap md:w-auto\">\n          Get started\n          <Icon name=\"lucide:arrow-right\" class=\"ml-2 h-4 w-4\" />\n        </UiButton>\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n</script>\n","category":"CTA","path":"CTA/BlockCTA1.vue","components":["button","container"]},{"name":"CTA 2","fileName":"BlockCTA2.vue","file":"<template>\n  <!-- \n    Horizontal CTA with side-by-side layout\n    Features: Text left, buttons right, responsive stacking, animations\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.15),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"flex flex-col items-center py-16 lg:flex-row lg:py-24\">\n      <Motion :variants=\"childVariant\" class=\"grow text-center lg:text-left\">\n        <h3 class=\"mb-4 text-3xl font-semibold lg:mb-5 lg:text-4xl\">Start your free trial</h3>\n        <p class=\"text-lg text-muted-foreground lg:text-xl\">\n          Join over 4,000+ startups already growing with {{ COMPANY_NAME }}.\n        </p>\n      </Motion>\n      <Motion\n        :variants=\"childVariant\"\n        class=\"mt-8 flex w-full shrink-0 flex-col-reverse justify-center gap-3 md:w-auto md:flex-row lg:mt-0\"\n      >\n        <UiButton size=\"lg\" class=\"w-full md:w-auto\" variant=\"outline\">Learn more</UiButton>\n        <UiButton size=\"lg\" class=\"w-full whitespace-nowrap md:w-auto\">\n          Get started\n          <Icon name=\"lucide:arrow-right\" class=\"ml-2 h-4 w-4\" />\n        </UiButton>\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n</script>\n","category":"CTA","path":"CTA/BlockCTA2.vue","components":["button","container"]},{"name":"CTA 3","fileName":"BlockCTA3.vue","file":"<template>\n  <!-- \n    Feature list CTA with image\n    Features: Checklist items, decorative SVG, image, staggered animations\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer\n      class=\"relative flex flex-col items-center justify-center gap-y-12 py-10 lg:h-[720px] lg:flex-row\"\n    >\n      <Motion :variants=\"childVariant\" class=\"flex h-full items-center justify-center\">\n        <div>\n          <h3 class=\"text-3xl font-semibold lg:text-5xl\">\n            Join 4,000+ startups growing with {{ COMPANY_NAME }}\n          </h3>\n          <ul class=\"mt-8 flex flex-col gap-5 text-muted-foreground\">\n            <Motion\n              v-for=\"(feature, idx) in features\"\n              :key=\"idx\"\n              :variants=\"childVariant\"\n              class=\"flex gap-3 lg:text-lg\"\n            >\n              <Icon name=\"heroicons:check-circle\" class=\"h-6 w-6 shrink-0 text-primary\" />\n              <span>{{ feature }}</span>\n            </Motion>\n          </ul>\n          <Motion\n            :variants=\"childVariant\"\n            class=\"mt-8 flex w-full shrink-0 flex-col-reverse gap-3 md:mt-12 lg:w-auto lg:flex-row\"\n          >\n            <UiButton size=\"lg\" class=\"w-full lg:w-auto\" variant=\"outline\">Learn more</UiButton>\n            <UiButton size=\"lg\" class=\"w-full shrink-0 whitespace-nowrap md:w-auto\">\n              Get started\n              <Icon name=\"lucide:arrow-right\" class=\"ml-2 h-4 w-4\" />\n            </UiButton>\n          </Motion>\n        </div>\n      </Motion>\n\n      <Motion\n        :variants=\"{\n          initial: { opacity: 0, x: 30 },\n          animate: {\n            opacity: 1,\n            x: 0,\n            transition: {\n              type: 'spring',\n              stiffness: 200,\n              damping: 25,\n            },\n          },\n        }\"\n        class=\"h-[300px] w-full overflow-hidden rounded-lg shadow-lg md:w-[600px] lg:h-full lg:w-1/2\"\n      >\n        <img\n          src=\"https://images.unsplash.com/photo-1608411404720-c8f0417bcdba?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"CTA image\"\n          :title=\"`${COMPANY_NAME} CTA image`\"\n          class=\"h-full w-full object-cover transition-transform duration-500 hover:scale-105\"\n        />\n      </Motion>\n\n      <Motion :variants=\"childVariant\" class=\"absolute bottom-5 left-[290px] hidden lg:block\">\n        <div class=\"h-[300px] w-[300px]\" style=\"transform: rotateY(180deg)\">\n          <svg viewBox=\"0 0 360 342\" class=\"fill-primary\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M342.654 174.227C343.704 172.945 345.594 172.756 346.876 173.806C348.158 174.856 348.346 176.746 347.296 178.028L342.654 174.227ZM159.589 141.42L159.868 138.433L159.869 138.434L159.589 141.42ZM184.236 248.724L182.479 246.293L182.479 246.292L184.236 248.724ZM34.9177 108.275C35.017 106.621 36.4382 105.361 38.0921 105.461C39.746 105.56 41.0062 106.981 40.9069 108.635L34.9177 108.275ZM350.512 200.044C350.567 201.7 349.269 203.087 347.613 203.142C345.957 203.197 344.57 201.899 344.515 200.243L350.512 200.044ZM346.66 174.344L346.944 171.357C348.447 171.5 349.609 172.737 349.659 174.245L346.66 174.344ZM320.295 174.307C318.67 173.981 317.619 172.399 317.945 170.775C318.272 169.15 319.854 168.098 321.478 168.425L320.295 174.307ZM344.975 176.127C347.296 178.028 347.295 178.029 347.294 178.03C347.294 178.031 347.292 178.033 347.29 178.035C347.287 178.039 347.283 178.044 347.278 178.051C347.267 178.064 347.251 178.083 347.231 178.107C347.19 178.156 347.131 178.227 347.054 178.32C346.899 178.505 346.672 178.776 346.373 179.125C345.776 179.824 344.897 180.839 343.754 182.117C341.468 184.673 338.125 188.283 333.881 192.526C325.399 201.004 313.281 212.038 298.76 222.223C269.869 242.488 230.675 259.93 191.571 245.779L193.613 240.138C229.851 253.251 266.849 237.278 295.314 217.311C309.471 207.381 321.322 196.595 329.639 188.282C333.795 184.129 337.06 180.601 339.282 178.117C340.392 176.876 341.241 175.896 341.81 175.23C342.094 174.897 342.308 174.642 342.45 174.473C342.52 174.388 342.573 174.325 342.607 174.284C342.624 174.263 342.637 174.248 342.644 174.238C342.648 174.234 342.651 174.23 342.653 174.228C342.653 174.227 342.654 174.227 342.654 174.226C342.654 174.226 342.654 174.227 344.975 176.127ZM191.571 245.779C152.934 231.798 135.393 204.746 132.163 181.185C130.558 169.476 132.484 158.514 137.294 150.563C142.156 142.526 150.052 137.516 159.868 138.433L159.31 144.407C152.19 143.742 146.326 147.224 142.428 153.668C138.478 160.198 136.646 169.707 138.107 180.37C141.011 201.554 156.908 226.855 193.613 240.138L191.571 245.779ZM159.869 138.434C169.254 139.314 178.636 144.72 186.578 152.506C194.556 160.328 201.323 170.778 205.438 182.242C213.68 205.207 211.378 232.813 185.993 251.156L182.479 246.292C205.099 229.948 207.407 205.49 199.79 184.269C195.975 173.64 189.696 163.966 182.377 156.791C175.023 149.58 166.856 145.115 159.309 144.407L159.869 138.434ZM185.993 251.155C173.06 260.503 156.569 261.895 139.593 257.576C122.621 253.258 104.888 243.182 88.9736 229.122C57.1795 201.031 32.0248 156.455 34.9177 108.275L40.9069 108.635C38.1513 154.528 62.1638 197.429 92.9463 224.626C108.321 238.209 125.227 247.73 141.073 251.762C156.915 255.792 171.417 254.288 182.479 246.293L185.993 251.155ZM344.515 200.243L343.662 174.443L349.659 174.245L350.512 200.044L344.515 200.243ZM346.66 174.344C346.377 177.33 346.377 177.33 346.376 177.33C346.376 177.33 346.376 177.33 346.376 177.33C346.375 177.33 346.374 177.33 346.373 177.33C346.37 177.33 346.366 177.329 346.361 177.329C346.351 177.328 346.336 177.327 346.316 177.325C346.276 177.321 346.217 177.315 346.139 177.308C345.985 177.293 345.758 177.271 345.468 177.243C344.888 177.187 344.054 177.106 343.037 177.005C341.005 176.804 338.243 176.524 335.322 176.214C329.566 175.602 322.953 174.842 320.295 174.307L321.478 168.425C323.797 168.892 330.071 169.621 335.957 170.248C338.859 170.556 341.606 170.834 343.629 171.034C344.64 171.134 345.47 171.215 346.046 171.271C346.334 171.299 346.559 171.321 346.712 171.335C346.788 171.343 346.847 171.348 346.886 171.352C346.905 171.354 346.92 171.355 346.93 171.356C346.935 171.356 346.938 171.357 346.941 171.357C346.942 171.357 346.943 171.357 346.943 171.357C346.944 171.357 346.944 171.357 346.944 171.357C346.944 171.357 346.944 171.357 346.66 174.344Z\"\n            />\n          </svg>\n        </div>\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const features = [\"30-day free trial\", \"Personalized onboarding\", \"Access to all features\"];\n</script>\n","category":"CTA","path":"CTA/BlockCTA3.vue","components":["button","container"]},{"name":"CTA 4","fileName":"BlockCTA4.vue","file":"<template>\n  <!-- \n    Review carousel CTA with Swiper\n    Features: Testimonial slider, decorative SVG, feature list, swiper carousel\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer\n      class=\"relative flex flex-col items-center justify-center gap-y-12 py-10 lg:h-[720px] lg:flex-row\"\n    >\n      <Motion :variants=\"childVariant\" class=\"flex h-full items-center justify-center\">\n        <div>\n          <h3 class=\"text-3xl font-semibold lg:text-5xl\">\n            Join 4,000+ startups growing with {{ COMPANY_NAME }}\n          </h3>\n          <ul class=\"mt-8 flex flex-col gap-5 text-muted-foreground\">\n            <Motion\n              v-for=\"(feature, idx) in features\"\n              :key=\"idx\"\n              :variants=\"childVariant\"\n              class=\"flex gap-3 lg:text-lg\"\n            >\n              <Icon name=\"heroicons:check-circle\" class=\"h-6 w-6 shrink-0 text-primary\" />\n              <span>{{ feature }}</span>\n            </Motion>\n          </ul>\n          <Motion\n            :variants=\"childVariant\"\n            class=\"mt-8 flex w-full shrink-0 flex-col-reverse gap-3 md:mt-12 lg:w-auto lg:flex-row\"\n          >\n            <UiButton size=\"lg\" class=\"w-full lg:w-auto\" variant=\"outline\">Learn more</UiButton>\n            <UiButton size=\"lg\" class=\"w-full shrink-0 whitespace-nowrap md:w-auto\">\n              Get started\n              <Icon name=\"lucide:arrow-right\" class=\"ml-2 h-4 w-4\" />\n            </UiButton>\n          </Motion>\n        </div>\n      </Motion>\n\n      <Motion as-child :variants=\"childVariant\">\n        <swiper-container\n          ref=\"containerRef\"\n          :autoplay=\"{ delay: 4000 }\"\n          :speed=\"800\"\n          loop\n          grab-cursor\n          :slides-per-view=\"1\"\n          :breakpoints=\"{\n            640: { slidesPerView: 1.1, spaceBetween: 20, autoplay: { delay: 7000 } },\n          }\"\n          class=\"h-[350px] w-full bg-[url('https://images.unsplash.com/photo-1602345397613-0934a8812d23?q=80&w=1968&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-no-repeat p-2 md:w-[600px] lg:h-full lg:w-1/2 lg:p-8\"\n        >\n          <swiper-slide v-for=\"(item, index) in reviews\" :key=\"index\" class=\"flex items-end\">\n            <div\n              class=\"border border-white/20 bg-white/10 p-4 text-white backdrop-blur-lg lg:px-5 lg:py-6\"\n            >\n              <p class=\"mb-5 text-lg font-semibold lg:mb-8 lg:text-2xl\">{{ item.review }}</p>\n              <div class=\"flex items-center justify-between\">\n                <p class=\"text-xl font-semibold lg:text-2xl\">{{ item.user.name }}</p>\n                <div>\n                  <template v-for=\"s in item.rating\" :key=\"s\">\n                    <Icon name=\"material-symbols:kid-star\" class=\"inline size-5 text-white\" />\n                  </template>\n                </div>\n              </div>\n              <div class=\"mt-2 lg:mt-3\">\n                <p class=\"text-lg\">{{ item.user.position }}</p>\n                <p>{{ item.user.companyName }}</p>\n              </div>\n            </div>\n          </swiper-slide>\n        </swiper-container>\n      </Motion>\n\n      <Motion :variants=\"childVariant\" class=\"absolute right-[50%] bottom-5 hidden lg:block\">\n        <div class=\"h-[300px] w-[300px]\">\n          <svg viewBox=\"0 0 360 342\" class=\"fill-primary\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M342.654 174.227C343.704 172.945 345.594 172.756 346.876 173.806C348.158 174.856 348.346 176.746 347.296 178.028L342.654 174.227ZM159.589 141.42L159.868 138.433L159.869 138.434L159.589 141.42ZM184.236 248.724L182.479 246.293L182.479 246.292L184.236 248.724ZM34.9177 108.275C35.017 106.621 36.4382 105.361 38.0921 105.461C39.746 105.56 41.0062 106.981 40.9069 108.635L34.9177 108.275ZM350.512 200.044C350.567 201.7 349.269 203.087 347.613 203.142C345.957 203.197 344.57 201.899 344.515 200.243L350.512 200.044ZM346.66 174.344L346.944 171.357C348.447 171.5 349.609 172.737 349.659 174.245L346.66 174.344ZM320.295 174.307C318.67 173.981 317.619 172.399 317.945 170.775C318.272 169.15 319.854 168.098 321.478 168.425L320.295 174.307ZM344.975 176.127C347.296 178.028 347.295 178.029 347.294 178.03C347.294 178.031 347.292 178.033 347.29 178.035C347.287 178.039 347.283 178.044 347.278 178.051C347.267 178.064 347.251 178.083 347.231 178.107C347.19 178.156 347.131 178.227 347.054 178.32C346.899 178.505 346.672 178.776 346.373 179.125C345.776 179.824 344.897 180.839 343.754 182.117C341.468 184.673 338.125 188.283 333.881 192.526C325.399 201.004 313.281 212.038 298.76 222.223C269.869 242.488 230.675 259.93 191.571 245.779L193.613 240.138C229.851 253.251 266.849 237.278 295.314 217.311C309.471 207.381 321.322 196.595 329.639 188.282C333.795 184.129 337.06 180.601 339.282 178.117C340.392 176.876 341.241 175.896 341.81 175.23C342.094 174.897 342.308 174.642 342.45 174.473C342.52 174.388 342.573 174.325 342.607 174.284C342.624 174.263 342.637 174.248 342.644 174.238C342.648 174.234 342.651 174.23 342.653 174.228C342.653 174.227 342.654 174.227 342.654 174.226C342.654 174.226 342.654 174.227 344.975 176.127ZM191.571 245.779C152.934 231.798 135.393 204.746 132.163 181.185C130.558 169.476 132.484 158.514 137.294 150.563C142.156 142.526 150.052 137.516 159.868 138.433L159.31 144.407C152.19 143.742 146.326 147.224 142.428 153.668C138.478 160.198 136.646 169.707 138.107 180.37C141.011 201.554 156.908 226.855 193.613 240.138L191.571 245.779ZM159.869 138.434C169.254 139.314 178.636 144.72 186.578 152.506C194.556 160.328 201.323 170.778 205.438 182.242C213.68 205.207 211.378 232.813 185.993 251.156L182.479 246.292C205.099 229.948 207.407 205.49 199.79 184.269C195.975 173.64 189.696 163.966 182.377 156.791C175.023 149.58 166.856 145.115 159.309 144.407L159.869 138.434ZM185.993 251.155C173.06 260.503 156.569 261.895 139.593 257.576C122.621 253.258 104.888 243.182 88.9736 229.122C57.1795 201.031 32.0248 156.455 34.9177 108.275L40.9069 108.635C38.1513 154.528 62.1638 197.429 92.9463 224.626C108.321 238.209 125.227 247.73 141.073 251.762C156.915 255.792 171.417 254.288 182.479 246.293L185.993 251.155ZM344.515 200.243L343.662 174.443L349.659 174.245L350.512 200.044L344.515 200.243ZM346.66 174.344C346.377 177.33 346.377 177.33 346.376 177.33C346.376 177.33 346.376 177.33 346.376 177.33C346.375 177.33 346.374 177.33 346.373 177.33C346.37 177.33 346.366 177.329 346.361 177.329C346.351 177.328 346.336 177.327 346.316 177.325C346.276 177.321 346.217 177.315 346.139 177.308C345.985 177.293 345.758 177.271 345.468 177.243C344.888 177.187 344.054 177.106 343.037 177.005C341.005 176.804 338.243 176.524 335.322 176.214C329.566 175.602 322.953 174.842 320.295 174.307L321.478 168.425C323.797 168.892 330.071 169.621 335.957 170.248C338.859 170.556 341.606 170.834 343.629 171.034C344.64 171.134 345.47 171.215 346.046 171.271C346.334 171.299 346.559 171.321 346.712 171.335C346.788 171.343 346.847 171.348 346.886 171.352C346.905 171.354 346.92 171.355 346.93 171.356C346.935 171.356 346.938 171.357 346.941 171.357C346.942 171.357 346.943 171.357 346.943 171.357C346.944 171.357 346.944 171.357 346.944 171.357C346.944 171.357 346.944 171.357 346.66 174.344Z\"\n            />\n          </svg>\n        </div>\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const features = [\"30-day free trial\", \"Personalized onboarding\", \"Access to all features\"];\n\n  const reviews = [\n    {\n      review: \"This library has made implementing our UI so much easier. It's intuitive and fast!\",\n      rating: 5,\n      user: {\n        name: \"James P.\",\n        position: \"Frontend Developer\",\n        companyName: \"TechLabs\",\n      },\n    },\n    {\n      review:\n        \"I was able to reduce development time by 40% thanks to the prebuilt components. Highly recommend!\",\n      rating: 4,\n      user: {\n        name: \"Sarah T.\",\n        position: \"UI/UX Designer\",\n        companyName: \"Design Studio\",\n      },\n    },\n    {\n      review:\n        \"Great library, but I think the documentation could use more examples for advanced use cases.\",\n      rating: 3,\n      user: {\n        name: \"Tom R.\",\n        position: \"Senior Software Engineer\",\n        companyName: \"CodeWorks\",\n      },\n    },\n    {\n      review:\n        \"A perfect tool for quick prototyping. The flexibility and performance are fantastic!\",\n      rating: 5,\n      user: {\n        name: \"Emily K.\",\n        position: \"Product Manager\",\n        companyName: \"Creative Solutions\",\n      },\n    },\n    {\n      review:\n        \"Good library overall. It could benefit from more integrations with other popular frameworks.\",\n      rating: 4,\n      user: {\n        name: \"Michael B.\",\n        position: \"Full Stack Developer\",\n        companyName: \"Innovative Tech\",\n      },\n    },\n  ];\n</script>\n","category":"CTA","path":"CTA/BlockCTA4.vue","components":["button","container"]},{"name":"CTA 5","fileName":"BlockCTA5.vue","file":"<template>\n  <!-- \n    App download CTA with mockup\n    Features: Mobile app showcase, platform buttons, phone mockup, animations\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.15),\n        },\n      },\n    }\"\n  >\n    <UiContainer\n      class=\"relative flex flex-col items-center justify-between gap-y-12 py-16 lg:h-[720px] lg:flex-row lg:pt-24\"\n    >\n      <Motion :variants=\"childVariant\" class=\"flex h-full items-center justify-center\">\n        <div>\n          <h3 class=\"text-center text-3xl font-semibold lg:text-left lg:text-5xl\">\n            Growth performance tracking made easy\n          </h3>\n          <p class=\"my-5 text-center text-lg text-muted-foreground md:text-xl lg:my-8 lg:text-left\">\n            Start your 30-day free trial today.\n          </p>\n          <div class=\"grid gap-2 md:flex md:justify-center lg:justify-start\">\n            <UiButton variant=\"outline\" class=\"h-11 transition-transform hover:scale-101\">\n              <Icon name=\"mdi:apple\" class=\"h-6 w-6\" />\n              <span>Download for iOS</span>\n            </UiButton>\n            <UiButton variant=\"outline\" class=\"h-11 transition-transform hover:scale-101\">\n              <Icon name=\"ion:logo-google-playstore\" class=\"h-6 w-6\" />\n              <span>Download for Android</span>\n            </UiButton>\n          </div>\n        </div>\n      </Motion>\n\n      <Motion\n        :variants=\"{\n          initial: { opacity: 0, y: 30 },\n          animate: {\n            opacity: 1,\n            y: 0,\n            transition: {\n              type: 'spring',\n              stiffness: 200,\n              damping: 25,\n            },\n          },\n        }\"\n        class=\"mx-auto h-[360px] w-full object-cover object-top sm:w-[400px] lg:h-[640px] lg:w-full lg:object-contain\"\n      >\n        <img\n          src=\"/phone-mockup.png\"\n          alt=\"Mobile phone mockup\"\n          class=\"h-full w-full object-contain transition-transform duration-500 hover:scale-105\"\n        />\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n</script>\n","category":"CTA","path":"CTA/BlockCTA5.vue","components":["button","container"]},{"name":"CTA 6","fileName":"BlockCTA6.vue","file":"<template>\n  <!-- \n    Gradient background CTA with stats\n    Features: Full-width gradient, statistics badges, animated blobs\n  -->\n  <div\n    class=\"relative overflow-hidden bg-linear-to-br from-primary/10 via-background to-primary/5 py-20\"\n  >\n    <!-- Animated background blobs -->\n    <div class=\"absolute inset-0 overflow-hidden\">\n      <Motion\n        :variants=\"{\n          initial: { scale: 0.8, opacity: 0.3 },\n          animate: {\n            scale: [0.8, 1, 0.8],\n            opacity: [0.3, 0.5, 0.3],\n            transition: {\n              duration: 8,\n              repeat: Infinity,\n              ease: 'easeInOut',\n            },\n          },\n        }\"\n        initial=\"initial\"\n        animate=\"animate\"\n        class=\"absolute -top-20 -right-20 h-96 w-96 rounded-full bg-primary/20 blur-3xl\"\n      />\n      <Motion\n        :variants=\"{\n          initial: { scale: 0.8, opacity: 0.3 },\n          animate: {\n            scale: [0.8, 1.2, 0.8],\n            opacity: [0.3, 0.4, 0.3],\n            transition: {\n              duration: 10,\n              repeat: Infinity,\n              ease: 'easeInOut',\n              delay: 2,\n            },\n          },\n        }\"\n        initial=\"initial\"\n        animate=\"animate\"\n        class=\"absolute -bottom-32 -left-32 h-96 w-96 rounded-full bg-primary/15 blur-3xl\"\n      />\n    </div>\n\n    <Motion\n      initial=\"initial\"\n      while-in-view=\"animate\"\n      :in-view-options=\"{ once: true }\"\n      as-child\n      :variants=\"{\n        initial: { opacity: 0 },\n        animate: {\n          opacity: 1,\n          transition: {\n            when: 'beforeChildren',\n            delayChildren: stagger(0.1),\n          },\n        },\n      }\"\n    >\n      <UiContainer class=\"relative z-10 text-center\">\n        <Motion\n          as=\"h2\"\n          :variants=\"childVariant\"\n          class=\"mb-4 text-4xl font-bold lg:mb-6 lg:text-5xl\"\n        >\n          Ready to transform your business?\n        </Motion>\n        <Motion\n          as=\"p\"\n          :variants=\"childVariant\"\n          class=\"mx-auto mb-10 max-w-[700px] text-lg text-muted-foreground lg:text-xl\"\n        >\n          Join thousands of companies already using {{ COMPANY_NAME }} to accelerate growth.\n        </Motion>\n\n        <Motion\n          :variants=\"childVariant\"\n          class=\"mb-12 flex flex-wrap items-center justify-center gap-8\"\n        >\n          <div v-for=\"stat in stats\" :key=\"stat.label\" class=\"text-center\">\n            <div class=\"text-3xl font-bold text-primary lg:text-4xl\">{{ stat.value }}</div>\n            <div class=\"mt-1 text-sm text-muted-foreground\">{{ stat.label }}</div>\n          </div>\n        </Motion>\n\n        <Motion :variants=\"childVariant\" class=\"flex flex-col justify-center gap-3 md:flex-row\">\n          <UiButton size=\"lg\" class=\"w-full md:w-auto\">\n            Start free trial\n            <Icon name=\"lucide:arrow-right\" class=\"ml-2 h-4 w-4\" />\n          </UiButton>\n          <UiButton size=\"lg\" variant=\"outline\" class=\"w-full md:w-auto\"> Schedule demo </UiButton>\n        </Motion>\n      </UiContainer>\n    </Motion>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const stats = [\n    { value: \"50K+\", label: \"Active users\" },\n    { value: \"99.9%\", label: \"Uptime\" },\n    { value: \"4.9/5\", label: \"User rating\" },\n    { value: \"24/7\", label: \"Support\" },\n  ];\n</script>\n","category":"CTA","path":"CTA/BlockCTA6.vue","components":["button","container"]},{"name":"CTA 7","fileName":"BlockCTA7.vue","file":"<template>\n  <!-- \n    Newsletter signup CTA\n    Features: Email input with inline button, badge, animated entrance\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.15),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"py-16 text-center lg:py-24\">\n      <Motion as-child :variants=\"childVariant\">\n        <UiBadge variant=\"outline\" class=\"mb-4\">Newsletter</UiBadge>\n      </Motion>\n      <Motion\n        as=\"h3\"\n        :variants=\"childVariant\"\n        class=\"mb-4 text-3xl font-semibold md:mb-5 md:text-4xl\"\n      >\n        Stay up to date\n      </Motion>\n      <Motion\n        as=\"p\"\n        :variants=\"childVariant\"\n        class=\"mx-auto mb-8 max-w-[600px] text-lg text-muted-foreground md:text-xl\"\n      >\n        Subscribe to our newsletter to get the latest news and updates.\n      </Motion>\n      <Motion :variants=\"childVariant\" class=\"mx-auto max-w-[500px]\">\n        <form class=\"flex flex-col gap-3 md:flex-row\" @submit.prevent=\"handleSubmit\">\n          <UiInput\n            v-model=\"email\"\n            type=\"email\"\n            placeholder=\"Enter your email\"\n            required\n            class=\"flex-1\"\n          />\n          <UiButton type=\"submit\" class=\"md:w-auto\">\n            Subscribe\n            <Icon name=\"lucide:send\" class=\"ml-2 h-4 w-4\" />\n          </UiButton>\n        </form>\n        <p class=\"mt-3 text-sm text-muted-foreground\">\n          We care about your data. Read our\n          <a href=\"#\" class=\"underline hover:text-primary\">Privacy Policy</a>.\n        </p>\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n  import { ref } from \"vue\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const email = ref(\"\");\n\n  const handleSubmit = () => {\n    useSonner.success(\"Subscribed!\", {\n      description: \"You've been added to our newsletter.\",\n    });\n    email.value = \"\";\n  };\n</script>\n","category":"CTA","path":"CTA/BlockCTA7.vue","components":["badge","button","container","input"]},{"name":"CTA 8","fileName":"BlockCTA8.vue","file":"<template>\n  <!-- \n    Card-based CTA with features\n    Features: Centered card design, feature grid, icon badges, shadow effects\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <Motion as-child :variants=\"childVariant\">\n        <UiCard class=\"mx-auto max-w-[900px] p-8 shadow-xl lg:p-12\">\n          <div class=\"text-center\">\n            <h3 class=\"mb-4 text-3xl font-semibold lg:mb-6 lg:text-4xl\">\n              Everything you need to succeed\n            </h3>\n            <p class=\"mx-auto mb-10 max-w-[600px] text-lg text-muted-foreground lg:text-xl\">\n              All the tools and features you need in one powerful platform.\n            </p>\n          </div>\n\n          <div class=\"mb-10 grid gap-6 md:grid-cols-3\">\n            <Motion\n              v-for=\"feature in features\"\n              :key=\"feature.title\"\n              :variants=\"childVariant\"\n              class=\"group text-center\"\n            >\n              <div\n                class=\"mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 transition-colors group-hover:bg-primary/20\"\n              >\n                <Icon :name=\"feature.icon\" class=\"h-6 w-6 text-primary\" />\n              </div>\n              <h4 class=\"mb-2 font-semibold\">{{ feature.title }}</h4>\n              <p class=\"text-sm text-muted-foreground\">{{ feature.description }}</p>\n            </Motion>\n          </div>\n\n          <div class=\"flex flex-col justify-center gap-3 md:flex-row\">\n            <UiButton size=\"lg\" class=\"w-full md:w-auto\">\n              Get started free\n              <Icon name=\"lucide:arrow-right\" class=\"ml-2 h-4 w-4\" />\n            </UiButton>\n            <UiButton size=\"lg\" variant=\"outline\" class=\"w-full md:w-auto\"> View pricing </UiButton>\n          </div>\n        </UiCard>\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const features = [\n    {\n      title: \"Easy Setup\",\n      description: \"Get started in minutes with our simple onboarding\",\n      icon: \"lucide:zap\",\n    },\n    {\n      title: \"Secure\",\n      description: \"Enterprise-grade security for your peace of mind\",\n      icon: \"lucide:shield-check\",\n    },\n    {\n      title: \"24/7 Support\",\n      description: \"Our team is here to help whenever you need\",\n      icon: \"lucide:headphones\",\n    },\n  ];\n</script>\n","category":"CTA","path":"CTA/BlockCTA8.vue","components":["button","card","container"]},{"name":"CTA 9","fileName":"BlockCTA9.vue","file":"<template>\n  <!-- \n    Testimonial slider CTA with Swiper\n    Features: Customer quotes carousel, avatar images, auto-play, rating stars\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.15),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <div class=\"text-center\">\n        <Motion\n          as=\"h3\"\n          :variants=\"childVariant\"\n          class=\"mb-4 text-3xl font-semibold md:mb-5 md:text-4xl\"\n        >\n          Loved by teams worldwide\n        </Motion>\n        <Motion\n          as=\"p\"\n          :variants=\"childVariant\"\n          class=\"mx-auto mb-12 max-w-[700px] text-lg text-muted-foreground md:text-xl\"\n        >\n          See what our customers have to say about their experience.\n        </Motion>\n      </div>\n\n      <Motion :variants=\"childVariant\" as-child>\n        <div class=\"mx-auto max-w-[800px]\">\n          <swiper-container\n            :autoplay=\"{ delay: 5000 }\"\n            :speed=\"600\"\n            loop\n            grab-cursor\n            :slides-per-view=\"1\"\n            :space-between=\"20\"\n            class=\"pb-12\"\n          >\n            <swiper-slide v-for=\"(testimonial, index) in testimonials\" :key=\"index\">\n              <UiCard class=\"p-8 text-center\">\n                <div class=\"mb-6 flex justify-center\">\n                  <template v-for=\"star in 5\" :key=\"star\">\n                    <Icon\n                      name=\"material-symbols:star\"\n                      :class=\"[\n                        'h-5 w-5',\n                        star <= testimonial.rating ? 'text-yellow-500' : 'text-gray-300',\n                      ]\"\n                    />\n                  </template>\n                </div>\n                <p class=\"mb-6 text-lg text-muted-foreground italic lg:text-xl\">\n                  \"{{ testimonial.quote }}\"\n                </p>\n                <div class=\"flex items-center justify-center gap-3\">\n                  <UiAvatar>\n                    <UiAvatarImage :src=\"testimonial.avatar\" :alt=\"testimonial.name\" />\n                    <UiAvatarFallback>{{ testimonial.initials }}</UiAvatarFallback>\n                  </UiAvatar>\n                  <div class=\"text-left\">\n                    <p class=\"font-semibold\">{{ testimonial.name }}</p>\n                    <p class=\"text-sm text-muted-foreground\">\n                      {{ testimonial.role }} at {{ testimonial.company }}\n                    </p>\n                  </div>\n                </div>\n              </UiCard>\n            </swiper-slide>\n          </swiper-container>\n        </div>\n      </Motion>\n\n      <Motion :variants=\"childVariant\" class=\"mt-12 flex justify-center\">\n        <UiButton size=\"lg\">\n          Join {{ stats.users }}+ happy customers\n          <Icon name=\"lucide:arrow-right\" class=\"ml-2 h-4 w-4\" />\n        </UiButton>\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const stats = {\n    users: \"10,000\",\n  };\n\n  const testimonials = [\n    {\n      quote:\n        \"This platform has completely transformed how we work. The efficiency gains are remarkable.\",\n      name: \"Sarah Johnson\",\n      role: \"CEO\",\n      company: \"TechCorp\",\n      rating: 5,\n      avatar: \"https://i.pravatar.cc/150?img=1\",\n      initials: \"SJ\",\n    },\n    {\n      quote: \"Best investment we've made this year. The ROI was evident within the first month.\",\n      name: \"Michael Chen\",\n      role: \"CTO\",\n      company: \"InnovateLabs\",\n      rating: 5,\n      avatar: \"https://i.pravatar.cc/150?img=13\",\n      initials: \"MC\",\n    },\n    {\n      quote: \"Outstanding support team and amazing product features. Couldn't ask for more.\",\n      name: \"Emily Rodriguez\",\n      role: \"Product Manager\",\n      company: \"StartupHub\",\n      rating: 5,\n      avatar: \"https://i.pravatar.cc/150?img=5\",\n      initials: \"ER\",\n    },\n  ];\n</script>\n","category":"CTA","path":"CTA/BlockCTA9.vue","components":["avatar","avatarfallback","avatarimage","button","card","container"]},{"name":"Dashboards 1","fileName":"BlockDashboards1.vue","file":"<template>\n  <div\n    class=\"min-h-screen bg-background text-foreground [--color-primary:#8b5cf6] [--primary:#8b5cf6] [--radius:12px] [--ring:#8b5cf6]\"\n  >\n    <!-- Top navigation -->\n    <Motion\n      as=\"header\"\n      :initial=\"{ opacity: 0, y: -16 }\"\n      :animate=\"{ opacity: 1, y: 0 }\"\n      :transition=\"{ duration: 0.4, ease: 'easeOut' }\"\n      class=\"sticky top-0 z-10 border-b border-border/70 bg-background/85 backdrop-blur-md\"\n    >\n      <UiContainer class=\"flex min-h-[4.5rem] items-center justify-between gap-4\">\n        <div class=\"flex items-center gap-6\">\n          <div class=\"flex items-center gap-3\">\n            <div\n              class=\"flex size-10 items-center justify-center rounded-xl border border-border/70 bg-muted shadow-xs\"\n            >\n              <div\n                class=\"size-5 rounded-full bg-[radial-gradient(circle_at_35%_35%,rgba(255,255,255,0.95),rgba(255,255,255,0.2)_32%,transparent_34%),linear-gradient(135deg,var(--color-primary),color-mix(in_oklab,var(--color-primary)_40%,white))]\"\n              />\n            </div>\n            <div class=\"flex items-center gap-2 text-lg font-semibold tracking-tight\">\n              <span>UI Thing</span>\n            </div>\n          </div>\n\n          <!-- Mobile nav popover -->\n          <UiPopover class=\"lg:hidden\">\n            <UiPopoverTrigger as-child>\n              <UiButton class=\"lg:hidden\" variant=\"ghost\" size=\"icon-sm\">\n                <Icon name=\"lucide:menu\" class=\"size-4\" />\n              </UiButton>\n            </UiPopoverTrigger>\n            <UiPopoverContent align=\"start\" class=\"w-48 p-1\">\n              <UiButton\n                v-for=\"item in navigationItems\"\n                :key=\"item.label\"\n                variant=\"ghost\"\n                size=\"sm\"\n                class=\"w-full justify-start\"\n                :class=\"\n                  item.active\n                    ? 'bg-muted text-foreground shadow-xs hover:bg-muted'\n                    : 'text-muted-foreground'\n                \"\n              >\n                {{ item.label }}\n              </UiButton>\n            </UiPopoverContent>\n          </UiPopover>\n\n          <!-- Desktop nav -->\n          <nav class=\"hidden items-center gap-1 lg:flex\">\n            <UiButton\n              v-for=\"item in navigationItems\"\n              :key=\"item.label\"\n              variant=\"ghost\"\n              size=\"sm\"\n              :class=\"\n                item.active\n                  ? 'bg-muted text-foreground shadow-xs hover:bg-muted'\n                  : 'text-muted-foreground'\n              \"\n            >\n              {{ item.label }}\n            </UiButton>\n          </nav>\n        </div>\n\n        <div class=\"flex items-center gap-2\">\n          <UiButton variant=\"outline\" size=\"sm\" class=\"hidden sm:inline-flex\">\n            <Icon name=\"lucide:sparkles\" class=\"size-4\" />\n            Upgrade now\n          </UiButton>\n          <UiDropdownMenu>\n            <UiDropdownMenuTrigger as-child>\n              <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full\">\n                <Icon name=\"lucide:settings-2\" class=\"size-4 text-muted-foreground\" />\n              </UiButton>\n            </UiDropdownMenuTrigger>\n            <UiDropdownMenuContent align=\"start\" side=\"left\" class=\"w-64\">\n              <UiDropdownMenuLabel>Dashboard settings</UiDropdownMenuLabel>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuCheckboxItem v-model=\"compactMetrics\" title=\"Compact KPI cards\" />\n              <UiDropdownMenuCheckboxItem v-model=\"emailAlerts\" title=\"Email performance alerts\" />\n              <UiDropdownMenuCheckboxItem\n                v-model=\"autoRefresh\"\n                title=\"Auto-refresh every 5 minutes\"\n              />\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuItem icon=\"lucide:sliders-horizontal\" title=\"Manage filters\" />\n              <UiDropdownMenuItem icon=\"lucide:users\" title=\"Team permissions\" />\n              <UiDropdownMenuItem icon=\"lucide:keyboard\" title=\"Keyboard shortcuts\" shortcut=\"⌘/\" />\n            </UiDropdownMenuContent>\n          </UiDropdownMenu>\n          <UiDropdownMenu>\n            <UiDropdownMenuTrigger as-child>\n              <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full\">\n                <Icon name=\"lucide:bell\" class=\"size-4 text-muted-foreground\" />\n              </UiButton>\n            </UiDropdownMenuTrigger>\n            <UiDropdownMenuContent align=\"start\" side=\"left\" class=\"w-80\">\n              <UiDropdownMenuLabel class=\"flex items-center justify-between\">\n                <span>Notifications</span>\n                <UiBadge variant=\"secondary\" size=\"sm\">3 new</UiBadge>\n              </UiDropdownMenuLabel>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuItem icon=\"lucide:shopping-cart\" title=\"New order from Sienna Hewitt\">\n                <template #shortcut>2m ago</template>\n              </UiDropdownMenuItem>\n              <UiDropdownMenuItem icon=\"lucide:triangle-alert\" title=\"Refund requested for #26672\">\n                <template #shortcut>18m ago</template>\n              </UiDropdownMenuItem>\n              <UiDropdownMenuItem\n                icon=\"lucide:chart-column-big\"\n                title=\"Sales report is ready to review\"\n              >\n                <template #shortcut>1h ago</template>\n              </UiDropdownMenuItem>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuItem icon=\"lucide:badge-check\" title=\"Mark all as read\" />\n            </UiDropdownMenuContent>\n          </UiDropdownMenu>\n          <UiDropdownMenu>\n            <UiDropdownMenuTrigger>\n              <UiAvatar\n                :src=\"currentUser.avatar\"\n                :alt=\"currentUser.name\"\n                :fallback=\"currentUser.fallback\"\n              />\n            </UiDropdownMenuTrigger>\n            <UiDropdownMenuContent align=\"start\" side=\"left\" class=\"w-52\">\n              <UiDropdownMenuLabel>\n                <div class=\"flex flex-col\">\n                  <p class=\"text-sm font-medium\">{{ currentUser.name }}</p>\n                  <p class=\"text-xs text-muted-foreground\">{{ currentUser.email }}</p>\n                </div>\n              </UiDropdownMenuLabel>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuGroup>\n                <UiDropdownMenuItem icon=\"lucide:user\" title=\"Profile\" />\n                <UiDropdownMenuItem icon=\"lucide:settings\" title=\"Settings\" />\n                <UiDropdownMenuItem icon=\"lucide:credit-card\" title=\"Billing\" />\n              </UiDropdownMenuGroup>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuItem variant=\"destructive\" icon=\"lucide:log-out\" title=\"Sign out\" />\n            </UiDropdownMenuContent>\n          </UiDropdownMenu>\n        </div>\n      </UiContainer>\n    </Motion>\n\n    <UiContainer class=\"space-y-8 py-8 md:space-y-10 md:py-10\">\n      <!-- Welcome header -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 16 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.15, ease: 'easeOut' }\"\n        class=\"flex flex-col gap-4 md:flex-row md:items-start md:justify-between\"\n      >\n        <div class=\"flex items-center gap-4\">\n          <UiAvatar\n            :src=\"currentUser.avatar\"\n            :alt=\"currentUser.name\"\n            :fallback=\"currentUser.fallback\"\n            class=\"size-14\"\n          />\n          <div>\n            <h1 class=\"text-3xl font-semibold tracking-tight md:text-[2rem]\">\n              Welcome back, {{ currentUser.firstName }}!\n            </h1>\n\n            <p class=\"mt-1 text-lg text-muted-foreground\">\n              <ClientOnly>\n                {{ useDateFormat(new Date(), \"DD MMMM, YYYY\").value }}\n              </ClientOnly>\n            </p>\n          </div>\n        </div>\n        <div class=\"w-full md:w-[380px]\">\n          <UiVeeInput icon=\"lucide:search\" placeholder=\"Search dashboard...\" />\n        </div>\n      </Motion>\n\n      <!-- Range and date filters -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 16 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.25, ease: 'easeOut' }\"\n        class=\"flex flex-col gap-4 md:flex-row md:items-center md:justify-between\"\n      >\n        <UiTabs v-model=\"activeRange\">\n          <UiTabsList class=\"border border-border/70 bg-muted/30\">\n            <template v-for=\"item in ranges\" :key=\"item\">\n              <UiTabsTrigger :value=\"item\">{{ item }}</UiTabsTrigger>\n            </template>\n          </UiTabsList>\n        </UiTabs>\n        <UiDatepicker v-model.range=\"dateRange\" :columns=\"2\">\n          <template #default=\"{ togglePopover }\">\n            <UiButton\n              variant=\"outline\"\n              class=\"justify-start self-start text-left xl:self-auto\"\n              @click=\"togglePopover\"\n            >\n              <Icon name=\"lucide:calendar-days\" class=\"size-4\" />\n              {{ useDateFormat(dateRange.start, \"MMM DD, YYYY\").value }} -\n              {{ useDateFormat(dateRange.end, \"MMM DD, YYYY\").value }}\n            </UiButton>\n          </template>\n        </UiDatepicker>\n      </Motion>\n\n      <UiGradientDivider />\n\n      <!-- KPI cards -->\n      <Motion\n        as=\"section\"\n        :variants=\"kpiContainerVariant\"\n        initial=\"initial\"\n        animate=\"animate\"\n        class=\"grid gap-5 lg:grid-cols-3\"\n      >\n        <Motion\n          v-for=\"metric in metrics\"\n          :key=\"metric.label\"\n          as-child\n          :variants=\"kpiCardVariant\"\n          class=\"relative overflow-hidden rounded-xl border bg-card text-card-foreground shadow-sm\"\n        >\n          <UiCard>\n            <div\n              :class=\"[\n                'absolute inset-y-0 left-0 w-1',\n                metric.trend === 'up'\n                  ? 'bg-primary'\n                  : metric.trend === 'down'\n                    ? 'bg-red-500'\n                    : 'bg-primary',\n              ]\"\n            />\n            <UiCardContent class=\"pl-8\">\n              <div class=\"flex items-start justify-between\">\n                <div class=\"flex-1 space-y-1\">\n                  <p class=\"text-sm font-medium text-muted-foreground\">{{ metric.label }}</p>\n                  <div class=\"flex items-baseline gap-2\">\n                    <h3 class=\"text-2xl font-bold tracking-tight\">{{ metric.value }}</h3>\n                    <span\n                      :class=\"[\n                        'text-sm font-medium',\n                        metric.trend === 'up'\n                          ? 'text-green-600 dark:text-green-500'\n                          : metric.trend === 'down'\n                            ? 'text-red-600 dark:text-red-500'\n                            : 'text-muted-foreground',\n                      ]\"\n                    >\n                      {{ metric.change }}\n                    </span>\n                  </div>\n                  <p class=\"text-xs text-muted-foreground\">{{ metric.description }}</p>\n                </div>\n                <Icon :name=\"metric.icon\" class=\"size-8 text-muted-foreground/50\" />\n              </div>\n              <div class=\"mt-4 flex items-center gap-4 text-xs\">\n                <div class=\"flex items-center gap-1\">\n                  <div class=\"size-2 rounded-full bg-primary\" />\n                  <span class=\"text-muted-foreground\">Current: {{ metric.current }}</span>\n                </div>\n                <div class=\"flex items-center gap-1\">\n                  <div class=\"size-2 rounded-full bg-muted\" />\n                  <span class=\"text-muted-foreground\">Previous: {{ metric.previous }}</span>\n                </div>\n              </div>\n            </UiCardContent>\n          </UiCard>\n        </Motion>\n      </Motion>\n\n      <!-- Sales performance chart -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 16 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.45, ease: 'easeOut' }\"\n      >\n        <UiCard class=\"gap-0 overflow-hidden border-border/70 py-0 shadow-xs\">\n          <UiCardHeader class=\"border-b border-border/60 pt-4 pb-3!\">\n            <UiCardTitle class=\"text-base font-semibold\">Sales</UiCardTitle>\n            <UiCardDescription>\n              Total revenue generated in the selected date range, compared with the previous period.\n            </UiCardDescription>\n          </UiCardHeader>\n\n          <UiCardContent class=\"space-y-8 py-6\">\n            <div class=\"flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between\">\n              <div>\n                <p class=\"text-3xl font-semibold tracking-tight lg:text-5xl\">$8,422.60</p>\n                <p class=\"mt-3 flex items-center gap-2 lg:text-lg\">\n                  <span class=\"inline-flex items-center gap-1 font-medium text-emerald-600\">\n                    <Icon name=\"lucide:arrow-up\" class=\"size-4\" />\n                    3.2%\n                  </span>\n                  <span class=\"text-muted-foreground\">vs last 30 days</span>\n                </p>\n              </div>\n\n              <UiTabs default-value=\"30 days\">\n                <UiTabsList class=\"border border-border/70 bg-muted/30\">\n                  <UiTabsTrigger v-for=\"range in chartRanges\" :key=\"range\" :value=\"range\">\n                    {{ range }}\n                  </UiTabsTrigger>\n                </UiTabsList>\n              </UiTabs>\n            </div>\n\n            <div class=\"h-[360px] overflow-hidden rounded-2xl bg-muted/20 p-2\">\n              <UiApexchart\n                type=\"area\"\n                height=\"100%\"\n                :series=\"salesChartSeries\"\n                :options=\"salesChartOptions\"\n              />\n            </div>\n          </UiCardContent>\n        </UiCard>\n      </Motion>\n\n      <!-- Orders table -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 16 }\"\n        :while-in-view=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.1, ease: 'easeOut' }\"\n      >\n        <UiCard class=\"gap-0 overflow-hidden border-border/70 py-0 shadow-xs\">\n          <UiCardHeader class=\"border-b border-border/60 py-4 pb-3!\">\n            <UiCardTitle class=\"text-base font-semibold\">Orders</UiCardTitle>\n            <UiCardDescription>\n              Recent orders placed in the selected date range, compared with the previous period.\n            </UiCardDescription>\n          </UiCardHeader>\n\n          <UiCardContent class=\"space-y-6 py-6\">\n            <!-- Orders summary and status tabs -->\n            <div class=\"flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between\">\n              <div>\n                <p class=\"text-3xl font-semibold tracking-tight lg:text-5xl\">\n                  {{ filteredOrders.length }}\n                </p>\n                <p class=\"mt-3 flex items-center gap-2 lg:text-lg\">\n                  <span class=\"inline-flex items-center gap-1 font-medium text-emerald-600\">\n                    <Icon name=\"lucide:arrow-up\" class=\"size-4\" />\n                    8.6%\n                  </span>\n                  <span class=\"text-muted-foreground\">vs last 30 days</span>\n                </p>\n              </div>\n\n              <UiTabs v-model=\"activeOrderTab\">\n                <UiTabsList class=\"border border-border/70 bg-muted/30\">\n                  <UiTabsTrigger v-for=\"tab in orderTabs\" :key=\"tab\" :value=\"tab\">\n                    {{ tab }}\n                  </UiTabsTrigger>\n                </UiTabsList>\n              </UiTabs>\n            </div>\n          </UiCardContent>\n\n          <!-- Orders data grid -->\n          <div class=\"border-t border-border/60\">\n            <UiTanStackTable\n              :data=\"filteredOrders\"\n              :columns=\"orderColumns\"\n              :show-rows-per-page=\"false\"\n              :show-page-info=\"false\"\n              :show-pagination=\"false\"\n              :show-selected-count=\"false\"\n              :show-footer=\"true\"\n              :loading=\"ordersPending\"\n              :table-options=\"{ enableRowSelection: true }\"\n            >\n              <template #select-header=\"{ table }\">\n                <UiCheckbox\n                  aria-label=\"Select all orders\"\n                  :model-value=\"table.getIsAllPageRowsSelected()\"\n                  @update:model-value=\"table.toggleAllPageRowsSelected(!!$event)\"\n                />\n              </template>\n\n              <template #select-cell=\"{ row }\">\n                <UiCheckbox\n                  :aria-label=\"`Select order ${row.original.id}`\"\n                  :model-value=\"row.getIsSelected()\"\n                  @update:model-value=\"row.toggleSelected(!!$event)\"\n                />\n              </template>\n\n              <template #status-cell=\"{ row }\">\n                <UiBadge\n                  variant=\"outline\"\n                  size=\"sm\"\n                  class=\"h-7 gap-1 rounded-full px-2.5 text-[11px]\"\n                >\n                  <span\n                    :class=\"[\n                      'size-1.5 rounded-full',\n                      row.original.status === 'Paid' ? 'bg-emerald-500' : 'bg-amber-500',\n                    ]\"\n                  />\n                  {{ row.original.status }}\n                </UiBadge>\n              </template>\n\n              <template #rating-cell=\"{ row }\">\n                <UiRating\n                  :model-value=\"row.original.rating\"\n                  size=\"sm\"\n                  filled-icon-class-name=\"fill-amber-400 text-amber-400\"\n                />\n              </template>\n\n              <template #customer-cell=\"{ row }\">\n                <UiAvatarLabelGroup\n                  :src=\"row.original.avatar\"\n                  :alt=\"row.original.customer\"\n                  :fallback=\"row.original.initials\"\n                  :title=\"row.original.customer\"\n                  :subtitle=\"row.original.email\"\n                  size=\"sm\"\n                />\n              </template>\n\n              <template #actions-cell=\"{ row }\">\n                <UiDropdownMenu>\n                  <UiDropdownMenuTrigger as-child>\n                    <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full\">\n                      <Icon name=\"lucide:ellipsis-vertical\" class=\"size-4 text-muted-foreground\" />\n                    </UiButton>\n                  </UiDropdownMenuTrigger>\n                  <UiDropdownMenuContent align=\"end\" class=\"min-w-44\">\n                    <UiDropdownMenuItem\n                      icon=\"lucide:eye\"\n                      title=\"View order\"\n                      @select=\"openOrderSheet(row.original)\"\n                    />\n                    <UiDropdownMenuItem icon=\"lucide:receipt-text\" title=\"Download invoice\" />\n                    <UiDropdownMenuSeparator />\n                    <UiDropdownMenuItem\n                      icon=\"lucide:rotate-ccw\"\n                      title=\"Refund order\"\n                      :disabled=\"row.original.status !== 'Paid'\"\n                      @select=\"openRefundDialog(row.original)\"\n                    />\n                  </UiDropdownMenuContent>\n                </UiDropdownMenu>\n              </template>\n\n              <template #footer=\"{ table }\">\n                <div\n                  class=\"flex w-full flex-col gap-4 border-t border-border/60 px-6 py-4 text-sm font-medium text-muted-foreground sm:flex-row sm:items-center sm:justify-between\"\n                >\n                  <p>\n                    Page {{ table.getState().pagination.pageIndex + 1 }} of\n                    {{ table.getPageCount() }}\n                  </p>\n                  <div class=\"flex items-center gap-3\">\n                    <UiButton\n                      variant=\"outline\"\n                      size=\"sm\"\n                      :disabled=\"!table.getCanPreviousPage()\"\n                      @click=\"table.previousPage()\"\n                    >\n                      Previous\n                    </UiButton>\n                    <UiButton\n                      variant=\"outline\"\n                      size=\"sm\"\n                      :disabled=\"!table.getCanNextPage()\"\n                      @click=\"table.nextPage()\"\n                    >\n                      Next\n                    </UiButton>\n                  </div>\n                </div>\n              </template>\n            </UiTanStackTable>\n          </div>\n        </UiCard>\n      </Motion>\n\n      <!-- Refund confirmation dialog -->\n      <UiAlertDialog v-model:open=\"showRefundDialog\">\n        <UiAlertDialogContent class=\"max-w-md\">\n          <UiAlertDialogHeader>\n            <UiAlertDialogTitle>Refund this order?</UiAlertDialogTitle>\n            <UiAlertDialogDescription>\n              <template v-if=\"refundOrder\">\n                This will start a refund for order #{{ refundOrder.id }} placed by\n                {{ refundOrder.customer }}. Confirm to continue.\n              </template>\n              <template v-else>Confirm to continue with the selected refund request.</template>\n            </UiAlertDialogDescription>\n          </UiAlertDialogHeader>\n          <UiAlertDialogFooter>\n            <UiAlertDialogCancel>Keep order</UiAlertDialogCancel>\n            <UiAlertDialogAction variant=\"destructive\" @click=\"confirmRefund\">\n              Confirm refund\n            </UiAlertDialogAction>\n          </UiAlertDialogFooter>\n        </UiAlertDialogContent>\n      </UiAlertDialog>\n\n      <!-- Order details sheet -->\n      <UiSheet v-model:open=\"showOrderSheet\">\n        <UiSheetContent side=\"right\" translucent variant=\"floating\" class=\"w-[90%] sm:max-w-xl\">\n          <UiSheetHeader>\n            <UiSheetTitle>Order details</UiSheetTitle>\n            <UiSheetDescription>\n              Review the selected order, customer information, and fulfillment summary.\n            </UiSheetDescription>\n          </UiSheetHeader>\n\n          <div v-if=\"selectedOrder\" class=\"space-y-6 overflow-y-auto p-6\">\n            <UiCard class=\"border-border/70 shadow-xs\">\n              <UiCardContent class=\"space-y-5\">\n                <div class=\"flex items-start justify-between gap-4\">\n                  <div>\n                    <p class=\"text-sm font-medium text-muted-foreground\">Order number</p>\n                    <p class=\"mt-1 text-2xl font-semibold tracking-tight\">\n                      #{{ selectedOrder.id }}\n                    </p>\n                  </div>\n                  <UiBadge\n                    variant=\"outline\"\n                    size=\"sm\"\n                    class=\"h-7 gap-1 rounded-full px-2.5 text-[11px]\"\n                  >\n                    <span\n                      :class=\"[\n                        'size-1.5 rounded-full',\n                        selectedOrder.status === 'Paid' ? 'bg-emerald-500' : 'bg-amber-500',\n                      ]\"\n                    />\n                    {{ selectedOrder.status }}\n                  </UiBadge>\n                </div>\n\n                <UiAvatarLabelGroup\n                  :src=\"selectedOrder.avatar\"\n                  :alt=\"selectedOrder.customer\"\n                  :fallback=\"selectedOrder.initials\"\n                  :title=\"selectedOrder.customer\"\n                  :subtitle=\"selectedOrder.email\"\n                />\n\n                <div class=\"grid gap-4 sm:grid-cols-2\">\n                  <div class=\"rounded-xl border border-border/70 bg-muted/20 p-4\">\n                    <p class=\"text-xs font-medium tracking-wide text-muted-foreground uppercase\">\n                      Amount\n                    </p>\n                    <p class=\"mt-2 text-xl font-semibold\">{{ selectedOrder.amount }}</p>\n                  </div>\n                  <div class=\"rounded-xl border border-border/70 bg-muted/20 p-4\">\n                    <p class=\"text-xs font-medium tracking-wide text-muted-foreground uppercase\">\n                      Rating\n                    </p>\n                    <UiRating\n                      :model-value=\"selectedOrder.rating\"\n                      class=\"mt-2\"\n                      filled-icon-class-name=\"fill-amber-400 text-amber-400\"\n                    />\n                  </div>\n                </div>\n              </UiCardContent>\n            </UiCard>\n\n            <UiCard class=\"border-border/70 shadow-xs\">\n              <UiCardContent class=\"grid gap-4 sm:grid-cols-2\">\n                <div class=\"space-y-1.5\">\n                  <p class=\"text-sm font-medium text-muted-foreground\">Placed on</p>\n                  <p class=\"font-medium\">{{ selectedOrder.date }}</p>\n                </div>\n                <div class=\"space-y-1.5\">\n                  <p class=\"text-sm font-medium text-muted-foreground\">Payment method</p>\n                  <p class=\"font-medium\">Visa ending in {{ selectedOrder.id.slice(-4) }}</p>\n                </div>\n                <div class=\"space-y-1.5\">\n                  <p class=\"text-sm font-medium text-muted-foreground\">Fulfillment</p>\n                  <p class=\"font-medium\">\n                    {{ selectedOrder.status === \"Paid\" ? \"Ready to ship\" : \"Refund pending\" }}\n                  </p>\n                </div>\n                <div class=\"space-y-1.5\">\n                  <p class=\"text-sm font-medium text-muted-foreground\">Source</p>\n                  <p class=\"font-medium\">Online store</p>\n                </div>\n              </UiCardContent>\n            </UiCard>\n\n            <div class=\"rounded-2xl border border-dashed border-border/70 bg-muted/20 p-4\">\n              <p class=\"text-sm font-medium\">Internal note</p>\n              <p class=\"mt-2 text-sm leading-6 text-muted-foreground\">\n                Customer activity and payment details look healthy. Consider following up with a\n                shipping update if the order remains in this state for more than 24 hours.\n              </p>\n            </div>\n          </div>\n          <UiSheetX />\n        </UiSheetContent>\n      </UiSheet>\n    </UiContainer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { faker } from \"@faker-js/faker\";\n  import type { ColumnDef } from \"@tanstack/vue-table\";\n  import type { ApexOptions } from \"apexcharts\";\n  import dayjs from \"dayjs\";\n  import { Motion } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const kpiContainerVariant: MotionProps[\"variants\"] = {\n    initial: {},\n    animate: { transition: { staggerChildren: 0.08, delayChildren: 0.35 } },\n  };\n\n  const kpiCardVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 16 },\n    animate: { opacity: 1, y: 0, transition: { duration: 0.4, ease: \"easeOut\" } },\n  };\n\n  type Metric = {\n    label: string;\n    value: string;\n    change: string;\n    trend: \"up\" | \"down\" | \"neutral\";\n    description: string;\n    icon: string;\n    current: string;\n    previous: string;\n  };\n\n  type Order = {\n    id: string;\n    date: string;\n    status: \"Paid\" | \"Refunded\";\n    amount: string;\n    rating: number;\n    customer: string;\n    email: string;\n    initials: string;\n    avatar?: string;\n  };\n\n  const currentUser = {\n    name: \"Behon Baker\",\n    firstName: \"Behon\",\n    email: \"behon.baker@yahoo.com\",\n    avatar: \"https://behonbaker.com/icon.png\",\n    fallback: \"BB\",\n  };\n\n  const navigationItems = [\n    { label: \"Home\", active: false },\n    { label: \"Dashboard\", active: true },\n    { label: \"Projects\", active: false },\n    { label: \"Tasks\", active: false },\n    { label: \"Reporting\", active: false },\n    { label: \"Users\", active: false },\n  ];\n\n  const ranges = [\"Custom\", \"12 months\", \"30 days\", \"7 days\", \"24 hours\"];\n  const activeRange = ref(\"12 months\");\n  const compactMetrics = ref(true);\n  const emailAlerts = ref(true);\n  const autoRefresh = ref(false);\n  const dateRange = useState(() => ({\n    start: dayjs().toDate(),\n    end: dayjs().add(7, \"day\").toDate(),\n  }));\n\n  const metrics: Metric[] = [\n    {\n      label: \"Sales\",\n      value: \"$2,114.40\",\n      change: \"+2.4%\",\n      trend: \"up\",\n      description: \"Based on the last 30 days of completed purchases\",\n      icon: \"lucide:badge-dollar-sign\",\n      current: \"$2,114.40\",\n      previous: \"$2,064.80\",\n    },\n    {\n      label: \"Orders\",\n      value: \"24\",\n      change: \"+8.6%\",\n      trend: \"up\",\n      description: \"Confirmed orders compared with the previous period\",\n      icon: \"lucide:shopping-bag\",\n      current: \"24\",\n      previous: \"22\",\n    },\n    {\n      label: \"Average order value\",\n      value: \"$88.10\",\n      change: \"+6.0%\",\n      trend: \"up\",\n      description: \"Higher basket size driven by bundled product sales\",\n      icon: \"lucide:chart-no-axes-column-increasing\",\n      current: \"$88.10\",\n      previous: \"$83.12\",\n    },\n  ];\n\n  const chartRanges = [\"12 months\", \"30 days\", \"7 days\", \"24 hours\"];\n  const chartLabels = [\n    \"2\",\n    \"4\",\n    \"6\",\n    \"8\",\n    \"10\",\n    \"12\",\n    \"14\",\n    \"16\",\n    \"18\",\n    \"20\",\n    \"22\",\n    \"24\",\n    \"26\",\n    \"28\",\n    \"30\",\n  ];\n\n  const salesChartSeries = ref<ApexOptions[\"series\"]>([\n    {\n      name: \"Sales\",\n      data: [18, 21, 30, 34, 28, 31, 29, 24, 34, 32, 38, 41, 47, 45, 54],\n    },\n    {\n      name: \"Orders\",\n      data: [12, 15, 19, 23, 20, 18, 21, 17, 26, 24, 31, 29, 36, 33, 39],\n    },\n    {\n      name: \"Revenue target\",\n      data: [8, 10, 12, 16, 14, 13, 15, 14, 18, 19, 22, 24, 27, 28, 30],\n    },\n  ]);\n\n  const salesChartOptions = ref<ApexOptions>({\n    chart: {\n      type: \"area\",\n      toolbar: { show: false },\n      zoom: { enabled: false },\n      parentHeightOffset: 0,\n    },\n    colors: [\"#8b5cf6\", \"#06b6d4\", \"#22c55e\"],\n    legend: {\n      show: true,\n      position: \"top\",\n      horizontalAlign: \"right\",\n      fontWeight: 500,\n      labels: {\n        colors: \"var(--color-muted-foreground)\",\n      },\n    },\n    dataLabels: {\n      enabled: false,\n    },\n    fill: {\n      type: \"gradient\",\n      gradient: {\n        shadeIntensity: 1,\n        inverseColors: false,\n        opacityFrom: 0.28,\n        opacityTo: 0.03,\n        stops: [0, 90, 100],\n      },\n    },\n    stroke: {\n      curve: \"smooth\",\n      width: [3, 3, 2.5],\n    },\n    markers: {\n      size: 0,\n      hover: { size: 5 },\n    },\n    tooltip: {\n      shared: true,\n      intersect: false,\n    },\n    grid: {\n      borderColor: \"color-mix(in oklab, var(--color-border) 70%, transparent)\",\n      strokeDashArray: 4,\n      padding: {\n        left: 12,\n        right: 18,\n        top: 10,\n        bottom: 0,\n      },\n    },\n    xaxis: {\n      categories: chartLabels,\n      axisBorder: { show: false },\n      axisTicks: { show: false },\n      tooltip: { enabled: false },\n      labels: {\n        style: {\n          colors: \"var(--color-muted-foreground)\",\n          fontSize: \"12px\",\n          fontFamily: \"inherit\",\n        },\n      },\n    },\n    yaxis: {\n      min: 0,\n      max: 60,\n      tickAmount: 4,\n      labels: {\n        show: false,\n      },\n    },\n  });\n\n  const orderTabs = [\"All orders\", \"Paid\", \"Refunded\"];\n  const activeOrderTab = ref(\"All orders\");\n  const showOrderSheet = ref(false);\n  const selectedOrder = ref<Order | null>(null);\n  const showRefundDialog = ref(false);\n  const refundOrder = ref<Order | null>(null);\n\n  const orderColumns: ColumnDef<Order>[] = [\n    {\n      id: \"select\",\n      header: \"\",\n      enableSorting: false,\n      enableHiding: false,\n      meta: {\n        class: {\n          th: \"w-12\",\n          td: \"w-12\",\n        },\n      },\n    },\n    {\n      accessorKey: \"id\",\n      header: \"Order\",\n      cell: ({ row }) => `#${row.original.id}`,\n    },\n    {\n      accessorKey: \"date\",\n      header: \"Date\",\n    },\n    {\n      id: \"status\",\n      accessorKey: \"status\",\n      header: \"Status\",\n      enableSorting: false,\n    },\n    {\n      accessorKey: \"amount\",\n      header: \"Amount\",\n    },\n    {\n      id: \"rating\",\n      accessorKey: \"rating\",\n      header: \"Rating\",\n      enableSorting: false,\n    },\n    {\n      id: \"customer\",\n      accessorKey: \"customer\",\n      header: \"Customer\",\n      enableSorting: false,\n    },\n    {\n      id: \"actions\",\n      header: \"\",\n      enableSorting: false,\n      enableHiding: false,\n      meta: {\n        class: {\n          th: \"w-12\",\n          td: \"w-12 text-right\",\n        },\n      },\n    },\n  ];\n\n  const currencyFormatter = new Intl.NumberFormat(\"en-US\", {\n    style: \"currency\",\n    currency: \"USD\",\n  });\n\n  const createOrder = (): Order => {\n    const firstName = faker.person.firstName();\n    const lastName = faker.person.lastName();\n\n    return {\n      id: faker.string.numeric(5),\n      date: dayjs(faker.date.between({ from: \"2025-01-01\", to: \"2025-01-31\" })).format(\n        \"MMM DD, YYYY\"\n      ),\n      status: faker.helpers.weightedArrayElement([\n        { value: \"Paid\" as const, weight: 8 },\n        { value: \"Refunded\" as const, weight: 2 },\n      ]),\n      amount: currencyFormatter.format(\n        faker.number.float({ min: 48, max: 240, fractionDigits: 2 })\n      ),\n      rating: faker.number.int({ min: 3, max: 5 }),\n      customer: `${firstName} ${lastName}`,\n      email: faker.internet.email({ firstName, lastName }).toLowerCase(),\n      initials: `${firstName[0]}${lastName[0]}`,\n      avatar: faker.helpers.maybe(() => faker.image.avatar(), { probability: 0.85 }),\n    };\n  };\n\n  const { data: ordersData, pending: ordersPending } = await useAsyncData<Order[]>(\n    \"block-dashboard1-orders\",\n    async () => Array.from({ length: 500 }, createOrder),\n    {\n      default: () => [],\n    }\n  );\n\n  const orders = computed(() => ordersData.value ?? []);\n\n  const filteredOrders = computed(() => {\n    if (activeOrderTab.value === \"All orders\") {\n      return orders.value;\n    }\n\n    return orders.value.filter((order) => order.status === activeOrderTab.value);\n  });\n\n  const openRefundDialog = (order: Order) => {\n    refundOrder.value = order;\n    showRefundDialog.value = true;\n  };\n\n  const openOrderSheet = (order: Order) => {\n    selectedOrder.value = order;\n    showOrderSheet.value = true;\n  };\n\n  const confirmRefund = () => {\n    if (!refundOrder.value) return;\n\n    useSonner.success(\"Refund started\", {\n      description: `Order #${refundOrder.value.id} for ${refundOrder.value.customer} has been queued for refund.`,\n    });\n\n    showRefundDialog.value = false;\n    refundOrder.value = null;\n  };\n</script>\n","category":"Dashboards","path":"Dashboards/BlockDashboards1.vue","components":["alertdialog","alertdialogaction","alertdialogcancel","alertdialogcontent","alertdialogdescription","alertdialogfooter","alertdialogheader","alertdialogtitle","apexchart","avatar","avatarlabelgroup","badge","button","card","cardcontent","carddescription","cardheader","cardtitle","checkbox","container","datepicker","dropdownmenu","dropdownmenucheckboxitem","dropdownmenucontent","dropdownmenugroup","dropdownmenuitem","dropdownmenulabel","dropdownmenuseparator","dropdownmenutrigger","gradientdivider","popover","popovercontent","popovertrigger","rating","sheet","sheetcontent","sheetdescription","sheetheader","sheettitle","sheetx","tabs","tabslist","tabstrigger","tanstacktable","veeinput"]},{"name":"Dashboards 10","fileName":"BlockDashboards10.vue","file":"<template>\n  <div class=\"min-h-screen bg-background text-foreground\">\n    <!-- Invite dialog -->\n    <UiDialog v-model:open=\"inviteOpen\" @update:open=\"onInviteDialogClose\">\n      <UiDialogContent class=\"sm:max-w-md\">\n        <UiDialogHeader>\n          <UiDialogTitle>Invite teammates</UiDialogTitle>\n          <UiDialogDescription>\n            Add up to 4 email addresses. Invites will be sent immediately.\n          </UiDialogDescription>\n        </UiDialogHeader>\n\n        <div class=\"space-y-4 py-1\">\n          <!-- Email chip input area -->\n          <div\n            class=\"min-h-[80px] cursor-text rounded-xl border border-border/70 bg-muted/20 p-3 transition-colors focus-within:border-primary focus-within:ring-1 focus-within:ring-primary\"\n            @click=\"focusInviteInput\"\n          >\n            <div class=\"flex flex-wrap gap-2\">\n              <!-- Email chips -->\n              <span\n                v-for=\"email in inviteEmails\"\n                :key=\"email\"\n                class=\"flex items-center gap-1.5 rounded-full border border-border/70 bg-background px-2.5 py-1 text-xs font-medium text-foreground shadow-xs\"\n              >\n                <span\n                  class=\"flex size-4 items-center justify-center rounded-full bg-linear-to-br from-primary to-primary text-[9px] font-bold text-white\"\n                  >{{ email[0]?.toUpperCase() }}</span\n                >\n                {{ email }}\n                <button\n                  type=\"button\"\n                  class=\"ml-0.5 rounded-full text-muted-foreground transition-colors hover:text-foreground\"\n                  @click.stop=\"removeInviteEmail(email)\"\n                >\n                  <Icon name=\"heroicons:x-mark\" class=\"size-3\" />\n                </button>\n              </span>\n\n              <!-- Input -->\n              <input\n                v-if=\"inviteEmails.length < 4\"\n                ref=\"inviteInputRef\"\n                v-model=\"inviteInputVal\"\n                type=\"email\"\n                placeholder=\"name@company.com\"\n                class=\"min-w-[160px] flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground\"\n                @keydown.enter.prevent=\"addInviteEmail\"\n                @keydown.tab.prevent=\"addInviteEmail\"\n                @keydown.space.prevent=\"addInviteEmail\"\n                @keydown.backspace=\"onInviteBackspace\"\n                @keydown=\"\n                  (e) => {\n                    if (e.key === ',') {\n                      e.preventDefault();\n                      addInviteEmail();\n                    }\n                  }\n                \"\n                @paste.prevent=\"onInvitePaste\"\n                @blur=\"addInviteEmail\"\n              />\n            </div>\n          </div>\n\n          <!-- Slot counter + validation -->\n          <div class=\"flex items-center justify-between text-xs\">\n            <p v-if=\"inviteError\" class=\"text-destructive\">{{ inviteError }}</p>\n            <p v-else class=\"text-muted-foreground\">\n              Press\n              <kbd class=\"rounded border border-border/70 bg-muted px-1 py-0.5 font-mono\">Enter</kbd\n              >,\n              <kbd class=\"rounded border border-border/70 bg-muted px-1 py-0.5 font-mono\">Tab</kbd>,\n              or\n              <kbd class=\"rounded border border-border/70 bg-muted px-1 py-0.5 font-mono\">,</kbd> to\n              add\n            </p>\n            <p\n              class=\"shrink-0 font-medium tabular-nums\"\n              :class=\"\n                inviteEmails.length >= 4\n                  ? 'text-amber-600 dark:text-amber-400'\n                  : 'text-muted-foreground'\n              \"\n            >\n              {{ inviteEmails.length }}/4 added\n            </p>\n          </div>\n\n          <!-- Suggested teammates -->\n          <div v-if=\"inviteEmails.length < 4\" class=\"space-y-1.5\">\n            <p class=\"text-xs font-medium text-muted-foreground\">Suggestions</p>\n            <div class=\"space-y-1\">\n              <button\n                v-for=\"s in inviteSuggestions.filter((s) => !inviteEmails.includes(s.email))\"\n                :key=\"s.email\"\n                type=\"button\"\n                class=\"flex w-full items-center gap-3 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-muted/60\"\n                @click=\"addSuggestedEmail(s.email)\"\n              >\n                <UiAvatar :src=\"s.avatar\" :alt=\"s.name\" :fallback=\"s.name[0]\" class=\"size-7\" />\n                <div class=\"min-w-0 flex-1\">\n                  <p class=\"truncate text-sm font-medium\">{{ s.name }}</p>\n                  <p class=\"truncate text-xs text-muted-foreground\">{{ s.email }}</p>\n                </div>\n                <Icon name=\"heroicons:plus\" class=\"size-4 shrink-0 text-muted-foreground\" />\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <UiDialogFooter>\n          <UiButton variant=\"outline\" @click=\"inviteOpen = false\">Cancel</UiButton>\n          <UiButton :disabled=\"inviteEmails.length === 0\" class=\"gap-2\" @click=\"submitInvites\">\n            <Icon name=\"heroicons:paper-airplane\" class=\"size-4\" />\n            Send\n            {{\n              inviteEmails.length > 0\n                ? `${inviteEmails.length} invite${inviteEmails.length > 1 ? \"s\" : \"\"}`\n                : \"invites\"\n            }}\n          </UiButton>\n        </UiDialogFooter>\n      </UiDialogContent>\n    </UiDialog>\n\n    <!-- Generate chart dialog -->\n    <UiDialog v-model:open=\"genChartOpen\" @update:open=\"onGenChartClose\">\n      <UiDialogContent class=\"sm:max-w-lg\">\n        <UiDialogHeader>\n          <UiDialogTitle>Generate chart</UiDialogTitle>\n          <UiDialogDescription>\n            Configure the parameters below and we'll build your chart.\n          </UiDialogDescription>\n        </UiDialogHeader>\n\n        <div class=\"space-y-5 py-1\">\n          <!-- Chart name -->\n          <div class=\"space-y-1.5\">\n            <label class=\"text-sm font-medium\">Chart name</label>\n            <input\n              v-model=\"genChartName\"\n              type=\"text\"\n              placeholder=\"e.g. Monthly revenue breakdown\"\n              class=\"w-full rounded-lg border border-border/70 bg-muted/20 px-3 py-2 text-sm text-foreground transition-colors outline-none placeholder:text-muted-foreground focus:border-primary focus:ring-1 focus:ring-primary\"\n            />\n          </div>\n\n          <!-- Chart type picker -->\n          <div class=\"space-y-1.5\">\n            <label id=\"chart-type-label\" class=\"text-sm font-medium\">Chart type</label>\n            <UiToggleGroup\n              type=\"single\"\n              :model-value=\"genChartType\"\n              aria-labelledby=\"chart-type-label\"\n              class=\"grid grid-cols-5 gap-2\"\n              @update:model-value=\"\n                (val) => {\n                  if (val) genChartType = val;\n                }\n              \"\n            >\n              <UiToggleGroupItem\n                v-for=\"ct in genChartTypes\"\n                :key=\"ct.value\"\n                :value=\"ct.value\"\n                :aria-label=\"ct.label\"\n                class=\"group h-auto flex-col gap-1.5 rounded-xl border-2 border-border/60 bg-muted/30 p-3 hover:border-border hover:bg-muted/50 data-[state=on]:bg-card data-[state=on]:shadow-sm\"\n                :style=\"genChartType === ct.value ? { borderColor: 'var(--color-primary)' } : {}\"\n              >\n                <span\n                  class=\"flex size-8 items-center justify-center rounded-lg bg-muted text-muted-foreground transition-colors group-hover:bg-muted/80 group-data-[state=on]:text-white\"\n                  :style=\"\n                    genChartType === ct.value ? { backgroundColor: 'var(--color-primary)' } : {}\n                  \"\n                >\n                  <Icon :name=\"ct.icon\" class=\"size-4\" />\n                </span>\n                <span class=\"text-[11px] leading-none font-medium\">{{ ct.label }}</span>\n              </UiToggleGroupItem>\n            </UiToggleGroup>\n          </div>\n\n          <!-- Metric + Date range row -->\n          <div class=\"grid grid-cols-2 gap-3\">\n            <div class=\"space-y-1.5\">\n              <label class=\"text-sm font-medium\">Metric</label>\n              <div class=\"relative\">\n                <select\n                  v-model=\"genChartMetric\"\n                  class=\"w-full appearance-none rounded-lg border border-border/70 bg-muted/20 px-3 py-2 pr-8 text-sm text-foreground transition-colors outline-none focus:border-primary focus:ring-1 focus:ring-primary\"\n                >\n                  <option v-for=\"m in genChartMetrics\" :key=\"m.value\" :value=\"m.value\">\n                    {{ m.label }}\n                  </option>\n                </select>\n                <Icon\n                  name=\"heroicons:chevron-down\"\n                  class=\"pointer-events-none absolute top-2.5 right-2.5 size-4 text-muted-foreground\"\n                />\n              </div>\n            </div>\n\n            <div class=\"space-y-1.5\">\n              <label class=\"text-sm font-medium\">Date range</label>\n              <div class=\"relative\">\n                <select\n                  v-model=\"genChartRange\"\n                  class=\"w-full appearance-none rounded-lg border border-border/70 bg-muted/20 px-3 py-2 pr-8 text-sm text-foreground transition-colors outline-none focus:border-primary focus:ring-1 focus:ring-primary\"\n                >\n                  <option v-for=\"r in genChartRanges\" :key=\"r.value\" :value=\"r.value\">\n                    {{ r.label }}\n                  </option>\n                </select>\n                <Icon\n                  name=\"heroicons:chevron-down\"\n                  class=\"pointer-events-none absolute top-2.5 right-2.5 size-4 text-muted-foreground\"\n                />\n              </div>\n            </div>\n          </div>\n\n          <!-- Compare toggle -->\n          <div\n            class=\"flex items-center justify-between rounded-lg border border-border/70 bg-muted/20 px-3 py-2.5\"\n          >\n            <div>\n              <p class=\"text-sm font-medium\">Compare to previous period</p>\n              <p class=\"text-xs text-muted-foreground\">\n                Overlay the prior period as a reference line\n              </p>\n            </div>\n            <button\n              type=\"button\"\n              role=\"switch\"\n              :aria-checked=\"genChartCompare\"\n              class=\"relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none\"\n              :style=\"{\n                backgroundColor: genChartCompare\n                  ? 'var(--color-primary)'\n                  : 'hsl(var(--muted-foreground) / 0.3)',\n              }\"\n              @click=\"genChartCompare = !genChartCompare\"\n            >\n              <span\n                class=\"pointer-events-none block size-4 rounded-full bg-white shadow-sm transition-transform\"\n                :class=\"genChartCompare ? 'translate-x-4' : 'translate-x-0'\"\n              />\n            </button>\n          </div>\n        </div>\n\n        <UiDialogFooter>\n          <UiButton variant=\"outline\" @click=\"genChartOpen = false\">Cancel</UiButton>\n          <UiButton\n            :disabled=\"!genChartName.trim() || !genChartType\"\n            class=\"gap-2\"\n            @click=\"submitGenChart\"\n          >\n            <Icon name=\"heroicons:sparkles\" class=\"size-4\" />\n            Generate chart\n          </UiButton>\n        </UiDialogFooter>\n      </UiDialogContent>\n    </UiDialog>\n\n    <!-- Export report dialog -->\n    <UiDialog v-model:open=\"exportOpen\">\n      <UiDialogContent class=\"sm:max-w-md\">\n        <UiDialogHeader>\n          <UiDialogTitle>Export report</UiDialogTitle>\n          <UiDialogDescription>\n            Choose a format. A download link will be sent to your email once ready.\n          </UiDialogDescription>\n        </UiDialogHeader>\n\n        <div class=\"grid grid-cols-2 gap-3 py-2\">\n          <button\n            v-for=\"fmt in exportFormats\"\n            :key=\"fmt.value\"\n            type=\"button\"\n            class=\"group relative flex cursor-pointer flex-col gap-3 rounded-xl border-2 p-4 text-left transition-all focus-visible:outline-none\"\n            :class=\"\n              selectedFormat === fmt.value\n                ? 'bg-card shadow-sm'\n                : 'border-border/60 bg-muted/30 hover:border-border hover:bg-muted/50'\n            \"\n            :style=\"selectedFormat === fmt.value ? { borderColor: 'var(--color-primary)' } : {}\"\n            @click=\"selectedFormat = fmt.value\"\n          >\n            <!-- Selection indicator -->\n            <div\n              class=\"absolute top-3 right-3 flex size-4 items-center justify-center rounded-full border-2 transition-all\"\n              :style=\"\n                selectedFormat === fmt.value\n                  ? { borderColor: 'var(--color-primary)', backgroundColor: 'var(--color-primary)' }\n                  : { borderColor: 'hsl(var(--border))' }\n              \"\n            >\n              <Icon\n                v-if=\"selectedFormat === fmt.value\"\n                name=\"heroicons:check\"\n                class=\"size-2.5 text-white\"\n              />\n            </div>\n\n            <!-- Format icon -->\n            <div\n              class=\"flex size-9 items-center justify-center rounded-lg transition-colors\"\n              :class=\"\n                selectedFormat === fmt.value\n                  ? 'text-white'\n                  : 'bg-muted text-muted-foreground group-hover:bg-muted/80'\n              \"\n              :style=\"\n                selectedFormat === fmt.value ? { backgroundColor: 'var(--color-primary)' } : {}\n              \"\n            >\n              <Icon :name=\"fmt.icon\" class=\"size-5\" />\n            </div>\n\n            <div>\n              <p class=\"text-sm leading-none font-semibold\">{{ fmt.label }}</p>\n              <p class=\"mt-1 text-xs text-muted-foreground\">{{ fmt.description }}</p>\n            </div>\n\n            <p class=\"text-xs text-muted-foreground/70\">{{ fmt.size }}</p>\n          </button>\n        </div>\n\n        <UiDialogFooter>\n          <UiButton variant=\"outline\" @click=\"exportOpen = false\">Cancel</UiButton>\n          <UiButton :disabled=\"!selectedFormat\" class=\"gap-2\" @click=\"submitExport\">\n            <Icon name=\"heroicons:arrow-down-tray\" class=\"size-4\" />\n            Export {{ selectedFormat?.toUpperCase() }}\n          </UiButton>\n        </UiDialogFooter>\n      </UiDialogContent>\n    </UiDialog>\n\n    <!-- Command search dialog -->\n    <UiCommandDialog\n      v-model:open=\"searchOpen\"\n      title=\"Search\"\n      description=\"Search across your sales data\"\n    >\n      <UiCommandInput placeholder=\"Search...\" />\n      <UiCommandList>\n        <UiCommandEmpty>No results found.</UiCommandEmpty>\n        <UiCommandGroup heading=\"Quick actions\">\n          <UiCommandItem value=\"Export report\">\n            <Icon name=\"heroicons:arrow-down-tray\" />\n            <span>Export report</span>\n          </UiCommandItem>\n          <UiCommandItem value=\"Invite team member\">\n            <Icon name=\"heroicons:user-plus\" />\n            <span>Invite team member</span>\n          </UiCommandItem>\n        </UiCommandGroup>\n        <UiCommandSeparator />\n        <UiCommandGroup heading=\"Reports\">\n          <UiCommandItem value=\"Sales report\">\n            <Icon name=\"heroicons:chart-bar\" />\n            <span>Sales report</span>\n          </UiCommandItem>\n          <UiCommandItem value=\"Store traffic\">\n            <Icon name=\"heroicons:arrow-trending-up\" />\n            <span>Store traffic</span>\n          </UiCommandItem>\n        </UiCommandGroup>\n      </UiCommandList>\n      <div\n        class=\"flex items-center gap-5 border-t border-border/70 bg-muted/20 px-4 py-2.5 text-xs text-muted-foreground\"\n      >\n        <span class=\"flex items-center gap-1.5\"><UiKbd>↵</UiKbd> to select</span>\n        <span class=\"flex items-center gap-1.5\"><UiKbd>↑↓</UiKbd> to navigate</span>\n        <span class=\"flex items-center gap-1.5\"><UiKbd>ESC</UiKbd> to close</span>\n      </div>\n    </UiCommandDialog>\n\n    <!-- Sticky header -->\n    <Motion\n      as=\"header\"\n      :initial=\"{ opacity: 0, y: -16 }\"\n      :animate=\"{ opacity: 1, y: 0 }\"\n      :transition=\"{ duration: 0.4, ease: 'easeOut' }\"\n      class=\"sticky top-0 z-10 border-b border-border/70 bg-background/85 backdrop-blur-md\"\n    >\n      <UiContainer class=\"flex min-h-[4rem] items-center justify-between gap-4\">\n        <!-- Logo + nav -->\n        <div class=\"flex items-center gap-5\">\n          <div class=\"flex items-center gap-2.5\">\n            <div\n              class=\"flex size-8 items-center justify-center rounded-lg border border-border/70 bg-muted shadow-xs\"\n            >\n              <div\n                class=\"size-4 rounded-full bg-[radial-gradient(circle_at_35%_35%,rgba(255,255,255,0.95),rgba(255,255,255,0.2)_32%,transparent_34%),linear-gradient(135deg,var(--color-primary),color-mix(in_oklab,var(--color-primary)_40%,white))]\"\n              />\n            </div>\n            <span class=\"font-semibold tracking-tight\">UI Thing</span>\n          </div>\n\n          <!-- Mobile nav popover -->\n          <UiPopover class=\"lg:hidden\">\n            <UiPopoverTrigger as-child>\n              <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"lg:hidden\">\n                <Icon name=\"heroicons:bars-3\" class=\"size-5\" />\n              </UiButton>\n            </UiPopoverTrigger>\n            <UiPopoverContent align=\"start\" class=\"w-48 p-1\">\n              <UiButton\n                v-for=\"item in navItems\"\n                :key=\"item.label\"\n                variant=\"ghost\"\n                size=\"sm\"\n                class=\"w-full justify-start\"\n                :class=\"\n                  item.active\n                    ? 'bg-muted text-foreground shadow-xs hover:bg-muted'\n                    : 'text-muted-foreground'\n                \"\n              >\n                {{ item.label }}\n              </UiButton>\n            </UiPopoverContent>\n          </UiPopover>\n\n          <!-- Desktop nav -->\n          <nav class=\"hidden items-center gap-1 lg:flex\">\n            <UiButton\n              v-for=\"item in navItems\"\n              :key=\"item.label\"\n              variant=\"ghost\"\n              size=\"sm\"\n              :class=\"\n                item.active\n                  ? 'bg-muted text-foreground shadow-xs hover:bg-muted'\n                  : 'text-muted-foreground'\n              \"\n            >\n              {{ item.label }}\n            </UiButton>\n          </nav>\n        </div>\n\n        <!-- Right actions -->\n        <div class=\"flex items-center gap-2\">\n          <!-- Upgrade now -->\n          <UiButton size=\"sm\" class=\"hidden gap-1.5 sm:flex\">\n            <Icon name=\"heroicons:bolt\" class=\"size-4\" />\n            Upgrade now\n          </UiButton>\n          <UiButton size=\"icon-sm\" class=\"sm:hidden\">\n            <Icon name=\"heroicons:bolt\" class=\"size-4\" />\n          </UiButton>\n\n          <div class=\"flex items-center gap-1\">\n            <UiTooltip>\n              <UiDropdownMenu>\n                <UiTooltipTrigger as-child>\n                  <UiDropdownMenuTrigger as-child>\n                    <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full\">\n                      <Icon name=\"heroicons:cog-6-tooth\" class=\"size-5 text-muted-foreground\" />\n                    </UiButton>\n                  </UiDropdownMenuTrigger>\n                </UiTooltipTrigger>\n                <UiTooltipContent><p>Settings</p></UiTooltipContent>\n                <UiDropdownMenuContent align=\"end\" class=\"w-52\">\n                  <UiDropdownMenuLabel>Settings</UiDropdownMenuLabel>\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem icon=\"heroicons:user\" title=\"Account settings\" />\n                  <UiDropdownMenuItem icon=\"heroicons:swatch\" title=\"Appearance\" />\n                  <UiDropdownMenuItem icon=\"heroicons:bell\" title=\"Notifications\" />\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem\n                    variant=\"destructive\"\n                    icon=\"heroicons:arrow-right-on-rectangle\"\n                    title=\"Sign out\"\n                  />\n                </UiDropdownMenuContent>\n              </UiDropdownMenu>\n            </UiTooltip>\n\n            <UiTooltip>\n              <UiDropdownMenu>\n                <UiTooltipTrigger as-child>\n                  <UiDropdownMenuTrigger as-child>\n                    <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full\">\n                      <Icon name=\"heroicons:bell\" class=\"size-5 text-muted-foreground\" />\n                    </UiButton>\n                  </UiDropdownMenuTrigger>\n                </UiTooltipTrigger>\n                <UiTooltipContent><p>Notifications</p></UiTooltipContent>\n                <UiDropdownMenuContent align=\"end\" class=\"w-96\">\n                  <UiDropdownMenuLabel class=\"flex items-center justify-between\">\n                    <span>Notifications</span>\n                    <UiBadge variant=\"secondary\" size=\"sm\">3 new</UiBadge>\n                  </UiDropdownMenuLabel>\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem\n                    icon=\"heroicons:shopping-bag\"\n                    title=\"Demi Wikinson purchased Webflow 101\"\n                  >\n                    <template #shortcut>1m ago</template>\n                  </UiDropdownMenuItem>\n                  <UiDropdownMenuItem\n                    icon=\"heroicons:arrow-trending-up\"\n                    title=\"Revenue up 10% today\"\n                  >\n                    <template #shortcut>1h ago</template>\n                  </UiDropdownMenuItem>\n                  <UiDropdownMenuItem icon=\"heroicons:users\" title=\"3 new team invites pending\">\n                    <template #shortcut>3h ago</template>\n                  </UiDropdownMenuItem>\n                </UiDropdownMenuContent>\n              </UiDropdownMenu>\n            </UiTooltip>\n\n            <UiTooltip>\n              <UiDropdownMenu>\n                <UiTooltipTrigger as-child>\n                  <UiDropdownMenuTrigger as-child>\n                    <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full p-0\">\n                      <UiAvatar\n                        src=\"https://i.pravatar.cc/150?img=47\"\n                        alt=\"Olivia Rhye\"\n                        fallback=\"OR\"\n                        class=\"size-8 cursor-pointer\"\n                      />\n                    </UiButton>\n                  </UiDropdownMenuTrigger>\n                </UiTooltipTrigger>\n                <UiTooltipContent><p>Account</p></UiTooltipContent>\n                <UiDropdownMenuContent align=\"end\" class=\"w-52\">\n                  <UiDropdownMenuLabel>\n                    <div class=\"flex flex-col\">\n                      <p class=\"text-sm font-medium\">Olivia Rhye</p>\n                      <p class=\"text-xs text-muted-foreground\">olivia@ui-thing.com</p>\n                    </div>\n                  </UiDropdownMenuLabel>\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem icon=\"heroicons:user\" title=\"Profile\" />\n                  <UiDropdownMenuItem icon=\"heroicons:cog-6-tooth\" title=\"Settings\" />\n                  <UiDropdownMenuItem icon=\"heroicons:credit-card\" title=\"Billing\" />\n                  <UiDropdownMenuItem icon=\"heroicons:users\" title=\"Team\" />\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem\n                    icon=\"heroicons:question-mark-circle\"\n                    title=\"Help & support\"\n                  />\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem\n                    variant=\"destructive\"\n                    icon=\"heroicons:arrow-right-on-rectangle\"\n                    title=\"Sign out\"\n                  />\n                </UiDropdownMenuContent>\n              </UiDropdownMenu>\n            </UiTooltip>\n          </div>\n        </div>\n      </UiContainer>\n    </Motion>\n\n    <!-- Secondary tab nav -->\n    <Motion\n      :initial=\"{ opacity: 0, y: -8 }\"\n      :animate=\"{ opacity: 1, y: 0 }\"\n      :transition=\"{ duration: 0.35, delay: 0.05, ease: 'easeOut' }\"\n      class=\"border-b border-border/70 bg-background\"\n    >\n      <UiContainer class=\"flex items-center justify-between gap-4 py-0\">\n        <!-- Tabs (desktop) -->\n        <div class=\"hidden items-center gap-0.5 overflow-x-auto sm:flex\">\n          <button\n            v-for=\"tab in secondaryTabs\"\n            :key=\"tab.label\"\n            class=\"relative shrink-0 px-3 py-3.5 text-sm font-medium transition-colors\"\n            :class=\"\n              tab.active\n                ? 'text-foreground after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-primary'\n                : 'text-muted-foreground hover:text-foreground'\n            \"\n            @click=\"setActiveTab(tab.label)\"\n          >\n            {{ tab.label }}\n          </button>\n        </div>\n\n        <!-- Mobile tab selector -->\n        <UiPopover class=\"sm:hidden\">\n          <UiPopoverTrigger as-child>\n            <UiButton variant=\"ghost\" size=\"sm\" class=\"gap-1.5 text-sm font-medium sm:hidden\">\n              {{ activeTabLabel }}\n              <Icon name=\"heroicons:chevron-down\" class=\"size-4 text-muted-foreground\" />\n            </UiButton>\n          </UiPopoverTrigger>\n          <UiPopoverContent align=\"start\" class=\"w-52 p-1\">\n            <UiButton\n              v-for=\"tab in secondaryTabs\"\n              :key=\"tab.label\"\n              variant=\"ghost\"\n              size=\"sm\"\n              class=\"w-full justify-start\"\n              :class=\"tab.active ? 'bg-muted font-semibold' : 'text-muted-foreground'\"\n              @click=\"setActiveTab(tab.label)\"\n            >\n              {{ tab.label }}\n            </UiButton>\n          </UiPopoverContent>\n        </UiPopover>\n\n        <!-- ⌘K search -->\n        <UiButton\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"hidden shrink-0 justify-start gap-2 text-muted-foreground sm:flex lg:w-60\"\n          @click=\"searchOpen = true\"\n        >\n          <Icon name=\"heroicons:magnifying-glass\" class=\"size-4\" />\n          <span class=\"text-sm\">Search...</span>\n          <UiKbd class=\"ml-auto\">⌘K</UiKbd>\n        </UiButton>\n      </UiContainer>\n    </Motion>\n\n    <!-- Page content -->\n    <UiContainer class=\"space-y-8 py-8\">\n      <!-- Page header -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 12 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.1, ease: 'easeOut' }\"\n        class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\"\n      >\n        <div>\n          <h1 class=\"text-2xl font-bold tracking-tight\">Sales overview</h1>\n          <p class=\"mt-1 text-sm text-muted-foreground\">Your current sales summary and activity.</p>\n        </div>\n        <div class=\"flex items-center gap-2\">\n          <UiButton variant=\"outline\" size=\"sm\" class=\"gap-2\" @click=\"exportOpen = true\">\n            <Icon name=\"heroicons:arrow-down-tray\" class=\"size-4\" />\n            Export report\n          </UiButton>\n          <UiButton size=\"sm\" class=\"gap-2\" @click=\"inviteOpen = true\">\n            <Icon name=\"heroicons:plus\" class=\"size-4\" />\n            Invite\n          </UiButton>\n        </div>\n      </Motion>\n\n      <!-- View selector row -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 8 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.15, ease: 'easeOut' }\"\n        class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\"\n      >\n        <!-- View tabs -->\n        <UiButtonGroup>\n          <UiButton\n            v-for=\"view in viewTabs\"\n            :key=\"view.value\"\n            variant=\"outline\"\n            size=\"sm\"\n            :class=\"activeView === view.value ? 'bg-muted shadow-xs' : 'text-muted-foreground'\"\n            @click=\"activeView = view.value\"\n          >\n            <span v-if=\"view.dot\" class=\"mr-1.5 size-2 rounded-full bg-emerald-500\" />\n            {{ view.label }}\n          </UiButton>\n          <UiButton variant=\"outline\" size=\"sm\" class=\"text-muted-foreground\">\n            <Icon name=\"heroicons:plus\" class=\"size-4\" />\n          </UiButton>\n        </UiButtonGroup>\n\n        <!-- Date range + filters -->\n        <div class=\"flex items-center gap-2\">\n          <UiButton variant=\"outline\" size=\"sm\" class=\"gap-2 text-sm\">\n            <Icon name=\"heroicons:calendar-days\" class=\"size-4 text-muted-foreground\" />\n            Jan 10, 2025 – Jan 16, 2025\n          </UiButton>\n          <UiButton variant=\"outline\" size=\"sm\" class=\"gap-2\">\n            <Icon name=\"heroicons:adjustments-horizontal\" class=\"size-4\" />\n            Filters\n          </UiButton>\n        </div>\n      </Motion>\n\n      <!-- Main two-column layout -->\n      <div class=\"grid gap-6 lg:grid-cols-[1fr_280px]\">\n        <!-- Left: KPI cards + charts -->\n        <Motion\n          :initial=\"{ opacity: 0, y: 12 }\"\n          :animate=\"{ opacity: 1, y: 0 }\"\n          :transition=\"{ duration: 0.4, delay: 0.2, ease: 'easeOut' }\"\n          class=\"space-y-5\"\n        >\n          <!-- KPI cards -->\n          <div class=\"grid gap-4 sm:grid-cols-3\">\n            <div\n              v-for=\"kpi in kpiCards\"\n              :key=\"kpi.label\"\n              class=\"rounded-xl border border-border/70 bg-card p-5 shadow-xs\"\n            >\n              <div class=\"flex items-center justify-between\">\n                <p class=\"text-sm text-muted-foreground\">{{ kpi.label }}</p>\n                <UiTooltip>\n                  <UiDropdownMenu>\n                    <UiTooltipTrigger as-child>\n                      <UiDropdownMenuTrigger as-child>\n                        <UiButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          class=\"-mr-1 text-muted-foreground\"\n                        >\n                          <Icon name=\"heroicons:ellipsis-vertical\" class=\"size-4\" />\n                        </UiButton>\n                      </UiDropdownMenuTrigger>\n                    </UiTooltipTrigger>\n                    <UiTooltipContent><p>Options</p></UiTooltipContent>\n                    <UiDropdownMenuContent align=\"end\">\n                      <UiDropdownMenuItem icon=\"heroicons:arrow-path\" title=\"Refresh\" />\n                      <UiDropdownMenuItem icon=\"heroicons:arrow-down-tray\" title=\"Export\" />\n                    </UiDropdownMenuContent>\n                  </UiDropdownMenu>\n                </UiTooltip>\n              </div>\n\n              <div class=\"mt-3 flex items-end justify-between gap-2\">\n                <p class=\"text-2xl font-bold tracking-tight\">{{ kpi.value }}</p>\n                <span\n                  class=\"mb-0.5 flex shrink-0 items-center gap-0.5 rounded-md border px-1.5 py-0.5 text-xs font-semibold\"\n                  :class=\"\n                    kpi.positive\n                      ? 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950/50 dark:text-emerald-400'\n                      : 'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-950/50 dark:text-red-400'\n                  \"\n                >\n                  <Icon\n                    :name=\"kpi.positive ? 'heroicons:arrow-up' : 'heroicons:arrow-down'\"\n                    class=\"size-3\"\n                  />\n                  {{ kpi.trend }}\n                </span>\n              </div>\n\n              <div class=\"mt-4 border-t border-border/60 pt-3\">\n                <button\n                  class=\"text-sm font-medium transition-colors\"\n                  :style=\"{ color: 'var(--color-primary)' }\"\n                >\n                  View report\n                </button>\n              </div>\n            </div>\n          </div>\n\n          <!-- Sales report card -->\n          <div class=\"rounded-xl border border-border/70 bg-card shadow-xs\">\n            <div class=\"flex items-center justify-between px-5 pt-5\">\n              <h2 class=\"text-base font-semibold\">Sales report</h2>\n              <UiButton variant=\"outline\" size=\"sm\">View report</UiButton>\n            </div>\n\n            <!-- Time tabs -->\n            <div class=\"flex items-center gap-0 px-5 pt-3\">\n              <button\n                v-for=\"t in salesTimeTabs\"\n                :key=\"t\"\n                class=\"relative mr-4 pb-2 text-sm font-medium transition-colors\"\n                :class=\"\n                  activeSalesTab === t\n                    ? 'text-foreground after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-primary'\n                    : 'text-muted-foreground hover:text-foreground'\n                \"\n                @click=\"activeSalesTab = t\"\n              >\n                {{ t }}\n              </button>\n            </div>\n            <div class=\"border-t border-border/60\" />\n\n            <UiApexchart type=\"area\" height=\"220\" :series=\"salesSeries\" :options=\"salesOptions\" />\n          </div>\n\n          <!-- Store traffic card -->\n          <div class=\"rounded-xl border border-border/70 bg-card shadow-xs\">\n            <div class=\"flex items-center justify-between px-5 pt-5\">\n              <h2 class=\"text-base font-semibold\">Store traffic</h2>\n              <UiButton variant=\"outline\" size=\"sm\">View report</UiButton>\n            </div>\n\n            <!-- Time tabs -->\n            <div class=\"flex items-center gap-0 px-5 pt-3\">\n              <button\n                v-for=\"t in trafficTimeTabs\"\n                :key=\"t\"\n                class=\"relative mr-4 pb-2 text-sm font-medium transition-colors\"\n                :class=\"\n                  activeTrafficTab === t\n                    ? 'text-foreground after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-primary'\n                    : 'text-muted-foreground hover:text-foreground'\n                \"\n                @click=\"activeTrafficTab = t\"\n              >\n                {{ t }}\n              </button>\n            </div>\n            <div class=\"border-t border-border/60\" />\n\n            <UiApexchart\n              type=\"bar\"\n              height=\"220\"\n              :series=\"trafficSeries\"\n              :options=\"trafficOptions\"\n            />\n          </div>\n\n          <!-- Add button -->\n          <div class=\"flex justify-center border-t border-border/60 pt-2\">\n            <UiButton variant=\"outline\" size=\"sm\" class=\"gap-2\" @click=\"genChartOpen = true\">\n              <Icon name=\"heroicons:plus\" class=\"size-4\" />\n              Add\n            </UiButton>\n          </div>\n        </Motion>\n\n        <!-- Right: Activity feed -->\n        <Motion\n          :initial=\"{ opacity: 0, x: 12 }\"\n          :animate=\"{ opacity: 1, x: 0 }\"\n          :transition=\"{ duration: 0.4, delay: 0.25, ease: 'easeOut' }\"\n          class=\"space-y-3\"\n        >\n          <div class=\"flex items-center justify-between\">\n            <h2 class=\"text-base font-semibold\">Activity</h2>\n            <button\n              class=\"text-sm font-medium transition-colors\"\n              :style=\"{ color: 'var(--color-primary)' }\"\n            >\n              View all\n            </button>\n          </div>\n\n          <div class=\"space-y-4\">\n            <div v-for=\"(item, i) in activityFeed\" :key=\"i\" class=\"flex items-start gap-3\">\n              <div class=\"relative shrink-0\">\n                <UiAvatar\n                  :src=\"item.avatar\"\n                  :alt=\"item.name\"\n                  :fallback=\"item.name[0]\"\n                  class=\"size-8\"\n                />\n                <span\n                  v-if=\"item.online\"\n                  class=\"absolute right-0 bottom-0 size-2.5 rounded-full border-2 border-background bg-emerald-500\"\n                />\n              </div>\n              <div class=\"min-w-0 text-sm leading-snug\">\n                <span class=\"font-medium\">{{ item.name }}</span>\n                <span class=\"text-muted-foreground\"> Purchased </span>\n                <button\n                  class=\"font-medium transition-colors\"\n                  :style=\"{ color: 'var(--color-primary)' }\"\n                >\n                  {{ item.product }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </Motion>\n      </div>\n    </UiContainer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import type { ApexOptions } from \"apexcharts\";\n  import { Motion } from \"motion-v\";\n\n  // ─── Navigation ────────────────────────────────────────────────────────────────\n  const navItems = [\n    { label: \"Home\", active: false },\n    { label: \"Dashboard\", active: true },\n    { label: \"Projects\", active: false },\n    { label: \"Tasks\", active: false },\n    { label: \"Reporting\", active: false },\n    { label: \"Users\", active: false },\n  ];\n\n  // ─── Secondary tabs ─────────────────────────────────────────────────────────────\n  const secondaryTabs = ref([\n    { label: \"Overview\", active: true },\n    { label: \"Notifications\", active: false },\n    { label: \"Analytics\", active: false },\n    { label: \"Saved reports\", active: false },\n    { label: \"Scheduled reports\", active: false },\n    { label: \"User reports\", active: false },\n  ]);\n\n  const activeTabLabel = computed(\n    () => secondaryTabs.value.find((t) => t.active)?.label ?? \"Overview\"\n  );\n\n  const setActiveTab = (label: string) => {\n    secondaryTabs.value = secondaryTabs.value.map((t) => ({ ...t, active: t.label === label }));\n  };\n\n  // ─── Invite dialog ─────────────────────────────────────────────────────────────\n  const inviteOpen = ref(false);\n  const inviteEmails = ref<string[]>([]);\n  const inviteInputVal = ref(\"\");\n  const inviteError = ref(\"\");\n  const inviteInputRef = ref<HTMLInputElement | null>(null);\n\n  const inviteSuggestions = [\n    { name: \"Aliah Lane\", email: \"aliah@ui-thing.com\", avatar: \"https://i.pravatar.cc/150?img=2\" },\n    { name: \"Drew Cano\", email: \"drew@ui-thing.com\", avatar: \"https://i.pravatar.cc/150?img=8\" },\n    { name: \"Lana Steiner\", email: \"lana@ui-thing.com\", avatar: \"https://i.pravatar.cc/150?img=3\" },\n  ];\n\n  const isValidEmail = (val: string) => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(val.trim());\n\n  const focusInviteInput = () => inviteInputRef.value?.focus();\n\n  const addInviteEmail = () => {\n    const val = inviteInputVal.value.trim().replace(/,$/, \"\");\n    if (!val) return;\n    if (!isValidEmail(val)) {\n      inviteError.value = \"Please enter a valid email address.\";\n      return;\n    }\n    if (inviteEmails.value.includes(val)) {\n      inviteError.value = \"This email has already been added.\";\n      return;\n    }\n    if (inviteEmails.value.length >= 4) {\n      inviteError.value = \"You can invite up to 4 people at a time.\";\n      return;\n    }\n    inviteEmails.value.push(val);\n    inviteInputVal.value = \"\";\n    inviteError.value = \"\";\n  };\n\n  const removeInviteEmail = (email: string) => {\n    inviteEmails.value = inviteEmails.value.filter((e) => e !== email);\n    inviteError.value = \"\";\n  };\n\n  const onInviteBackspace = () => {\n    if (!inviteInputVal.value && inviteEmails.value.length > 0) {\n      inviteEmails.value.pop();\n    }\n  };\n\n  const onInvitePaste = (e: ClipboardEvent) => {\n    const text = e.clipboardData?.getData(\"text\") ?? \"\";\n    const pasted = text.split(/[\\s,;]+/).filter(Boolean);\n    for (const p of pasted) {\n      if (inviteEmails.value.length >= 4) break;\n      if (isValidEmail(p) && !inviteEmails.value.includes(p)) {\n        inviteEmails.value.push(p);\n      }\n    }\n    inviteInputVal.value = \"\";\n    inviteError.value = \"\";\n  };\n\n  const addSuggestedEmail = (email: string) => {\n    if (inviteEmails.value.length >= 4 || inviteEmails.value.includes(email)) return;\n    inviteEmails.value.push(email);\n    inviteError.value = \"\";\n  };\n\n  const submitInvites = () => {\n    if (inviteEmails.value.length === 0) return;\n    const count = inviteEmails.value.length;\n    inviteOpen.value = false;\n    useSonner(`${count} invite${count > 1 ? \"s\" : \"\"} sent`, {\n      description: `Invitations have been sent to ${inviteEmails.value.join(\", \")}.`,\n    });\n    inviteEmails.value = [];\n    inviteInputVal.value = \"\";\n    inviteError.value = \"\";\n  };\n\n  const onInviteDialogClose = (open: boolean) => {\n    if (!open) {\n      inviteInputVal.value = \"\";\n      inviteError.value = \"\";\n    }\n  };\n\n  // ─── Export dialog ─────────────────────────────────────────────────────────────\n  const exportOpen = ref(false);\n  const selectedFormat = ref<string | null>(null);\n\n  const exportFormats = [\n    {\n      value: \"csv\",\n      label: \"CSV\",\n      icon: \"heroicons:table-cells\",\n      description: \"Spreadsheet-compatible rows\",\n      size: \"~12 KB\",\n    },\n    {\n      value: \"pdf\",\n      label: \"PDF\",\n      icon: \"heroicons:document-text\",\n      description: \"Formatted, print-ready report\",\n      size: \"~340 KB\",\n    },\n    {\n      value: \"xlsx\",\n      label: \"Excel\",\n      icon: \"heroicons:document-chart-bar\",\n      description: \"Full workbook with charts\",\n      size: \"~85 KB\",\n    },\n    {\n      value: \"json\",\n      label: \"JSON\",\n      icon: \"heroicons:code-bracket\",\n      description: \"Raw data for developers\",\n      size: \"~28 KB\",\n    },\n  ];\n\n  const submitExport = () => {\n    if (!selectedFormat.value) return;\n    exportOpen.value = false;\n    useSonner(\"Export requested\", {\n      description: `A download link for your ${selectedFormat.value.toUpperCase()} report will be sent to olivia@ui-thing.com.`,\n    });\n    selectedFormat.value = null;\n  };\n\n  // ─── Search dialog ─────────────────────────────────────────────────────────────\n  const searchOpen = ref(false);\n  const handleKeydown = (e: KeyboardEvent) => {\n    if (e.key === \"Escape\") searchOpen.value = false;\n    if ((e.metaKey || e.ctrlKey) && e.key === \"k\") {\n      e.preventDefault();\n      searchOpen.value = true;\n    }\n  };\n  onMounted(() => document.addEventListener(\"keydown\", handleKeydown));\n  onUnmounted(() => document.removeEventListener(\"keydown\", handleKeydown));\n\n  // ─── View selector ──────────────────────────────────────────────────────────────\n  const viewTabs = [\n    { label: \"Default\", value: \"default\", dot: false },\n    { label: \"Saved view\", value: \"saved\", dot: true },\n    { label: \"SDR view\", value: \"sdr\", dot: false },\n  ];\n  const activeView = ref(\"saved\");\n\n  // ─── KPI cards ─────────────────────────────────────────────────────────────────\n  const kpiCards = [\n    { label: \"Today's revenue\", value: \"$1,280\", trend: \"10%\", positive: true },\n    { label: \"Today's orders\", value: \"14\", trend: \"12%\", positive: true },\n    { label: \"Avg. order value\", value: \"$91.42\", trend: \"2%\", positive: false },\n  ];\n\n  // ─── Sales report chart ────────────────────────────────────────────────────────\n  const salesTimeTabs = [\"12 months\", \"30 days\", \"7 days\", \"24 hours\"];\n  const activeSalesTab = ref(\"12 months\");\n\n  const months = [\n    \"Jan\",\n    \"Feb\",\n    \"Mar\",\n    \"Apr\",\n    \"May\",\n    \"Jun\",\n    \"Jul\",\n    \"Aug\",\n    \"Sep\",\n    \"Oct\",\n    \"Nov\",\n    \"Dec\",\n  ];\n\n  const salesSeries = [\n    {\n      name: \"Revenue\",\n      data: [42, 55, 50, 65, 72, 80, 88, 85, 92, 96, 105, 118],\n    },\n    {\n      name: \"Target\",\n      data: [30, 38, 36, 45, 52, 58, 62, 65, 70, 74, 80, 88],\n    },\n  ];\n\n  const salesOptions: ApexOptions = {\n    chart: {\n      type: \"area\",\n      background: \"transparent\",\n      parentHeightOffset: 0,\n      toolbar: { show: false },\n    },\n    colors: [\"var(--color-primary)\", \"color-mix(in oklab, var(--color-primary) 40%, white)\"],\n    stroke: { width: [2, 2], curve: \"smooth\" },\n    fill: {\n      type: [\"gradient\", \"gradient\"],\n      gradient: {\n        type: \"vertical\",\n        shadeIntensity: 0,\n        opacityFrom: 0.12,\n        opacityTo: 0,\n        stops: [0, 100],\n      },\n    },\n    dataLabels: { enabled: false },\n    markers: { size: 0, hover: { size: 5 } },\n    grid: {\n      strokeDashArray: 4,\n      xaxis: { lines: { show: false } },\n      yaxis: { lines: { show: true } },\n      padding: { left: 8, right: 8 },\n    },\n    xaxis: {\n      categories: months,\n      axisBorder: { show: false },\n      axisTicks: { show: false },\n    },\n    yaxis: { show: false },\n    legend: { show: false },\n    tooltip: { y: { formatter: (v: number) => `$${v}k` } },\n  };\n\n  // ─── Store traffic chart ───────────────────────────────────────────────────────\n  const trafficTimeTabs = [\"12 months\", \"30 days\", \"7 days\", \"24 hours\"];\n  const activeTrafficTab = ref(\"12 months\");\n\n  const trafficSeries = [\n    {\n      name: \"Visitors\",\n      data: [4200, 7800, 3600, 5800, 4900, 6200, 7100, 5400, 6800, 7400, 8200, 6900],\n    },\n    {\n      name: \"Target\",\n      data: [2800, 3200, 2400, 3600, 3200, 4100, 3800, 2900, 4200, 3800, 4600, 3200],\n    },\n  ];\n\n  const trafficOptions: ApexOptions = {\n    chart: {\n      type: \"bar\",\n      stacked: true,\n      background: \"transparent\",\n      parentHeightOffset: 0,\n      toolbar: { show: false },\n    },\n    colors: [\"var(--color-primary)\", \"#e2e8f0\"],\n    plotOptions: {\n      bar: { borderRadius: 3, columnWidth: \"55%\", borderRadiusApplication: \"end\" },\n    },\n    dataLabels: { enabled: false },\n    xaxis: {\n      categories: months,\n      axisBorder: { show: false },\n      axisTicks: { show: false },\n    },\n    yaxis: { show: false },\n    grid: {\n      strokeDashArray: 4,\n      xaxis: { lines: { show: false } },\n      yaxis: { lines: { show: false } },\n      padding: { left: 8, right: 8 },\n    },\n    legend: { show: false },\n    tooltip: { y: { formatter: (v: number) => `${v.toLocaleString()} visitors` } },\n  };\n\n  // ─── Activity feed ─────────────────────────────────────────────────────────────\n  const activityFeed = [\n    {\n      name: \"Demi Wikinson\",\n      product: \"Webflow 101\",\n      avatar: \"https://i.pravatar.cc/150?img=1\",\n      online: true,\n    },\n    {\n      name: \"Aliah Lane\",\n      product: \"SEO Masterclass\",\n      avatar: \"https://i.pravatar.cc/150?img=2\",\n      online: false,\n    },\n    {\n      name: \"Lana Steiner\",\n      product: \"Figma Mockups\",\n      avatar: \"https://i.pravatar.cc/150?img=3\",\n      online: false,\n    },\n    {\n      name: \"Candice Wu\",\n      product: \"Webflow 101\",\n      avatar: \"https://i.pravatar.cc/150?img=4\",\n      online: false,\n    },\n    {\n      name: \"Ava Wright\",\n      product: \"SEO Masterclass\",\n      avatar: \"https://i.pravatar.cc/150?img=5\",\n      online: false,\n    },\n    {\n      name: \"Koray Okumus\",\n      product: \"SEO Masterclass\",\n      avatar: \"https://i.pravatar.cc/150?img=6\",\n      online: false,\n    },\n    {\n      name: \"Andi Lane\",\n      product: \"The Ultimate Guide to Backlinks\",\n      avatar: \"https://i.pravatar.cc/150?img=7\",\n      online: false,\n    },\n    {\n      name: \"Drew Cano\",\n      product: \"The Figma Dashboard Bundle\",\n      avatar: \"https://i.pravatar.cc/150?img=8\",\n      online: false,\n    },\n    {\n      name: \"Zahir Mays\",\n      product: \"The Figma Dashboard Bundle\",\n      avatar: \"https://i.pravatar.cc/150?img=9\",\n      online: false,\n    },\n    {\n      name: \"Rene Wells\",\n      product: \"The Design Handbook\",\n      avatar: \"https://i.pravatar.cc/150?img=10\",\n      online: false,\n    },\n    {\n      name: \"Joshua Wilson\",\n      product: \"Phone 13 Mockups\",\n      avatar: \"https://i.pravatar.cc/150?img=11\",\n      online: false,\n    },\n    {\n      name: \"Lori Bryson\",\n      product: \"SEO Masterclass\",\n      avatar: \"https://i.pravatar.cc/150?img=12\",\n      online: false,\n    },\n    {\n      name: \"Loki Bright\",\n      product: \"Figma Mockups\",\n      avatar: \"https://i.pravatar.cc/150?img=13\",\n      online: false,\n    },\n    {\n      name: \"Anita Cruz\",\n      product: \"The Ultimate Guide to Backlinks\",\n      avatar: \"https://i.pravatar.cc/150?img=14\",\n      online: false,\n    },\n  ];\n\n  // ─── Generate chart dialog ──────────────────────────────────────────────────\n  const genChartOpen = ref(false);\n  const genChartName = ref(\"\");\n  const genChartType = ref(\"area\");\n  const genChartMetric = ref(\"revenue\");\n  const genChartRange = ref(\"30d\");\n  const genChartCompare = ref(false);\n\n  const genChartTypes = [\n    { value: \"area\", label: \"Area\", icon: \"heroicons:presentation-chart-line\" },\n    { value: \"bar\", label: \"Bar\", icon: \"heroicons:chart-bar\" },\n    { value: \"line\", label: \"Line\", icon: \"heroicons:arrow-trending-up\" },\n    { value: \"donut\", label: \"Donut\", icon: \"heroicons:chart-pie\" },\n    { value: \"scatter\", label: \"Scatter\", icon: \"heroicons:squares-2x2\" },\n  ];\n\n  const genChartMetrics = [\n    { value: \"revenue\", label: \"Revenue\" },\n    { value: \"orders\", label: \"Orders\" },\n    { value: \"aov\", label: \"Avg. order value\" },\n    { value: \"conversion\", label: \"Conversion rate\" },\n    { value: \"acquisition\", label: \"Customer acquisition\" },\n    { value: \"refunds\", label: \"Refunds\" },\n  ];\n\n  const genChartRanges = [\n    { value: \"7d\", label: \"Last 7 days\" },\n    { value: \"30d\", label: \"Last 30 days\" },\n    { value: \"90d\", label: \"Last 3 months\" },\n    { value: \"12m\", label: \"Last 12 months\" },\n    { value: \"ytd\", label: \"Year to date\" },\n  ];\n\n  const submitGenChart = () => {\n    if (!genChartName.value.trim() || !genChartType.value) return;\n    const label =\n      genChartTypes.find((t) => t.value === genChartType.value)?.label ?? genChartType.value;\n    genChartOpen.value = false;\n    useSonner(\"Generating chart…\", {\n      description: `Your \"${genChartName.value.trim()}\" ${label.toLowerCase()} chart is being generated.`,\n    });\n    genChartName.value = \"\";\n    genChartType.value = \"area\";\n    genChartMetric.value = \"revenue\";\n    genChartRange.value = \"30d\";\n    genChartCompare.value = false;\n  };\n\n  const onGenChartClose = (open: boolean) => {\n    if (!open) {\n      genChartName.value = \"\";\n      genChartType.value = \"area\";\n      genChartMetric.value = \"revenue\";\n      genChartRange.value = \"30d\";\n      genChartCompare.value = false;\n    }\n  };\n</script>\n","category":"Dashboards","path":"Dashboards/BlockDashboards10.vue","components":["apexchart","avatar","badge","button","buttongroup","commanddialog","commandempty","commandgroup","commandinput","commanditem","commandlist","commandseparator","container","dialog","dialogcontent","dialogdescription","dialogfooter","dialogheader","dialogtitle","dropdownmenu","dropdownmenucontent","dropdownmenuitem","dropdownmenulabel","dropdownmenuseparator","dropdownmenutrigger","kbd","popover","popovercontent","popovertrigger","togglegroup","togglegroupitem","tooltip","tooltipcontent","tooltiptrigger"]},{"name":"Dashboards 11","fileName":"BlockDashboards11.vue","file":"<template>\n  <div class=\"min-h-screen bg-background text-foreground\">\n    <!-- ─── Upgrade dialog ──────────────────────────────────────────────────── -->\n    <UiDialog v-model:open=\"upgradeOpen\">\n      <UiDialogContent class=\"sm:max-w-lg\">\n        <UiDialogHeader>\n          <UiDialogTitle>Choose your plan</UiDialogTitle>\n          <UiDialogDescription>\n            Upgrade to unlock advanced analytics, more team members, and priority support.\n          </UiDialogDescription>\n        </UiDialogHeader>\n\n        <UiRadioGroup\n          v-model=\"selectedPlan\"\n          orientation=\"horizontal\"\n          class=\"mt-1 grid grid-cols-1 gap-4 sm:grid-cols-2\"\n        >\n          <div\n            v-for=\"plan in plans\"\n            :key=\"plan.id\"\n            class=\"relative cursor-pointer rounded-xl border-2 p-5 transition-all\"\n            :class=\"\n              selectedPlan === plan.id\n                ? 'border-primary bg-primary/5'\n                : 'border-border/60 hover:border-border'\n            \"\n            @click=\"selectedPlan = plan.id\"\n          >\n            <div class=\"flex items-start justify-between gap-2\">\n              <div class=\"min-w-0\">\n                <p class=\"leading-none font-semibold\">{{ plan.name }}</p>\n                <p class=\"mt-1 text-xs text-muted-foreground\">{{ plan.tagline }}</p>\n              </div>\n              <UiRadioGroupItem :value=\"plan.id\" @click.stop />\n            </div>\n\n            <div class=\"mt-4 flex items-baseline gap-1\">\n              <span class=\"text-3xl font-bold\">${{ plan.price }}</span>\n              <span class=\"text-sm text-muted-foreground\">/mo</span>\n            </div>\n\n            <ul class=\"mt-4 space-y-2\">\n              <li\n                v-for=\"feature in plan.features\"\n                :key=\"feature\"\n                class=\"flex items-center gap-2 text-xs text-muted-foreground\"\n              >\n                <Icon name=\"heroicons:check-circle\" class=\"size-3.5 shrink-0 text-emerald-500\" />\n                {{ feature }}\n              </li>\n            </ul>\n          </div>\n        </UiRadioGroup>\n\n        <UiDialogFooter class=\"mt-2\">\n          <UiButton variant=\"outline\" @click=\"upgradeOpen = false\">Cancel</UiButton>\n          <UiButton class=\"gap-2\" @click=\"submitUpgrade\">\n            <Icon name=\"heroicons:bolt\" class=\"size-4\" />\n            {{ selectedPlan === \"pro\" ? \"Upgrade to Pro\" : \"Continue with Free\" }}\n          </UiButton>\n        </UiDialogFooter>\n      </UiDialogContent>\n    </UiDialog>\n\n    <!-- ─── Filter dialog ──────────────────────────────────────────────────── -->\n    <UiDialog v-model:open=\"filterOpen\">\n      <UiDialogContent class=\"sm:max-w-sm\">\n        <UiDialogHeader>\n          <UiDialogTitle>Filter options</UiDialogTitle>\n          <UiDialogDescription\n            >Narrow the dashboard data by channel, status, and product type.</UiDialogDescription\n          >\n        </UiDialogHeader>\n\n        <div class=\"space-y-5 py-1\">\n          <div class=\"space-y-2.5\">\n            <p class=\"text-sm font-medium\">Channels</p>\n            <div class=\"space-y-2\">\n              <label\n                v-for=\"ch in filterChannels\"\n                :key=\"ch.key\"\n                class=\"flex cursor-pointer items-center gap-2.5 text-sm\"\n              >\n                <UiCheckbox :id=\"`ch-${ch.key}`\" v-model:checked=\"ch.checked\" />\n                {{ ch.label }}\n              </label>\n            </div>\n          </div>\n\n          <div class=\"space-y-2.5\">\n            <p class=\"text-sm font-medium\">Status</p>\n            <div class=\"space-y-2\">\n              <label\n                v-for=\"st in filterStatuses\"\n                :key=\"st.key\"\n                class=\"flex cursor-pointer items-center gap-2.5 text-sm\"\n              >\n                <UiCheckbox :id=\"`st-${st.key}`\" v-model:checked=\"st.checked\" />\n                {{ st.label }}\n              </label>\n            </div>\n          </div>\n\n          <div class=\"space-y-2.5\">\n            <p class=\"text-sm font-medium\">Products</p>\n            <div class=\"space-y-2\">\n              <label\n                v-for=\"pr in filterProducts\"\n                :key=\"pr.key\"\n                class=\"flex cursor-pointer items-center gap-2.5 text-sm\"\n              >\n                <UiCheckbox :id=\"`pr-${pr.key}`\" v-model:checked=\"pr.checked\" />\n                {{ pr.label }}\n              </label>\n            </div>\n          </div>\n        </div>\n\n        <UiDialogFooter>\n          <UiButton variant=\"outline\" @click=\"resetFilters\">Reset</UiButton>\n          <UiButton @click=\"applyFilters\">Apply filters</UiButton>\n        </UiDialogFooter>\n      </UiDialogContent>\n    </UiDialog>\n\n    <!-- ─── Command search dialog ──────────────────────────────────────────── -->\n    <UiCommandDialog\n      v-model:open=\"searchOpen\"\n      title=\"Search\"\n      description=\"Search across your sales data\"\n    >\n      <UiCommandInput placeholder=\"Search anything…\" />\n      <UiCommandList>\n        <UiCommandEmpty>No results found.</UiCommandEmpty>\n        <UiCommandGroup heading=\"Quick actions\">\n          <UiCommandItem value=\"Export report\" @select=\"searchOpen = false\">\n            <Icon name=\"heroicons:arrow-down-tray\" />\n            <span>Export report</span>\n          </UiCommandItem>\n          <UiCommandItem value=\"Invite team member\" @select=\"searchOpen = false\">\n            <Icon name=\"heroicons:user-plus\" />\n            <span>Invite team member</span>\n          </UiCommandItem>\n          <UiCommandItem\n            value=\"Upgrade plan\"\n            @select=\"\n              () => {\n                searchOpen = false;\n                upgradeOpen = true;\n              }\n            \"\n          >\n            <Icon name=\"heroicons:bolt\" />\n            <span>Upgrade plan</span>\n          </UiCommandItem>\n        </UiCommandGroup>\n        <UiCommandSeparator />\n        <UiCommandGroup heading=\"Reports\">\n          <UiCommandItem value=\"Sales report\" @select=\"searchOpen = false\">\n            <Icon name=\"heroicons:chart-bar\" />\n            <span>Sales report</span>\n          </UiCommandItem>\n          <UiCommandItem value=\"Revenue analytics\" @select=\"searchOpen = false\">\n            <Icon name=\"heroicons:currency-dollar\" />\n            <span>Revenue analytics</span>\n          </UiCommandItem>\n          <UiCommandItem value=\"Customer overview\" @select=\"searchOpen = false\">\n            <Icon name=\"heroicons:users\" />\n            <span>Customer overview</span>\n          </UiCommandItem>\n          <UiCommandItem value=\"Product performance\" @select=\"searchOpen = false\">\n            <Icon name=\"heroicons:shopping-bag\" />\n            <span>Product performance</span>\n          </UiCommandItem>\n        </UiCommandGroup>\n        <UiCommandSeparator />\n        <UiCommandGroup heading=\"Recent purchases\">\n          <UiCommandItem\n            v-for=\"item in activityFeed.slice(0, 4)\"\n            :key=\"item.name + item.product\"\n            :value=\"item.name\"\n            @select=\"searchOpen = false\"\n          >\n            <Icon name=\"heroicons:shopping-bag\" />\n            <span>{{ item.name }} — {{ item.product }}</span>\n          </UiCommandItem>\n        </UiCommandGroup>\n      </UiCommandList>\n      <div\n        class=\"flex items-center gap-5 border-t border-border/70 bg-muted/20 px-4 py-2.5 text-xs text-muted-foreground\"\n      >\n        <span class=\"flex items-center gap-1.5\"><UiKbd>↵</UiKbd> to select</span>\n        <span class=\"flex items-center gap-1.5\"><UiKbd>↑↓</UiKbd> to navigate</span>\n        <span class=\"flex items-center gap-1.5\"><UiKbd>ESC</UiKbd> to close</span>\n      </div>\n    </UiCommandDialog>\n\n    <!-- ─── Sticky header ──────────────────────────────────────────────────── -->\n    <Motion\n      as=\"header\"\n      :initial=\"{ opacity: 0, y: -16 }\"\n      :animate=\"{ opacity: 1, y: 0 }\"\n      :transition=\"{ duration: 0.4, ease: 'easeOut' }\"\n      class=\"sticky top-0 z-10 border-b border-border/70 bg-background/85 backdrop-blur-md\"\n    >\n      <UiContainer class=\"flex min-h-[4rem] items-center justify-between gap-4\">\n        <!-- Logo + nav -->\n        <div class=\"flex items-center gap-5\">\n          <div class=\"flex items-center gap-2.5\">\n            <div\n              class=\"flex size-8 items-center justify-center rounded-lg border border-border/70 bg-muted shadow-xs\"\n            >\n              <div\n                class=\"size-4 rounded-full bg-[radial-gradient(circle_at_35%_35%,rgba(255,255,255,0.95),rgba(255,255,255,0.2)_32%,transparent_34%),linear-gradient(135deg,var(--color-primary),color-mix(in_oklab,var(--color-primary)_40%,white))]\"\n              />\n            </div>\n            <span class=\"font-semibold tracking-tight\">UI Thing</span>\n          </div>\n\n          <!-- Mobile menu -->\n          <UiTooltip>\n            <UiPopover class=\"lg:hidden\">\n              <UiTooltipTrigger as-child>\n                <UiPopoverTrigger as-child>\n                  <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"lg:hidden\">\n                    <Icon name=\"heroicons:bars-3\" class=\"size-5\" />\n                  </UiButton>\n                </UiPopoverTrigger>\n              </UiTooltipTrigger>\n              <UiTooltipContent><p>Menu</p></UiTooltipContent>\n              <UiPopoverContent align=\"start\" class=\"w-48 p-1\">\n                <UiButton\n                  v-for=\"item in navItems\"\n                  :key=\"item.label\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  class=\"w-full justify-start\"\n                  :class=\"\n                    item.active ? 'bg-muted text-foreground shadow-xs' : 'text-muted-foreground'\n                  \"\n                >\n                  {{ item.label }}\n                </UiButton>\n              </UiPopoverContent>\n            </UiPopover>\n          </UiTooltip>\n\n          <!-- Desktop nav -->\n          <nav class=\"hidden items-center gap-1 lg:flex\">\n            <UiButton\n              v-for=\"item in navItems\"\n              :key=\"item.label\"\n              variant=\"ghost\"\n              size=\"sm\"\n              :class=\"item.active ? 'bg-muted text-foreground shadow-xs' : 'text-muted-foreground'\"\n            >\n              {{ item.label }}\n            </UiButton>\n          </nav>\n        </div>\n\n        <!-- Right actions -->\n        <div class=\"flex items-center gap-2\">\n          <UiTooltip>\n            <UiTooltipTrigger as-child>\n              <UiButton size=\"sm\" class=\"hidden gap-1.5 sm:flex\" @click=\"upgradeOpen = true\">\n                <Icon name=\"heroicons:bolt\" class=\"size-4\" />\n                Upgrade now\n              </UiButton>\n            </UiTooltipTrigger>\n            <UiTooltipContent><p>View upgrade options</p></UiTooltipContent>\n          </UiTooltip>\n          <UiTooltip>\n            <UiTooltipTrigger as-child>\n              <UiButton\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                class=\"sm:hidden\"\n                @click=\"upgradeOpen = true\"\n              >\n                <Icon name=\"heroicons:bolt\" class=\"size-4\" />\n              </UiButton>\n            </UiTooltipTrigger>\n            <UiTooltipContent><p>Upgrade</p></UiTooltipContent>\n          </UiTooltip>\n\n          <div class=\"flex items-center gap-1\">\n            <!-- Settings -->\n            <UiTooltip>\n              <UiDropdownMenu>\n                <UiTooltipTrigger as-child>\n                  <UiDropdownMenuTrigger as-child>\n                    <UiButton variant=\"ghost\" size=\"icon-sm\">\n                      <Icon name=\"heroicons:cog-6-tooth\" class=\"size-5 text-muted-foreground\" />\n                    </UiButton>\n                  </UiDropdownMenuTrigger>\n                </UiTooltipTrigger>\n                <UiTooltipContent><p>Settings</p></UiTooltipContent>\n                <UiDropdownMenuContent align=\"end\" class=\"w-52\">\n                  <UiDropdownMenuLabel>Settings</UiDropdownMenuLabel>\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem icon=\"heroicons:user\" title=\"Account settings\" />\n                  <UiDropdownMenuItem icon=\"heroicons:swatch\" title=\"Appearance\" />\n                  <UiDropdownMenuItem icon=\"heroicons:bell\" title=\"Notification preferences\" />\n                  <UiDropdownMenuItem icon=\"heroicons:shield-check\" title=\"Security\" />\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem icon=\"heroicons:credit-card\" title=\"Billing & plans\" />\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem\n                    variant=\"destructive\"\n                    icon=\"heroicons:arrow-right-on-rectangle\"\n                    title=\"Sign out\"\n                  />\n                </UiDropdownMenuContent>\n              </UiDropdownMenu>\n            </UiTooltip>\n\n            <!-- Notifications -->\n            <UiTooltip>\n              <UiDropdownMenu>\n                <UiTooltipTrigger as-child>\n                  <UiDropdownMenuTrigger as-child>\n                    <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"relative\">\n                      <Icon name=\"heroicons:bell\" class=\"size-5 text-muted-foreground\" />\n                      <span\n                        class=\"absolute top-1.5 right-1.5 size-2 rounded-full border border-background bg-primary\"\n                      />\n                    </UiButton>\n                  </UiDropdownMenuTrigger>\n                </UiTooltipTrigger>\n                <UiTooltipContent><p>Notifications</p></UiTooltipContent>\n                <UiDropdownMenuContent align=\"end\" class=\"w-96\">\n                  <UiDropdownMenuLabel class=\"flex items-center justify-between\">\n                    <span>Notifications</span>\n                    <UiBadge variant=\"secondary\" size=\"sm\">3 new</UiBadge>\n                  </UiDropdownMenuLabel>\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem\n                    icon=\"heroicons:shopping-bag\"\n                    title=\"Demi Wikinson purchased Webflow 101\"\n                  >\n                    <template #shortcut>1m ago</template>\n                  </UiDropdownMenuItem>\n                  <UiDropdownMenuItem\n                    icon=\"heroicons:arrow-trending-up\"\n                    title=\"Revenue up 15% today\"\n                  >\n                    <template #shortcut>1h ago</template>\n                  </UiDropdownMenuItem>\n                  <UiDropdownMenuItem icon=\"heroicons:users\" title=\"3 new team invites pending\">\n                    <template #shortcut>3h ago</template>\n                  </UiDropdownMenuItem>\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem icon=\"heroicons:check\" title=\"Mark all as read\" />\n                </UiDropdownMenuContent>\n              </UiDropdownMenu>\n            </UiTooltip>\n\n            <!-- Avatar / account -->\n            <UiTooltip>\n              <UiDropdownMenu>\n                <UiTooltipTrigger as-child>\n                  <UiDropdownMenuTrigger as-child>\n                    <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full p-0\">\n                      <UiAvatar\n                        src=\"https://i.pravatar.cc/150?img=47\"\n                        alt=\"Olivia Rhye\"\n                        fallback=\"OR\"\n                        class=\"size-8 cursor-pointer\"\n                      />\n                    </UiButton>\n                  </UiDropdownMenuTrigger>\n                </UiTooltipTrigger>\n                <UiTooltipContent><p>Account</p></UiTooltipContent>\n                <UiDropdownMenuContent align=\"end\" class=\"w-52\">\n                  <UiDropdownMenuLabel>\n                    <div class=\"flex flex-col gap-0.5\">\n                      <p class=\"text-sm font-medium\">Olivia Rhye</p>\n                      <p class=\"text-xs font-normal text-muted-foreground\">olivia@ui-thing.com</p>\n                    </div>\n                  </UiDropdownMenuLabel>\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem icon=\"heroicons:user\" title=\"Profile\" />\n                  <UiDropdownMenuItem icon=\"heroicons:cog-6-tooth\" title=\"Settings\" />\n                  <UiDropdownMenuItem icon=\"heroicons:credit-card\" title=\"Billing\" />\n                  <UiDropdownMenuItem icon=\"heroicons:users\" title=\"Team\" />\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem\n                    icon=\"heroicons:question-mark-circle\"\n                    title=\"Help & support\"\n                  />\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem\n                    variant=\"destructive\"\n                    icon=\"heroicons:arrow-right-on-rectangle\"\n                    title=\"Sign out\"\n                  />\n                </UiDropdownMenuContent>\n              </UiDropdownMenu>\n            </UiTooltip>\n          </div>\n        </div>\n      </UiContainer>\n    </Motion>\n\n    <!-- ─── Page content ───────────────────────────────────────────────────── -->\n    <UiContainer class=\"space-y-6 py-8\">\n      <!-- Welcome + search row -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 12 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.1, ease: 'easeOut' }\"\n        class=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\"\n      >\n        <div>\n          <h1 class=\"text-2xl font-bold tracking-tight\">Welcome back, Olivia</h1>\n          <p class=\"mt-0.5 text-sm text-muted-foreground\">\n            Your current sales summary and activity.\n          </p>\n        </div>\n\n        <!-- Search button (desktop) -->\n        <UiTooltip>\n          <UiTooltipTrigger as-child>\n            <UiButton\n              variant=\"outline\"\n              class=\"hidden w-64 justify-between gap-2 text-muted-foreground sm:flex\"\n              @click=\"searchOpen = true\"\n            >\n              <span class=\"flex items-center gap-2\">\n                <Icon name=\"heroicons:magnifying-glass\" class=\"size-4\" />\n                Search\n              </span>\n              <UiKbd>⌘K</UiKbd>\n            </UiButton>\n          </UiTooltipTrigger>\n          <UiTooltipContent><p>Search (⌘K)</p></UiTooltipContent>\n        </UiTooltip>\n      </Motion>\n\n      <!-- Time tabs + date/filter row -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 8 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.15, ease: 'easeOut' }\"\n        class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\"\n      >\n        <!-- Time filter tabs -->\n        <UiButtonGroup>\n          <UiButton\n            v-for=\"tab in timeTabs\"\n            :key=\"tab.value\"\n            variant=\"outline\"\n            size=\"sm\"\n            :class=\"activeTimeTab === tab.value ? 'bg-muted shadow-xs' : 'text-muted-foreground'\"\n            @click=\"activeTimeTab = tab.value\"\n          >\n            <span class=\"hidden sm:inline\">{{ tab.label }}</span>\n            <span class=\"sm:hidden\">{{ tab.short }}</span>\n          </UiButton>\n        </UiButtonGroup>\n\n        <!-- Date + filter actions -->\n        <div class=\"flex items-center gap-2\">\n          <!-- Date picker -->\n          <UiDatepicker v-model.range=\"dateRange\" :columns=\"2\">\n            <template #default=\"{ togglePopover }\">\n              <UiTooltip>\n                <UiTooltipTrigger as-child>\n                  <UiButton variant=\"outline\" size=\"sm\" class=\"gap-2\" @click=\"togglePopover\">\n                    <Icon name=\"heroicons:calendar-days\" class=\"size-4 text-muted-foreground\" />\n                    <span class=\"hidden sm:inline\">\n                      {{ useDateFormat(dateRange.start, \"MMM D, YYYY\").value }} –\n                      {{ useDateFormat(dateRange.end, \"MMM D, YYYY\").value }}\n                    </span>\n                    <span class=\"sm:hidden\">Select dates</span>\n                  </UiButton>\n                </UiTooltipTrigger>\n                <UiTooltipContent><p>Select date range</p></UiTooltipContent>\n              </UiTooltip>\n            </template>\n          </UiDatepicker>\n\n          <!-- Filters -->\n          <UiTooltip>\n            <UiTooltipTrigger as-child>\n              <UiButton variant=\"outline\" size=\"sm\" class=\"gap-2\" @click=\"filterOpen = true\">\n                <Icon name=\"heroicons:adjustments-horizontal\" class=\"size-4\" />\n                <span class=\"hidden sm:inline\">Filters</span>\n              </UiButton>\n            </UiTooltipTrigger>\n            <UiTooltipContent><p>Filter data</p></UiTooltipContent>\n          </UiTooltip>\n\n          <!-- Mobile search icon -->\n          <UiTooltip>\n            <UiTooltipTrigger as-child>\n              <UiButton\n                variant=\"outline\"\n                size=\"icon-sm\"\n                class=\"sm:hidden\"\n                @click=\"searchOpen = true\"\n              >\n                <Icon name=\"heroicons:magnifying-glass\" class=\"size-4\" />\n              </UiButton>\n            </UiTooltipTrigger>\n            <UiTooltipContent><p>Search</p></UiTooltipContent>\n          </UiTooltip>\n        </div>\n      </Motion>\n\n      <!-- Stacked bar chart -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 12 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.2, ease: 'easeOut' }\"\n      >\n        <div class=\"rounded-xl border border-border/70 bg-card p-5 shadow-xs\">\n          <UiApexchart\n            :key=\"activeTimeTab\"\n            type=\"bar\"\n            height=\"280\"\n            :series=\"chartSeries\"\n            :options=\"chartOptions\"\n          />\n        </div>\n      </Motion>\n\n      <!-- KPI metric cards -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 12 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.25, ease: 'easeOut' }\"\n        class=\"grid gap-4 sm:grid-cols-3\"\n      >\n        <div\n          v-for=\"kpi in kpiCards\"\n          :key=\"kpi.label\"\n          class=\"flex flex-col rounded-xl border border-border/70 bg-card shadow-xs\"\n        >\n          <div class=\"flex items-start justify-between p-5 pb-2\">\n            <div class=\"space-y-1\">\n              <p class=\"text-sm text-muted-foreground\">{{ kpi.label }}</p>\n              <p class=\"text-2xl font-bold tracking-tight\">{{ kpi.value }}</p>\n            </div>\n            <UiTooltip>\n              <UiDropdownMenu>\n                <UiTooltipTrigger as-child>\n                  <UiDropdownMenuTrigger as-child>\n                    <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"-mr-1 text-muted-foreground\">\n                      <Icon name=\"heroicons:ellipsis-vertical\" class=\"size-4\" />\n                    </UiButton>\n                  </UiDropdownMenuTrigger>\n                </UiTooltipTrigger>\n                <UiTooltipContent><p>Options</p></UiTooltipContent>\n                <UiDropdownMenuContent align=\"end\">\n                  <UiDropdownMenuItem icon=\"heroicons:arrow-path\" title=\"Refresh\" />\n                  <UiDropdownMenuItem icon=\"heroicons:arrow-down-tray\" title=\"Export\" />\n                  <UiDropdownMenuItem icon=\"heroicons:eye\" title=\"View full report\" />\n                </UiDropdownMenuContent>\n              </UiDropdownMenu>\n            </UiTooltip>\n          </div>\n\n          <div class=\"flex items-center gap-1.5 px-5 pb-3 text-xs\">\n            <span\n              class=\"flex items-center gap-0.5 font-semibold\"\n              :class=\"\n                kpi.positive\n                  ? 'text-emerald-600 dark:text-emerald-400'\n                  : 'text-red-500 dark:text-red-400'\n              \"\n            >\n              <Icon\n                :name=\"\n                  kpi.positive ? 'heroicons:arrow-trending-up' : 'heroicons:arrow-trending-down'\n                \"\n                class=\"size-3.5\"\n              />\n              {{ kpi.trend }}\n            </span>\n            <span class=\"text-muted-foreground\">last mth</span>\n          </div>\n\n          <!-- Sparkline -->\n          <div class=\"-mx-0.5 mt-auto -mb-0.5\">\n            <UiApexchart\n              type=\"area\"\n              height=\"72\"\n              :series=\"[{ name: kpi.label, data: kpi.sparkData }]\"\n              :options=\"sparklineOptions(kpi.positive)\"\n            />\n          </div>\n        </div>\n      </Motion>\n\n      <!-- Recent activity -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 12 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.3, ease: 'easeOut' }\"\n        class=\"space-y-4\"\n      >\n        <div class=\"flex items-center justify-between\">\n          <h2 class=\"text-base font-semibold\">Recent activity</h2>\n          <div class=\"flex items-center gap-2\">\n            <UiTooltip>\n              <UiTooltipTrigger as-child>\n                <UiButton variant=\"outline\" size=\"sm\" @click=\"downloadActivity\">Download</UiButton>\n              </UiTooltipTrigger>\n              <UiTooltipContent><p>Download activity log</p></UiTooltipContent>\n            </UiTooltip>\n            <UiTooltip>\n              <UiTooltipTrigger as-child>\n                <UiButton size=\"sm\">View all</UiButton>\n              </UiTooltipTrigger>\n              <UiTooltipContent><p>View all activity</p></UiTooltipContent>\n            </UiTooltip>\n          </div>\n        </div>\n\n        <div class=\"grid gap-x-8 gap-y-3 sm:grid-cols-2\">\n          <div\n            v-for=\"item in activityFeed\"\n            :key=\"item.name + item.product\"\n            class=\"flex items-center gap-3\"\n          >\n            <div class=\"relative shrink-0\">\n              <UiAvatar\n                :src=\"item.avatar\"\n                :alt=\"item.name\"\n                :fallback=\"item.name[0]\"\n                class=\"size-9\"\n              />\n              <span\n                v-if=\"item.online\"\n                class=\"absolute right-0 bottom-0 size-2.5 rounded-full border-2 border-background bg-emerald-500\"\n              />\n            </div>\n            <div class=\"min-w-0 flex-1 text-sm leading-snug\">\n              <span class=\"font-medium\">{{ item.name }}</span>\n              <span v-if=\"item.time\" class=\"ml-1 text-xs text-muted-foreground\">{{\n                item.time\n              }}</span>\n              <p class=\"text-muted-foreground\">\n                Purchased\n                <button class=\"font-medium\" :style=\"{ color: 'var(--color-primary)' }\">\n                  {{ item.product }}\n                </button>\n              </p>\n            </div>\n          </div>\n        </div>\n      </Motion>\n    </UiContainer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import type { ApexOptions } from \"apexcharts\";\n  import { Motion } from \"motion-v\";\n\n  // ─── Navigation ─────────────────────────────────────────────────────────────\n  const navItems = [\n    { label: \"Home\", active: false },\n    { label: \"Dashboard\", active: true },\n    { label: \"Projects\", active: false },\n    { label: \"Tasks\", active: false },\n    { label: \"Reporting\", active: false },\n    { label: \"Users\", active: false },\n  ];\n\n  // ─── Upgrade dialog ──────────────────────────────────────────────────────────\n  const upgradeOpen = ref(false);\n  const selectedPlan = ref(\"pro\");\n\n  const plans = [\n    {\n      id: \"free\",\n      name: \"Free\",\n      tagline: \"For individuals and small teams\",\n      price: 0,\n      features: [\n        \"5 projects\",\n        \"Basic analytics\",\n        \"2 team members\",\n        \"1 GB storage\",\n        \"Email support\",\n      ],\n    },\n    {\n      id: \"pro\",\n      name: \"Pro\",\n      tagline: \"For growing teams and businesses\",\n      price: 29,\n      features: [\n        \"Unlimited projects\",\n        \"Advanced analytics\",\n        \"15 team members\",\n        \"50 GB storage\",\n        \"Priority support\",\n      ],\n    },\n  ];\n\n  const submitUpgrade = () => {\n    upgradeOpen.value = false;\n    useSonner(selectedPlan.value === \"pro\" ? \"Upgraded to Pro 🎉\" : \"Staying on Free plan\", {\n      description:\n        selectedPlan.value === \"pro\"\n          ? \"Your plan has been upgraded. Enjoy unlimited access!\"\n          : \"You can upgrade at any time from Settings.\",\n    });\n  };\n\n  // ─── Filter dialog ────────────────────────────────────────────────────────────\n  const filterOpen = ref(false);\n\n  const filterChannels = reactive([\n    { key: \"direct\", label: \"Direct\", checked: true },\n    { key: \"organic\", label: \"Organic search\", checked: true },\n    { key: \"referral\", label: \"Referral\", checked: false },\n    { key: \"email\", label: \"Email\", checked: false },\n    { key: \"social\", label: \"Social media\", checked: false },\n  ]);\n\n  const filterStatuses = reactive([\n    { key: \"active\", label: \"Active\", checked: true },\n    { key: \"inactive\", label: \"Inactive\", checked: false },\n    { key: \"pending\", label: \"Pending\", checked: false },\n  ]);\n\n  const filterProducts = reactive([\n    { key: \"courses\", label: \"Courses\", checked: true },\n    { key: \"templates\", label: \"Templates\", checked: true },\n    { key: \"mockups\", label: \"Mockups\", checked: false },\n    { key: \"guides\", label: \"Guides\", checked: false },\n  ]);\n\n  const resetFilters = () => {\n    filterChannels.forEach((c) => (c.checked = false));\n    filterStatuses.forEach((s) => (s.checked = false));\n    filterProducts.forEach((p) => (p.checked = false));\n  };\n\n  const applyFilters = () => {\n    filterOpen.value = false;\n    useSonner(\"Filters applied\", {\n      description: \"The dashboard has been updated with your filter selection.\",\n    });\n  };\n\n  // ─── Command / search dialog ─────────────────────────────────────────────────\n  const searchOpen = ref(false);\n  const handleKeydown = (e: KeyboardEvent) => {\n    if ((e.metaKey || e.ctrlKey) && e.key === \"k\") {\n      e.preventDefault();\n      searchOpen.value = true;\n    }\n  };\n  onMounted(() => document.addEventListener(\"keydown\", handleKeydown));\n  onUnmounted(() => document.removeEventListener(\"keydown\", handleKeydown));\n\n  // ─── Date range ───────────────────────────────────────────────────────────────\n  const dateRange = ref({ start: new Date(\"2025-01-10\"), end: new Date(\"2025-01-16\") });\n\n  // ─── Time tabs + stacked bar chart ────────────────────────────────────────────\n  const timeTabs = [\n    { value: \"12m\", label: \"12 months\", short: \"12m\" },\n    { value: \"30d\", label: \"30 days\", short: \"30d\" },\n    { value: \"7d\", label: \"7 days\", short: \"7d\" },\n    { value: \"24h\", label: \"24 hours\", short: \"24h\" },\n  ];\n  const activeTimeTab = ref(\"12m\");\n\n  const chartDataByTab: Record<\n    string,\n    { categories: string[]; series: { name: string; data: number[] }[] }\n  > = {\n    \"12m\": {\n      categories: [\n        \"Jan\",\n        \"Feb\",\n        \"Mar\",\n        \"Apr\",\n        \"May\",\n        \"Jun\",\n        \"Jul\",\n        \"Aug\",\n        \"Sep\",\n        \"Oct\",\n        \"Nov\",\n        \"Dec\",\n      ],\n      series: [\n        { name: \"2025\", data: [65, 72, 68, 80, 85, 92, 98, 88, 96, 102, 110, 122] },\n        { name: \"2024\", data: [48, 55, 52, 62, 68, 74, 78, 70, 78, 84, 90, 98] },\n        { name: \"2023\", data: [32, 38, 35, 44, 50, 56, 58, 52, 60, 66, 70, 78] },\n        { name: \"Series 4\", data: [18, 22, 20, 26, 28, 32, 34, 28, 34, 38, 40, 46] },\n      ],\n    },\n    \"30d\": {\n      categories: [\"Week 1\", \"Week 2\", \"Week 3\", \"Week 4\"],\n      series: [\n        { name: \"2025\", data: [280, 312, 295, 334] },\n        { name: \"2024\", data: [218, 242, 228, 260] },\n        { name: \"2023\", data: [155, 178, 162, 188] },\n        { name: \"Series 4\", data: [86, 100, 90, 112] },\n      ],\n    },\n    \"7d\": {\n      categories: [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"],\n      series: [\n        { name: \"2025\", data: [38, 52, 46, 60, 72, 56, 42] },\n        { name: \"2024\", data: [30, 42, 36, 48, 58, 44, 34] },\n        { name: \"2023\", data: [22, 30, 26, 34, 42, 32, 24] },\n        { name: \"Series 4\", data: [12, 16, 14, 20, 24, 18, 14] },\n      ],\n    },\n    \"24h\": {\n      categories: [\"12am\", \"3am\", \"6am\", \"9am\", \"12pm\", \"3pm\", \"6pm\", \"9pm\"],\n      series: [\n        { name: \"2025\", data: [4, 2, 8, 24, 42, 55, 46, 28] },\n        { name: \"2024\", data: [3, 2, 6, 19, 34, 44, 36, 22] },\n        { name: \"2023\", data: [2, 1, 4, 14, 24, 32, 26, 16] },\n        { name: \"Series 4\", data: [1, 1, 3, 8, 14, 18, 15, 10] },\n      ],\n    },\n  };\n\n  const chartSeries = computed(() => chartDataByTab[activeTimeTab.value].series);\n\n  const chartOptions = computed<ApexOptions>(() => ({\n    chart: {\n      type: \"bar\",\n      stacked: true,\n      background: \"transparent\",\n      toolbar: { show: false },\n      parentHeightOffset: 0,\n      animations: { enabled: true, speed: 350, easing: \"easeinout\" },\n    },\n    colors: [\n      \"var(--color-primary)\",\n      \"color-mix(in oklab, var(--color-primary) 70%, white)\",\n      \"color-mix(in oklab, var(--color-primary) 45%, white)\",\n      \"color-mix(in oklab, var(--color-primary) 22%, white)\",\n    ],\n    plotOptions: {\n      bar: { columnWidth: \"55%\", borderRadius: 3, borderRadiusApplication: \"end\" },\n    },\n    dataLabels: { enabled: false },\n    grid: {\n      strokeDashArray: 4,\n      xaxis: { lines: { show: false } },\n      yaxis: { lines: { show: true } },\n      padding: { left: 0, right: 0 },\n    },\n    xaxis: {\n      categories: chartDataByTab[activeTimeTab.value].categories,\n      axisBorder: { show: false },\n      axisTicks: { show: false },\n    },\n    yaxis: { show: false },\n    legend: {\n      position: \"top\",\n      horizontalAlign: \"right\",\n      offsetY: -4,\n      markers: { size: 6 },\n    },\n    tooltip: { shared: true, intersect: false },\n  }));\n\n  // ─── KPI cards ───────────────────────────────────────────────────────────────\n  const kpiCards = [\n    {\n      label: \"Today's revenue\",\n      value: \"$1,280\",\n      trend: \"15%\",\n      positive: true,\n      sparkData: [22, 28, 24, 32, 30, 38, 35, 40, 36, 44, 48, 52, 58, 62],\n    },\n    {\n      label: \"Today's orders\",\n      value: \"14\",\n      trend: \"10%\",\n      positive: false,\n      sparkData: [30, 28, 32, 25, 22, 28, 20, 18, 22, 16, 14, 18, 12, 10],\n    },\n    {\n      label: \"Avg. order value\",\n      value: \"$91.42\",\n      trend: \"20%\",\n      positive: true,\n      sparkData: [55, 58, 54, 60, 64, 62, 68, 72, 70, 78, 82, 86, 88, 92],\n    },\n  ];\n\n  const sparklineOptions = (positive: boolean): ApexOptions => ({\n    chart: {\n      type: \"area\",\n      background: \"transparent\",\n      sparkline: { enabled: true },\n      parentHeightOffset: 0,\n      animations: { enabled: false },\n    },\n    stroke: { width: 2, curve: \"smooth\" },\n    colors: [positive ? \"#10b981\" : \"#ef4444\"],\n    fill: {\n      type: \"gradient\",\n      gradient: {\n        shadeIntensity: 1,\n        opacityFrom: positive ? 0.18 : 0.12,\n        opacityTo: 0,\n        stops: [0, 100],\n      },\n    },\n    tooltip: { enabled: false },\n    xaxis: {\n      labels: { show: false },\n      axisBorder: { show: false },\n      axisTicks: { show: false },\n    },\n    yaxis: { show: false },\n  });\n\n  // ─── Activity actions ─────────────────────────────────────────────────────────\n  const downloadActivity = () => {\n    useSonner(\"Downloading records…\", {\n      description: \"Your activity records are being prepared and will download shortly.\",\n    });\n  };\n\n  // ─── Activity feed ────────────────────────────────────────────────────────────\n  const activityFeed = [\n    {\n      name: \"Demi Wikinson\",\n      product: \"Webflow 101\",\n      avatar: \"https://i.pravatar.cc/150?img=1\",\n      online: true,\n      time: undefined,\n    },\n    {\n      name: \"Drew Cano\",\n      product: \"The Figma Dashboard Bundle\",\n      avatar: \"https://i.pravatar.cc/150?img=8\",\n      online: false,\n      time: \"3 hours ago\",\n    },\n    {\n      name: \"Aliah Lane\",\n      product: \"SEO Masterclass\",\n      avatar: \"https://i.pravatar.cc/150?img=2\",\n      online: true,\n      time: undefined,\n    },\n    {\n      name: \"Zahir Mays\",\n      product: \"The Figma Dashboard Bundle\",\n      avatar: \"https://i.pravatar.cc/150?img=9\",\n      online: false,\n      time: \"4 hours ago\",\n    },\n    {\n      name: \"Lana Steiner\",\n      product: \"Figma Mockups\",\n      avatar: \"https://i.pravatar.cc/150?img=3\",\n      online: true,\n      time: undefined,\n    },\n    {\n      name: \"Rene Wells\",\n      product: \"The Design Handbook\",\n      avatar: \"https://i.pravatar.cc/150?img=10\",\n      online: false,\n      time: \"4 hours ago\",\n    },\n    {\n      name: \"Candice Wu\",\n      product: \"Webflow 101\",\n      avatar: \"https://i.pravatar.cc/150?img=4\",\n      online: false,\n      time: undefined,\n    },\n    {\n      name: \"Joshua Wilson\",\n      product: \"Phone 13 Mockups\",\n      avatar: \"https://i.pravatar.cc/150?img=11\",\n      online: false,\n      time: \"4 hours ago\",\n    },\n    {\n      name: \"Ava Wright\",\n      product: \"SEO Masterclass\",\n      avatar: \"https://i.pravatar.cc/150?img=5\",\n      online: false,\n      time: undefined,\n    },\n    {\n      name: \"Lori Bryson\",\n      product: \"SEO Masterclass\",\n      avatar: \"https://i.pravatar.cc/150?img=12\",\n      online: false,\n      time: \"4 hours ago\",\n    },\n    {\n      name: \"Koray Okumus\",\n      product: \"SEO Masterclass\",\n      avatar: \"https://i.pravatar.cc/150?img=6\",\n      online: false,\n      time: undefined,\n    },\n    {\n      name: \"Loki Bright\",\n      product: \"Figma Mockups\",\n      avatar: \"https://i.pravatar.cc/150?img=13\",\n      online: false,\n      time: \"5 hours ago\",\n    },\n    {\n      name: \"Andi Lane\",\n      product: \"The Guide to Backlinks\",\n      avatar: \"https://i.pravatar.cc/150?img=7\",\n      online: true,\n      time: undefined,\n    },\n    {\n      name: \"Anita Cruz\",\n      product: \"The Guide to Backlinks\",\n      avatar: \"https://i.pravatar.cc/150?img=14\",\n      online: false,\n      time: \"6 hours ago\",\n    },\n  ];\n</script>\n","category":"Dashboards","path":"Dashboards/BlockDashboards11.vue","components":["apexchart","avatar","badge","button","buttongroup","checkbox","commanddialog","commandempty","commandgroup","commandinput","commanditem","commandlist","commandseparator","container","datepicker","dialog","dialogcontent","dialogdescription","dialogfooter","dialogheader","dialogtitle","dropdownmenu","dropdownmenucontent","dropdownmenuitem","dropdownmenulabel","dropdownmenuseparator","dropdownmenutrigger","kbd","popover","popovercontent","popovertrigger","radiogroup","radiogroupitem","tooltip","tooltipcontent","tooltiptrigger"]},{"name":"Dashboards 12","fileName":"BlockDashboards12.vue","file":"<template>\n  <div class=\"min-h-screen bg-background text-foreground\">\n    <!-- ─── Add card dialog ─────────────────────────────────────────────────── -->\n    <UiDialog v-model:open=\"addCardOpen\" @update:open=\"onAddCardClose\">\n      <UiDialogContent class=\"sm:max-w-sm\">\n        <UiDialogHeader>\n          <UiDialogTitle>Add new card</UiDialogTitle>\n          <UiDialogDescription>Enter your card details below.</UiDialogDescription>\n        </UiDialogHeader>\n\n        <form @submit=\"submitAddCard\">\n          <fieldset :disabled=\"isAddingCard\" class=\"space-y-4 py-1\">\n            <UiVeeInput required label=\"Card label\" name=\"label\" placeholder=\"e.g. Personal Visa\" />\n            <UiVeeInput\n              required\n              label=\"Cardholder name\"\n              name=\"holderName\"\n              placeholder=\"e.g. SASHA PRYCE\"\n            />\n            <div class=\"grid grid-cols-2 gap-3\">\n              <UiVeeInput\n                required\n                label=\"Card number\"\n                name=\"cardNumber\"\n                placeholder=\"1234 1234 1234 1234\"\n                :maxlength=\"19\"\n                @input=\"formatCardNumber\"\n              />\n              <UiVeeInput\n                required\n                label=\"Expiry\"\n                name=\"expiry\"\n                placeholder=\"06/28\"\n                :maxlength=\"5\"\n                @input=\"formatExpiry\"\n              />\n            </div>\n          </fieldset>\n\n          <UiDialogFooter class=\"mt-4\">\n            <UiButton type=\"button\" variant=\"outline\" @click=\"addCardOpen = false\">Cancel</UiButton>\n            <UiButton type=\"submit\" :disabled=\"isAddingCard\">Add card</UiButton>\n          </UiDialogFooter>\n        </form>\n      </UiDialogContent>\n    </UiDialog>\n\n    <!-- ─── Filter dialog ──────────────────────────────────────────────────── -->\n    <UiDialog v-model:open=\"filterOpen\">\n      <UiDialogContent class=\"sm:max-w-sm\">\n        <UiDialogHeader>\n          <UiDialogTitle>Apply filter</UiDialogTitle>\n          <UiDialogDescription\n            >Filter transactions by category, account, or amount.</UiDialogDescription\n          >\n        </UiDialogHeader>\n\n        <div class=\"space-y-5 py-1\">\n          <div class=\"space-y-2.5\">\n            <p class=\"text-sm font-medium\">Category</p>\n            <div class=\"space-y-2\">\n              <label\n                v-for=\"cat in filterCategories\"\n                :key=\"cat.key\"\n                class=\"flex cursor-pointer items-center gap-2.5 text-sm\"\n              >\n                <UiCheckbox :id=\"`cat-${cat.key}`\" v-model:checked=\"cat.checked\" />\n                {{ cat.label }}\n              </label>\n            </div>\n          </div>\n\n          <div class=\"space-y-2.5\">\n            <p class=\"text-sm font-medium\">Account</p>\n            <div class=\"space-y-2\">\n              <label\n                v-for=\"acc in filterAccounts\"\n                :key=\"acc.key\"\n                class=\"flex cursor-pointer items-center gap-2.5 text-sm\"\n              >\n                <UiCheckbox :id=\"`acc-${acc.key}`\" v-model:checked=\"acc.checked\" />\n                {{ acc.label }}\n              </label>\n            </div>\n          </div>\n\n          <div class=\"space-y-2.5\">\n            <p class=\"text-sm font-medium\">Transaction type</p>\n            <div class=\"space-y-2\">\n              <label\n                v-for=\"type in filterTypes\"\n                :key=\"type.key\"\n                class=\"flex cursor-pointer items-center gap-2.5 text-sm\"\n              >\n                <UiCheckbox :id=\"`type-${type.key}`\" v-model:checked=\"type.checked\" />\n                {{ type.label }}\n              </label>\n            </div>\n          </div>\n        </div>\n\n        <UiDialogFooter>\n          <UiButton variant=\"outline\" @click=\"resetFilters\">Reset</UiButton>\n          <UiButton @click=\"applyFilters\">Apply</UiButton>\n        </UiDialogFooter>\n      </UiDialogContent>\n    </UiDialog>\n\n    <!-- ─── Command dialog ─────────────────────────────────────────────────── -->\n    <UiCommandDialog\n      v-model:open=\"searchOpen\"\n      title=\"Search\"\n      description=\"Search transactions and actions\"\n    >\n      <UiCommandInput placeholder=\"Search transactions, categories…\" />\n      <UiCommandList>\n        <UiCommandEmpty>No results found.</UiCommandEmpty>\n        <UiCommandGroup heading=\"Quick actions\">\n          <UiCommandItem\n            value=\"Add card\"\n            @select=\"\n              () => {\n                searchOpen = false;\n                addCardOpen = true;\n              }\n            \"\n          >\n            <Icon name=\"heroicons:credit-card\" /><span>Add new card</span>\n          </UiCommandItem>\n          <UiCommandItem\n            value=\"Apply filter\"\n            @select=\"\n              () => {\n                searchOpen = false;\n                filterOpen = true;\n              }\n            \"\n          >\n            <Icon name=\"heroicons:funnel\" /><span>Apply filter</span>\n          </UiCommandItem>\n          <UiCommandItem value=\"Export transactions\" @select=\"searchOpen = false\">\n            <Icon name=\"heroicons:arrow-down-tray\" /><span>Export transactions</span>\n          </UiCommandItem>\n        </UiCommandGroup>\n        <UiCommandSeparator />\n        <UiCommandGroup heading=\"Transactions\">\n          <UiCommandItem\n            v-for=\"tx in allTransactions.slice(0, 5)\"\n            :key=\"tx.id\"\n            :value=\"tx.name\"\n            @select=\"searchOpen = false\"\n          >\n            <Icon name=\"heroicons:banknotes\" />\n            <span\n              >{{ tx.name }} — {{ tx.amount > 0 ? \"+\" : \"\" }}${{\n                Math.abs(tx.amount).toFixed(2)\n              }}</span\n            >\n          </UiCommandItem>\n        </UiCommandGroup>\n        <UiCommandSeparator />\n        <UiCommandGroup heading=\"Categories\">\n          <UiCommandItem\n            v-for=\"cat in categoryOptions\"\n            :key=\"cat\"\n            :value=\"cat\"\n            @select=\"searchOpen = false\"\n          >\n            <Icon name=\"heroicons:tag\" /><span>{{ cat }}</span>\n          </UiCommandItem>\n        </UiCommandGroup>\n      </UiCommandList>\n      <div\n        class=\"flex items-center gap-5 border-t border-border/70 bg-muted/20 px-4 py-2.5 text-xs text-muted-foreground\"\n      >\n        <span class=\"flex items-center gap-1.5\"><UiKbd>↵</UiKbd> to select</span>\n        <span class=\"flex items-center gap-1.5\"><UiKbd>↑↓</UiKbd> to navigate</span>\n        <span class=\"flex items-center gap-1.5\"><UiKbd>ESC</UiKbd> to close</span>\n      </div>\n    </UiCommandDialog>\n\n    <!-- ─── Sticky header ──────────────────────────────────────────────────── -->\n    <Motion\n      as=\"header\"\n      :initial=\"{ opacity: 0, y: -16 }\"\n      :animate=\"{ opacity: 1, y: 0 }\"\n      :transition=\"{ duration: 0.4, ease: 'easeOut' }\"\n      class=\"sticky top-0 z-10 border-b border-border/70 bg-background/85 backdrop-blur-md\"\n    >\n      <UiContainer class=\"flex min-h-[4rem] items-center justify-between gap-4\">\n        <!-- Logo + nav -->\n        <div class=\"flex items-center gap-5\">\n          <div class=\"flex items-center gap-2.5\">\n            <div\n              class=\"flex size-8 items-center justify-center rounded-lg border border-border/70 bg-muted shadow-xs\"\n            >\n              <div\n                class=\"size-4 rounded-full bg-[radial-gradient(circle_at_35%_35%,rgba(255,255,255,0.95),rgba(255,255,255,0.2)_32%,transparent_34%),linear-gradient(135deg,var(--color-primary),color-mix(in_oklab,var(--color-primary)_40%,white))]\"\n              />\n            </div>\n            <span class=\"font-semibold tracking-tight\">UI Thing</span>\n          </div>\n\n          <!-- Mobile menu -->\n          <UiTooltip>\n            <UiPopover class=\"lg:hidden\">\n              <UiTooltipTrigger as-child>\n                <UiPopoverTrigger as-child>\n                  <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"lg:hidden\">\n                    <Icon name=\"heroicons:bars-3\" class=\"size-5\" />\n                  </UiButton>\n                </UiPopoverTrigger>\n              </UiTooltipTrigger>\n              <UiTooltipContent><p>Menu</p></UiTooltipContent>\n              <UiPopoverContent align=\"start\" class=\"w-48 p-1\">\n                <UiButton\n                  v-for=\"item in navItems\"\n                  :key=\"item.label\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  class=\"w-full justify-start\"\n                  :class=\"item.active ? 'bg-muted text-foreground' : 'text-muted-foreground'\"\n                >\n                  {{ item.label }}\n                </UiButton>\n              </UiPopoverContent>\n            </UiPopover>\n          </UiTooltip>\n\n          <!-- Desktop nav -->\n          <nav class=\"hidden items-center gap-1 lg:flex\">\n            <UiButton\n              v-for=\"item in navItems\"\n              :key=\"item.label\"\n              variant=\"ghost\"\n              size=\"sm\"\n              :class=\"item.active ? 'bg-muted text-foreground shadow-xs' : 'text-muted-foreground'\"\n            >\n              {{ item.label }}\n            </UiButton>\n          </nav>\n        </div>\n\n        <!-- Right icon actions -->\n        <div class=\"flex items-center gap-1\">\n          <!-- Search -->\n          <UiTooltip>\n            <UiTooltipTrigger as-child>\n              <UiButton variant=\"ghost\" size=\"icon-sm\" @click=\"searchOpen = true\">\n                <Icon name=\"heroicons:magnifying-glass\" class=\"size-5 text-muted-foreground\" />\n              </UiButton>\n            </UiTooltipTrigger>\n            <UiTooltipContent><p>Search (⌘K)</p></UiTooltipContent>\n          </UiTooltip>\n\n          <!-- Settings -->\n          <UiTooltip>\n            <UiDropdownMenu>\n              <UiTooltipTrigger as-child>\n                <UiDropdownMenuTrigger as-child>\n                  <UiButton variant=\"ghost\" size=\"icon-sm\">\n                    <Icon name=\"heroicons:cog-6-tooth\" class=\"size-5 text-muted-foreground\" />\n                  </UiButton>\n                </UiDropdownMenuTrigger>\n              </UiTooltipTrigger>\n              <UiTooltipContent><p>Settings</p></UiTooltipContent>\n              <UiDropdownMenuContent align=\"end\" class=\"w-52\">\n                <UiDropdownMenuLabel>Settings</UiDropdownMenuLabel>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem icon=\"heroicons:user\" title=\"Account settings\" />\n                <UiDropdownMenuItem icon=\"heroicons:swatch\" title=\"Appearance\" />\n                <UiDropdownMenuItem icon=\"heroicons:bell\" title=\"Notification preferences\" />\n                <UiDropdownMenuItem icon=\"heroicons:shield-check\" title=\"Security & privacy\" />\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem icon=\"heroicons:credit-card\" title=\"Billing & plans\" />\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem\n                  variant=\"destructive\"\n                  icon=\"heroicons:arrow-right-on-rectangle\"\n                  title=\"Sign out\"\n                />\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiTooltip>\n\n          <!-- Notifications -->\n          <UiTooltip>\n            <UiDropdownMenu>\n              <UiTooltipTrigger as-child>\n                <UiDropdownMenuTrigger as-child>\n                  <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"relative\">\n                    <Icon name=\"heroicons:bell\" class=\"size-5 text-muted-foreground\" />\n                    <span\n                      class=\"absolute top-1.5 right-1.5 size-2 rounded-full border border-background bg-primary\"\n                    />\n                  </UiButton>\n                </UiDropdownMenuTrigger>\n              </UiTooltipTrigger>\n              <UiTooltipContent><p>Notifications</p></UiTooltipContent>\n              <UiDropdownMenuContent align=\"end\" class=\"w-96\">\n                <UiDropdownMenuLabel class=\"flex items-center justify-between\">\n                  <span>Notifications</span>\n                  <UiBadge variant=\"secondary\" size=\"sm\">3 new</UiBadge>\n                </UiDropdownMenuLabel>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem\n                  icon=\"heroicons:credit-card\"\n                  title=\"New card transaction: -$18.99 Spotify\"\n                >\n                  <template #shortcut>2m ago</template>\n                </UiDropdownMenuItem>\n                <UiDropdownMenuItem\n                  icon=\"heroicons:arrow-trending-up\"\n                  title=\"Balance increased by $88.00\"\n                >\n                  <template #shortcut>1h ago</template>\n                </UiDropdownMenuItem>\n                <UiDropdownMenuItem\n                  icon=\"heroicons:exclamation-triangle\"\n                  title=\"Subscription renewal in 3 days\"\n                >\n                  <template #shortcut>Today</template>\n                </UiDropdownMenuItem>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem icon=\"heroicons:check\" title=\"Mark all as read\" />\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiTooltip>\n\n          <!-- Avatar -->\n          <UiTooltip>\n            <UiDropdownMenu>\n              <UiTooltipTrigger as-child>\n                <UiDropdownMenuTrigger as-child>\n                  <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full p-0\">\n                    <UiAvatar\n                      src=\"https://i.pravatar.cc/150?img=47\"\n                      alt=\"Sasha Pryce\"\n                      fallback=\"OR\"\n                      class=\"size-8 cursor-pointer\"\n                    />\n                  </UiButton>\n                </UiDropdownMenuTrigger>\n              </UiTooltipTrigger>\n              <UiTooltipContent><p>Account</p></UiTooltipContent>\n              <UiDropdownMenuContent align=\"end\" class=\"w-52\">\n                <UiDropdownMenuLabel>\n                  <div class=\"flex flex-col gap-0.5\">\n                    <p class=\"text-sm font-medium\">Sasha Pryce</p>\n                    <p class=\"text-xs font-normal text-muted-foreground\">sasha@ui-thing.com</p>\n                  </div>\n                </UiDropdownMenuLabel>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem icon=\"heroicons:user\" title=\"Profile\" />\n                <UiDropdownMenuItem icon=\"heroicons:cog-6-tooth\" title=\"Settings\" />\n                <UiDropdownMenuItem icon=\"heroicons:credit-card\" title=\"Billing\" />\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem icon=\"heroicons:question-mark-circle\" title=\"Help & support\" />\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem\n                  variant=\"destructive\"\n                  icon=\"heroicons:arrow-right-on-rectangle\"\n                  title=\"Sign out\"\n                />\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiTooltip>\n        </div>\n      </UiContainer>\n    </Motion>\n\n    <!-- ─── Page content ───────────────────────────────────────────────────── -->\n    <UiContainer class=\"py-8\">\n      <div class=\"grid gap-6 lg:grid-cols-[1fr_440px]\">\n        <!-- ─── Left: Balance + Transactions ──────────────────────────────── -->\n        <Motion\n          :initial=\"{ opacity: 0, y: 16 }\"\n          :animate=\"{ opacity: 1, y: 0 }\"\n          :transition=\"{ duration: 0.4, delay: 0.1, ease: 'easeOut' }\"\n          class=\"rounded-2xl border border-border/70 bg-card shadow-xs\"\n        >\n          <!-- Balance section -->\n          <div class=\"flex flex-col gap-4 p-6 pb-2 sm:flex-row sm:items-start sm:justify-between\">\n            <div>\n              <p class=\"text-sm text-muted-foreground\">Your balance</p>\n              <p class=\"mt-1 flex items-center gap-2 text-3xl font-bold tracking-tight\">\n                <span>🇺🇸</span>\n                {{ balanceByTab[activeBalanceTab] }}\n              </p>\n            </div>\n            <!-- Account type tabs -->\n            <UiButtonGroup class=\"self-start\">\n              <UiButton\n                v-for=\"tab in balanceTabs\"\n                :key=\"tab.value\"\n                variant=\"outline\"\n                size=\"sm\"\n                :class=\"\n                  activeBalanceTab === tab.value ? 'bg-muted shadow-xs' : 'text-muted-foreground'\n                \"\n                @click=\"activeBalanceTab = tab.value\"\n              >\n                {{ tab.label }}\n              </UiButton>\n            </UiButtonGroup>\n          </div>\n\n          <!-- Area chart -->\n          <div class=\"px-2\">\n            <UiApexchart\n              :key=\"activeBalanceTab\"\n              type=\"area\"\n              height=\"200\"\n              :series=\"chartSeries\"\n              :options=\"chartOptions\"\n            />\n          </div>\n\n          <!-- Transaction history -->\n          <div class=\"px-6 pt-2 pb-3\">\n            <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n              <h2 class=\"text-base font-semibold\">Transaction history</h2>\n              <div class=\"flex items-center gap-2\">\n                <!-- Date picker -->\n                <UiDatepicker v-model.range=\"txDateRange\">\n                  <template #default=\"{ togglePopover }\">\n                    <UiTooltip>\n                      <UiTooltipTrigger as-child>\n                        <UiButton variant=\"outline\" size=\"sm\" class=\"gap-2\" @click=\"togglePopover\">\n                          <Icon\n                            name=\"heroicons:calendar-days\"\n                            class=\"size-4 text-muted-foreground\"\n                          />\n                          <span class=\"hidden sm:inline\">Select dates</span>\n                        </UiButton>\n                      </UiTooltipTrigger>\n                      <UiTooltipContent><p>Select date range</p></UiTooltipContent>\n                    </UiTooltip>\n                  </template>\n                </UiDatepicker>\n\n                <!-- Filter -->\n                <UiTooltip>\n                  <UiTooltipTrigger as-child>\n                    <UiButton variant=\"outline\" size=\"sm\" class=\"gap-2\" @click=\"filterOpen = true\">\n                      <Icon name=\"heroicons:adjustments-horizontal\" class=\"size-4\" />\n                      <span class=\"hidden sm:inline\">Apply filter</span>\n                    </UiButton>\n                  </UiTooltipTrigger>\n                  <UiTooltipContent><p>Filter transactions</p></UiTooltipContent>\n                </UiTooltip>\n              </div>\n            </div>\n          </div>\n\n          <!-- TanStack table -->\n          <UiTanStackTable\n            :data=\"allTransactions\"\n            :columns=\"txColumns\"\n            :show-rows-per-page=\"false\"\n            :show-page-info=\"false\"\n            :show-pagination=\"false\"\n            :show-selected-count=\"false\"\n            :show-footer=\"true\"\n            :table-options=\"{ initialState: { pagination: { pageSize: 7, pageIndex: 0 } } }\"\n          >\n            <!-- Transaction cell -->\n            <template #transaction-cell=\"{ row }\">\n              <div class=\"flex items-center gap-3\">\n                <span\n                  class=\"flex size-9 shrink-0 items-center justify-center rounded-full text-sm font-bold\"\n                  :style=\"{ backgroundColor: row.original.iconBg, color: row.original.iconColor }\"\n                >\n                  {{ row.original.fallback }}\n                </span>\n                <span class=\"text-sm font-medium\">{{ row.original.name }}</span>\n              </div>\n            </template>\n\n            <!-- Amount cell -->\n            <template #amount-cell=\"{ row }\">\n              <span\n                class=\"text-sm font-semibold tabular-nums\"\n                :class=\"\n                  row.original.amount > 0\n                    ? 'text-emerald-600 dark:text-emerald-400'\n                    : 'text-foreground'\n                \"\n              >\n                {{ row.original.amount > 0 ? \"+\" : \"\" }}${{\n                  Math.abs(row.original.amount).toFixed(2)\n                }}\n              </span>\n            </template>\n\n            <!-- Category cell -->\n            <template #category-cell=\"{ row }\">\n              <span\n                class=\"inline-flex items-center gap-1.5 rounded-full border border-border/60 px-2.5 py-0.5 text-xs font-medium\"\n              >\n                <span\n                  class=\"size-1.5 shrink-0 rounded-full\"\n                  :style=\"{ backgroundColor: row.original.categoryColor }\"\n                />\n                {{ row.original.category }}\n              </span>\n            </template>\n\n            <!-- Account cell -->\n            <template #account-cell=\"{ row }\">\n              <div class=\"flex items-center gap-2\">\n                <!-- <span\n                  class=\"flex h-5 items-center justify-center rounded px-1.5 text-[10px] font-black tracking-wide\"\n                  :style=\"\n                    row.original.cardType === 'visa'\n                      ? { background: '#1a1f71', color: '#fff' }\n                      : { background: '#eb001b', color: '#fff' }\n                  \"\n                >\n                  {{ row.original.cardType === \"visa\" ? \"VISA\" : \"MC\" }}\n                </span> -->\n                <div\n                  v-if=\"row.original.cardType == 'visa'\"\n                  class=\"inline-flex items-center justify-center rounded border px-1\"\n                >\n                  <Icon name=\"simple-icons:visa\" class=\"size-8 shrink-0\" />\n                </div>\n                <div v-else class=\"inline-flex items-center justify-center rounded border px-1\">\n                  <Icon name=\"simple-icons:mastercard\" class=\"size-8 shrink-0\" />\n                </div>\n                <div class=\"leading-tight\">\n                  <p class=\"text-xs font-medium\">\n                    {{ row.original.cardType === \"visa\" ? \"Visa\" : \"Mastercard\" }}\n                    {{ row.original.cardLast4 }}\n                  </p>\n                  <p class=\"text-xs text-muted-foreground\">Expiry {{ row.original.expiry }}</p>\n                </div>\n              </div>\n            </template>\n\n            <!-- Actions cell -->\n            <template #actions-cell=\"{ row }\">\n              <UiTooltip>\n                <UiTooltipTrigger as-child>\n                  <UiButton\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    class=\"text-muted-foreground\"\n                    @click=\"editTransaction(row.original)\"\n                  >\n                    <Icon name=\"heroicons:pencil-square\" class=\"size-4\" />\n                  </UiButton>\n                </UiTooltipTrigger>\n                <UiTooltipContent><p>Edit transaction</p></UiTooltipContent>\n              </UiTooltip>\n            </template>\n\n            <!-- Footer with pagination -->\n            <template #footer=\"{ table }\">\n              <div\n                class=\"flex w-full flex-col gap-3 border-t border-border/60 px-4 py-3 sm:flex-row sm:items-center sm:justify-between\"\n              >\n                <p class=\"shrink-0 text-xs text-muted-foreground\">\n                  {{ allTransactions.length }} transactions\n                </p>\n                <UiPagination\n                  class=\"mx-0! justify-end!\"\n                  :total=\"allTransactions.length\"\n                  :items-per-page=\"7\"\n                  :sibling-count=\"1\"\n                  :page=\"table.getState().pagination.pageIndex + 1\"\n                  @update:page=\"(p) => table.setPageIndex(p - 1)\"\n                >\n                  <UiPaginationList v-slot=\"{ items }\" class=\"gap-1\">\n                    <UiPaginationPrev as-child>\n                      <UiButton variant=\"outline\" size=\"sm\" class=\"gap-1.5\">\n                        <Icon name=\"heroicons:chevron-left\" class=\"size-3.5\" />\n                        <span class=\"hidden sm:inline\">Previous</span>\n                      </UiButton>\n                    </UiPaginationPrev>\n                    <template v-for=\"(item, idx) in items\" :key=\"idx\">\n                      <UiPaginationItem v-if=\"item.type === 'page'\" as-child v-bind=\"item\" />\n                      <UiPaginationEllipsis\n                        v-else-if=\"item.type === 'ellipsis'\"\n                        as-child\n                        v-bind=\"item\"\n                        icon=\"heroicons:ellipsis-horizontal\"\n                      />\n                    </template>\n                    <UiPaginationNext as-child>\n                      <UiButton variant=\"outline\" size=\"sm\" class=\"gap-1.5\">\n                        <span class=\"hidden sm:inline\">Next</span>\n                        <Icon name=\"heroicons:chevron-right\" class=\"size-3.5\" />\n                      </UiButton>\n                    </UiPaginationNext>\n                  </UiPaginationList>\n                </UiPagination>\n              </div>\n            </template>\n          </UiTanStackTable>\n        </Motion>\n\n        <!-- ─── Right: Profile + Cards + Budgets ──────────────────────────── -->\n        <Motion\n          :initial=\"{ opacity: 0, y: 16 }\"\n          :animate=\"{ opacity: 1, y: 0 }\"\n          :transition=\"{ duration: 0.4, delay: 0.18, ease: 'easeOut' }\"\n          class=\"overflow-hidden rounded-2xl border border-border/70 bg-card shadow-xs\"\n        >\n          <!-- Profile banner -->\n          <div\n            class=\"relative h-28 bg-linear-to-br from-indigo-200 via-purple-100 to-rose-200 dark:from-indigo-900/60 dark:via-purple-900/40 dark:to-rose-900/60\"\n          />\n\n          <!-- Avatar + name section -->\n          <div class=\"px-5 pb-5\">\n            <div class=\"relative -mt-10 mb-3 flex items-end gap-3\">\n              <div class=\"relative shrink-0\">\n                <UiAvatar\n                  src=\"https://i.pravatar.cc/150?img=47\"\n                  alt=\"Sasha Pryce\"\n                  fallback=\"OR\"\n                  class=\"size-20 ring-4 ring-card\"\n                />\n                <div\n                  class=\"absolute right-0 bottom-0 flex size-6 items-center justify-center rounded-full bg-blue-500 ring-2 ring-card\"\n                >\n                  <Icon name=\"heroicons:check\" class=\"size-3 text-white\" />\n                </div>\n              </div>\n            </div>\n\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <h2 class=\"text-xl font-bold\">Sasha Pryce</h2>\n              <span\n                class=\"inline-flex items-center gap-1 rounded-full border border-border/60 bg-muted/40 px-2.5 py-0.5 text-xs font-medium\"\n              >\n                <span class=\"size-1.5 rounded-full bg-primary\" />\n                Premium\n              </span>\n            </div>\n            <p class=\"mt-0.5 text-sm text-muted-foreground\">sasha@ui-thing.com</p>\n          </div>\n\n          <div class=\"border-t border-border/60\" />\n\n          <!-- My cards section -->\n          <div class=\"p-5\">\n            <div class=\"mb-3 flex items-center justify-between\">\n              <h3 class=\"text-sm font-semibold\">My cards</h3>\n              <UiTooltip>\n                <UiTooltipTrigger as-child>\n                  <UiButton\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    class=\"h-7 gap-1.5 text-xs text-muted-foreground\"\n                    @click=\"addCardOpen = true\"\n                  >\n                    <Icon name=\"heroicons:plus\" class=\"size-3.5\" />\n                    Add card\n                  </UiButton>\n                </UiTooltipTrigger>\n                <UiTooltipContent><p>Add new card</p></UiTooltipContent>\n              </UiTooltip>\n            </div>\n\n            <!-- Scrollable cards -->\n            <div\n              class=\"flex gap-3 overflow-x-auto pb-2 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n            >\n              <div\n                v-for=\"card in cards\"\n                :key=\"card.id\"\n                class=\"w-60 shrink-0 overflow-hidden rounded-lg border border-border/50 shadow-sm\"\n              >\n                <!-- Card top -->\n                <div\n                  class=\"flex items-start justify-between bg-linear-to-br from-muted to-muted/50 px-3.5 py-3.5\"\n                >\n                  <p class=\"truncate text-sm font-medium text-muted-foreground\">{{ card.label }}</p>\n                  <Icon name=\"heroicons:signal\" class=\"size-5 rotate-90 text-muted-foreground/60\" />\n                </div>\n                <!-- Card bottom -->\n                <div class=\"bg-zinc-900 px-3.5 py-4 text-zinc-50\">\n                  <div class=\"mb-2 flex items-center justify-between\">\n                    <div class=\"leading-tight\">\n                      <p class=\"text-xs font-medium tracking-wider uppercase opacity-60\">\n                        {{ card.holderName }}\n                      </p>\n                      <p class=\"text-xs opacity-60\">{{ card.expiry }}</p>\n                    </div>\n                    <!-- Toggle -->\n                    <UiSwitch v-model=\"card.active\" />\n                  </div>\n                  <p class=\"font-mono text-sm tracking-widest opacity-80\">\n                    {{ card.cardNumber }}\n                  </p>\n                </div>\n              </div>\n            </div>\n\n            <!-- Dot indicators -->\n            <div class=\"mt-2.5 flex items-center gap-1.5\">\n              <span\n                v-for=\"(card, i) in cards\"\n                :key=\"card.id\"\n                class=\"rounded-full transition-all\"\n                :class=\"i === 0 ? 'size-2 bg-primary' : 'size-1.5 bg-muted-foreground/30'\"\n              />\n            </div>\n          </div>\n\n          <div class=\"border-t border-border/60\" />\n\n          <!-- My budgets section -->\n          <div class=\"p-5\">\n            <div class=\"mb-4 flex items-center justify-between\">\n              <h3 class=\"text-sm font-semibold\">My budgets</h3>\n              <UiTooltip>\n                <UiDropdownMenu>\n                  <UiTooltipTrigger as-child>\n                    <UiDropdownMenuTrigger as-child>\n                      <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"text-muted-foreground\">\n                        <Icon name=\"heroicons:ellipsis-vertical\" class=\"size-4\" />\n                      </UiButton>\n                    </UiDropdownMenuTrigger>\n                  </UiTooltipTrigger>\n                  <UiTooltipContent><p>Budget options</p></UiTooltipContent>\n                  <UiDropdownMenuContent align=\"end\">\n                    <UiDropdownMenuItem icon=\"heroicons:plus\" title=\"Add budget\" />\n                    <UiDropdownMenuItem icon=\"heroicons:pencil\" title=\"Edit budgets\" />\n                    <UiDropdownMenuItem icon=\"heroicons:arrow-path\" title=\"Reset periods\" />\n                  </UiDropdownMenuContent>\n                </UiDropdownMenu>\n              </UiTooltip>\n            </div>\n\n            <div class=\"space-y-3\">\n              <div\n                v-for=\"budget in budgets\"\n                :key=\"budget.name\"\n                class=\"flex items-center gap-3 rounded-xl px-3 py-2.5\"\n                :style=\"{ backgroundColor: isDark ? budget.darkBgColor : budget.bgColor }\"\n              >\n                <div\n                  class=\"flex size-9 shrink-0 items-center justify-center rounded-xl\"\n                  :style=\"{ backgroundColor: isDark ? budget.darkIconBg : budget.iconBg }\"\n                >\n                  <Icon :name=\"budget.icon\" class=\"size-4\" :style=\"{ color: budget.color }\" />\n                </div>\n                <div class=\"min-w-0 flex-1\">\n                  <div class=\"flex items-center justify-between\">\n                    <p class=\"text-xs font-semibold\" :style=\"{ color: budget.color }\">\n                      {{ budget.name }}\n                    </p>\n                    <p class=\"text-xs font-medium text-muted-foreground\">${{ budget.left }} left</p>\n                  </div>\n                  <div\n                    class=\"mt-1.5 h-1.5 w-full overflow-hidden rounded-full bg-black/5 dark:bg-white/10\"\n                  >\n                    <div\n                      class=\"h-full rounded-full transition-all\"\n                      :style=\"{ width: `${budget.percent}%`, backgroundColor: budget.color }\"\n                    />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </Motion>\n      </div>\n    </UiContainer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import type { ColumnDef } from \"@tanstack/vue-table\";\n  import type { ApexOptions } from \"apexcharts\";\n  import { Motion } from \"motion-v\";\n  import { object, string } from \"yup\";\n\n  // ─── Navigation ──────────────────────────────────────────────────────────────\n  const navItems = [\n    { label: \"Home\", active: false },\n    { label: \"Dashboard\", active: true },\n    { label: \"Projects\", active: false },\n    { label: \"Tasks\", active: false },\n    { label: \"Reporting\", active: false },\n    { label: \"Users\", active: false },\n  ];\n\n  // ─── Keyboard shortcut ────────────────────────────────────────────────────────\n  const searchOpen = ref(false);\n  const handleKeydown = (e: KeyboardEvent) => {\n    if ((e.metaKey || e.ctrlKey) && e.key === \"k\") {\n      e.preventDefault();\n      searchOpen.value = true;\n    }\n  };\n  onMounted(() => document.addEventListener(\"keydown\", handleKeydown));\n  onUnmounted(() => document.removeEventListener(\"keydown\", handleKeydown));\n\n  // ─── Balance tabs + chart ─────────────────────────────────────────────────────\n  const balanceTabs = [\n    { value: \"personal\", label: \"Personal\" },\n    { value: \"business\", label: \"Business\" },\n    { value: \"credit\", label: \"Credit\" },\n  ];\n  const activeBalanceTab = ref(\"personal\");\n\n  const balanceByTab: Record<string, string> = {\n    personal: \"$40,206.20\",\n    business: \"$128,450.00\",\n    credit: \"-$3,120.55\",\n  };\n\n  const chartDataByTab: Record<string, { name: string; data: number[] }[]> = {\n    personal: [\n      {\n        name: \"Balance\",\n        data: [38200, 39100, 38700, 39800, 39400, 40200, 40800, 39900, 40500, 41200, 40800, 40206],\n      },\n      {\n        name: \"Spending\",\n        data: [1100, 1350, 1080, 1520, 1240, 1480, 1720, 1180, 1360, 1540, 1660, 1480],\n      },\n      {\n        name: \"Income\",\n        data: [2400, 2700, 2550, 2850, 2650, 2950, 3100, 2750, 3000, 3200, 2850, 3050],\n      },\n    ],\n    business: [\n      {\n        name: \"Revenue\",\n        data: [\n          98000, 104000, 97500, 112000, 108000, 118000, 122000, 115000, 124000, 131000, 127000,\n          128450,\n        ],\n      },\n      {\n        name: \"Expenses\",\n        data: [42000, 46000, 41000, 50000, 47000, 52000, 55000, 50000, 54000, 58000, 56000, 58000],\n      },\n      {\n        name: \"Profit\",\n        data: [56000, 58000, 56500, 62000, 61000, 66000, 67000, 65000, 70000, 73000, 71000, 70450],\n      },\n    ],\n    credit: [\n      {\n        name: \"Balance\",\n        data: [-1800, -2100, -1650, -2400, -2200, -2550, -2800, -2400, -2700, -3000, -2900, -3121],\n      },\n      {\n        name: \"Limit\",\n        data: [5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000],\n      },\n      { name: \"Payments\", data: [600, 750, 580, 880, 780, 920, 1050, 820, 960, 1080, 980, 1020] },\n    ],\n  };\n\n  const chartSeries = computed(() => chartDataByTab[activeBalanceTab.value]);\n\n  const chartOptions = computed<ApexOptions>(() => ({\n    chart: {\n      type: \"area\",\n      background: \"transparent\",\n      toolbar: { show: false },\n      parentHeightOffset: 0,\n      animations: { enabled: true, speed: 400, easing: \"easeinout\" },\n    },\n    colors: [\n      \"var(--color-primary)\",\n      \"color-mix(in oklab, var(--color-primary) 60%, white)\",\n      \"color-mix(in oklab, var(--color-primary) 30%, white)\",\n    ],\n    stroke: { width: [2, 2, 2], curve: \"smooth\" },\n    fill: {\n      type: \"gradient\",\n      gradient: {\n        type: \"vertical\",\n        shadeIntensity: 0.5,\n        opacityFrom: 0.15,\n        opacityTo: 0,\n        stops: [0, 100],\n      },\n    },\n    dataLabels: { enabled: false },\n    markers: { size: 0 },\n    grid: {\n      strokeDashArray: 4,\n      xaxis: { lines: { show: false } },\n      yaxis: { lines: { show: true } },\n      padding: { left: 4, right: 4 },\n    },\n    xaxis: {\n      categories: [\n        \"Jan\",\n        \"Feb\",\n        \"Mar\",\n        \"Apr\",\n        \"May\",\n        \"Jun\",\n        \"Jul\",\n        \"Aug\",\n        \"Sep\",\n        \"Oct\",\n        \"Nov\",\n        \"Dec\",\n      ],\n      axisBorder: { show: false },\n      axisTicks: { show: false },\n      labels: { style: { fontSize: \"11px\" } },\n    },\n    yaxis: { show: false },\n    legend: { show: false },\n    tooltip: { shared: true, intersect: false },\n  }));\n\n  // ─── Date picker ─────────────────────────────────────────────────────────────\n  const txDateRange = ref({ start: new Date(\"2025-01-01\"), end: new Date(\"2025-12-31\") });\n\n  // ─── Filter dialog ────────────────────────────────────────────────────────────\n  const filterOpen = ref(false);\n\n  const filterCategories = reactive([\n    { key: \"income\", label: \"Income\", checked: true },\n    { key: \"subscriptions\", label: \"Subscriptions\", checked: true },\n    { key: \"food\", label: \"Food and dining\", checked: true },\n    { key: \"groceries\", label: \"Groceries\", checked: true },\n    { key: \"travel\", label: \"Travel\", checked: false },\n    { key: \"entertainment\", label: \"Entertainment\", checked: false },\n  ]);\n\n  const filterAccounts = reactive([\n    { key: \"visa\", label: \"Visa 1234\", checked: true },\n    { key: \"mastercard\", label: \"Mastercard 1234\", checked: true },\n    { key: \"savings\", label: \"Savings account\", checked: false },\n  ]);\n\n  const filterTypes = reactive([\n    { key: \"debit\", label: \"Debits (outgoing)\", checked: true },\n    { key: \"credit\", label: \"Credits (incoming)\", checked: true },\n  ]);\n\n  const resetFilters = () => {\n    filterCategories.forEach((c) => (c.checked = false));\n    filterAccounts.forEach((a) => (a.checked = false));\n    filterTypes.forEach((t) => (t.checked = false));\n  };\n\n  const applyFilters = () => {\n    filterOpen.value = false;\n    useSonner(\"Filters applied\", {\n      description: \"Transaction history has been updated with your filter selection.\",\n    });\n  };\n\n  // ─── Transaction table ────────────────────────────────────────────────────────\n  type TransactionRow = {\n    id: number;\n    name: string;\n    fallback: string;\n    iconBg: string;\n    iconColor: string;\n    amount: number;\n    category: string;\n    categoryColor: string;\n    cardType: \"visa\" | \"mastercard\";\n    cardLast4: string;\n    expiry: string;\n  };\n\n  const txColumns: ColumnDef<TransactionRow>[] = [\n    {\n      id: \"transaction\",\n      accessorKey: \"name\",\n      header: \"Transaction\",\n    },\n    {\n      id: \"amount\",\n      accessorKey: \"amount\",\n      header: \"Amount\",\n      meta: { class: { th: \"w-28\", td: \"w-28\" } },\n    },\n    {\n      id: \"category\",\n      accessorKey: \"category\",\n      header: \"Category\",\n      enableSorting: false,\n      meta: { class: { th: \"hidden sm:table-cell\", td: \"hidden sm:table-cell\" } },\n    },\n    {\n      id: \"account\",\n      accessorKey: \"cardLast4\",\n      header: \"Account\",\n      enableSorting: false,\n      meta: { class: { th: \"hidden md:table-cell\", td: \"hidden md:table-cell\" } },\n    },\n    {\n      id: \"actions\",\n      header: \"\",\n      enableSorting: false,\n      meta: { class: { th: \"w-10\", td: \"w-10\" } },\n    },\n  ];\n\n  const categoryOptions = [\"Income\", \"Subscriptions\", \"Food and dining\", \"Groceries\", \"Travel\"];\n\n  const allTransactions: TransactionRow[] = [\n    {\n      id: 1,\n      name: \"Spotify\",\n      fallback: \"🎵\",\n      iconBg: \"#1DB954\",\n      iconColor: \"#fff\",\n      amount: -18.99,\n      category: \"Subscriptions\",\n      categoryColor: \"#6366f1\",\n      cardType: \"visa\",\n      cardLast4: \"1234\",\n      expiry: \"06/2025\",\n    },\n    {\n      id: 2,\n      name: \"A Coffee\",\n      fallback: \"AC\",\n      iconBg: \"#e5e7eb\",\n      iconColor: \"#374151\",\n      amount: -4.5,\n      category: \"Food and dining\",\n      categoryColor: \"#ec4899\",\n      cardType: \"visa\",\n      cardLast4: \"1234\",\n      expiry: \"06/2025\",\n    },\n    {\n      id: 3,\n      name: \"Stripe\",\n      fallback: \"S\",\n      iconBg: \"#635bff\",\n      iconColor: \"#fff\",\n      amount: 88.0,\n      category: \"Income\",\n      categoryColor: \"#10b981\",\n      cardType: \"mastercard\",\n      cardLast4: \"1234\",\n      expiry: \"06/2025\",\n    },\n    {\n      id: 4,\n      name: \"Figma\",\n      fallback: \"F\",\n      iconBg: \"#1e1e1e\",\n      iconColor: \"#fff\",\n      amount: -15.0,\n      category: \"Subscriptions\",\n      categoryColor: \"#6366f1\",\n      cardType: \"visa\",\n      cardLast4: \"1234\",\n      expiry: \"06/2025\",\n    },\n    {\n      id: 5,\n      name: \"TBF Bakery\",\n      fallback: \"TB\",\n      iconBg: \"#fef3c7\",\n      iconColor: \"#92400e\",\n      amount: -12.5,\n      category: \"Food and dining\",\n      categoryColor: \"#ec4899\",\n      cardType: \"visa\",\n      cardLast4: \"1234\",\n      expiry: \"06/2025\",\n    },\n    {\n      id: 6,\n      name: \"Fresh F&V\",\n      fallback: \"FV\",\n      iconBg: \"#dcfce7\",\n      iconColor: \"#166534\",\n      amount: -40.2,\n      category: \"Groceries\",\n      categoryColor: \"#3b82f6\",\n      cardType: \"visa\",\n      cardLast4: \"1234\",\n      expiry: \"06/2025\",\n    },\n    {\n      id: 7,\n      name: \"Stripe\",\n      fallback: \"S\",\n      iconBg: \"#635bff\",\n      iconColor: \"#fff\",\n      amount: 88.0,\n      category: \"Income\",\n      categoryColor: \"#10b981\",\n      cardType: \"mastercard\",\n      cardLast4: \"1234\",\n      expiry: \"06/2025\",\n    },\n    {\n      id: 8,\n      name: \"Netflix\",\n      fallback: \"N\",\n      iconBg: \"#e50914\",\n      iconColor: \"#fff\",\n      amount: -15.99,\n      category: \"Subscriptions\",\n      categoryColor: \"#6366f1\",\n      cardType: \"visa\",\n      cardLast4: \"1234\",\n      expiry: \"06/2025\",\n    },\n    {\n      id: 9,\n      name: \"Amazon\",\n      fallback: \"A\",\n      iconBg: \"#ff9900\",\n      iconColor: \"#000\",\n      amount: -67.8,\n      category: \"Groceries\",\n      categoryColor: \"#3b82f6\",\n      cardType: \"visa\",\n      cardLast4: \"1234\",\n      expiry: \"06/2025\",\n    },\n    {\n      id: 10,\n      name: \"Freelance\",\n      fallback: \"FL\",\n      iconBg: \"#dbeafe\",\n      iconColor: \"#1d4ed8\",\n      amount: 350.0,\n      category: \"Income\",\n      categoryColor: \"#10b981\",\n      cardType: \"mastercard\",\n      cardLast4: \"1234\",\n      expiry: \"06/2025\",\n    },\n    {\n      id: 11,\n      name: \"Uber Eats\",\n      fallback: \"UE\",\n      iconBg: \"#1c1c1c\",\n      iconColor: \"#06c167\",\n      amount: -32.4,\n      category: \"Food and dining\",\n      categoryColor: \"#ec4899\",\n      cardType: \"visa\",\n      cardLast4: \"1234\",\n      expiry: \"06/2025\",\n    },\n    {\n      id: 12,\n      name: \"Apple\",\n      fallback: \"🍎\",\n      iconBg: \"#f3f4f6\",\n      iconColor: \"#111827\",\n      amount: -9.99,\n      category: \"Subscriptions\",\n      categoryColor: \"#6366f1\",\n      cardType: \"visa\",\n      cardLast4: \"1234\",\n      expiry: \"06/2025\",\n    },\n    {\n      id: 13,\n      name: \"Whole Foods\",\n      fallback: \"WF\",\n      iconBg: \"#f0fdf4\",\n      iconColor: \"#15803d\",\n      amount: -55.3,\n      category: \"Groceries\",\n      categoryColor: \"#3b82f6\",\n      cardType: \"mastercard\",\n      cardLast4: \"1234\",\n      expiry: \"06/2025\",\n    },\n    {\n      id: 14,\n      name: \"Consulting\",\n      fallback: \"CO\",\n      iconBg: \"#ede9fe\",\n      iconColor: \"#7c3aed\",\n      amount: 500.0,\n      category: \"Income\",\n      categoryColor: \"#10b981\",\n      cardType: \"mastercard\",\n      cardLast4: \"1234\",\n      expiry: \"06/2025\",\n    },\n  ];\n\n  const editTransaction = (row: TransactionRow) => {\n    useSonner(`Editing transaction`, { description: `Opening editor for \"${row.name}\"` });\n  };\n\n  // ─── Add card dialog ──────────────────────────────────────────────────────────\n  const addCardOpen = ref(false);\n\n  interface CardItem {\n    id: string;\n    label: string;\n    cardNumber: string;\n    holderName: string;\n    expiry: string;\n    active: boolean;\n  }\n\n  const cards = ref<CardItem[]>([\n    {\n      id: \"1\",\n      label: \"Personal Visa\",\n      cardNumber: \"1234 1234 1234 1234\",\n      holderName: \"SASHA PRYCE\",\n      expiry: \"06/28\",\n      active: true,\n    },\n    {\n      id: \"2\",\n      label: \"Business Card\",\n      cardNumber: \"5678 5678 5678 5678\",\n      holderName: \"SASHA PRYCE\",\n      expiry: \"09/26\",\n      active: false,\n    },\n  ]);\n\n  const AddCardSchema = object({\n    label: string().required().label(\"Card label\").min(1).max(50),\n    holderName: string().required().label(\"Cardholder name\").min(2).max(60),\n    cardNumber: string()\n      .required()\n      .label(\"Card number\")\n      .matches(/^\\d{4} \\d{4} \\d{4} \\d{4}$/, \"Must be a valid 16-digit card number\"),\n    expiry: string()\n      .required()\n      .label(\"Expiry\")\n      .matches(/^\\d{2}\\/\\d{2}$/, \"Must be in MM/YY format\"),\n  });\n\n  const {\n    handleSubmit: handleAddCardSubmit,\n    isSubmitting: isAddingCard,\n    resetForm: resetAddCardForm,\n    setFieldValue,\n  } = useForm({ name: \"addCardForm12\", validationSchema: toTypedSchema(AddCardSchema) });\n\n  const formatCardNumber = (e: Event) => {\n    const input = e.target as HTMLInputElement;\n    const cleaned = input.value.replace(/\\D/g, \"\").slice(0, 16);\n    const formatted = cleaned.replace(/(.{4})/g, \"$1 \").trim();\n    input.value = formatted;\n    setFieldValue(\"cardNumber\", formatted);\n  };\n\n  const formatExpiry = (e: Event) => {\n    const input = e.target as HTMLInputElement;\n    let val = input.value.replace(/\\D/g, \"\").slice(0, 4);\n    if (val.length > 2) val = val.slice(0, 2) + \"/\" + val.slice(2);\n    input.value = val;\n    setFieldValue(\"expiry\", val);\n  };\n\n  const submitAddCard = handleAddCardSubmit((values) => {\n    cards.value.push({\n      id: Date.now().toString(),\n      label: values.label,\n      cardNumber: values.cardNumber,\n      holderName: values.holderName.toUpperCase(),\n      expiry: values.expiry,\n      active: true,\n    });\n    addCardOpen.value = false;\n    useSonner(\"Card added\", { description: `\"${values.label}\" has been added to your cards.` });\n    resetAddCardForm();\n  });\n\n  const onAddCardClose = (open: boolean) => {\n    if (!open) resetAddCardForm();\n  };\n\n  // ─── Budgets ──────────────────────────────────────────────────────────────────\n  const colorMode = useColorMode();\n  const isDark = computed(() => colorMode.value === \"dark\");\n\n  const budgets = [\n    {\n      name: \"Subscriptions\",\n      icon: \"heroicons:computer-desktop\",\n      left: 25,\n      percent: 82,\n      color: \"#6366f1\",\n      iconBg: \"#e0e7ff\",\n      bgColor: \"#eef2ff\",\n      darkIconBg: \"rgba(99,102,241,0.18)\",\n      darkBgColor: \"rgba(99,102,241,0.1)\",\n    },\n    {\n      name: \"Food and booze\",\n      icon: \"heroicons:shopping-bag\",\n      left: 120,\n      percent: 56,\n      color: \"#ec4899\",\n      iconBg: \"#fce7f3\",\n      bgColor: \"#fdf2f8\",\n      darkIconBg: \"rgba(236,72,153,0.18)\",\n      darkBgColor: \"rgba(236,72,153,0.1)\",\n    },\n    {\n      name: \"Groceries\",\n      icon: \"heroicons:shopping-cart\",\n      left: 200,\n      percent: 44,\n      color: \"#3b82f6\",\n      iconBg: \"#dbeafe\",\n      bgColor: \"#eff6ff\",\n      darkIconBg: \"rgba(59,130,246,0.18)\",\n      darkBgColor: \"rgba(59,130,246,0.1)\",\n    },\n    {\n      name: \"Savings\",\n      icon: \"heroicons:banknotes\",\n      left: 50,\n      percent: 68,\n      color: \"#10b981\",\n      iconBg: \"#d1fae5\",\n      bgColor: \"#f0fdf4\",\n      darkIconBg: \"rgba(16,185,129,0.18)\",\n      darkBgColor: \"rgba(16,185,129,0.1)\",\n    },\n  ];\n</script>\n","category":"Dashboards","path":"Dashboards/BlockDashboards12.vue","components":["apexchart","avatar","badge","button","buttongroup","checkbox","commanddialog","commandempty","commandgroup","commandinput","commanditem","commandlist","commandseparator","container","datepicker","dialog","dialogcontent","dialogdescription","dialogfooter","dialogheader","dialogtitle","dropdownmenu","dropdownmenucontent","dropdownmenuitem","dropdownmenulabel","dropdownmenuseparator","dropdownmenutrigger","kbd","pagination","paginationellipsis","paginationitem","paginationlist","paginationnext","paginationprev","popover","popovercontent","popovertrigger","switch","tanstacktable","tooltip","tooltipcontent","tooltiptrigger","veeinput"]},{"name":"Dashboards 13","fileName":"BlockDashboards13.vue","file":"<template>\n  <div class=\"min-h-screen bg-muted/40 text-foreground dark:bg-muted/10\">\n    <!-- ─── Deposit dialog ─────────────────────────────────────────────────────── -->\n    <UiDialog v-model:open=\"depositOpen\" @update:open=\"(o) => !o && resetDepositForm()\">\n      <UiDialogContent class=\"sm:max-w-md\">\n        <UiDialogHeader>\n          <UiDialogTitle>New bank deposit</UiDialogTitle>\n          <UiDialogDescription>Transfer funds to a recipient's bank account.</UiDialogDescription>\n        </UiDialogHeader>\n        <form @submit=\"submitDeposit\">\n          <fieldset :disabled=\"isSubmittingDeposit\" class=\"space-y-4 py-1\">\n            <UiVeeSelect required label=\"From account\" name=\"fromAccount\">\n              <option value=\"\" disabled>Select account</option>\n              <option value=\"primary\">\n                Primary — ${{\n                  user.primaryAccount.balance.toLocaleString(\"en-US\", { minimumFractionDigits: 2 })\n                }}\n              </option>\n              <option value=\"secondary\">\n                Secondary — ${{\n                  user.secondaryAccount.balance.toLocaleString(\"en-US\", {\n                    minimumFractionDigits: 2,\n                  })\n                }}\n              </option>\n            </UiVeeSelect>\n            <UiVeeInput\n              required\n              label=\"Recipient name\"\n              name=\"recipientName\"\n              placeholder=\"e.g. Jane Smith\"\n            />\n            <UiVeeInput\n              required\n              label=\"Bank name\"\n              name=\"bankName\"\n              placeholder=\"e.g. First National Bank\"\n            />\n            <div class=\"grid grid-cols-2 gap-3\">\n              <UiVeeInput\n                required\n                label=\"Account number\"\n                name=\"accountNumber\"\n                placeholder=\"e.g. 12345678\"\n              />\n              <UiVeeInput\n                required\n                label=\"Routing number\"\n                name=\"routingNumber\"\n                placeholder=\"9 digits\"\n                :maxlength=\"9\"\n                pattern=\"[0-9]{9}\"\n              />\n            </div>\n            <UiVeeInput required label=\"Amount ($)\" name=\"amount\" placeholder=\"0.00\" />\n            <UiVeeInput label=\"Memo (optional)\" name=\"memo\" placeholder=\"e.g. Invoice #1024\" />\n          </fieldset>\n          <UiDialogFooter class=\"mt-5\">\n            <UiButton type=\"button\" variant=\"outline\" @click=\"depositOpen = false\">Cancel</UiButton>\n            <UiButton type=\"submit\" :disabled=\"isSubmittingDeposit\">Send deposit</UiButton>\n          </UiDialogFooter>\n        </form>\n      </UiDialogContent>\n    </UiDialog>\n\n    <!-- ─── Send funds dialog ──────────────────────────────────────────────────── -->\n    <UiDialog v-model:open=\"sendFundsOpen\" @update:open=\"(o) => !o && resetSendFundsForm()\">\n      <UiDialogContent class=\"sm:max-w-md\">\n        <UiDialogHeader>\n          <UiDialogTitle>Send funds</UiDialogTitle>\n          <UiDialogDescription>Send money to a friend or business instantly.</UiDialogDescription>\n        </UiDialogHeader>\n        <form @submit=\"submitSendFunds\">\n          <fieldset :disabled=\"isSubmittingSendFunds\" class=\"space-y-4 py-1\">\n            <UiVeeInput\n              required\n              label=\"To\"\n              name=\"recipient\"\n              placeholder=\"Name, email, or phone number\"\n            />\n            <UiVeeInput required label=\"Amount ($)\" name=\"amount\" placeholder=\"0.00\" />\n            <UiVeeSelect required label=\"From account\" name=\"fromAccount\">\n              <option value=\"\" disabled>Select account</option>\n              <option value=\"primary\">Primary account</option>\n              <option value=\"secondary\">Secondary account</option>\n            </UiVeeSelect>\n            <UiVeeSelect required label=\"Transfer type\" name=\"transferType\">\n              <option value=\"\" disabled>Select type</option>\n              <option value=\"instant\">Instant (arrives in minutes)</option>\n              <option value=\"standard\">Standard (1–3 business days)</option>\n            </UiVeeSelect>\n            <UiVeeInput label=\"Note (optional)\" name=\"note\" placeholder=\"What's it for?\" />\n          </fieldset>\n          <UiDialogFooter class=\"mt-5\">\n            <UiButton type=\"button\" variant=\"outline\" @click=\"sendFundsOpen = false\"\n              >Cancel</UiButton\n            >\n            <UiButton type=\"submit\" :disabled=\"isSubmittingSendFunds\">Send funds</UiButton>\n          </UiDialogFooter>\n        </form>\n      </UiDialogContent>\n    </UiDialog>\n\n    <!-- ─── Filters dialog ────────────────────────────────────────────────────── -->\n    <UiDialog v-model:open=\"filtersOpen\">\n      <UiDialogContent class=\"sm:max-w-sm\">\n        <UiDialogHeader>\n          <UiDialogTitle>Filter transactions</UiDialogTitle>\n          <UiDialogDescription>Narrow down your account activity.</UiDialogDescription>\n        </UiDialogHeader>\n        <div class=\"space-y-5 py-1\">\n          <div>\n            <p class=\"mb-2.5 text-sm font-medium\">Transaction type</p>\n            <div class=\"space-y-2\">\n              <label\n                v-for=\"t in filterTypes\"\n                :key=\"t.key\"\n                class=\"flex cursor-pointer items-center gap-2.5 text-sm\"\n              >\n                <UiCheckbox :id=\"`type-${t.key}`\" v-model:checked=\"t.checked\" />\n                {{ t.label }}\n              </label>\n            </div>\n          </div>\n          <div>\n            <p class=\"mb-2.5 text-sm font-medium\">Account</p>\n            <div class=\"space-y-2\">\n              <label\n                v-for=\"a in filterAccounts\"\n                :key=\"a.key\"\n                class=\"flex cursor-pointer items-center gap-2.5 text-sm\"\n              >\n                <UiCheckbox :id=\"`acc-${a.key}`\" v-model:checked=\"a.checked\" />\n                {{ a.label }}\n              </label>\n            </div>\n          </div>\n          <div>\n            <p class=\"mb-2.5 text-sm font-medium\">Status</p>\n            <div class=\"space-y-2\">\n              <label\n                v-for=\"s in filterStatuses\"\n                :key=\"s.key\"\n                class=\"flex cursor-pointer items-center gap-2.5 text-sm\"\n              >\n                <UiCheckbox :id=\"`status-${s.key}`\" v-model:checked=\"s.checked\" />\n                {{ s.label }}\n              </label>\n            </div>\n          </div>\n        </div>\n        <UiDialogFooter class=\"mt-2\">\n          <UiButton variant=\"outline\" @click=\"resetFilters\">Reset</UiButton>\n          <UiButton @click=\"applyFilters\">Apply filters</UiButton>\n        </UiDialogFooter>\n      </UiDialogContent>\n    </UiDialog>\n\n    <!-- ─── Command dialog ────────────────────────────────────────────────────── -->\n    <UiCommandDialog\n      v-model:open=\"searchOpen\"\n      title=\"Search\"\n      description=\"Search transactions and actions\"\n    >\n      <UiCommandInput placeholder=\"Search transactions, accounts…\" />\n      <UiCommandList>\n        <UiCommandEmpty>No results found.</UiCommandEmpty>\n        <UiCommandGroup heading=\"Quick actions\">\n          <UiCommandItem\n            value=\"New deposit\"\n            @select=\"\n              () => {\n                searchOpen = false;\n                depositOpen = true;\n              }\n            \"\n          >\n            <Icon name=\"heroicons:arrow-down-circle\" class=\"mr-2 size-4\" />\n            New deposit\n          </UiCommandItem>\n          <UiCommandItem\n            value=\"Send funds\"\n            @select=\"\n              () => {\n                searchOpen = false;\n                sendFundsOpen = true;\n              }\n            \"\n          >\n            <Icon name=\"heroicons:paper-airplane\" class=\"mr-2 size-4\" />\n            Send funds\n          </UiCommandItem>\n          <UiCommandItem value=\"View statements\" @select=\"searchOpen = false\">\n            <Icon name=\"heroicons:document-text\" class=\"mr-2 size-4\" />\n            Download statement\n          </UiCommandItem>\n          <UiCommandItem\n            value=\"Apply filters\"\n            @select=\"\n              () => {\n                searchOpen = false;\n                filtersOpen = true;\n              }\n            \"\n          >\n            <Icon name=\"heroicons:funnel\" class=\"mr-2 size-4\" />\n            Apply filters\n          </UiCommandItem>\n        </UiCommandGroup>\n        <UiCommandSeparator />\n        <UiCommandGroup heading=\"Recent deposits\">\n          <UiCommandItem\n            v-for=\"d in deposits.slice(0, 4)\"\n            :key=\"d.id\"\n            :value=\"d.description\"\n            @select=\"searchOpen = false\"\n          >\n            <Icon name=\"heroicons:banknotes\" class=\"mr-2 size-4\" />\n            {{ d.description }} — +${{ d.amount.toFixed(2) }}\n          </UiCommandItem>\n        </UiCommandGroup>\n        <UiCommandSeparator />\n        <UiCommandGroup heading=\"Accounts\">\n          <UiCommandItem value=\"Primary account\" @select=\"searchOpen = false\">\n            <Icon name=\"heroicons:credit-card\" class=\"mr-2 size-4\" />\n            Primary — ${{ user.primaryAccount.balance.toLocaleString() }}\n          </UiCommandItem>\n          <UiCommandItem value=\"Secondary account\" @select=\"searchOpen = false\">\n            <Icon name=\"heroicons:credit-card\" class=\"mr-2 size-4\" />\n            Secondary — ${{ user.secondaryAccount.balance.toLocaleString() }}\n          </UiCommandItem>\n        </UiCommandGroup>\n      </UiCommandList>\n      <div\n        class=\"flex items-center justify-between border-t border-border/60 px-3 py-2 text-xs text-muted-foreground\"\n      >\n        <span class=\"flex items-center gap-1.5\"><UiKbd>↵</UiKbd> to select</span>\n        <span class=\"flex items-center gap-1.5\"><UiKbd>↑↓</UiKbd> to navigate</span>\n        <span class=\"flex items-center gap-1.5\"><UiKbd>ESC</UiKbd> to close</span>\n      </div>\n    </UiCommandDialog>\n\n    <!-- ─── Header ────────────────────────────────────────────────────────────── -->\n    <header class=\"sticky top-0 z-40 border-b border-border/60 bg-background/95 backdrop-blur\">\n      <UiContainer class=\"flex min-h-[3.5rem] items-center justify-between gap-4\">\n        <!-- Logo + nav -->\n        <div class=\"flex items-center gap-6\">\n          <div class=\"flex items-center gap-2.5\">\n            <div class=\"flex size-7 items-center justify-center rounded-lg bg-primary\">\n              <Icon name=\"heroicons:cube-transparent\" class=\"size-4 text-primary-foreground\" />\n            </div>\n            <span class=\"hidden text-sm font-semibold sm:inline\">UI Thing</span>\n          </div>\n          <nav class=\"hidden items-center gap-0.5 lg:flex\">\n            <UiButton\n              v-for=\"item in navItems\"\n              :key=\"item.label\"\n              variant=\"ghost\"\n              size=\"sm\"\n              :class=\"\n                item.active ? 'bg-muted font-medium text-foreground' : 'text-muted-foreground'\n              \"\n            >\n              {{ item.label }}\n            </UiButton>\n          </nav>\n        </div>\n\n        <!-- Icon buttons -->\n        <div class=\"flex items-center gap-1\">\n          <!-- Search -->\n          <UiTooltip>\n            <UiTooltipTrigger as-child>\n              <UiButton variant=\"ghost\" size=\"icon-sm\" @click=\"searchOpen = true\">\n                <Icon name=\"heroicons:magnifying-glass\" class=\"size-4\" />\n              </UiButton>\n            </UiTooltipTrigger>\n            <UiTooltipContent><p>Search (⌘K)</p></UiTooltipContent>\n          </UiTooltip>\n\n          <!-- Settings -->\n          <UiTooltip>\n            <UiDropdownMenu>\n              <UiTooltipTrigger as-child>\n                <UiDropdownMenuTrigger as-child>\n                  <UiButton variant=\"ghost\" size=\"icon-sm\">\n                    <Icon name=\"heroicons:cog-6-tooth\" class=\"size-4\" />\n                  </UiButton>\n                </UiDropdownMenuTrigger>\n              </UiTooltipTrigger>\n              <UiTooltipContent><p>Settings</p></UiTooltipContent>\n              <UiDropdownMenuContent align=\"end\" class=\"w-52\">\n                <UiDropdownMenuLabel>Settings</UiDropdownMenuLabel>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem icon=\"heroicons:user\" title=\"Account settings\" />\n                <UiDropdownMenuItem icon=\"heroicons:shield-check\" title=\"Security & privacy\" />\n                <UiDropdownMenuItem icon=\"heroicons:bell\" title=\"Notification preferences\" />\n                <UiDropdownMenuItem icon=\"heroicons:swatch\" title=\"Appearance\" />\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem icon=\"heroicons:credit-card\" title=\"Billing & plans\" />\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem\n                  variant=\"destructive\"\n                  icon=\"heroicons:arrow-right-on-rectangle\"\n                  title=\"Sign out\"\n                />\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiTooltip>\n\n          <!-- Notifications -->\n          <UiTooltip>\n            <UiDropdownMenu>\n              <UiTooltipTrigger as-child>\n                <UiDropdownMenuTrigger as-child>\n                  <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"relative\">\n                    <Icon name=\"heroicons:bell\" class=\"size-4\" />\n                    <span class=\"absolute top-1 right-0 size-1.5 rounded-full bg-primary\" />\n                  </UiButton>\n                </UiDropdownMenuTrigger>\n              </UiTooltipTrigger>\n              <UiTooltipContent><p>Notifications</p></UiTooltipContent>\n              <UiDropdownMenuContent align=\"end\" class=\"w-80\">\n                <UiDropdownMenuLabel class=\"flex items-center justify-between\">\n                  Notifications\n                  <UiBadge variant=\"secondary\" size=\"sm\">2 new</UiBadge>\n                </UiDropdownMenuLabel>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem\n                  icon=\"heroicons:banknotes\"\n                  title=\"Stripe deposit of $408.00 received\"\n                />\n                <UiDropdownMenuItem\n                  icon=\"heroicons:arrow-trending-up\"\n                  title=\"Balance increased by $244.00\"\n                />\n                <UiDropdownMenuItem\n                  icon=\"heroicons:exclamation-triangle\"\n                  title=\"Card statement ready for June 2025\"\n                />\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem icon=\"heroicons:check\" title=\"Mark all as read\" />\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiTooltip>\n\n          <!-- Avatar / account -->\n          <UiTooltip>\n            <UiDropdownMenu>\n              <UiTooltipTrigger as-child>\n                <UiDropdownMenuTrigger as-child>\n                  <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full p-0\">\n                    <UiAvatar\n                      :src=\"user.avatar\"\n                      :alt=\"user.name\"\n                      :fallback=\"user.initials\"\n                      class=\"size-8 cursor-pointer\"\n                    />\n                  </UiButton>\n                </UiDropdownMenuTrigger>\n              </UiTooltipTrigger>\n              <UiTooltipContent><p>Account</p></UiTooltipContent>\n              <UiDropdownMenuContent align=\"end\" class=\"w-52\">\n                <UiDropdownMenuLabel>\n                  <p class=\"font-semibold\">{{ user.name }}</p>\n                  <p class=\"text-xs font-normal text-muted-foreground\">{{ user.email }}</p>\n                </UiDropdownMenuLabel>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem icon=\"heroicons:user\" title=\"Profile\" />\n                <UiDropdownMenuItem icon=\"heroicons:cog-6-tooth\" title=\"Settings\" />\n                <UiDropdownMenuItem icon=\"heroicons:credit-card\" title=\"Billing\" />\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem\n                  variant=\"destructive\"\n                  icon=\"heroicons:arrow-right-on-rectangle\"\n                  title=\"Sign out\"\n                />\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiTooltip>\n\n          <!-- Mobile menu -->\n          <UiTooltip>\n            <UiPopover class=\"lg:hidden\">\n              <UiTooltipTrigger as-child>\n                <UiPopoverTrigger as-child>\n                  <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"lg:hidden\">\n                    <Icon name=\"heroicons:bars-3\" class=\"size-4\" />\n                  </UiButton>\n                </UiPopoverTrigger>\n              </UiTooltipTrigger>\n              <UiTooltipContent><p>Menu</p></UiTooltipContent>\n              <UiPopoverContent align=\"end\" class=\"w-48 p-1\">\n                <UiButton\n                  v-for=\"item in navItems\"\n                  :key=\"item.label\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  class=\"w-full justify-start\"\n                  :class=\"item.active ? 'text-foreground' : 'text-muted-foreground'\"\n                >\n                  {{ item.label }}\n                </UiButton>\n              </UiPopoverContent>\n            </UiPopover>\n          </UiTooltip>\n        </div>\n      </UiContainer>\n    </header>\n\n    <!-- ─── Main ──────────────────────────────────────────────────────────────── -->\n    <UiContainer class=\"space-y-5 py-8\">\n      <!-- Page header -->\n      <Motion\n        :initial=\"{ opacity: 0, y: -8 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.3, ease: 'easeOut' }\"\n      >\n        <div class=\"flex flex-wrap items-start justify-between gap-4\">\n          <div>\n            <h1 class=\"text-2xl font-bold tracking-tight\">Banking Dashboard</h1>\n            <p class=\"mt-0.5 text-sm text-muted-foreground\">\n              Here's your account details and deposits.\n            </p>\n          </div>\n          <div class=\"flex items-center gap-2\">\n            <UiButton variant=\"outline\" class=\"gap-2\" @click=\"depositOpen = true\">\n              <Icon name=\"heroicons:arrow-down-circle\" class=\"size-4\" />\n              Deposit\n            </UiButton>\n            <UiButton class=\"gap-2\" @click=\"sendFundsOpen = true\">\n              <Icon name=\"heroicons:paper-airplane\" class=\"size-4\" />\n              Send funds\n            </UiButton>\n          </div>\n        </div>\n      </Motion>\n\n      <!-- Time tabs + date picker + filters -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 8 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.3, delay: 0.05, ease: 'easeOut' }\"\n      >\n        <div class=\"flex flex-wrap items-center justify-between gap-3\">\n          <UiButtonGroup>\n            <UiButton\n              v-for=\"tab in timeTabs\"\n              :key=\"tab.value\"\n              :variant=\"activeTab === tab.value ? 'default' : 'outline'\"\n              size=\"sm\"\n              @click=\"activeTab = tab.value\"\n            >\n              <span class=\"hidden sm:inline\">{{ tab.label }}</span>\n              <span class=\"sm:hidden\">{{ tab.short }}</span>\n            </UiButton>\n          </UiButtonGroup>\n\n          <div class=\"flex items-center gap-2\">\n            <UiDatepicker v-model.range=\"dateRange\">\n              <template #default=\"{ togglePopover }\">\n                <UiTooltip>\n                  <UiTooltipTrigger as-child>\n                    <UiButton variant=\"outline\" size=\"sm\" class=\"gap-2\" @click=\"togglePopover\">\n                      <Icon name=\"heroicons:calendar-days\" class=\"size-4\" />\n                      Select dates\n                    </UiButton>\n                  </UiTooltipTrigger>\n                  <UiTooltipContent><p>Select date range</p></UiTooltipContent>\n                </UiTooltip>\n              </template>\n            </UiDatepicker>\n\n            <UiTooltip>\n              <UiTooltipTrigger as-child>\n                <UiButton variant=\"outline\" size=\"sm\" class=\"gap-2\" @click=\"filtersOpen = true\">\n                  <Icon name=\"heroicons:funnel\" class=\"size-4\" />\n                  Filters\n                </UiButton>\n              </UiTooltipTrigger>\n              <UiTooltipContent><p>Filter transactions</p></UiTooltipContent>\n            </UiTooltip>\n          </div>\n        </div>\n      </Motion>\n\n      <!-- Account balance cards -->\n      <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n        <!-- Primary account -->\n        <Motion\n          :initial=\"{ opacity: 0, y: 12 }\"\n          :animate=\"{ opacity: 1, y: 0 }\"\n          :transition=\"{ duration: 0.35, delay: 0.1, ease: 'easeOut' }\"\n        >\n          <UiCard class=\"relative gap-0 overflow-hidden p-4 shadow-xs\">\n            <div class=\"flex items-start justify-between\">\n              <div class=\"flex grow flex-col gap-4 lg:flex-row lg:items-center\">\n                <div class=\"mx-auto shrink-0\">\n                  <UiApexchart\n                    :key=\"`primary-${activeTab}`\"\n                    type=\"radialBar\"\n                    :width=\"200\"\n                    :height=\"200\"\n                    :series=\"[chartDataByTab[activeTab as TabKey].primary]\"\n                    :options=\"radialBarOptions\"\n                  />\n                </div>\n                <div class=\"grow text-center lg:text-left\">\n                  <p class=\"font-semibold\">{{ user.primaryAccount.name }}</p>\n                  <p class=\"mt-6 mb-2 text-sm text-muted-foreground\">Current balance</p>\n                  <div class=\"flex flex-col items-center justify-between lg:flex-row\">\n                    <p class=\"text-3xl font-bold tracking-tight\">\n                      ${{\n                        user.primaryAccount.balance.toLocaleString(\"en-US\", {\n                          minimumFractionDigits: 2,\n                        })\n                      }}\n                    </p>\n                    <div\n                      class=\"mt-3 flex items-center gap-1 text-xs font-medium text-emerald-600 dark:text-emerald-400\"\n                    >\n                      <Icon name=\"heroicons:arrow-trending-up\" class=\"size-3.5\" />\n                      {{ user.primaryAccount.growth }}%\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <UiTooltip>\n                <UiDropdownMenu>\n                  <UiTooltipTrigger as-child>\n                    <UiDropdownMenuTrigger as-child>\n                      <UiButton\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        class=\"absolute top-5 right-5 shrink-0 text-muted-foreground\"\n                      >\n                        <Icon name=\"heroicons:ellipsis-vertical\" class=\"size-4\" />\n                      </UiButton>\n                    </UiDropdownMenuTrigger>\n                  </UiTooltipTrigger>\n                  <UiTooltipContent><p>Account options</p></UiTooltipContent>\n                  <UiDropdownMenuContent align=\"end\">\n                    <UiDropdownMenuItem icon=\"heroicons:eye\" title=\"View details\" />\n                    <UiDropdownMenuItem\n                      icon=\"heroicons:arrow-down-circle\"\n                      title=\"Deposit funds\"\n                      @click.stop=\"depositOpen = true\"\n                    />\n                    <UiDropdownMenuItem icon=\"heroicons:document-text\" title=\"Download statement\" />\n                  </UiDropdownMenuContent>\n                </UiDropdownMenu>\n              </UiTooltip>\n            </div>\n          </UiCard>\n        </Motion>\n\n        <!-- Secondary account -->\n        <Motion\n          :initial=\"{ opacity: 0, y: 12 }\"\n          :animate=\"{ opacity: 1, y: 0 }\"\n          :transition=\"{ duration: 0.35, delay: 0.15, ease: 'easeOut' }\"\n        >\n          <UiCard class=\"relative gap-0 overflow-hidden p-4 shadow-xs\">\n            <div class=\"flex items-start justify-between\">\n              <div class=\"flex grow flex-col gap-4 lg:flex-row lg:items-center\">\n                <div class=\"mx-auto\">\n                  <UiApexchart\n                    :key=\"`secondary-${activeTab}`\"\n                    type=\"radialBar\"\n                    :width=\"200\"\n                    :height=\"200\"\n                    :series=\"[chartDataByTab[activeTab as TabKey].secondary]\"\n                    :options=\"radialBarOptions\"\n                  />\n                </div>\n                <div class=\"grow text-center lg:text-left\">\n                  <p class=\"font-semibold\">{{ user.secondaryAccount.name }}</p>\n                  <p class=\"mt-6 mb-2 text-sm text-muted-foreground\">Current balance</p>\n                  <div class=\"flex flex-col items-center justify-between lg:flex-row\">\n                    <p class=\"text-3xl font-bold tracking-tight\">\n                      ${{\n                        user.secondaryAccount.balance.toLocaleString(\"en-US\", {\n                          minimumFractionDigits: 2,\n                        })\n                      }}\n                    </p>\n                    <div\n                      class=\"mt-3 flex items-center gap-1 text-xs font-medium text-emerald-600 dark:text-emerald-400\"\n                    >\n                      <Icon name=\"heroicons:arrow-trending-up\" class=\"size-3.5\" />\n                      {{ user.secondaryAccount.growth }}%\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <UiTooltip>\n                <UiDropdownMenu>\n                  <UiTooltipTrigger as-child>\n                    <UiDropdownMenuTrigger as-child>\n                      <UiButton\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        class=\"absolute top-5 right-5 shrink-0 text-muted-foreground\"\n                      >\n                        <Icon name=\"heroicons:ellipsis-vertical\" class=\"size-4\" />\n                      </UiButton>\n                    </UiDropdownMenuTrigger>\n                  </UiTooltipTrigger>\n                  <UiTooltipContent><p>Account options</p></UiTooltipContent>\n                  <UiDropdownMenuContent align=\"end\">\n                    <UiDropdownMenuItem icon=\"heroicons:eye\" title=\"View details\" />\n                    <UiDropdownMenuItem\n                      icon=\"heroicons:arrow-down-circle\"\n                      title=\"Deposit funds\"\n                      @click.stop=\"depositOpen = true\"\n                    />\n                    <UiDropdownMenuItem icon=\"heroicons:document-text\" title=\"Download statement\" />\n                  </UiDropdownMenuContent>\n                </UiDropdownMenu>\n              </UiTooltip>\n            </div>\n          </UiCard>\n        </Motion>\n      </div>\n\n      <!-- Main content: left = chart + cards, right = deposits -->\n      <div class=\"grid grid-cols-1 items-start gap-4 xl:grid-cols-[1fr_380px]\">\n        <!-- Left column: balance chart + cards stacked -->\n        <div class=\"space-y-4\">\n          <!-- Balance over time -->\n          <Motion\n            :initial=\"{ opacity: 0, y: 12 }\"\n            :animate=\"{ opacity: 1, y: 0 }\"\n            :transition=\"{ duration: 0.35, delay: 0.2, ease: 'easeOut' }\"\n          >\n            <UiCard>\n              <UiCardHeader class=\"flex items-center justify-between\">\n                <div class=\"space-y-1\">\n                  <UiCardTitle>Balance over time</UiCardTitle>\n                  <UiCardDescription>Track your account balance changes.</UiCardDescription>\n                </div>\n                <UiTooltip>\n                  <UiDropdownMenu>\n                    <UiTooltipTrigger as-child>\n                      <UiDropdownMenuTrigger as-child>\n                        <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"text-muted-foreground\">\n                          <Icon name=\"heroicons:ellipsis-vertical\" class=\"size-4\" />\n                        </UiButton>\n                      </UiDropdownMenuTrigger>\n                    </UiTooltipTrigger>\n                    <UiTooltipContent><p>Chart options</p></UiTooltipContent>\n                    <UiDropdownMenuContent align=\"end\">\n                      <UiDropdownMenuItem icon=\"heroicons:arrow-down-tray\" title=\"Download chart\" />\n                      <UiDropdownMenuItem\n                        icon=\"heroicons:arrows-pointing-out\"\n                        title=\"Full screen\"\n                      />\n                      <UiDropdownMenuItem icon=\"heroicons:table-cells\" title=\"View as table\" />\n                    </UiDropdownMenuContent>\n                  </UiDropdownMenu>\n                </UiTooltip>\n              </UiCardHeader>\n              <UiCardContent>\n                <UiApexchart\n                  :key=\"`line-${activeTab}`\"\n                  type=\"area\"\n                  height=\"300\"\n                  :series=\"activeChartSeries\"\n                  :options=\"lineChartOptions\"\n                />\n              </UiCardContent>\n            </UiCard>\n          </Motion>\n\n          <!-- Your cards -->\n          <Motion\n            :initial=\"{ opacity: 0, y: 12 }\"\n            :animate=\"{ opacity: 1, y: 0 }\"\n            :transition=\"{ duration: 0.35, delay: 0.28, ease: 'easeOut' }\"\n          >\n            <UiCard>\n              <UiCardHeader class=\"flex items-start justify-between\">\n                <div class=\"space-y-1\">\n                  <UiCardTitle>Your cards</UiCardTitle>\n                  <UiCardDescription>Manage your saved payment methods.</UiCardDescription>\n                </div>\n                <UiTooltip>\n                  <UiDropdownMenu>\n                    <UiTooltipTrigger as-child>\n                      <UiDropdownMenuTrigger as-child>\n                        <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"text-muted-foreground\">\n                          <Icon name=\"heroicons:ellipsis-vertical\" class=\"size-4\" />\n                        </UiButton>\n                      </UiDropdownMenuTrigger>\n                    </UiTooltipTrigger>\n                    <UiTooltipContent><p>Card options</p></UiTooltipContent>\n                    <UiDropdownMenuContent align=\"end\">\n                      <UiDropdownMenuItem icon=\"heroicons:plus\" title=\"Add new card\" />\n                      <UiDropdownMenuItem icon=\"heroicons:pencil\" title=\"Edit cards\" />\n                      <UiDropdownMenuItem icon=\"heroicons:lock-closed\" title=\"Freeze all cards\" />\n                    </UiDropdownMenuContent>\n                  </UiDropdownMenu>\n                </UiTooltip>\n              </UiCardHeader>\n              <UiCardContent>\n                <div\n                  class=\"flex gap-6 overflow-x-auto pb-2 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n                >\n                  <div v-for=\"card in user.cards\" :key=\"card.id\" class=\"shrink-0\">\n                    <UiCreditCard\n                      :variant=\"card.variant === 'primary' ? 'brand-dark' : 'gray-strip'\"\n                      :company=\"card.label\"\n                      :card-holder=\"card.holderName\"\n                      :card-number=\"card.cardNumber\"\n                      :card-expiration=\"card.expiry\"\n                    />\n\n                    <!-- Spending progress -->\n                    <div class=\"mt-3\">\n                      <div class=\"flex items-center justify-between text-sm\">\n                        <span class=\"text-muted-foreground\">Spending this month</span>\n                        <span class=\"font-medium\">\n                          ${{ card.spending.toLocaleString(\"en-US\", { minimumFractionDigits: 2 }) }}\n                        </span>\n                      </div>\n                      <UiProgress\n                        class=\"mt-2 h-2\"\n                        :model-value=\"(card.spending / card.spendLimit) * 100\"\n                      />\n                    </div>\n                  </div>\n                </div>\n\n                <div class=\"mt-4 flex\">\n                  <UiButton\n                    variant=\"outline\"\n                    @click=\"\n                      useSonner('Coming soon', { description: 'Card management is on the way.' })\n                    \"\n                  >\n                    Manage cards\n                  </UiButton>\n                </div>\n              </UiCardContent>\n            </UiCard>\n          </Motion>\n        </div>\n\n        <!-- Right column: recent deposits -->\n        <Motion\n          :initial=\"{ opacity: 0, y: 12 }\"\n          :animate=\"{ opacity: 1, y: 0 }\"\n          :transition=\"{ duration: 0.35, delay: 0.25, ease: 'easeOut' }\"\n        >\n          <UiCard>\n            <UiCardHeader class=\"flex items-start justify-between\">\n              <div class=\"space-y-1\">\n                <UiCardTitle>Recent deposits</UiCardTitle>\n                <UiCardDescription\n                  >Latest incoming transactions to your accounts.</UiCardDescription\n                >\n              </div>\n              <UiTooltip>\n                <UiDropdownMenu>\n                  <UiTooltipTrigger as-child>\n                    <UiDropdownMenuTrigger as-child>\n                      <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"text-muted-foreground\">\n                        <Icon name=\"heroicons:ellipsis-vertical\" class=\"size-4\" />\n                      </UiButton>\n                    </UiDropdownMenuTrigger>\n                  </UiTooltipTrigger>\n                  <UiTooltipContent><p>Deposit options</p></UiTooltipContent>\n                  <UiDropdownMenuContent align=\"end\">\n                    <UiDropdownMenuItem\n                      icon=\"heroicons:arrow-down-circle\"\n                      title=\"New deposit\"\n                      @click.stop=\"depositOpen = true\"\n                    />\n                    <UiDropdownMenuItem icon=\"heroicons:arrow-down-tray\" title=\"Export CSV\" />\n                    <UiDropdownMenuItem icon=\"heroicons:eye\" title=\"View all deposits\" />\n                  </UiDropdownMenuContent>\n                </UiDropdownMenu>\n              </UiTooltip>\n            </UiCardHeader>\n\n            <div class=\"divide-y divide-border/50\">\n              <div\n                v-for=\"deposit in visibleDeposits\"\n                :key=\"deposit.id\"\n                class=\"flex items-center gap-3 px-5 py-3\"\n              >\n                <!-- Payment method badge -->\n                <div\n                  class=\"flex h-9 w-12 shrink-0 items-center justify-center rounded-md border border-border/60 bg-muted/30\"\n                >\n                  <template v-if=\"deposit.method === 'visa'\">\n                    <Icon name=\"simple-icons:visa\" class=\"size-6 shrink-0\" />\n                  </template>\n                  <template v-else-if=\"deposit.method === 'stripe'\">\n                    <Icon name=\"logos:stripe\" class=\"size-8 shrink-0\" />\n                  </template>\n                  <template v-else-if=\"deposit.method === 'mastercard'\">\n                    <Icon name=\"logos:mastercard\" class=\"size-6 shrink-0\" />\n                  </template>\n                  <template v-else-if=\"deposit.method === 'paypal'\">\n                    <Icon name=\"logos:paypal\" class=\"size-5 shrink-0\" />\n                  </template>\n                  <template v-else-if=\"deposit.method === 'applepay'\">\n                    <Icon name=\"simple-icons:apple\" class=\"size-6 shrink-0\" />\n                  </template>\n                </div>\n\n                <div class=\"min-w-0 flex-1\">\n                  <p class=\"truncate text-sm font-medium\">{{ deposit.description }}</p>\n                  <p class=\"truncate text-xs text-muted-foreground\">{{ deposit.sub }}</p>\n                </div>\n                <p class=\"shrink-0 text-sm font-semibold text-emerald-600 dark:text-emerald-400\">\n                  +${{ deposit.amount.toFixed(2) }}\n                </p>\n              </div>\n            </div>\n\n            <div class=\"border-t border-border/50 px-5 py-3\">\n              <UiButton\n                variant=\"link\"\n                class=\"h-auto p-0 text-primary\"\n                @click=\"showAllDeposits = !showAllDeposits\"\n              >\n                {{ showAllDeposits ? \"Show less\" : \"Show more\" }}\n              </UiButton>\n            </div>\n          </UiCard>\n        </Motion>\n      </div>\n    </UiContainer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import type { ApexOptions } from \"apexcharts\";\n  import { Motion } from \"motion-v\";\n  import { object, string } from \"yup\";\n\n  // ─── User data ────────────────────────────────────────────────────────────────\n  interface UserCard {\n    id: string;\n    label: string;\n    holderName: string;\n    cardNumber: string;\n    expiry: string;\n    variant: \"primary\" | \"secondary\";\n    spending: number;\n    spendLimit: number;\n    active: boolean;\n  }\n\n  const user = reactive({\n    name: \"George Reid\",\n    email: \"george@ui-thing.com\",\n    avatar: \"https://i.pravatar.cc/150?img=68\",\n    initials: \"GR\",\n    primaryAccount: { name: \"Primary account\", balance: 40206.2, growth: 3.4, lastFour: \"4242\" },\n    secondaryAccount: { name: \"Secondary account\", balance: 6421.1, growth: 2.0, lastFour: \"8899\" },\n    cards: [\n      {\n        id: \"1\",\n        label: \"UI Thing.\",\n        holderName: \"GEORGE REID\",\n        cardNumber: \"1234  1234  1234  1234\",\n        expiry: \"06/28\",\n        variant: \"primary\",\n        spending: 2840.4,\n        spendLimit: 5000,\n        active: true,\n      },\n      {\n        id: \"2\",\n        label: \"UI Thing.\",\n        holderName: \"GEORGE REID\",\n        cardNumber: \"5678  5678  5678  5678\",\n        expiry: \"11/27\",\n        variant: \"secondary\",\n        spending: 1260.2,\n        spendLimit: 3000,\n        active: false,\n      },\n    ] as UserCard[],\n  });\n\n  // ─── Navigation ───────────────────────────────────────────────────────────────\n  const navItems = [\n    { label: \"Home\", active: false },\n    { label: \"Dashboard\", active: true },\n    { label: \"Projects\", active: false },\n    { label: \"Tasks\", active: false },\n    { label: \"Reporting\", active: false },\n    { label: \"Users\", active: false },\n  ];\n\n  // ─── Dialog state ─────────────────────────────────────────────────────────────\n  const depositOpen = ref(false);\n  const sendFundsOpen = ref(false);\n  const filtersOpen = ref(false);\n  const searchOpen = ref(false);\n\n  // ─── Keyboard shortcut ────────────────────────────────────────────────────────\n  const handleKeydown = (e: KeyboardEvent) => {\n    if ((e.metaKey || e.ctrlKey) && e.key === \"k\") {\n      e.preventDefault();\n      searchOpen.value = !searchOpen.value;\n    }\n  };\n  onMounted(() => document.addEventListener(\"keydown\", handleKeydown));\n  onUnmounted(() => document.removeEventListener(\"keydown\", handleKeydown));\n\n  // ─── Deposit form ─────────────────────────────────────────────────────────────\n  const DepositSchema = object({\n    fromAccount: string().required().label(\"From account\"),\n    recipientName: string().required().label(\"Recipient name\").min(2).max(80),\n    bankName: string().required().label(\"Bank name\").min(2).max(80),\n    accountNumber: string().required().label(\"Account number\"),\n    routingNumber: string().required().label(\"Routing number\"),\n    amount: string().required().label(\"Amount\"),\n    memo: string().optional().label(\"Memo\").max(100),\n  });\n\n  const {\n    handleSubmit: handleDepositSubmit,\n    isSubmitting: isSubmittingDeposit,\n    resetForm: resetDepositForm,\n  } = useForm({ name: \"depositForm13\", validationSchema: toTypedSchema(DepositSchema) });\n\n  const submitDeposit = handleDepositSubmit((values) => {\n    depositOpen.value = false;\n    useSonner(\"Deposit initiated\", {\n      description: `$${values.amount} to ${values.recipientName} is being processed.`,\n    });\n    resetDepositForm();\n  });\n\n  // ─── Send funds form ──────────────────────────────────────────────────────────\n  const SendFundsSchema = object({\n    recipient: string().required().label(\"Recipient\").min(2).max(80),\n    amount: string().required().label(\"Amount\"),\n    fromAccount: string().required().label(\"From account\"),\n    transferType: string().required().label(\"Transfer type\"),\n    note: string().optional().label(\"Note\").max(100),\n  });\n\n  const {\n    handleSubmit: handleSendFundsSubmit,\n    isSubmitting: isSubmittingSendFunds,\n    resetForm: resetSendFundsForm,\n  } = useForm({ name: \"sendFundsForm13\", validationSchema: toTypedSchema(SendFundsSchema) });\n\n  const submitSendFunds = handleSendFundsSubmit((values) => {\n    sendFundsOpen.value = false;\n    useSonner(\"Funds sent\", { description: `$${values.amount} sent to ${values.recipient}.` });\n    resetSendFundsForm();\n  });\n\n  // ─── Filters ──────────────────────────────────────────────────────────────────\n  const filterTypes = reactive([\n    { key: \"deposits\", label: \"Deposits\", checked: true },\n    { key: \"withdrawals\", label: \"Withdrawals\", checked: true },\n    { key: \"transfers\", label: \"Transfers\", checked: true },\n  ]);\n  const filterAccounts = reactive([\n    { key: \"all\", label: \"All accounts\", checked: true },\n    { key: \"primary\", label: \"Primary account\", checked: false },\n    { key: \"secondary\", label: \"Secondary account\", checked: false },\n  ]);\n  const filterStatuses = reactive([\n    { key: \"completed\", label: \"Completed\", checked: true },\n    { key: \"pending\", label: \"Pending\", checked: true },\n    { key: \"failed\", label: \"Failed\", checked: false },\n  ]);\n\n  const resetFilters = () => {\n    filterTypes.forEach((t) => (t.checked = true));\n    filterAccounts.forEach((a) => (a.checked = a.key === \"all\"));\n    filterStatuses.forEach((s) => (s.checked = s.key !== \"failed\"));\n    filtersOpen.value = false;\n  };\n\n  const applyFilters = () => {\n    filtersOpen.value = false;\n    useSonner(\"Filters applied\", { description: \"Your transaction view has been updated.\" });\n  };\n\n  // ─── Time tabs ────────────────────────────────────────────────────────────────\n  const timeTabs = [\n    { value: \"12m\", label: \"12 months\", short: \"12m\" },\n    { value: \"30d\", label: \"30 days\", short: \"30d\" },\n    { value: \"7d\", label: \"7 days\", short: \"7d\" },\n    { value: \"24h\", label: \"24 hours\", short: \"24h\" },\n  ];\n  const activeTab = ref(\"12m\");\n\n  // ─── Date range ───────────────────────────────────────────────────────────────\n  const dateRange = ref<{ start: Date; end: Date }>({} as any);\n\n  // ─── Deposits data ────────────────────────────────────────────────────────────\n  const deposits = [\n    {\n      id: 1,\n      method: \"visa\",\n      description: \"Visa ending in 1234\",\n      sub: \"Expiry 06/2025\",\n      amount: 244.0,\n    },\n    {\n      id: 2,\n      method: \"mastercard\",\n      description: \"Mastercard ending in 5678\",\n      sub: \"Expiry 06/2025\",\n      amount: 326.0,\n    },\n    {\n      id: 3,\n      method: \"stripe\",\n      description: \"Stripe deposit\",\n      sub: \"billing@ui-thing.com\",\n      amount: 408.0,\n    },\n    {\n      id: 4,\n      method: \"visa\",\n      description: \"Visa ending in 1234\",\n      sub: \"Expiry 06/2025\",\n      amount: 628.0,\n    },\n    {\n      id: 5,\n      method: \"paypal\",\n      description: \"PayPal deposit\",\n      sub: \"alina@ui-thing.com\",\n      amount: 166.0,\n    },\n    {\n      id: 6,\n      method: \"applepay\",\n      description: \"Apple Pay\",\n      sub: \"molly@ui-thing.com\",\n      amount: 250.0,\n    },\n    {\n      id: 7,\n      method: \"visa\",\n      description: \"Visa ending in 1234\",\n      sub: \"Expiry 06/2025\",\n      amount: 144.0,\n    },\n    {\n      id: 8,\n      method: \"stripe\",\n      description: \"Stripe deposit\",\n      sub: \"billing@ui-thing.com\",\n      amount: 408.0,\n    },\n  ];\n\n  const showAllDeposits = ref(false);\n  const visibleDeposits = computed(() => (showAllDeposits.value ? deposits : deposits.slice(0, 5)));\n\n  // ─── Chart data ───────────────────────────────────────────────────────────────\n  type TabKey = \"12m\" | \"30d\" | \"7d\" | \"24h\";\n\n  const chartDataByTab: Record<\n    TabKey,\n    {\n      primary: number;\n      secondary: number;\n      series: { name: string; data: number[] }[];\n      categories: string[];\n    }\n  > = {\n    \"12m\": {\n      primary: 68,\n      secondary: 42,\n      series: [\n        {\n          name: \"Primary\",\n          data: [\n            28000, 30000, 29500, 32000, 33500, 35000, 34000, 36000, 37500, 38000, 39500, 40206,\n          ],\n        },\n        {\n          name: \"Secondary\",\n          data: [5000, 5200, 5100, 5500, 5600, 5800, 5700, 5900, 6000, 6100, 6300, 6421],\n        },\n      ],\n      categories: [\n        \"Jan\",\n        \"Feb\",\n        \"Mar\",\n        \"Apr\",\n        \"May\",\n        \"Jun\",\n        \"Jul\",\n        \"Aug\",\n        \"Sep\",\n        \"Oct\",\n        \"Nov\",\n        \"Dec\",\n      ],\n    },\n    \"30d\": {\n      primary: 45,\n      secondary: 28,\n      series: [\n        {\n          name: \"Primary\",\n          data: [38000, 38500, 37800, 39200, 38800, 39500, 40000, 39800, 40100, 40206],\n        },\n        { name: \"Secondary\", data: [6200, 6150, 6250, 6300, 6280, 6350, 6380, 6410, 6415, 6421] },\n      ],\n      categories: [\n        \"Day 1\",\n        \"Day 4\",\n        \"Day 7\",\n        \"Day 10\",\n        \"Day 14\",\n        \"Day 17\",\n        \"Day 20\",\n        \"Day 24\",\n        \"Day 27\",\n        \"Day 30\",\n      ],\n    },\n    \"7d\": {\n      primary: 23,\n      secondary: 15,\n      series: [\n        { name: \"Primary\", data: [39800, 39900, 40000, 40050, 40100, 40150, 40206] },\n        { name: \"Secondary\", data: [6400, 6405, 6410, 6412, 6415, 6418, 6421] },\n      ],\n      categories: [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"],\n    },\n    \"24h\": {\n      primary: 8,\n      secondary: 5,\n      series: [\n        { name: \"Primary\", data: [40150, 40165, 40170, 40182, 40190, 40198, 40202, 40206] },\n        { name: \"Secondary\", data: [6418, 6419, 6419, 6420, 6420, 6421, 6421, 6421] },\n      ],\n      categories: [\"06:00\", \"08:00\", \"10:00\", \"12:00\", \"14:00\", \"16:00\", \"18:00\", \"Now\"],\n    },\n  };\n\n  const activeChartSeries = computed(() => chartDataByTab[activeTab.value as TabKey].series);\n  const activeChartCategories = computed(\n    () => chartDataByTab[activeTab.value as TabKey].categories\n  );\n\n  // ─── Chart options ────────────────────────────────────────────────────────────\n  const radialBarOptions = computed<ApexOptions>(() => ({\n    chart: { type: \"radialBar\" },\n    plotOptions: {\n      radialBar: {\n        hollow: { size: \"50%\", background: \"transparent\" },\n        track: { background: \"var(--muted)\", strokeWidth: \"70%\" },\n        dataLabels: { show: false },\n      },\n    },\n    colors: [\"var(--primary)\"],\n    stroke: { lineCap: \"round\" },\n  }));\n\n  const lineChartOptions = computed<ApexOptions>(() => ({\n    chart: { type: \"area\" },\n    dataLabels: { enabled: false },\n    stroke: { curve: \"smooth\", width: [2, 1.5] },\n    fill: {\n      type: \"gradient\",\n      gradient: { shadeIntensity: 1, opacityFrom: 0.2, opacityTo: 0.0, stops: [0, 100] },\n    },\n    colors: [\"var(--primary)\", \"var(--muted-foreground)\"],\n    xaxis: { categories: activeChartCategories.value },\n    yaxis: { show: false },\n    grid: {\n      strokeDashArray: 4,\n      yaxis: { lines: { show: false } },\n    },\n    legend: { show: false },\n  }));\n</script>\n","category":"Dashboards","path":"Dashboards/BlockDashboards13.vue","components":["apexchart","avatar","badge","button","buttongroup","card","cardcontent","carddescription","cardheader","cardtitle","checkbox","commanddialog","commandempty","commandgroup","commandinput","commanditem","commandlist","commandseparator","container","creditcard","datepicker","dialog","dialogcontent","dialogdescription","dialogfooter","dialogheader","dialogtitle","dropdownmenu","dropdownmenucontent","dropdownmenuitem","dropdownmenulabel","dropdownmenuseparator","dropdownmenutrigger","kbd","popover","popovercontent","popovertrigger","progress","tooltip","tooltipcontent","tooltiptrigger","veeinput","veeselect"]},{"name":"Dashboards 2","fileName":"BlockDashboards2.vue","file":"<template>\n  <div\n    class=\"min-h-screen bg-background text-foreground [--color-primary:var(--color-emerald-500)] [--primary:var(--color-emerald-500)] [--radius:12px] [--ring:var(--color-emerald-500)]\"\n  >\n    <!-- Sticky top header -->\n    <Motion\n      as=\"header\"\n      :initial=\"{ opacity: 0, y: -16 }\"\n      :animate=\"{ opacity: 1, y: 0 }\"\n      :transition=\"{ duration: 0.4, ease: 'easeOut' }\"\n      class=\"sticky top-0 z-10 border-b border-border/70 bg-background/85 backdrop-blur-md\"\n    >\n      <UiContainer class=\"flex min-h-[4rem] items-center justify-between gap-4\">\n        <!-- Logo + nav -->\n        <div class=\"flex items-center gap-5\">\n          <div class=\"flex items-center gap-2.5\">\n            <div\n              class=\"flex size-8 items-center justify-center rounded-lg border border-border/70 bg-muted shadow-xs\"\n            >\n              <div\n                class=\"size-4 rounded-full bg-[radial-gradient(circle_at_35%_35%,rgba(255,255,255,0.95),rgba(255,255,255,0.2)_32%,transparent_34%),linear-gradient(135deg,var(--color-primary),color-mix(in_oklab,var(--color-primary)_40%,white))]\"\n              />\n            </div>\n            <span class=\"font-semibold tracking-tight\">UI Thing</span>\n          </div>\n\n          <!-- Mobile nav popover -->\n          <UiPopover class=\"lg:hidden\">\n            <UiPopoverTrigger as-child>\n              <UiButton class=\"lg:hidden\" variant=\"ghost\" size=\"icon-sm\">\n                <Icon name=\"solar:hamburger-menu-line-duotone\" class=\"size-4\" />\n              </UiButton>\n            </UiPopoverTrigger>\n            <UiPopoverContent align=\"start\" class=\"w-48 p-1\">\n              <UiButton\n                v-for=\"item in navItems\"\n                :key=\"item.label\"\n                variant=\"ghost\"\n                size=\"sm\"\n                class=\"w-full justify-start\"\n                :class=\"\n                  item.active\n                    ? 'bg-muted text-foreground shadow-xs hover:bg-muted'\n                    : 'text-muted-foreground'\n                \"\n              >\n                {{ item.label }}\n              </UiButton>\n            </UiPopoverContent>\n          </UiPopover>\n\n          <!-- Desktop nav -->\n          <nav class=\"hidden items-center gap-1 lg:flex\">\n            <UiButton\n              v-for=\"item in navItems\"\n              :key=\"item.label\"\n              variant=\"ghost\"\n              size=\"sm\"\n              :class=\"\n                item.active\n                  ? 'bg-muted text-foreground shadow-xs hover:bg-muted'\n                  : 'text-muted-foreground'\n              \"\n            >\n              {{ item.label }}\n            </UiButton>\n          </nav>\n        </div>\n\n        <!-- Right: Settings, Notifications, User -->\n        <div class=\"flex items-center gap-1\">\n          <!-- Settings dropdown -->\n          <UiDropdownMenu>\n            <UiDropdownMenuTrigger as-child>\n              <UiButton variant=\"ghost\" size=\"icon\" class=\"rounded-full\">\n                <Icon name=\"solar:settings-bold-duotone\" class=\"size-5 text-muted-foreground\" />\n              </UiButton>\n            </UiDropdownMenuTrigger>\n            <UiDropdownMenuContent align=\"end\" class=\"w-56\">\n              <UiDropdownMenuLabel>Settings</UiDropdownMenuLabel>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuItem icon=\"solar:user-bold-duotone\" title=\"Account settings\" />\n              <UiDropdownMenuItem icon=\"solar:pallete-2-bold-duotone\" title=\"Appearance\" />\n              <UiDropdownMenuItem icon=\"solar:bell-bold-duotone\" title=\"Notification preferences\" />\n              <UiDropdownMenuItem icon=\"solar:shield-bold-duotone\" title=\"Privacy & security\" />\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuCheckboxItem v-model=\"compactView\" title=\"Compact view\" />\n              <UiDropdownMenuCheckboxItem v-model=\"showAvatars\" title=\"Show member avatars\" />\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuItem\n                icon=\"solar:keyboard-bold-duotone\"\n                title=\"Keyboard shortcuts\"\n                shortcut=\"⌘/\"\n              />\n            </UiDropdownMenuContent>\n          </UiDropdownMenu>\n\n          <!-- Notifications dropdown -->\n          <UiDropdownMenu>\n            <UiDropdownMenuTrigger as-child>\n              <UiButton variant=\"ghost\" size=\"icon\" class=\"rounded-full\">\n                <Icon name=\"solar:bell-bold-duotone\" class=\"size-5 text-muted-foreground\" />\n              </UiButton>\n            </UiDropdownMenuTrigger>\n            <UiDropdownMenuContent align=\"end\" class=\"w-80\">\n              <UiDropdownMenuLabel class=\"flex items-center justify-between\">\n                <span>Notifications</span>\n                <UiBadge variant=\"secondary\" size=\"sm\">4 new</UiBadge>\n              </UiDropdownMenuLabel>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuItem\n                icon=\"solar:user-plus-bold-duotone\"\n                title=\"Phoenix Baker joined your team\"\n              >\n                <template #shortcut>5m ago</template>\n              </UiDropdownMenuItem>\n              <UiDropdownMenuItem\n                icon=\"solar:file-text-bold-duotone\"\n                title=\"New post by Lana Steiner\"\n              >\n                <template #shortcut>1h ago</template>\n              </UiDropdownMenuItem>\n              <UiDropdownMenuItem\n                icon=\"solar:mailbox-bold-duotone\"\n                title=\"Email open rate exceeded 80%\"\n              >\n                <template #shortcut>3h ago</template>\n              </UiDropdownMenuItem>\n              <UiDropdownMenuItem\n                icon=\"solar:arrow-right-up-bold-duotone\"\n                title=\"MRR milestone: $18k reached\"\n              >\n                <template #shortcut>1d ago</template>\n              </UiDropdownMenuItem>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuItem\n                icon=\"solar:verified-check-bold-duotone\"\n                title=\"Mark all as read\"\n              />\n            </UiDropdownMenuContent>\n          </UiDropdownMenu>\n\n          <!-- User dropdown -->\n          <UiDropdownMenu>\n            <UiDropdownMenuTrigger as-child>\n              <UiButton\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-full\"\n                :aria-label=\"`Open user menu for ${currentUser.name}`\"\n              >\n                <UiAvatar\n                  :src=\"currentUser.avatar\"\n                  :alt=\"currentUser.name\"\n                  :fallback=\"currentUser.fallback\"\n                  class=\"size-8 cursor-pointer\"\n                />\n              </UiButton>\n            </UiDropdownMenuTrigger>\n            <UiDropdownMenuContent align=\"end\" class=\"w-52\">\n              <UiDropdownMenuLabel>\n                <div class=\"flex flex-col\">\n                  <p class=\"text-sm font-medium\">{{ currentUser.name }}</p>\n                  <p class=\"text-xs text-muted-foreground\">{{ currentUser.email }}</p>\n                </div>\n              </UiDropdownMenuLabel>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuGroup>\n                <UiDropdownMenuItem icon=\"solar:user-bold-duotone\" title=\"Profile\" />\n                <UiDropdownMenuItem icon=\"solar:settings-bold-duotone\" title=\"Settings\" />\n                <UiDropdownMenuItem icon=\"solar:card-2-bold-duotone\" title=\"Billing\" />\n                <UiDropdownMenuItem\n                  icon=\"solar:users-group-two-rounded-bold-duotone\"\n                  title=\"Team\"\n                />\n              </UiDropdownMenuGroup>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuItem\n                variant=\"destructive\"\n                icon=\"solar:exit-bold-duotone\"\n                title=\"Sign out\"\n              />\n            </UiDropdownMenuContent>\n          </UiDropdownMenu>\n        </div>\n      </UiContainer>\n    </Motion>\n\n    <!-- Secondary sub-nav -->\n    <Motion\n      :initial=\"{ opacity: 0 }\"\n      :animate=\"{ opacity: 1 }\"\n      :transition=\"{ duration: 0.35, delay: 0.1 }\"\n      class=\"border-b border-border/70 bg-background\"\n    >\n      <UiContainer>\n        <div class=\"flex items-center justify-between gap-4\">\n          <div class=\"scrollbar-none flex overflow-x-auto\">\n            <button\n              v-for=\"tab in subNavTabs\"\n              :key=\"tab\"\n              class=\"shrink-0 border-b-2 px-4 py-3 text-sm font-medium whitespace-nowrap transition-colors\"\n              :class=\"\n                activeTab === tab\n                  ? 'border-primary text-foreground'\n                  : 'border-transparent text-muted-foreground hover:text-foreground'\n              \"\n              @click=\"activeTab = tab\"\n            >\n              {{ tab }}\n            </button>\n          </div>\n          <div class=\"hidden w-[300px] shrink-0 py-2 sm:block\">\n            <UiVeeInput\n              name=\"search\"\n              icon=\"solar:magnifer-bold-duotone\"\n              placeholder=\"Search...\"\n              class=\"h-8\"\n            />\n          </div>\n        </div>\n      </UiContainer>\n    </Motion>\n\n    <!-- Page content -->\n    <UiContainer class=\"py-8\">\n      <!-- Welcome heading -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 12 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.15, ease: 'easeOut' }\"\n        class=\"mb-6\"\n      >\n        <h1 class=\"text-2xl font-semibold tracking-tight\">\n          Welcome back, {{ currentUser.firstName }}\n        </h1>\n      </Motion>\n\n      <!-- Time range + filter row -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 12 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.2, ease: 'easeOut' }\"\n        class=\"mb-8 flex flex-wrap items-center justify-between gap-3\"\n      >\n        <UiTabs v-model=\"activeRange\">\n          <UiTabsList class=\"border border-border/70 bg-muted/30\">\n            <UiTabsTrigger v-for=\"range in timeRanges\" :key=\"range.value\" :value=\"range.value\">\n              <span class=\"hidden sm:inline\">{{ range.label }}</span>\n              <span class=\"sm:hidden\">{{ range.short }}</span>\n            </UiTabsTrigger>\n          </UiTabsList>\n        </UiTabs>\n        <div class=\"flex items-center gap-2\">\n          <UiButton variant=\"outline\">\n            <Icon name=\"solar:calendar-bold-duotone\" class=\"size-5 text-muted-foreground\" />\n            <span class=\"hidden sm:inline\">Select dates</span>\n          </UiButton>\n          <UiButton variant=\"outline\">\n            <Icon name=\"solar:tuning-3-bold-duotone\" class=\"size-5 text-muted-foreground\" />\n            <span class=\"hidden sm:inline\">Filters</span>\n          </UiButton>\n        </div>\n      </Motion>\n\n      <Motion\n        :initial=\"{ opacity: 0, y: 12 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.25, ease: 'easeOut' }\"\n        class=\"mb-8\"\n      >\n        <UiGradientDivider />\n      </Motion>\n\n      <!-- Two-column layout: main + right sidebar -->\n      <div class=\"flex flex-col gap-10 lg:flex-row\">\n        <!-- Main content column -->\n        <div class=\"min-w-0 flex-1 space-y-10\">\n          <!-- MRR chart -->\n          <Motion\n            :initial=\"{ opacity: 0, y: 16 }\"\n            :animate=\"{ opacity: 1, y: 0 }\"\n            :transition=\"{ duration: 0.4, delay: 0.28, ease: 'easeOut' }\"\n          >\n            <div>\n              <p class=\"text-xs font-semibold tracking-widest text-muted-foreground uppercase\">\n                MRR\n              </p>\n              <div class=\"mt-1.5 flex items-center gap-3\">\n                <span class=\"text-4xl font-bold tracking-tight\">$18,880</span>\n                <span\n                  class=\"inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-semibold text-emerald-700 dark:bg-emerald-950 dark:text-emerald-400\"\n                >\n                  <Icon name=\"solar:course-up-bold-duotone\" class=\"size-3\" />\n                  7.4%\n                </span>\n              </div>\n              <div class=\"mt-4 h-52\">\n                <UiApexchart\n                  type=\"line\"\n                  height=\"100%\"\n                  :series=\"mrrChartSeries\"\n                  :options=\"mrrChartOptions\"\n                />\n              </div>\n            </div>\n          </Motion>\n\n          <!-- Member stats — mobile only (3 columns) -->\n          <Motion\n            :initial=\"{ opacity: 0, y: 16 }\"\n            :animate=\"{ opacity: 1, y: 0 }\"\n            :transition=\"{ duration: 0.4, delay: 0.35, ease: 'easeOut' }\"\n            class=\"grid grid-cols-3 gap-4 lg:hidden\"\n          >\n            <div v-for=\"stat in memberStats\" :key=\"stat.label\" class=\"space-y-1\">\n              <p class=\"text-xs text-muted-foreground\">{{ stat.label }}</p>\n              <div class=\"flex flex-wrap items-center gap-1.5\">\n                <span class=\"text-xl font-bold tracking-tight\">{{ stat.value }}</span>\n                <span\n                  class=\"inline-flex items-center gap-0.5 rounded-full bg-emerald-50 px-1.5 py-0.5 text-xs font-semibold text-emerald-700 dark:bg-emerald-950 dark:text-emerald-400\"\n                >\n                  <Icon name=\"solar:course-up-bold-duotone\" class=\"size-2.5\" />\n                  {{ stat.change }}\n                </span>\n              </div>\n            </div>\n          </Motion>\n\n          <!-- Start creating content -->\n          <Motion\n            :initial=\"{ opacity: 0, y: 16 }\"\n            :animate=\"{ opacity: 1, y: 0 }\"\n            :transition=\"{ duration: 0.4, delay: 0.38, ease: 'easeOut' }\"\n          >\n            <div>\n              <div class=\"mb-4 flex items-center justify-between\">\n                <h2 class=\"text-base font-semibold\">Start creating content</h2>\n                <UiDropdownMenu>\n                  <UiDropdownMenuTrigger as-child>\n                    <UiButton variant=\"ghost\" size=\"icon-sm\">\n                      <Icon\n                        name=\"solar:menu-dots-bold-duotone\"\n                        class=\"size-5 rotate-90 text-muted-foreground\"\n                      />\n                    </UiButton>\n                  </UiDropdownMenuTrigger>\n                  <UiDropdownMenuContent align=\"end\" class=\"w-44\">\n                    <UiDropdownMenuItem\n                      icon=\"solar:user-plus-bold-duotone\"\n                      title=\"Add content type\"\n                    />\n                    <UiDropdownMenuItem icon=\"solar:tuning-2-bold-duotone\" title=\"Manage content\" />\n                    <UiDropdownMenuSeparator />\n                    <UiDropdownMenuItem icon=\"solar:eye-closed-bold-duotone\" title=\"Hide section\" />\n                  </UiDropdownMenuContent>\n                </UiDropdownMenu>\n              </div>\n              <UiGradientDivider class=\"mb-6\" />\n              <div class=\"grid gap-4 sm:grid-cols-2\">\n                <div\n                  v-for=\"action in quickActions\"\n                  :key=\"action.title\"\n                  class=\"flex cursor-pointer items-center gap-4 rounded-xl border border-border/70 bg-card p-4 transition-colors hover:bg-muted/30\"\n                >\n                  <UiFancyIcon class=\"rounded-lg\" theme=\"light\" :icon=\"action.icon\" />\n                  <div>\n                    <p class=\"text-sm font-semibold\">{{ action.title }}</p>\n                    <p class=\"text-sm text-muted-foreground\">{{ action.description }}</p>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </Motion>\n\n          <!-- Recent posts -->\n          <Motion\n            :initial=\"{ opacity: 0, y: 16 }\"\n            :while-in-view=\"{ opacity: 1, y: 0 }\"\n            :transition=\"{ duration: 0.4, ease: 'easeOut' }\"\n          >\n            <div>\n              <div class=\"mb-4 flex items-center justify-between\">\n                <h2 class=\"text-base font-semibold\">Recent posts</h2>\n                <UiDropdownMenu>\n                  <UiDropdownMenuTrigger as-child>\n                    <UiButton variant=\"ghost\" size=\"icon-sm\">\n                      <Icon\n                        name=\"solar:menu-dots-bold-duotone\"\n                        class=\"size-5 rotate-90 text-muted-foreground\"\n                      />\n                    </UiButton>\n                  </UiDropdownMenuTrigger>\n                  <UiDropdownMenuContent align=\"end\" class=\"w-44\">\n                    <UiDropdownMenuItem icon=\"solar:document-add-bold-duotone\" title=\"New post\" />\n                    <UiDropdownMenuItem\n                      icon=\"solar:documents-bold-duotone\"\n                      title=\"View all posts\"\n                    />\n                    <UiDropdownMenuSeparator />\n                    <UiDropdownMenuItem icon=\"solar:eye-closed-bold-duotone\" title=\"Hide section\" />\n                  </UiDropdownMenuContent>\n                </UiDropdownMenu>\n              </div>\n              <UiGradientDivider class=\"mb-6\" />\n              <div class=\"grid gap-5 sm:grid-cols-2\">\n                <div v-for=\"post in recentPosts\" :key=\"post.id\" class=\"group cursor-pointer\">\n                  <div class=\"relative overflow-hidden rounded-xl\">\n                    <img\n                      :src=\"post.image\"\n                      :alt=\"post.title\"\n                      class=\"h-64 w-full object-cover transition-transform duration-500 group-hover:scale-105\"\n                    />\n                    <div\n                      class=\"absolute inset-0 bg-linear-to-t from-black/70 via-black/10 to-transparent\"\n                    />\n                    <div class=\"absolute right-0 bottom-0 left-0 p-3\">\n                      <div class=\"flex items-end justify-between\">\n                        <div>\n                          <p class=\"text-xs font-semibold text-white\">{{ post.author }}</p>\n                          <p class=\"text-xs text-white/75\">{{ post.date }}</p>\n                        </div>\n                        <span\n                          class=\"rounded-full bg-white/20 px-2.5 py-0.5 text-xs font-medium text-white backdrop-blur-sm\"\n                        >\n                          {{ post.category }}\n                        </span>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"mt-3 space-y-1\">\n                    <h3 class=\"leading-snug font-semibold\">{{ post.title }}</h3>\n                    <p class=\"line-clamp-2 text-sm leading-relaxed text-muted-foreground\">\n                      {{ post.excerpt }}\n                    </p>\n                    <span\n                      class=\"mt-1 inline-flex cursor-pointer items-center gap-1 text-sm font-medium text-primary hover:underline\"\n                    >\n                      Read post\n                      <Icon name=\"solar:arrow-right-up-bold-duotone\" class=\"size-3.5\" />\n                    </span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </Motion>\n\n          <!-- Top members — mobile only -->\n          <Motion\n            :initial=\"{ opacity: 0, y: 16 }\"\n            :while-in-view=\"{ opacity: 1, y: 0 }\"\n            :transition=\"{ duration: 0.4, ease: 'easeOut' }\"\n            class=\"lg:hidden\"\n          >\n            <div>\n              <h2 class=\"mb-4 text-base font-semibold\">Top members</h2>\n              <div class=\"max-h-80 space-y-3 overflow-y-auto\">\n                <div\n                  v-for=\"member in topMembers\"\n                  :key=\"member.name\"\n                  class=\"flex items-center gap-3\"\n                >\n                  <div class=\"relative shrink-0\">\n                    <UiAvatar\n                      :src=\"member.avatar\"\n                      :alt=\"member.name\"\n                      :fallback=\"member.initials\"\n                      class=\"size-9\"\n                    />\n                    <span\n                      class=\"absolute right-0 bottom-0 size-2.5 rounded-full border-2 border-background bg-emerald-500\"\n                    />\n                  </div>\n                  <div class=\"min-w-0 flex-1\">\n                    <p class=\"truncate text-sm font-medium\">{{ member.name }}</p>\n                    <p class=\"truncate text-xs text-muted-foreground\">{{ member.since }}</p>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </Motion>\n        </div>\n\n        <!-- Right sidebar — desktop only -->\n        <div class=\"hidden shrink-0 space-y-8 lg:block lg:w-[260px]\">\n          <!-- Member stats -->\n          <Motion\n            :variants=\"statsContainerVariant\"\n            initial=\"initial\"\n            animate=\"animate\"\n            class=\"space-y-6 border-b border-border/70 pb-8\"\n          >\n            <Motion\n              v-for=\"stat in memberStats\"\n              :key=\"stat.label\"\n              :variants=\"statItemVariant\"\n              class=\"space-y-1.5\"\n            >\n              <p class=\"text-sm text-muted-foreground\">{{ stat.label }}</p>\n              <div class=\"flex items-center gap-2\">\n                <span class=\"text-3xl font-bold tracking-tight\">{{ stat.value }}</span>\n                <span\n                  class=\"inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-semibold text-emerald-700 dark:bg-emerald-950 dark:text-emerald-400\"\n                >\n                  <Icon name=\"solar:arrow-right-up-bold-duotone\" class=\"size-3\" />\n                  {{ stat.change }}\n                </span>\n              </div>\n            </Motion>\n          </Motion>\n\n          <!-- Top members (scrollable) -->\n          <Motion\n            :initial=\"{ opacity: 0, y: 12 }\"\n            :animate=\"{ opacity: 1, y: 0 }\"\n            :transition=\"{ duration: 0.4, delay: 0.6, ease: 'easeOut' }\"\n          >\n            <div>\n              <h3 class=\"mb-4 text-sm font-semibold\">Top members</h3>\n              <div class=\"space-y-4 overflow-y-auto pr-1\">\n                <div\n                  v-for=\"member in topMembers\"\n                  :key=\"member.name\"\n                  class=\"flex items-center gap-3\"\n                >\n                  <div class=\"relative shrink-0\">\n                    <UiAvatar\n                      :src=\"member.avatar\"\n                      :alt=\"member.name\"\n                      :fallback=\"member.initials\"\n                      class=\"size-9\"\n                    />\n                    <span\n                      class=\"absolute right-0 bottom-0 size-2.5 rounded-full border-2 border-background bg-emerald-500\"\n                    />\n                  </div>\n                  <div class=\"min-w-0 flex-1\">\n                    <p class=\"truncate text-sm font-medium\">{{ member.name }}</p>\n                    <p class=\"truncate text-xs text-muted-foreground\">{{ member.since }}</p>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </Motion>\n        </div>\n      </div>\n    </UiContainer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import type { ApexOptions } from \"apexcharts\";\n  import { Motion } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  // Animation variants\n  const statsContainerVariant: MotionProps[\"variants\"] = {\n    initial: {},\n    animate: { transition: { staggerChildren: 0.12, delayChildren: 0.32 } },\n  };\n\n  const statItemVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 12 },\n    animate: { opacity: 1, y: 0, transition: { duration: 0.4, ease: \"easeOut\" } },\n  };\n\n  // User data\n  const currentUser = {\n    name: \"Behon Baker\",\n    firstName: \"Behon\",\n    email: \"behon.baker@yahoo.com\",\n    avatar: \"https://behonbaker.com/icon.png\",\n    fallback: \"BB\",\n  };\n\n  // Navigation\n  const navItems = [\n    { label: \"Home\", active: false },\n    { label: \"Dashboard\", active: true },\n    { label: \"Projects\", active: false },\n    { label: \"Tasks\", active: false },\n    { label: \"Reporting\", active: false },\n    { label: \"Users\", active: false },\n  ];\n\n  const subNavTabs = [\n    \"Overview\",\n    \"Notifications\",\n    \"Analytics\",\n    \"Saved reports\",\n    \"Scheduled reports\",\n    \"User reports\",\n  ];\n  const activeTab = ref(\"Overview\");\n\n  // Time range filter\n  const timeRanges = [\n    { label: \"12 months\", short: \"12m\", value: \"12months\" },\n    { label: \"30 days\", short: \"30d\", value: \"30days\" },\n    { label: \"7 days\", short: \"7d\", value: \"7days\" },\n    { label: \"24 hours\", short: \"24h\", value: \"24hours\" },\n  ];\n  const activeRange = ref(\"12months\");\n\n  // Settings toggles\n  const compactView = ref(false);\n  const showAvatars = ref(true);\n\n  // Sidebar stats\n  const memberStats = [\n    { label: \"Total members\", value: \"4,862\", change: \"9.2%\" },\n    { label: \"Paid members\", value: \"2,671\", change: \"6.6%\" },\n    { label: \"Email open rate\", value: \"82%\", change: \"8.1%\" },\n  ];\n\n  // Quick actions\n  const quickActions = [\n    {\n      icon: \"solar:user-plus-bold-duotone\",\n      title: \"Create your first member\",\n      description: \"Add yourself or import from CSV\",\n    },\n    {\n      icon: \"solar:pen-2-bold-duotone\",\n      title: \"Create a new post\",\n      description: \"Dive into the editor and start creating\",\n    },\n  ];\n\n  // Recent posts\n  const recentPosts = [\n    {\n      id: 1,\n      title: \"Building your API Stack\",\n      excerpt:\n        \"The rise of RESTful APIs has been met with a rise in tools for creating, testing, and managing them.\",\n      author: \"Lana Steiner\",\n      date: \"18 Jan 2025\",\n      category: \"Design\",\n      image: \"https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?w=600&h=400&fit=crop\",\n    },\n    {\n      id: 2,\n      title: \"Collaboration = better designer\",\n      excerpt: \"Collaboration can make our teams stronger, and our individual designs better.\",\n      author: \"Natali Craig\",\n      date: \"14 Jan 2025\",\n      category: \"Design\",\n      image: \"https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=600&h=400&fit=crop\",\n    },\n  ];\n\n  // Top members\n  const topMembers = [\n    {\n      name: \"Phoenix Baker\",\n      since: \"Member since Feb 2025\",\n      avatar: \"https://i.pravatar.cc/40?img=1\",\n      initials: \"PB\",\n    },\n    {\n      name: \"Lana Steiner\",\n      since: \"Member since Jan 2025\",\n      avatar: \"https://i.pravatar.cc/40?img=5\",\n      initials: \"LS\",\n    },\n    {\n      name: \"Demi Wikinson\",\n      since: \"Member since Mar 2025\",\n      avatar: \"https://i.pravatar.cc/40?img=10\",\n      initials: \"DW\",\n    },\n    {\n      name: \"Candice Wu\",\n      since: \"Member since Feb 2025\",\n      avatar: \"https://i.pravatar.cc/40?img=20\",\n      initials: \"CW\",\n    },\n    {\n      name: \"Natali Craig\",\n      since: \"Member since Mar 2025\",\n      avatar: \"https://i.pravatar.cc/40?img=25\",\n      initials: \"NC\",\n    },\n    {\n      name: \"Orlando Diggs\",\n      since: \"Member since Apr 2025\",\n      avatar: \"https://i.pravatar.cc/40?img=12\",\n      initials: \"OD\",\n    },\n    {\n      name: \"Drew Cano\",\n      since: \"Member since Apr 2025\",\n      avatar: \"https://i.pravatar.cc/40?img=15\",\n      initials: \"DC\",\n    },\n    {\n      name: \"Kate Morrison\",\n      since: \"Member since Jan 2025\",\n      avatar: \"https://i.pravatar.cc/40?img=30\",\n      initials: \"KM\",\n    },\n    {\n      name: \"Koray Okumus\",\n      since: \"Member since Feb 2025\",\n      avatar: \"https://i.pravatar.cc/40?img=33\",\n      initials: \"KO\",\n    },\n    {\n      name: \"Ava Wright\",\n      since: \"Member since Mar 2025\",\n      avatar: \"https://i.pravatar.cc/40?img=47\",\n      initials: \"AW\",\n    },\n  ];\n\n  // MRR chart\n  const mrrChartSeries = ref<ApexOptions[\"series\"]>([\n    {\n      name: \"Current year\",\n      data: [14200, 15800, 14900, 16200, 15500, 17100, 16800, 17900, 18200, 17600, 18500, 18880],\n    },\n    {\n      name: \"Previous year\",\n      data: [11000, 12200, 11800, 13100, 12700, 13800, 14100, 14600, 15200, 15800, 16400, 17200],\n    },\n  ]);\n\n  const mrrChartOptions = ref<ApexOptions>({\n    chart: {\n      type: \"line\",\n      toolbar: { show: false },\n      zoom: { enabled: false },\n      parentHeightOffset: 0,\n    },\n    colors: [\"var(--color-emerald-500)\", \"var(--color-purple-300)\"],\n    legend: { show: false },\n    dataLabels: { enabled: false },\n    stroke: {\n      curve: \"smooth\",\n      width: [2.5, 2],\n      dashArray: [0, 5],\n    },\n    markers: {\n      size: 0,\n      hover: { size: 4 },\n    },\n    tooltip: {\n      shared: true,\n      intersect: false,\n      y: {\n        formatter: (val: number) => `$${val.toLocaleString()}`,\n      },\n    },\n    grid: {\n      borderColor: \"color-mix(in oklab, var(--color-border) 60%, transparent)\",\n      strokeDashArray: 4,\n      padding: { left: 4, right: 4, top: 0, bottom: 0 },\n    },\n    xaxis: {\n      categories: [\n        \"Jan\",\n        \"Feb\",\n        \"Mar\",\n        \"Apr\",\n        \"May\",\n        \"Jun\",\n        \"Jul\",\n        \"Aug\",\n        \"Sep\",\n        \"Oct\",\n        \"Nov\",\n        \"Dec\",\n      ],\n      axisBorder: { show: false },\n      axisTicks: { show: false },\n      tooltip: { enabled: false },\n      labels: {\n        style: {\n          colors: \"var(--color-muted-foreground)\",\n          fontSize: \"11px\",\n          fontFamily: \"inherit\",\n        },\n      },\n    },\n    yaxis: {\n      labels: { show: false },\n    },\n  });\n</script>\n","category":"Dashboards","path":"Dashboards/BlockDashboards2.vue","components":["apexchart","avatar","badge","button","container","dropdownmenu","dropdownmenucheckboxitem","dropdownmenucontent","dropdownmenugroup","dropdownmenuitem","dropdownmenulabel","dropdownmenuseparator","dropdownmenutrigger","fancyicon","gradientdivider","popover","popovercontent","popovertrigger","tabs","tabslist","tabstrigger","veeinput"]},{"name":"Dashboards 3","fileName":"BlockDashboards3.vue","file":"<template>\n  <div\n    class=\"min-h-screen bg-background text-foreground [--color-primary:#8b5cf6] [--primary:#8b5cf6] [--radius:12px] [--ring:#8b5cf6]\"\n  >\n    <!-- Edit page sheet -->\n    <UiSheet v-model:open=\"editOpen\">\n      <UiSheetContent\n        side=\"right\"\n        variant=\"floating\"\n        translucent\n        title=\"Edit page\"\n        description=\"Update the page details below.\"\n      >\n        <template #content>\n          <div class=\"space-y-5 px-6\">\n            <div class=\"space-y-1.5\">\n              <label class=\"text-sm font-medium\">Page URL</label>\n              <UiVeeInput\n                v-model=\"editForm.page\"\n                name=\"edit-page\"\n                placeholder=\"e.g. uithing.com/pricing\"\n              />\n            </div>\n\n            <div class=\"space-y-1.5\">\n              <label class=\"text-sm font-medium\">Folder</label>\n              <UiSelect v-model=\"editForm.folder\">\n                <UiSelectTrigger class=\"w-full\">\n                  <UiSelectValue placeholder=\"Select folder\" />\n                </UiSelectTrigger>\n                <UiSelectContent>\n                  <UiSelectItem v-for=\"f in folders\" :key=\"f\" :value=\"f\">{{ f }}</UiSelectItem>\n                </UiSelectContent>\n              </UiSelect>\n            </div>\n\n            <div class=\"space-y-1.5\">\n              <label class=\"text-sm font-medium\">Visibility</label>\n              <UiSelect v-model=\"editForm.visibility\">\n                <UiSelectTrigger class=\"w-full\">\n                  <UiSelectValue placeholder=\"Select visibility\" />\n                </UiSelectTrigger>\n                <UiSelectContent>\n                  <UiSelectItem value=\"public\">Public</UiSelectItem>\n                  <UiSelectItem value=\"private\">Private</UiSelectItem>\n                </UiSelectContent>\n              </UiSelect>\n            </div>\n          </div>\n        </template>\n\n        <template #footer>\n          <UiSheetFooter class=\"px-6 pb-6\">\n            <UiSheetClose as-child>\n              <UiButton variant=\"outline\" class=\"w-full\">Cancel</UiButton>\n            </UiSheetClose>\n            <UiButton class=\"w-full\" @click=\"saveEdit\">Save changes</UiButton>\n          </UiSheetFooter>\n        </template>\n      </UiSheetContent>\n    </UiSheet>\n\n    <!-- Delete confirmation dialog -->\n    <UiAlertDialog v-model:open=\"deleteOpen\">\n      <UiAlertDialogContent>\n        <UiAlertDialogHeader>\n          <UiAlertDialogTitle title=\"Delete page?\" />\n          <UiAlertDialogDescription\n            :description=\"`Are you sure you want to delete '${deleteTarget?.page}'? This action cannot be undone.`\"\n          />\n        </UiAlertDialogHeader>\n        <UiAlertDialogFooter>\n          <UiAlertDialogCancel />\n          <UiAlertDialogAction @click=\"confirmDelete\" />\n        </UiAlertDialogFooter>\n      </UiAlertDialogContent>\n    </UiAlertDialog>\n\n    <!-- Command palette / search dialog -->\n    <UiCommandDialog\n      v-model:open=\"searchOpen\"\n      title=\"Search\"\n      description=\"Search for pages, reports, and quick actions\"\n    >\n      <UiCommandInput placeholder=\"Search anything...\" />\n      <UiCommandList>\n        <UiCommandEmpty>No results found.</UiCommandEmpty>\n\n        <UiCommandGroup heading=\"Recent\">\n          <UiCommandItem v-for=\"item in recentSearches\" :key=\"item\" :value=\"item\">\n            <Icon name=\"heroicons:clock\" />\n            <span>{{ item }}</span>\n            <Icon name=\"heroicons:arrow-up-left\" class=\"ml-auto opacity-40\" />\n          </UiCommandItem>\n        </UiCommandGroup>\n\n        <UiCommandSeparator />\n\n        <UiCommandGroup heading=\"Quick links\">\n          <UiCommandItem v-for=\"link in quickLinks\" :key=\"link.label\" :value=\"link.label\">\n            <Icon :name=\"link.icon\" />\n            <span>{{ link.label }}</span>\n            <UiCommandShortcut>{{ link.path }}</UiCommandShortcut>\n          </UiCommandItem>\n        </UiCommandGroup>\n      </UiCommandList>\n\n      <!-- Keyboard shortcuts footer -->\n      <div\n        class=\"flex items-center gap-5 border-t border-border/70 bg-muted/20 px-4 py-2.5 text-xs text-muted-foreground\"\n      >\n        <span class=\"flex items-center gap-1.5\">\n          <kbd\n            class=\"rounded border border-border/70 bg-background px-1.5 py-0.5 font-mono text-[10px]\"\n            >↵</kbd\n          >\n          to select\n        </span>\n        <span class=\"flex items-center gap-1.5\">\n          <kbd\n            class=\"rounded border border-border/70 bg-background px-1.5 py-0.5 font-mono text-[10px]\"\n            >↑↓</kbd\n          >\n          to navigate\n        </span>\n        <span class=\"flex items-center gap-1.5\">\n          <kbd\n            class=\"rounded border border-border/70 bg-background px-1.5 py-0.5 font-mono text-[10px]\"\n            >ESC</kbd\n          >\n          to close\n        </span>\n      </div>\n    </UiCommandDialog>\n\n    <!-- Sticky header -->\n    <Motion\n      as=\"header\"\n      :initial=\"{ opacity: 0, y: -16 }\"\n      :animate=\"{ opacity: 1, y: 0 }\"\n      :transition=\"{ duration: 0.4, ease: 'easeOut' }\"\n      class=\"sticky top-0 z-10 border-b border-border/70 bg-background/85 backdrop-blur-md\"\n    >\n      <UiContainer class=\"flex min-h-[4rem] items-center justify-between gap-4\">\n        <!-- Logo + nav -->\n        <div class=\"flex items-center gap-5\">\n          <div class=\"flex items-center gap-2.5\">\n            <div\n              class=\"flex size-8 items-center justify-center rounded-lg border border-border/70 bg-muted shadow-xs\"\n            >\n              <div\n                class=\"size-4 rounded-full bg-[radial-gradient(circle_at_35%_35%,rgba(255,255,255,0.95),rgba(255,255,255,0.2)_32%,transparent_34%),linear-gradient(135deg,var(--color-primary),color-mix(in_oklab,var(--color-primary)_40%,white))]\"\n              />\n            </div>\n            <span class=\"font-semibold tracking-tight\">UI Thing</span>\n          </div>\n\n          <!-- Mobile nav popover -->\n          <UiPopover class=\"lg:hidden\">\n            <UiPopoverTrigger as-child>\n              <UiButton class=\"lg:hidden\" variant=\"ghost\" size=\"icon-sm\">\n                <Icon name=\"heroicons:bars-3\" class=\"size-5\" />\n              </UiButton>\n            </UiPopoverTrigger>\n            <UiPopoverContent align=\"start\" class=\"w-48 p-1\">\n              <UiButton\n                v-for=\"item in navItems\"\n                :key=\"item.label\"\n                variant=\"ghost\"\n                size=\"sm\"\n                class=\"w-full justify-start\"\n                :class=\"\n                  item.active\n                    ? 'bg-muted text-foreground shadow-xs hover:bg-muted'\n                    : 'text-muted-foreground'\n                \"\n              >\n                {{ item.label }}\n              </UiButton>\n            </UiPopoverContent>\n          </UiPopover>\n\n          <!-- Desktop nav -->\n          <nav class=\"hidden items-center gap-1 lg:flex\">\n            <UiButton\n              v-for=\"item in navItems\"\n              :key=\"item.label\"\n              variant=\"ghost\"\n              size=\"sm\"\n              :class=\"\n                item.active\n                  ? 'bg-muted text-foreground shadow-xs hover:bg-muted'\n                  : 'text-muted-foreground'\n              \"\n            >\n              {{ item.label }}\n            </UiButton>\n          </nav>\n        </div>\n\n        <!-- Right actions -->\n        <div class=\"flex items-center gap-1\">\n          <!-- Search (opens modal) -->\n          <UiButton\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            class=\"rounded-full\"\n            aria-label=\"Open search\"\n            @click=\"searchOpen = true\"\n          >\n            <Icon name=\"heroicons:magnifying-glass\" class=\"size-5 text-muted-foreground\" />\n          </UiButton>\n\n          <!-- Settings dropdown -->\n          <UiDropdownMenu>\n            <UiDropdownMenuTrigger as-child>\n              <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full\">\n                <Icon name=\"heroicons:cog-6-tooth\" class=\"size-5 text-muted-foreground\" />\n              </UiButton>\n            </UiDropdownMenuTrigger>\n            <UiDropdownMenuContent align=\"end\" class=\"w-56\">\n              <UiDropdownMenuLabel>Settings</UiDropdownMenuLabel>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuItem icon=\"heroicons:user\" title=\"Account settings\" />\n              <UiDropdownMenuItem icon=\"heroicons:swatch\" title=\"Appearance\" />\n              <UiDropdownMenuItem icon=\"heroicons:bell\" title=\"Notification preferences\" />\n              <UiDropdownMenuItem icon=\"heroicons:shield-check\" title=\"Privacy & security\" />\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuCheckboxItem v-model=\"compactRows\" title=\"Compact rows\" />\n              <UiDropdownMenuCheckboxItem v-model=\"showTrends\" title=\"Show trend indicators\" />\n            </UiDropdownMenuContent>\n          </UiDropdownMenu>\n\n          <!-- Notifications dropdown -->\n          <UiDropdownMenu>\n            <UiDropdownMenuTrigger as-child>\n              <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full\">\n                <Icon name=\"heroicons:bell\" class=\"size-5 text-muted-foreground\" />\n              </UiButton>\n            </UiDropdownMenuTrigger>\n            <UiDropdownMenuContent align=\"end\" class=\"w-80\">\n              <UiDropdownMenuLabel class=\"flex items-center justify-between\">\n                <span>Notifications</span>\n                <UiBadge variant=\"secondary\" size=\"sm\">3 new</UiBadge>\n              </UiDropdownMenuLabel>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuItem\n                icon=\"heroicons:arrow-trending-up\"\n                title=\"Traffic up 12% this week\"\n              >\n                <template #shortcut>2h ago</template>\n              </UiDropdownMenuItem>\n              <UiDropdownMenuItem icon=\"heroicons:document-text\" title=\"Weekly report is ready\">\n                <template #shortcut>1d ago</template>\n              </UiDropdownMenuItem>\n              <UiDropdownMenuItem\n                icon=\"heroicons:exclamation-circle\"\n                title=\"Bounce rate spike on /pricing\"\n              >\n                <template #shortcut>2d ago</template>\n              </UiDropdownMenuItem>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuItem icon=\"heroicons:check\" title=\"Mark all as read\" />\n            </UiDropdownMenuContent>\n          </UiDropdownMenu>\n\n          <!-- User dropdown -->\n          <UiDropdownMenu>\n            <UiDropdownMenuTrigger as-child>\n              <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full p-0\">\n                <UiAvatar\n                  :src=\"currentUser.avatar\"\n                  :alt=\"currentUser.name\"\n                  :fallback=\"currentUser.fallback\"\n                  class=\"size-8 cursor-pointer\"\n                />\n              </UiButton>\n            </UiDropdownMenuTrigger>\n            <UiDropdownMenuContent align=\"end\" class=\"w-52\">\n              <UiDropdownMenuLabel>\n                <div class=\"flex flex-col\">\n                  <p class=\"text-sm font-medium\">{{ currentUser.name }}</p>\n                  <p class=\"text-xs text-muted-foreground\">{{ currentUser.email }}</p>\n                </div>\n              </UiDropdownMenuLabel>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuGroup>\n                <UiDropdownMenuItem icon=\"heroicons:user\" title=\"Profile\" />\n                <UiDropdownMenuItem icon=\"heroicons:cog-6-tooth\" title=\"Settings\" />\n                <UiDropdownMenuItem icon=\"heroicons:credit-card\" title=\"Billing\" />\n                <UiDropdownMenuItem icon=\"heroicons:users\" title=\"Team\" />\n              </UiDropdownMenuGroup>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuItem\n                variant=\"destructive\"\n                icon=\"heroicons:arrow-right-on-rectangle\"\n                title=\"Sign out\"\n              />\n            </UiDropdownMenuContent>\n          </UiDropdownMenu>\n        </div>\n      </UiContainer>\n    </Motion>\n\n    <!-- Page content -->\n    <UiContainer class=\"space-y-6 py-8\">\n      <!-- Page title + action buttons -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 12 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.1, ease: 'easeOut' }\"\n        class=\"flex flex-wrap items-center justify-between gap-4\"\n      >\n        <h1 class=\"text-2xl font-semibold tracking-tight\">Site traffic</h1>\n        <div class=\"flex items-center gap-2\">\n          <UiButton variant=\"outline\">\n            <Icon name=\"heroicons:arrow-path\" class=\"size-4\" />\n            Switch dashboard\n          </UiButton>\n          <UiButton>\n            <Icon name=\"heroicons:arrow-down-tray\" class=\"size-4\" />\n            Export report\n          </UiButton>\n        </div>\n      </Motion>\n\n      <!-- Source tabs + time range tabs -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 12 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.15, ease: 'easeOut' }\"\n        class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\"\n      >\n        <!-- Traffic source tabs -->\n        <div class=\"scrollbar-none overflow-x-auto\">\n          <UiTabs v-model=\"activeSource\">\n            <UiTabsList class=\"border border-border/70 bg-muted/30\">\n              <UiTabsTrigger v-for=\"tab in sourceTabs\" :key=\"tab\" :value=\"tab\">\n                {{ tab }}\n              </UiTabsTrigger>\n            </UiTabsList>\n          </UiTabs>\n        </div>\n\n        <!-- Time range tabs -->\n        <UiTabs v-model=\"activeRange\" class=\"shrink-0\">\n          <UiTabsList class=\"border border-border/70 bg-muted/30\">\n            <UiTabsTrigger v-for=\"r in timeRanges\" :key=\"r.value\" :value=\"r.value\">\n              {{ r.label }}\n            </UiTabsTrigger>\n          </UiTabsList>\n        </UiTabs>\n      </Motion>\n\n      <!-- Metric cards with sparklines -->\n      <Motion\n        as=\"section\"\n        :variants=\"metricsContainerVariant\"\n        initial=\"initial\"\n        animate=\"animate\"\n        class=\"grid gap-4 md:grid-cols-3\"\n      >\n        <Motion\n          v-for=\"metric in metrics\"\n          :key=\"metric.label\"\n          :variants=\"metricCardVariant\"\n          class=\"overflow-hidden rounded-xl border border-border/70 bg-card shadow-xs\"\n        >\n          <div class=\"px-5 pt-5 pb-3\">\n            <!-- Card header -->\n            <div class=\"mb-3 flex items-center justify-between\">\n              <p class=\"text-sm text-muted-foreground\">{{ metric.label }}</p>\n              <UiDropdownMenu>\n                <UiDropdownMenuTrigger as-child>\n                  <UiButton variant=\"ghost\" size=\"icon-sm\">\n                    <Icon name=\"heroicons:ellipsis-vertical\" class=\"size-4 text-muted-foreground\" />\n                  </UiButton>\n                </UiDropdownMenuTrigger>\n                <UiDropdownMenuContent align=\"end\" class=\"w-56\">\n                  <UiDropdownMenuItem icon=\"heroicons:chart-bar\" title=\"View detailed report\" />\n                  <UiDropdownMenuItem icon=\"heroicons:arrow-down-tray\" title=\"Download data\" />\n                  <UiDropdownMenuItem icon=\"heroicons:arrows-right-left\" title=\"Compare periods\" />\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem icon=\"heroicons:eye-slash\" title=\"Hide metric\" />\n                </UiDropdownMenuContent>\n              </UiDropdownMenu>\n            </div>\n\n            <!-- Value + trend -->\n            <div class=\"flex flex-wrap items-baseline gap-x-3 gap-y-1\">\n              <span class=\"text-3xl font-bold tracking-tight\">{{ metric.value }}</span>\n              <span\n                class=\"inline-flex items-center gap-1 text-sm font-medium text-emerald-600 dark:text-emerald-500\"\n              >\n                <Icon name=\"heroicons:arrow-trending-up\" class=\"size-4\" />\n                {{ metric.change }} vs last month\n              </span>\n            </div>\n          </div>\n\n          <!-- Sparkline -->\n          <div class=\"h-20\">\n            <UiApexchart\n              type=\"area\"\n              height=\"100%\"\n              :series=\"metric.series\"\n              :options=\"sparklineOptions\"\n            />\n          </div>\n        </Motion>\n      </Motion>\n\n      <Motion\n        :initial=\"{ opacity: 0 }\"\n        :animate=\"{ opacity: 1 }\"\n        :transition=\"{ duration: 0.4, delay: 0.4, ease: 'easeOut' }\"\n      >\n        <UiGradientDivider />\n      </Motion>\n\n      <!-- Pages and screens table -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 16 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, ease: 'easeOut', delay: 0.45 }\"\n      >\n        <UiCard class=\"gap-0 overflow-hidden border-border/70 py-0 shadow-xs\">\n          <!-- Section header -->\n          <UiCardHeader class=\"border-b border-border/60 py-5\">\n            <div class=\"mb-4 flex items-center justify-between\">\n              <UiCardTitle class=\"text-base font-semibold\">Pages and screens</UiCardTitle>\n              <UiDropdownMenu>\n                <UiDropdownMenuTrigger as-child>\n                  <UiButton variant=\"ghost\" size=\"icon-sm\">\n                    <Icon name=\"heroicons:ellipsis-vertical\" class=\"size-4 text-muted-foreground\" />\n                  </UiButton>\n                </UiDropdownMenuTrigger>\n                <UiDropdownMenuContent align=\"end\" class=\"w-44\">\n                  <UiDropdownMenuItem icon=\"heroicons:arrow-down-tray\" title=\"Export data\" />\n                  <UiDropdownMenuItem icon=\"heroicons:funnel\" title=\"Edit filters\" />\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem icon=\"heroicons:eye-slash\" title=\"Hide section\" />\n                </UiDropdownMenuContent>\n              </UiDropdownMenu>\n            </div>\n\n            <!-- Controls -->\n            <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n              <!-- Button group: View all / Public / Private -->\n              <UiToggleGroup\n                v-model=\"activeFilter\"\n                type=\"single\"\n                class=\"gap-0.5 rounded-lg border border-border/70 bg-muted/20 p-0.5\"\n              >\n                <UiToggleGroupItem\n                  v-for=\"f in tableFilters\"\n                  :key=\"f\"\n                  :value=\"f\"\n                  class=\"w-full rounded-md px-3.5 text-muted-foreground data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-xs sm:w-auto\"\n                >\n                  {{ f }}\n                </UiToggleGroupItem>\n              </UiToggleGroup>\n\n              <!-- Search + Filters -->\n              <div class=\"grid gap-4 sm:flex sm:items-center sm:gap-2\">\n                <div class=\"shrink-0 sm:w-48\">\n                  <UiVeeInput\n                    v-model=\"tableSearch\"\n                    icon=\"heroicons:magnifying-glass\"\n                    name=\"table-search\"\n                    placeholder=\"Search\"\n                  >\n                    <template #trailingIcon>\n                      <div class=\"absolute inset-y-0 right-3 flex items-center justify-center\">\n                        <UiKbd>⌘K</UiKbd>\n                      </div>\n                    </template>\n                  </UiVeeInput>\n                </div>\n                <UiButton variant=\"outline\" class=\"shrink-0\">\n                  <Icon name=\"heroicons:funnel\" class=\"size-4\" />\n                  Filters\n                </UiButton>\n              </div>\n            </div>\n          </UiCardHeader>\n\n          <!-- TanStack table -->\n          <UiTanStackTable\n            :data=\"filteredPages\"\n            :columns=\"pageColumns\"\n            :show-rows-per-page=\"false\"\n            :show-page-info=\"false\"\n            :show-pagination=\"false\"\n            :show-selected-count=\"false\"\n            :show-footer=\"true\"\n            :loading=\"pagesPending\"\n            :table-options=\"{ enableRowSelection: true }\"\n          >\n            <template #select-header=\"{ table }\">\n              <UiCheckbox\n                aria-label=\"Select all\"\n                :model-value=\"table.getIsAllPageRowsSelected()\"\n                @update:model-value=\"table.toggleAllPageRowsSelected(!!$event)\"\n              />\n            </template>\n\n            <template #select-cell=\"{ row }\">\n              <UiCheckbox\n                :aria-label=\"`Select ${row.original.page}`\"\n                :model-value=\"row.getIsSelected()\"\n                @update:model-value=\"row.toggleSelected(!!$event)\"\n              />\n            </template>\n\n            <template #percentage-cell=\"{ row }\">\n              <div class=\"flex items-center gap-3\">\n                <div class=\"h-1.5 w-28 overflow-hidden rounded-full bg-muted\">\n                  <div\n                    class=\"h-full rounded-full bg-primary transition-all\"\n                    :style=\"{ width: `${Math.min(100, (row.original.percentage / 65) * 100)}%` }\"\n                  />\n                </div>\n                <span class=\"text-sm tabular-nums\">{{ row.original.percentage }}%</span>\n              </div>\n            </template>\n\n            <template #folder-cell=\"{ row }\">\n              <span\n                class=\"inline-flex items-center gap-1.5 rounded-full border border-border/70 px-2.5 py-0.5 text-xs font-medium\"\n              >\n                <span class=\"size-1.5 rounded-full bg-emerald-500\" />\n                {{ row.original.folder }}\n              </span>\n            </template>\n\n            <template #actions-cell=\"{ row }\">\n              <div class=\"flex items-center justify-end gap-0.5\">\n                <UiButton\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  class=\"text-muted-foreground hover:text-destructive\"\n                  :title=\"`Delete ${row.original.page}`\"\n                  @click=\"\n                    () => {\n                      deleteTarget = row.original;\n                      deleteOpen = true;\n                    }\n                  \"\n                >\n                  <Icon name=\"heroicons:trash\" class=\"size-4\" />\n                </UiButton>\n                <UiButton\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  class=\"text-muted-foreground hover:text-foreground\"\n                  :title=\"`Edit ${row.original.page}`\"\n                  @click=\"openEdit(row.original)\"\n                >\n                  <Icon name=\"heroicons:pencil\" class=\"size-4\" />\n                </UiButton>\n              </div>\n            </template>\n\n            <template #footer=\"{ table }\">\n              <div\n                class=\"flex w-full flex-col gap-4 border-t border-border/60 px-6 py-4 text-sm font-medium text-muted-foreground sm:flex-row sm:items-center sm:justify-between\"\n              >\n                <p>\n                  Page {{ table.getState().pagination.pageIndex + 1 }} of\n                  {{ table.getPageCount() }}\n                </p>\n                <div class=\"flex items-center gap-2\">\n                  <UiButton\n                    variant=\"outline\"\n                    size=\"sm\"\n                    :disabled=\"!table.getCanPreviousPage()\"\n                    @click=\"table.previousPage()\"\n                  >\n                    <Icon name=\"heroicons:chevron-left\" class=\"size-4\" />\n                    Previous\n                  </UiButton>\n                  <UiButton\n                    variant=\"outline\"\n                    size=\"sm\"\n                    :disabled=\"!table.getCanNextPage()\"\n                    @click=\"table.nextPage()\"\n                  >\n                    Next\n                    <Icon name=\"heroicons:chevron-right\" class=\"size-4\" />\n                  </UiButton>\n                </div>\n              </div>\n            </template>\n          </UiTanStackTable>\n        </UiCard>\n      </Motion>\n    </UiContainer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import type { ColumnDef } from \"@tanstack/vue-table\";\n  import type { ApexOptions } from \"apexcharts\";\n  import { Motion } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  // Animation variants\n  const metricsContainerVariant: MotionProps[\"variants\"] = {\n    initial: {},\n    animate: { transition: { staggerChildren: 0.1, delayChildren: 0.22 } },\n  };\n\n  const metricCardVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 16 },\n    animate: { opacity: 1, y: 0, transition: { duration: 0.4, ease: \"easeOut\" } },\n  };\n\n  // User data\n  const currentUser = {\n    name: \"Behon Baker\",\n    firstName: \"Behon\",\n    email: \"behon.baker@yahoo.com\",\n    avatar: \"https://behonbaker.com/icon.png\",\n    fallback: \"BB\",\n  };\n\n  // Navigation\n  const navItems = [\n    { label: \"Home\", active: false },\n    { label: \"Dashboard\", active: true },\n    { label: \"Projects\", active: false },\n    { label: \"Tasks\", active: false },\n    { label: \"Reporting\", active: false },\n    { label: \"Users\", active: false },\n  ];\n\n  // Search modal\n  const searchOpen = ref(false);\n\n  const recentSearches = [\n    \"Total sessions last 30 days\",\n    \"Organic traffic conversion rate\",\n    \"Mobile bounce rate by page\",\n  ];\n\n  const quickLinks = [\n    { label: \"Analytics overview\", icon: \"heroicons:chart-bar\", path: \"/analytics\" },\n    { label: \"Traffic sources report\", icon: \"heroicons:arrow-trending-up\", path: \"/traffic\" },\n    { label: \"Page performance\", icon: \"heroicons:document-text\", path: \"/pages\" },\n  ];\n\n  const handleKeydown = (e: KeyboardEvent) => {\n    if (e.key === \"Escape\") searchOpen.value = false;\n    if ((e.metaKey || e.ctrlKey) && e.key === \"k\") {\n      e.preventDefault();\n      searchOpen.value = true;\n    }\n  };\n\n  onMounted(() => document.addEventListener(\"keydown\", handleKeydown));\n  onUnmounted(() => document.removeEventListener(\"keydown\", handleKeydown));\n\n  // Settings toggles\n  const compactRows = ref(false);\n  const showTrends = ref(true);\n\n  // Traffic source tabs\n  const sourceTabs = [\n    \"All sessions\",\n    \"Direct traffic\",\n    \"Organic traffic\",\n    \"Paid traffic\",\n    \"Mobile users\",\n    \"Returning users\",\n  ];\n  const activeSource = ref(\"All sessions\");\n\n  // Time range tabs\n  const timeRanges = [\n    { label: \"12m\", value: \"12months\" },\n    { label: \"30d\", value: \"30days\" },\n    { label: \"7d\", value: \"7days\" },\n    { label: \"24h\", value: \"24hours\" },\n  ];\n  const activeRange = ref(\"30days\");\n\n  // Metric cards\n  const metrics = [\n    {\n      label: \"Total sessions\",\n      value: \"526\",\n      change: \"2.4%\",\n      series: [\n        {\n          name: \"Sessions\",\n          data: [120, 108, 140, 118, 155, 138, 165, 145, 180, 162, 195, 178],\n        },\n      ],\n    },\n    {\n      label: \"Session duration\",\n      value: \"2:24\",\n      change: \"8.6%\",\n      series: [\n        {\n          name: \"Duration\",\n          data: [100, 122, 110, 135, 115, 148, 130, 158, 142, 165, 152, 175],\n        },\n      ],\n    },\n    {\n      label: \"Pages per session\",\n      value: \"316\",\n      change: \"6.0%\",\n      series: [\n        {\n          name: \"Pages\",\n          data: [80, 95, 88, 110, 98, 122, 112, 132, 118, 145, 135, 158],\n        },\n      ],\n    },\n  ];\n\n  const sparklineOptions = ref<ApexOptions>({\n    chart: {\n      type: \"area\",\n      sparkline: { enabled: true },\n      parentHeightOffset: 0,\n    },\n    stroke: { curve: \"smooth\", width: 2 },\n    fill: {\n      type: \"gradient\",\n      gradient: {\n        shadeIntensity: 1,\n        opacityFrom: 0.25,\n        opacityTo: 0.02,\n        stops: [0, 95, 100],\n      },\n    },\n    colors: [\"#10b981\"],\n    tooltip: { enabled: false },\n  });\n\n  // Edit sheet\n  const editOpen = ref(false);\n  const editTarget = ref<PageRow | null>(null);\n  const editForm = reactive({ page: \"\", folder: \"\", visibility: \"\" as \"public\" | \"private\" });\n\n  const openEdit = (row: PageRow) => {\n    editTarget.value = row;\n    editForm.page = row.page;\n    editForm.folder = row.folder;\n    editForm.visibility = row.visibility;\n    editOpen.value = true;\n  };\n\n  const saveEdit = () => {\n    editOpen.value = false;\n    useSonner(\"Page updated\", { description: `'${editForm.page}' has been saved.` });\n  };\n\n  // Delete dialog\n  const deleteOpen = ref(false);\n  const deleteTarget = ref<PageRow | null>(null);\n\n  const confirmDelete = () => {\n    if (!deleteTarget.value) return;\n    useSonner(`'${deleteTarget.value.page}' deleted`, {\n      description: \"The page has been permanently removed.\",\n    });\n    deleteTarget.value = null;\n  };\n\n  // Pages table\n  type PageRow = {\n    id: number;\n    page: string;\n    sessions: number;\n    avgTime: string;\n    percentage: number;\n    folder: string;\n    visibility: \"public\" | \"private\";\n  };\n\n  const tableFilters = [\"View all\", \"Public\", \"Private\"] as const;\n  const activeFilter = ref(\"View all\");\n  const tableSearch = ref(\"\");\n\n  const pageColumns: ColumnDef<PageRow>[] = [\n    {\n      id: \"select\",\n      header: \"\",\n      enableSorting: false,\n      enableHiding: false,\n      meta: { class: { th: \"w-12\", td: \"w-12\" } },\n    },\n    {\n      accessorKey: \"page\",\n      header: \"Page\",\n    },\n    {\n      accessorKey: \"sessions\",\n      header: \"Sessions\",\n      meta: { class: { th: \"tabular-nums\", td: \"tabular-nums\" } },\n    },\n    {\n      accessorKey: \"avgTime\",\n      header: \"Avg time\",\n    },\n    {\n      id: \"percentage\",\n      accessorKey: \"percentage\",\n      header: \"% of total\",\n      enableSorting: true,\n    },\n    {\n      id: \"folder\",\n      accessorKey: \"folder\",\n      header: \"Folder\",\n      enableSorting: false,\n    },\n    {\n      id: \"actions\",\n      header: \"\",\n      enableSorting: false,\n      enableHiding: false,\n      meta: { class: { th: \"w-20\", td: \"w-20\" } },\n    },\n  ];\n\n  const basePaths = [\n    \"uithing.com\",\n    \"uithing.com/free-icons\",\n    \"uithing.com/icons\",\n    \"uithing.com/components\",\n    \"uithing.com/pricing\",\n    \"uithing.com/faqs\",\n    \"uithing.com/blog\",\n    \"uithing.com/templates\",\n    \"uithing.com/dashboard\",\n    \"uithing.com/signup\",\n    \"uithing.com/login\",\n    \"uithing.com/docs\",\n    \"uithing.com/resources\",\n    \"uithing.com/changelog\",\n    \"uithing.com/about\",\n  ];\n\n  const avgTimes = [\n    \"48s\",\n    \"56s\",\n    \"1m 8s\",\n    \"1m 12s\",\n    \"1m 24s\",\n    \"1m 36s\",\n    \"2m 2s\",\n    \"2m 14s\",\n    \"2m 22s\",\n    \"45s\",\n  ];\n\n  const folders = [\"General\", \"Marketing\", \"Docs\", \"Blog\", \"Resources\"];\n\n  const createPage = (i: number): PageRow => {\n    const base = basePaths[i % basePaths.length];\n    const page = i < basePaths.length ? base : `${base}?ref=${Math.floor(i / basePaths.length)}`;\n    const sessions = Math.max(8, Math.round(4288 / (i * 0.65 + 1)));\n    const percentage = Math.round((sessions / 4288) * 62.4 * 10) / 10;\n    return {\n      id: i + 1,\n      page,\n      sessions,\n      avgTime: avgTimes[i % avgTimes.length],\n      percentage,\n      folder: folders[i % folders.length],\n      visibility: i % 4 === 0 ? \"private\" : \"public\",\n    };\n  };\n\n  const { data: pagesData, pending: pagesPending } = await useAsyncData<PageRow[]>(\n    \"block-dashboard3-pages\",\n    async () => Array.from({ length: 100 }, (_, i) => createPage(i)),\n    { default: () => [] }\n  );\n\n  const pages = computed(() => pagesData.value ?? []);\n\n  const filteredPages = computed(() => {\n    let result = pages.value;\n    if (activeFilter.value === \"Public\") result = result.filter((p) => p.visibility === \"public\");\n    if (activeFilter.value === \"Private\") result = result.filter((p) => p.visibility === \"private\");\n    if (tableSearch.value.trim()) {\n      const q = tableSearch.value.toLowerCase();\n      result = result.filter((p) => p.page.toLowerCase().includes(q));\n    }\n    return result;\n  });\n</script>\n","category":"Dashboards","path":"Dashboards/BlockDashboards3.vue","components":["alertdialog","alertdialogaction","alertdialogcancel","alertdialogcontent","alertdialogdescription","alertdialogfooter","alertdialogheader","alertdialogtitle","apexchart","avatar","badge","button","card","cardheader","cardtitle","checkbox","commanddialog","commandempty","commandgroup","commandinput","commanditem","commandlist","commandseparator","commandshortcut","container","dropdownmenu","dropdownmenucheckboxitem","dropdownmenucontent","dropdownmenugroup","dropdownmenuitem","dropdownmenulabel","dropdownmenuseparator","dropdownmenutrigger","gradientdivider","kbd","popover","popovercontent","popovertrigger","select","selectcontent","selectitem","selecttrigger","selectvalue","sheet","sheetclose","sheetcontent","sheetfooter","tabs","tabslist","tabstrigger","tanstacktable","togglegroup","togglegroupitem","veeinput"]},{"name":"Dashboards 4","fileName":"BlockDashboards4.vue","file":"<template>\n  <div\n    class=\"min-h-screen bg-background text-foreground [--color-primary:#8b5cf6] [--primary:#8b5cf6] [--ring:#8b5cf6]\"\n  >\n    <!-- Edit customer sheet -->\n    <UiSheet v-model:open=\"editOpen\">\n      <UiSheetContent\n        side=\"right\"\n        variant=\"floating\"\n        translucent\n        title=\"Edit customer\"\n        description=\"Update the customer details below.\"\n      >\n        <template #content>\n          <div class=\"space-y-5 px-6\">\n            <div class=\"space-y-1.5\">\n              <label class=\"text-sm font-medium\">Name</label>\n              <UiVeeInput v-model=\"editForm.name\" name=\"edit-name\" placeholder=\"Full name\" />\n            </div>\n            <div class=\"space-y-1.5\">\n              <label class=\"text-sm font-medium\">Email</label>\n              <UiVeeInput\n                v-model=\"editForm.email\"\n                name=\"edit-email\"\n                placeholder=\"email@example.com\"\n              />\n            </div>\n            <div class=\"space-y-1.5\">\n              <label class=\"text-sm font-medium\">Amount</label>\n              <UiVeeInput v-model=\"editForm.amount\" name=\"edit-amount\" placeholder=\"$0.00\" />\n            </div>\n            <div class=\"space-y-1.5\">\n              <label class=\"text-sm font-medium\">Status</label>\n              <UiSelect v-model=\"editForm.status\">\n                <UiSelectTrigger class=\"w-full\">\n                  <UiSelectValue placeholder=\"Select status\" />\n                </UiSelectTrigger>\n                <UiSelectContent>\n                  <UiSelectItem value=\"Paid\">Paid</UiSelectItem>\n                  <UiSelectItem value=\"Pending\">Pending</UiSelectItem>\n                  <UiSelectItem value=\"Failed\">Failed</UiSelectItem>\n                </UiSelectContent>\n              </UiSelect>\n            </div>\n          </div>\n        </template>\n        <template #footer>\n          <UiSheetFooter class=\"px-6 pb-6\">\n            <UiSheetClose as-child>\n              <UiButton variant=\"outline\" class=\"w-full\">Cancel</UiButton>\n            </UiSheetClose>\n            <UiButton class=\"w-full\" @click=\"saveEdit\">Save changes</UiButton>\n            <UiSheetX />\n          </UiSheetFooter>\n        </template>\n      </UiSheetContent>\n    </UiSheet>\n\n    <!-- Delete confirmation dialog -->\n    <UiAlertDialog v-model:open=\"deleteOpen\">\n      <UiAlertDialogContent>\n        <UiAlertDialogHeader>\n          <UiAlertDialogTitle title=\"Remove customer?\" />\n          <UiAlertDialogDescription\n            :description=\"`Are you sure you want to remove '${deleteTarget?.name}'? This action cannot be undone.`\"\n          />\n        </UiAlertDialogHeader>\n        <UiAlertDialogFooter>\n          <UiAlertDialogCancel />\n          <UiAlertDialogAction @click=\"confirmDelete\" />\n        </UiAlertDialogFooter>\n      </UiAlertDialogContent>\n    </UiAlertDialog>\n\n    <!-- Command palette search -->\n    <UiCommandDialog\n      v-model:open=\"searchOpen\"\n      title=\"Search\"\n      description=\"Search for customers, reports, and quick actions\"\n    >\n      <UiCommandInput placeholder=\"Search anything...\" />\n      <UiCommandList>\n        <UiCommandEmpty>No results found.</UiCommandEmpty>\n        <UiCommandGroup heading=\"Quick links\">\n          <UiCommandItem v-for=\"link in quickLinks\" :key=\"link.label\" :value=\"link.label\">\n            <Icon :name=\"link.icon\" />\n            <span>{{ link.label }}</span>\n            <UiCommandShortcut>{{ link.path }}</UiCommandShortcut>\n          </UiCommandItem>\n        </UiCommandGroup>\n        <UiCommandSeparator />\n        <UiCommandGroup heading=\"Recent customers\">\n          <UiCommandItem v-for=\"c in customers.slice(0, 4)\" :key=\"c.id\" :value=\"c.name\">\n            <Icon name=\"fluent:person-24-regular\" />\n            <span>{{ c.name }}</span>\n            <UiCommandShortcut>{{ c.email }}</UiCommandShortcut>\n          </UiCommandItem>\n        </UiCommandGroup>\n      </UiCommandList>\n      <div\n        class=\"flex items-center gap-5 border-t border-border/70 bg-muted/20 px-4 py-2.5 text-xs text-muted-foreground\"\n      >\n        <span class=\"flex items-center gap-1.5\"><UiKbd>↵</UiKbd> to select</span>\n        <span class=\"flex items-center gap-1.5\"><UiKbd>↑↓</UiKbd> to navigate</span>\n        <span class=\"flex items-center gap-1.5\"><UiKbd>ESC</UiKbd> to close</span>\n      </div>\n    </UiCommandDialog>\n\n    <!-- Sticky header -->\n    <Motion\n      as=\"header\"\n      :initial=\"{ opacity: 0, y: -16 }\"\n      :animate=\"{ opacity: 1, y: 0 }\"\n      :transition=\"{ duration: 0.4, ease: 'easeOut' }\"\n      class=\"sticky top-0 z-10 border-b border-border/70 bg-background/85 backdrop-blur-md\"\n    >\n      <UiContainer class=\"flex min-h-14 items-center justify-between gap-4\">\n        <!-- Logo + nav -->\n        <div class=\"flex items-center gap-5\">\n          <div class=\"flex items-center gap-2.5\">\n            <div\n              class=\"flex size-7 items-center justify-center rounded-md border border-border/70 bg-muted shadow-xs\"\n            >\n              <div\n                class=\"size-3.5 rounded-full bg-[radial-gradient(circle_at_35%_35%,rgba(255,255,255,0.9),rgba(255,255,255,0.15)_32%,transparent_34%),linear-gradient(135deg,var(--color-primary),color-mix(in_oklab,var(--color-primary)_40%,white))]\"\n              />\n            </div>\n            <span class=\"font-semibold tracking-tight\">UI Thing</span>\n          </div>\n\n          <!-- Mobile nav -->\n          <UiPopover class=\"lg:hidden\">\n            <UiPopoverTrigger as-child>\n              <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full lg:hidden\">\n                <Icon\n                  name=\"fluent:line-horizontal-3-24-regular\"\n                  class=\"size-5 text-muted-foreground\"\n                />\n              </UiButton>\n            </UiPopoverTrigger>\n            <UiPopoverContent align=\"start\" class=\"w-48 p-1\">\n              <UiButton\n                v-for=\"item in navItems\"\n                :key=\"item.label\"\n                variant=\"ghost\"\n                size=\"sm\"\n                class=\"w-full justify-start\"\n                :class=\"item.active ? 'bg-muted text-foreground' : 'text-muted-foreground'\"\n              >\n                {{ item.label }}\n              </UiButton>\n            </UiPopoverContent>\n          </UiPopover>\n\n          <!-- Desktop nav -->\n          <nav class=\"hidden items-center gap-0.5 lg:flex\">\n            <UiButton\n              v-for=\"item in navItems\"\n              :key=\"item.label\"\n              variant=\"ghost\"\n              size=\"sm\"\n              :class=\"\n                item.active\n                  ? 'bg-muted text-foreground shadow-xs hover:bg-muted'\n                  : 'text-muted-foreground'\n              \"\n            >\n              {{ item.label }}\n            </UiButton>\n          </nav>\n        </div>\n\n        <!-- Right actions -->\n        <div class=\"flex items-center gap-1.5\">\n          <!-- Upgrade now -->\n          <UiButton variant=\"outline\" size=\"sm\" class=\"hidden gap-1.5 sm:flex\">\n            <Icon name=\"fluent:flash-24-regular\" class=\"size-4 text-amber-500\" />\n            Upgrade now\n          </UiButton>\n\n          <!-- Settings dropdown -->\n          <UiDropdownMenu>\n            <UiDropdownMenuTrigger as-child>\n              <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full\">\n                <Icon name=\"fluent:settings-24-regular\" class=\"size-5 text-muted-foreground\" />\n              </UiButton>\n            </UiDropdownMenuTrigger>\n            <UiDropdownMenuContent align=\"end\" class=\"w-56\">\n              <UiDropdownMenuLabel>Settings</UiDropdownMenuLabel>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuItem icon=\"fluent:person-24-regular\" title=\"Account settings\" />\n              <UiDropdownMenuItem icon=\"fluent:color-24-regular\" title=\"Appearance\" />\n              <UiDropdownMenuItem icon=\"fluent:alert-24-regular\" title=\"Notification preferences\" />\n              <UiDropdownMenuItem icon=\"fluent:shield-24-regular\" title=\"Privacy & security\" />\n            </UiDropdownMenuContent>\n          </UiDropdownMenu>\n\n          <!-- Notifications dropdown -->\n          <UiDropdownMenu>\n            <UiDropdownMenuTrigger as-child>\n              <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full\">\n                <Icon name=\"fluent:alert-24-regular\" class=\"size-5 text-muted-foreground\" />\n              </UiButton>\n            </UiDropdownMenuTrigger>\n            <UiDropdownMenuContent align=\"end\" class=\"w-80\">\n              <UiDropdownMenuLabel class=\"flex items-center justify-between\">\n                <span>Notifications</span>\n                <UiBadge variant=\"secondary\" size=\"sm\">3 new</UiBadge>\n              </UiDropdownMenuLabel>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuItem\n                icon=\"fluent:arrow-up-right-24-regular\"\n                title=\"Revenue up 2.4% this month\"\n              >\n                <template #shortcut>2h ago</template>\n              </UiDropdownMenuItem>\n              <UiDropdownMenuItem icon=\"fluent:people-24-regular\" title=\"96 users active right now\">\n                <template #shortcut>1d ago</template>\n              </UiDropdownMenuItem>\n              <UiDropdownMenuItem icon=\"fluent:document-24-regular\" title=\"Monthly report is ready\">\n                <template #shortcut>2d ago</template>\n              </UiDropdownMenuItem>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuItem icon=\"fluent:checkmark-24-regular\" title=\"Mark all as read\" />\n            </UiDropdownMenuContent>\n          </UiDropdownMenu>\n\n          <!-- User dropdown -->\n          <UiDropdownMenu>\n            <UiDropdownMenuTrigger as-child>\n              <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full p-0\">\n                <UiAvatar\n                  :src=\"currentUser.avatar\"\n                  :alt=\"currentUser.name\"\n                  :fallback=\"currentUser.fallback\"\n                  class=\"size-8 cursor-pointer\"\n                />\n              </UiButton>\n            </UiDropdownMenuTrigger>\n            <UiDropdownMenuContent align=\"end\" class=\"w-52\">\n              <UiDropdownMenuLabel>\n                <div class=\"flex flex-col\">\n                  <p class=\"text-sm font-medium\">{{ currentUser.name }}</p>\n                  <p class=\"text-xs text-muted-foreground\">{{ currentUser.email }}</p>\n                </div>\n              </UiDropdownMenuLabel>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuGroup>\n                <UiDropdownMenuItem icon=\"fluent:person-24-regular\" title=\"Profile\" />\n                <UiDropdownMenuItem icon=\"fluent:settings-24-regular\" title=\"Settings\" />\n                <UiDropdownMenuItem icon=\"fluent:card-ui-24-regular\" title=\"Billing\" />\n                <UiDropdownMenuItem icon=\"fluent:people-24-regular\" title=\"Team\" />\n              </UiDropdownMenuGroup>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuItem\n                variant=\"destructive\"\n                icon=\"fluent:arrow-exit-24-regular\"\n                title=\"Sign out\"\n              />\n            </UiDropdownMenuContent>\n          </UiDropdownMenu>\n        </div>\n      </UiContainer>\n    </Motion>\n\n    <!-- Sub-nav -->\n    <div class=\"border-b border-border/70 bg-background/85 backdrop-blur-md\">\n      <UiContainer class=\"flex items-center justify-between gap-4\">\n        <div class=\"scrollbar-none overflow-x-auto\">\n          <UiTabs v-model=\"activeSubNav\">\n            <UiTabsList class=\"h-auto gap-0 rounded-none bg-transparent px-0 pb-0\">\n              <UiTabsTrigger\n                v-for=\"tab in subNavTabs\"\n                :key=\"tab\"\n                :value=\"tab\"\n                class=\"rounded-none border-b-2 border-transparent px-3.5 py-3.5 text-sm font-medium text-muted-foreground shadow-none transition-colors hover:text-foreground data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none\"\n              >\n                {{ tab }}\n              </UiTabsTrigger>\n            </UiTabsList>\n          </UiTabs>\n        </div>\n\n        <!-- Global search trigger -->\n        <div class=\"hidden shrink-0 sm:block\">\n          <UiButton\n            variant=\"outline\"\n            class=\"h-9 w-52 justify-start gap-2 border-border/70 font-normal text-muted-foreground\"\n            @click=\"searchOpen = true\"\n          >\n            <Icon name=\"fluent:search-24-regular\" class=\"size-4 shrink-0\" />\n            <span>Search</span>\n            <UiKbd class=\"ml-auto\">⌘K</UiKbd>\n          </UiButton>\n        </div>\n      </UiContainer>\n    </div>\n\n    <!-- Page content -->\n    <UiContainer class=\"space-y-6 py-8\">\n      <!-- Title -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 12 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.1, ease: 'easeOut' }\"\n      >\n        <h1 class=\"text-2xl font-semibold tracking-tight\">My dashboard</h1>\n      </Motion>\n\n      <!-- KPI cards -->\n      <Motion\n        as=\"section\"\n        :variants=\"cardContainerVariant\"\n        initial=\"initial\"\n        animate=\"animate\"\n        class=\"grid gap-4 sm:grid-cols-3\"\n      >\n        <Motion v-for=\"metric in metrics\" :key=\"metric.label\" :variants=\"cardVariant\">\n          <UiCard\n            class=\"gap-4 border-border/70 p-5 shadow-xs transition-all hover:border-primary/50 hover:ring-1 hover:ring-primary/15\"\n          >\n            <div\n              class=\"flex size-9 items-center justify-center rounded-lg border border-border/70 bg-muted/50\"\n            >\n              <Icon :name=\"metric.icon\" class=\"size-5 text-muted-foreground\" />\n            </div>\n            <div>\n              <p class=\"mb-1 text-sm text-muted-foreground\">{{ metric.label }}</p>\n              <div class=\"flex flex-wrap items-baseline gap-x-2 gap-y-1\">\n                <span class=\"text-2xl font-bold tracking-tight\">{{ metric.value }}</span>\n                <span\n                  class=\"inline-flex items-center gap-1 text-xs font-medium text-emerald-600 dark:text-emerald-500\"\n                >\n                  <Icon name=\"fluent:arrow-trending-up-24-regular\" class=\"size-3.5\" />\n                  {{ metric.change }} vs last month\n                </span>\n              </div>\n            </div>\n          </UiCard>\n        </Motion>\n      </Motion>\n\n      <!-- Net revenue + chart -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 16 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.3, ease: 'easeOut' }\"\n      >\n        <UiCard class=\"gap-0 overflow-hidden border-border/70 py-0 shadow-xs\">\n          <!-- Header row -->\n          <div\n            class=\"flex flex-col gap-4 px-6 pt-6 pb-4 sm:flex-row sm:items-start sm:justify-between\"\n          >\n            <!-- Net revenue label + value -->\n            <div>\n              <UiDropdownMenu>\n                <UiDropdownMenuTrigger\n                  class=\"flex items-center gap-1 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground\"\n                >\n                  Net revenue\n                  <Icon name=\"fluent:chevron-down-24-regular\" class=\"size-3.5\" />\n                </UiDropdownMenuTrigger>\n                <UiDropdownMenuContent class=\"w-44\">\n                  <UiDropdownMenuItem title=\"Net revenue\" />\n                  <UiDropdownMenuItem title=\"Gross revenue\" />\n                  <UiDropdownMenuItem title=\"Total refunds\" />\n                  <UiDropdownMenuItem title=\"New MRR\" />\n                </UiDropdownMenuContent>\n              </UiDropdownMenu>\n              <div class=\"mt-1.5 flex items-baseline gap-2\">\n                <span class=\"text-3xl font-bold tracking-tight\">$7,804.16</span>\n                <span\n                  class=\"inline-flex items-center gap-1 text-sm font-medium text-emerald-600 dark:text-emerald-500\"\n                >\n                  <Icon name=\"fluent:arrow-trending-up-24-regular\" class=\"size-4\" />\n                  2.4%\n                </span>\n              </div>\n            </div>\n\n            <!-- Time tabs + filters -->\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <UiTabs v-model=\"activeRange\">\n                <UiTabsList class=\"border border-border/70 bg-muted/30\">\n                  <UiTabsTrigger v-for=\"r in timeRanges\" :key=\"r.value\" :value=\"r.value\">\n                    {{ r.label }}\n                  </UiTabsTrigger>\n                </UiTabsList>\n              </UiTabs>\n              <UiButton variant=\"outline\" class=\"gap-1.5\">\n                <Icon name=\"fluent:filter-24-regular\" class=\"size-4\" />\n                Filters\n              </UiButton>\n            </div>\n          </div>\n\n          <!-- Bar + line chart -->\n          <div class=\"px-2 pb-2\">\n            <UiApexchart type=\"bar\" height=\"340\" :series=\"chartSeries\" :options=\"chartOptions\" />\n          </div>\n        </UiCard>\n      </Motion>\n\n      <Motion\n        :initial=\"{ opacity: 0 }\"\n        :animate=\"{ opacity: 1 }\"\n        :transition=\"{ duration: 0.4, delay: 0.35, ease: 'easeOut' }\"\n      >\n        <UiGradientDivider />\n      </Motion>\n\n      <!-- Customers table -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 16 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.4, ease: 'easeOut' }\"\n      >\n        <UiCard class=\"gap-0 overflow-hidden border-border/70 py-0 shadow-xs\">\n          <UiCardHeader class=\"border-b border-border/60 py-5\">\n            <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n              <UiCardTitle class=\"text-base font-semibold\">Customers</UiCardTitle>\n              <div class=\"shrink-0 sm:w-56\">\n                <UiVeeInput\n                  v-model=\"tableSearch\"\n                  name=\"customer-search\"\n                  icon=\"fluent:search-24-regular\"\n                  placeholder=\"Search\"\n                >\n                  <template #trailingIcon>\n                    <span class=\"absolute inset-y-0 right-3 flex items-center justify-center\">\n                      <UiKbd>⌘K</UiKbd>\n                    </span>\n                  </template>\n                </UiVeeInput>\n              </div>\n            </div>\n          </UiCardHeader>\n\n          <UiTanStackTable\n            :data=\"filteredCustomers\"\n            :columns=\"customerColumns\"\n            :loading=\"customersPending\"\n            :show-rows-per-page=\"false\"\n            :show-page-info=\"false\"\n            :show-selected-count=\"false\"\n            :show-footer=\"true\"\n            :table-options=\"{ enableRowSelection: true }\"\n          >\n            <template #select-header=\"{ table }\">\n              <UiCheckbox\n                aria-label=\"Select all\"\n                :model-value=\"table.getIsAllPageRowsSelected()\"\n                @update:model-value=\"table.toggleAllPageRowsSelected(!!$event)\"\n              />\n            </template>\n\n            <template #select-cell=\"{ row }\">\n              <UiCheckbox\n                :aria-label=\"`Select ${row.original.name}`\"\n                :model-value=\"row.getIsSelected()\"\n                @update:model-value=\"row.toggleSelected(!!$event)\"\n              />\n            </template>\n\n            <template #name-cell=\"{ row }\">\n              <div class=\"flex items-center gap-3\">\n                <UiAvatar\n                  :src=\"row.original.avatar\"\n                  :alt=\"row.original.name\"\n                  :fallback=\"row.original.name.slice(0, 2)\"\n                  class=\"size-8 shrink-0\"\n                />\n                <div class=\"min-w-0\">\n                  <p class=\"truncate text-sm font-medium\">{{ row.original.name }}</p>\n                  <p class=\"truncate text-xs text-muted-foreground\">{{ row.original.handle }}</p>\n                </div>\n              </div>\n            </template>\n\n            <template #status-cell=\"{ row }\">\n              <UiBadge variant=\"outline\" class=\"gap-1.5\">\n                <span\n                  class=\"size-1.5 rounded-full\"\n                  :class=\"{\n                    'bg-emerald-500': row.original.status === 'Paid',\n                    'bg-amber-500': row.original.status === 'Pending',\n                    'bg-red-500': row.original.status === 'Failed',\n                  }\"\n                />\n                {{ row.original.status }}\n              </UiBadge>\n            </template>\n\n            <template #actions-cell=\"{ row }\">\n              <div class=\"flex items-center justify-end gap-0.5\">\n                <UiButton\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  class=\"text-muted-foreground hover:text-destructive\"\n                  :title=\"`Delete ${row.original.name}`\"\n                  @click=\"\n                    () => {\n                      deleteTarget = row.original;\n                      deleteOpen = true;\n                    }\n                  \"\n                >\n                  <Icon name=\"fluent:delete-24-regular\" class=\"size-4\" />\n                </UiButton>\n                <UiButton\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  class=\"text-muted-foreground hover:text-foreground\"\n                  :title=\"`Edit ${row.original.name}`\"\n                  @click=\"openEdit(row.original)\"\n                >\n                  <Icon name=\"fluent:edit-24-regular\" class=\"size-4\" />\n                </UiButton>\n              </div>\n            </template>\n\n            <template #footer=\"{ table }\">\n              <div\n                class=\"flex w-full flex-col gap-4 border-t border-border/60 px-6 py-4 text-sm font-medium text-muted-foreground sm:flex-row sm:items-center sm:justify-between\"\n              >\n                <p>\n                  Page {{ table.getState().pagination.pageIndex + 1 }} of\n                  {{ table.getPageCount() }}\n                </p>\n                <div class=\"flex items-center gap-2\">\n                  <UiButton\n                    variant=\"outline\"\n                    size=\"sm\"\n                    :disabled=\"!table.getCanPreviousPage()\"\n                    @click=\"table.previousPage()\"\n                  >\n                    <Icon name=\"fluent:arrow-left-24-regular\" class=\"size-4\" />\n                    Previous\n                  </UiButton>\n                  <UiButton\n                    variant=\"outline\"\n                    size=\"sm\"\n                    :disabled=\"!table.getCanNextPage()\"\n                    @click=\"table.nextPage()\"\n                  >\n                    Next\n                    <Icon name=\"fluent:arrow-right-24-regular\" class=\"size-4\" />\n                  </UiButton>\n                </div>\n              </div>\n            </template>\n          </UiTanStackTable>\n        </UiCard>\n      </Motion>\n    </UiContainer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import type { ColumnDef } from \"@tanstack/vue-table\";\n  import type { ApexOptions } from \"apexcharts\";\n  import { Motion } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  // Animation variants\n  const cardContainerVariant: MotionProps[\"variants\"] = {\n    initial: {},\n    animate: { transition: { staggerChildren: 0.08, delayChildren: 0.2 } },\n  };\n\n  const cardVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 16 },\n    animate: { opacity: 1, y: 0, transition: { duration: 0.4, ease: \"easeOut\" } },\n  };\n\n  // User\n  const currentUser = {\n    name: \"Behon Baker\",\n    email: \"behon.baker@yahoo.com\",\n    avatar: \"https://behonbaker.com/icon.png\",\n    fallback: \"BB\",\n  };\n\n  // Navigation\n  const navItems = [\n    { label: \"Home\", active: false },\n    { label: \"Dashboard\", active: true },\n    { label: \"Projects\", active: false },\n    { label: \"Tasks\", active: false },\n    { label: \"Reporting\", active: false },\n    { label: \"Users\", active: false },\n  ];\n\n  // Sub-nav tabs\n  const subNavTabs = [\n    \"Overview\",\n    \"Notifications\",\n    \"Analytics\",\n    \"Saved reports\",\n    \"Scheduled reports\",\n    \"User reports\",\n  ];\n  const activeSubNav = ref(\"Overview\");\n\n  // Search\n  const searchOpen = ref(false);\n\n  const quickLinks = [\n    {\n      label: \"Analytics overview\",\n      icon: \"fluent:data-bar-vertical-24-regular\",\n      path: \"/analytics\",\n    },\n    {\n      label: \"Revenue report\",\n      icon: \"fluent:arrow-up-right-24-regular\",\n      path: \"/reports/revenue\",\n    },\n    { label: \"All customers\", icon: \"fluent:people-24-regular\", path: \"/customers\" },\n  ];\n\n  const handleKeydown = (e: KeyboardEvent) => {\n    if ((e.metaKey || e.ctrlKey) && e.key === \"k\") {\n      e.preventDefault();\n      searchOpen.value = true;\n    }\n    if (e.key === \"Escape\") searchOpen.value = false;\n  };\n\n  onMounted(() => document.addEventListener(\"keydown\", handleKeydown));\n  onUnmounted(() => document.removeEventListener(\"keydown\", handleKeydown));\n\n  // KPI metrics\n  const metrics = [\n    {\n      label: \"All revenue\",\n      value: \"$8,746.22\",\n      change: \"2.4%\",\n      icon: \"fluent:money-24-regular\",\n      highlighted: true,\n    },\n    {\n      label: \"Page views\",\n      value: \"12,440\",\n      change: \"6.2%\",\n      icon: \"fluent:eye-24-regular\",\n      highlighted: false,\n    },\n    {\n      label: \"Active now\",\n      value: \"96\",\n      change: \"0.8%\",\n      icon: \"fluent:person-24-regular\",\n      highlighted: false,\n    },\n  ];\n\n  // Time range tabs\n  const timeRanges = [\n    { label: \"12 months\", value: \"12months\" },\n    { label: \"30 days\", value: \"30days\" },\n    { label: \"7 days\", value: \"7days\" },\n    { label: \"24 hours\", value: \"24hours\" },\n  ];\n  const activeRange = ref(\"12months\");\n\n  // Revenue chart — data per time range\n  const rangeDataMap: Record<\n    string,\n    { categories: string[]; revenue: number[]; target: number[] }\n  > = {\n    \"12months\": {\n      categories: [\n        \"Jan '24\",\n        \"Feb '24\",\n        \"Mar '24\",\n        \"Apr '24\",\n        \"May '24\",\n        \"Jun '24\",\n        \"Jul '24\",\n        \"Aug '24\",\n        \"Sep '24\",\n        \"Oct '24\",\n        \"Nov '24\",\n        \"Dec '24\",\n        \"Jan '25\",\n        \"Feb '25\",\n        \"Mar '25\",\n        \"Apr '25\",\n        \"May '25\",\n        \"Jun '25\",\n        \"Jul '25\",\n        \"Aug '25\",\n        \"Sep '25\",\n        \"Oct '25\",\n        \"Nov '25\",\n        \"Dec '25\",\n      ],\n      revenue: [\n        3100, 4400, 3800, 5200, 4100, 6300, 5700, 7200, 6500, 7800, 6900, 8400, 4200, 5800, 4800,\n        6200, 5100, 7300, 6800, 8100, 7400, 8900, 7600, 9200,\n      ],\n      target: [\n        3500, 3900, 4200, 4600, 5000, 5300, 5600, 6000, 6300, 6700, 7000, 7400, 4500, 5200, 5500,\n        5800, 6200, 6600, 7000, 7400, 7800, 8200, 8600, 9000,\n      ],\n    },\n    \"30days\": {\n      categories: Array.from({ length: 30 }, (_, i) => {\n        const d = new Date(2025, 2, i + 1);\n        return `${d.getDate()} Mar`;\n      }),\n      revenue: [\n        210, 185, 240, 195, 310, 275, 340, 290, 260, 380, 320, 410, 350, 295, 430, 370, 445, 390,\n        320, 480, 415, 460, 395, 510, 440, 390, 530, 470, 420, 560,\n      ],\n      target: [\n        220, 225, 230, 235, 245, 250, 260, 265, 270, 280, 285, 295, 300, 310, 315, 325, 330, 340,\n        345, 355, 360, 370, 375, 385, 390, 400, 405, 415, 420, 430,\n      ],\n    },\n    \"7days\": {\n      categories: [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"],\n      revenue: [1240, 980, 1580, 1320, 1750, 820, 640],\n      target: [1100, 1100, 1300, 1300, 1500, 900, 900],\n    },\n    \"24hours\": {\n      categories: Array.from({ length: 24 }, (_, i) => `${String(i).padStart(2, \"0\")}:00`),\n      revenue: [\n        42, 28, 18, 12, 10, 15, 38, 95, 180, 260, 310, 345, 390, 420, 375, 340, 310, 295, 320, 380,\n        350, 290, 210, 140,\n      ],\n      target: [\n        50, 50, 50, 50, 50, 80, 120, 180, 250, 300, 330, 360, 380, 380, 360, 330, 300, 280, 300,\n        350, 320, 270, 200, 130,\n      ],\n    },\n  };\n\n  const chartOptions = computed<ApexOptions>(() => ({\n    chart: {\n      type: \"bar\",\n      toolbar: { show: false },\n      fontFamily: \"inherit\",\n      parentHeightOffset: 0,\n      animations: { enabled: true, easing: \"easeinout\", speed: 400 },\n    },\n    plotOptions: {\n      bar: { columnWidth: \"42%\", borderRadius: 3, borderRadiusApplication: \"end\" },\n    },\n    stroke: { width: [0, 2], curve: \"smooth\", dashArray: [0, 5] },\n    colors: [\"#8b5cf6\", \"#c4b5fd\"],\n    fill: { opacity: [1, 0.8] },\n    xaxis: {\n      categories: rangeDataMap?.[activeRange.value]?.categories,\n      axisBorder: { show: false },\n      axisTicks: { show: false },\n      labels: {\n        style: {\n          colors: Array(rangeDataMap?.[activeRange.value]?.categories.length ?? 0).fill(\n            \"var(--color-muted-foreground)\"\n          ) as string[],\n          fontSize: \"12px\",\n        },\n      },\n    },\n    yaxis: { show: false },\n    grid: { show: false, padding: { left: 8, right: 8 } },\n    legend: { show: false },\n    tooltip: { shared: true, intersect: false },\n    dataLabels: { enabled: false },\n  }));\n\n  const chartSeries = computed(() => [\n    { name: \"Revenue\", type: \"bar\", data: rangeDataMap?.[activeRange.value]?.revenue },\n    { name: \"Target\", type: \"line\", data: rangeDataMap?.[activeRange.value]?.target },\n  ]);\n\n  // Customers table\n  type CustomerRow = {\n    id: number;\n    name: string;\n    handle: string;\n    avatar: string;\n    email: string;\n    date: string;\n    status: \"Paid\" | \"Pending\" | \"Failed\";\n    amount: string;\n  };\n\n  const tableSearch = ref(\"\");\n\n  const customerColumns: ColumnDef<CustomerRow>[] = [\n    {\n      id: \"select\",\n      header: \"\",\n      enableSorting: false,\n      enableHiding: false,\n      meta: { class: { th: \"w-12\", td: \"w-12\" } },\n    },\n    {\n      accessorKey: \"name\",\n      header: \"Customer\",\n      meta: { class: { td: \"min-w-[180px]\" } },\n    },\n    {\n      accessorKey: \"email\",\n      header: \"Email\",\n      meta: { class: { td: \"text-muted-foreground\" } },\n    },\n    {\n      accessorKey: \"date\",\n      header: \"Date\",\n      meta: { class: { td: \"text-muted-foreground tabular-nums\" } },\n    },\n    {\n      id: \"status\",\n      accessorKey: \"status\",\n      header: \"Status\",\n      enableSorting: false,\n    },\n    {\n      accessorKey: \"amount\",\n      header: \"Amount\",\n      meta: { class: { th: \"text-right\", td: \"text-right tabular-nums font-medium\" } },\n    },\n    {\n      id: \"actions\",\n      header: \"\",\n      enableSorting: false,\n      enableHiding: false,\n      meta: { class: { th: \"w-20\", td: \"w-20\" } },\n    },\n  ];\n\n  const firstNames = [\n    \"Lily-Rose\",\n    \"Caitlyn\",\n    \"Fleur\",\n    \"Marco\",\n    \"Lulu\",\n    \"Mikey\",\n    \"Freya\",\n    \"James\",\n    \"Sofia\",\n    \"Noah\",\n    \"Emma\",\n    \"Liam\",\n    \"Olivia\",\n    \"Ethan\",\n    \"Ava\",\n    \"Mason\",\n    \"Isabella\",\n    \"Logan\",\n    \"Mia\",\n    \"Lucas\",\n  ];\n\n  const lastNames = [\n    \"Chedjou\",\n    \"King\",\n    \"Cook\",\n    \"Kelly\",\n    \"Meyers\",\n    \"Lawrence\",\n    \"Browning\",\n    \"Smith\",\n    \"Johnson\",\n    \"Williams\",\n    \"Brown\",\n    \"Jones\",\n    \"Garcia\",\n    \"Miller\",\n    \"Davis\",\n    \"Wilson\",\n    \"Taylor\",\n    \"Anderson\",\n    \"Thomas\",\n    \"Jackson\",\n  ];\n\n  const amounts = [\n    \"$100.14\",\n    \"$96.32\",\n    \"$104.24\",\n    \"$88.48\",\n    \"$107.10\",\n    \"$82.04\",\n    \"$91.50\",\n    \"$115.00\",\n    \"$78.25\",\n    \"$123.60\",\n  ];\n\n  const statuses: CustomerRow[\"status\"][] = [\n    \"Paid\",\n    \"Paid\",\n    \"Paid\",\n    \"Paid\",\n    \"Pending\",\n    \"Paid\",\n    \"Paid\",\n    \"Failed\",\n  ];\n\n  const domains = [\"gmail.com\", \"icloud.com\", \"yahoo.com\", \"outlook.com\"];\n\n  const createCustomer = (i: number): CustomerRow => {\n    const first = firstNames[i % firstNames.length] ?? \"User\";\n    const last = lastNames[i % lastNames.length] ?? \"Name\";\n    const name = `${first} ${last}`;\n    const slug = first.toLowerCase().replace(/[-\\s]/g, \"\");\n    const handle = `@${slug}${last.toLowerCase()}`;\n    const email = `${slug}@${domains[i % domains.length] ?? \"example.com\"}`;\n    const day = Math.max(1, 16 - Math.floor(i / 6));\n    const month = i < 60 ? \"Jan\" : \"Feb\";\n    return {\n      id: i + 1,\n      name,\n      handle,\n      avatar: `https://i.pravatar.cc/40?img=${(i % 70) + 1}`,\n      email,\n      date: `${month} ${day}, 2025`,\n      status: statuses[i % statuses.length] ?? \"Paid\",\n      amount: amounts[i % amounts.length] ?? \"$0.00\",\n    };\n  };\n\n  const { data: customersData, pending: customersPending } = await useAsyncData<CustomerRow[]>(\n    \"block-dashboard4-customers\",\n    async () => Array.from({ length: 100 }, (_, i) => createCustomer(i)),\n    { default: () => [] }\n  );\n\n  const customers = computed(() => customersData.value ?? []);\n\n  const filteredCustomers = computed(() => {\n    if (!tableSearch.value.trim()) return customers.value;\n    const q = tableSearch.value.toLowerCase();\n    return customers.value.filter(\n      (c) => c.name.toLowerCase().includes(q) || c.email.toLowerCase().includes(q)\n    );\n  });\n\n  // Delete dialog\n  const deleteOpen = ref(false);\n  const deleteTarget = ref<CustomerRow | null>(null);\n\n  const confirmDelete = () => {\n    if (!deleteTarget.value) return;\n    useSonner(`'${deleteTarget.value.name}' removed`, {\n      description: \"The customer has been permanently deleted.\",\n    });\n    deleteTarget.value = null;\n  };\n\n  // Edit sheet\n  const editOpen = ref(false);\n  const editForm = reactive({\n    name: \"\",\n    email: \"\",\n    amount: \"\",\n    status: \"\" as CustomerRow[\"status\"],\n  });\n\n  const openEdit = (row: CustomerRow) => {\n    editForm.name = row.name;\n    editForm.email = row.email;\n    editForm.amount = row.amount;\n    editForm.status = row.status;\n    editOpen.value = true;\n  };\n\n  const saveEdit = () => {\n    editOpen.value = false;\n    useSonner(\"Customer updated\", { description: `${editForm.name} has been saved.` });\n  };\n</script>\n","category":"Dashboards","path":"Dashboards/BlockDashboards4.vue","components":["alertdialog","alertdialogaction","alertdialogcancel","alertdialogcontent","alertdialogdescription","alertdialogfooter","alertdialogheader","alertdialogtitle","apexchart","avatar","badge","button","card","cardheader","cardtitle","checkbox","commanddialog","commandempty","commandgroup","commandinput","commanditem","commandlist","commandseparator","commandshortcut","container","dropdownmenu","dropdownmenucontent","dropdownmenugroup","dropdownmenuitem","dropdownmenulabel","dropdownmenuseparator","dropdownmenutrigger","gradientdivider","kbd","popover","popovercontent","popovertrigger","select","selectcontent","selectitem","selecttrigger","selectvalue","sheet","sheetclose","sheetcontent","sheetfooter","sheetx","tabs","tabslist","tabstrigger","tanstacktable","veeinput"]},{"name":"Dashboards 5","fileName":"BlockDashboards5.vue","file":"<template>\n  <div\n    class=\"min-h-screen bg-background text-foreground [--color-primary:#E3A514] [--primary:#E3A514] [--radius:12px] [--ring:#E3A514]\"\n  >\n    <!-- Edit user sheet -->\n    <UiSheet v-model:open=\"editOpen\">\n      <UiSheetContent\n        side=\"right\"\n        variant=\"floating\"\n        translucent\n        title=\"Edit user\"\n        description=\"Update the user's details below.\"\n      >\n        <template #content>\n          <div class=\"space-y-5 px-6\">\n            <div class=\"space-y-1.5\">\n              <label class=\"text-sm font-medium\">Full name</label>\n              <UiVeeInput v-model=\"editForm.name\" name=\"edit-name\" placeholder=\"Full name\" />\n            </div>\n            <div class=\"space-y-1.5\">\n              <label class=\"text-sm font-medium\">Email</label>\n              <UiVeeInput v-model=\"editForm.email\" name=\"edit-email\" placeholder=\"Email address\" />\n            </div>\n            <div class=\"space-y-1.5\">\n              <label class=\"text-sm font-medium\">Role</label>\n              <UiSelect v-model=\"editForm.role\">\n                <UiSelectTrigger class=\"w-full\">\n                  <UiSelectValue placeholder=\"Select role\" />\n                </UiSelectTrigger>\n                <UiSelectContent>\n                  <UiSelectItem value=\"Admin\">Admin</UiSelectItem>\n                  <UiSelectItem value=\"Member\">Member</UiSelectItem>\n                  <UiSelectItem value=\"Viewer\">Viewer</UiSelectItem>\n                </UiSelectContent>\n              </UiSelect>\n            </div>\n          </div>\n        </template>\n        <template #footer>\n          <UiSheetFooter class=\"px-6 pb-6\">\n            <UiSheetClose as-child>\n              <UiButton variant=\"outline\" class=\"w-full\">Cancel</UiButton>\n            </UiSheetClose>\n            <UiButton class=\"w-full\" @click=\"saveEdit\">Save changes</UiButton>\n          </UiSheetFooter>\n        </template>\n      </UiSheetContent>\n    </UiSheet>\n\n    <!-- Delete confirmation dialog -->\n    <UiAlertDialog v-model:open=\"deleteOpen\">\n      <UiAlertDialogContent>\n        <UiAlertDialogHeader>\n          <UiAlertDialogTitle title=\"Remove user?\" />\n          <UiAlertDialogDescription\n            :description=\"`Are you sure you want to remove '${deleteTarget?.name}'? This action cannot be undone.`\"\n          />\n        </UiAlertDialogHeader>\n        <UiAlertDialogFooter>\n          <UiAlertDialogCancel />\n          <UiAlertDialogAction @click=\"confirmDelete\" />\n        </UiAlertDialogFooter>\n      </UiAlertDialogContent>\n    </UiAlertDialog>\n\n    <!-- Command / search dialog -->\n    <UiCommandDialog\n      v-model:open=\"searchOpen\"\n      title=\"Search\"\n      description=\"Search for users, reports, and quick actions\"\n    >\n      <UiCommandInput placeholder=\"Search anything...\" />\n      <UiCommandList>\n        <UiCommandEmpty>No results found.</UiCommandEmpty>\n        <UiCommandGroup heading=\"Recent\">\n          <UiCommandItem v-for=\"item in recentSearches\" :key=\"item\" :value=\"item\">\n            <Icon name=\"heroicons:clock\" />\n            <span>{{ item }}</span>\n            <Icon name=\"heroicons:arrow-up-left\" class=\"ml-auto opacity-40\" />\n          </UiCommandItem>\n        </UiCommandGroup>\n        <UiCommandSeparator />\n        <UiCommandGroup heading=\"Quick links\">\n          <UiCommandItem v-for=\"link in quickLinks\" :key=\"link.label\" :value=\"link.label\">\n            <Icon :name=\"link.icon\" />\n            <span>{{ link.label }}</span>\n            <UiCommandShortcut>{{ link.path }}</UiCommandShortcut>\n          </UiCommandItem>\n        </UiCommandGroup>\n      </UiCommandList>\n      <div\n        class=\"flex items-center gap-5 border-t border-border/70 bg-muted/20 px-4 py-2.5 text-xs text-muted-foreground\"\n      >\n        <span class=\"flex items-center gap-1.5\"><UiKbd>↵</UiKbd> to select</span>\n        <span class=\"flex items-center gap-1.5\"><UiKbd>↑↓</UiKbd> to navigate</span>\n        <span class=\"flex items-center gap-1.5\"><UiKbd>ESC</UiKbd> to close</span>\n      </div>\n    </UiCommandDialog>\n\n    <!-- Sticky header -->\n    <Motion\n      as=\"header\"\n      :initial=\"{ opacity: 0, y: -16 }\"\n      :animate=\"{ opacity: 1, y: 0 }\"\n      :transition=\"{ duration: 0.4, ease: 'easeOut' }\"\n      class=\"sticky top-0 z-10 border-b border-border/70 bg-background/85 backdrop-blur-md\"\n    >\n      <UiContainer class=\"flex min-h-[4rem] items-center justify-between gap-4\">\n        <!-- Logo + nav -->\n        <div class=\"flex items-center gap-5\">\n          <div class=\"flex items-center gap-2.5\">\n            <div\n              class=\"flex size-8 items-center justify-center rounded-lg border border-border/70 bg-muted shadow-xs\"\n            >\n              <div\n                class=\"size-4 rounded-full bg-[radial-gradient(circle_at_35%_35%,rgba(255,255,255,0.95),rgba(255,255,255,0.2)_32%,transparent_34%),linear-gradient(135deg,var(--color-primary),color-mix(in_oklab,var(--color-primary)_40%,white))]\"\n              />\n            </div>\n            <span class=\"font-semibold tracking-tight\">UI Thing</span>\n          </div>\n\n          <!-- Mobile nav popover -->\n          <UiPopover class=\"lg:hidden\">\n            <UiPopoverTrigger as-child>\n              <UiButton class=\"lg:hidden\" variant=\"ghost\" size=\"icon-sm\">\n                <Icon name=\"heroicons:bars-3\" class=\"size-5\" />\n              </UiButton>\n            </UiPopoverTrigger>\n            <UiPopoverContent align=\"start\" class=\"w-48 p-1\">\n              <UiButton\n                v-for=\"item in navItems\"\n                :key=\"item.label\"\n                variant=\"ghost\"\n                size=\"sm\"\n                class=\"w-full justify-start\"\n                :class=\"\n                  item.active\n                    ? 'bg-muted text-foreground shadow-xs hover:bg-muted'\n                    : 'text-muted-foreground'\n                \"\n              >\n                {{ item.label }}\n              </UiButton>\n            </UiPopoverContent>\n          </UiPopover>\n\n          <!-- Desktop nav -->\n          <nav class=\"hidden items-center gap-1 lg:flex\">\n            <UiButton\n              v-for=\"item in navItems\"\n              :key=\"item.label\"\n              variant=\"ghost\"\n              size=\"sm\"\n              :class=\"\n                item.active\n                  ? 'bg-muted text-foreground shadow-xs hover:bg-muted'\n                  : 'text-muted-foreground'\n              \"\n            >\n              {{ item.label }}\n            </UiButton>\n          </nav>\n        </div>\n\n        <!-- Right actions -->\n        <div class=\"flex items-center gap-1\">\n          <UiButton\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            class=\"rounded-full\"\n            aria-label=\"Open search\"\n            @click=\"searchOpen = true\"\n          >\n            <Icon name=\"heroicons:magnifying-glass\" class=\"size-5 text-muted-foreground\" />\n          </UiButton>\n\n          <!-- Settings dropdown -->\n          <UiDropdownMenu>\n            <UiDropdownMenuTrigger as-child>\n              <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full\">\n                <Icon name=\"heroicons:cog-6-tooth\" class=\"size-5 text-muted-foreground\" />\n              </UiButton>\n            </UiDropdownMenuTrigger>\n            <UiDropdownMenuContent align=\"end\" class=\"w-56\">\n              <UiDropdownMenuLabel>Settings</UiDropdownMenuLabel>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuItem icon=\"heroicons:user\" title=\"Account settings\" />\n              <UiDropdownMenuItem icon=\"heroicons:swatch\" title=\"Appearance\" />\n              <UiDropdownMenuItem icon=\"heroicons:bell\" title=\"Notification preferences\" />\n              <UiDropdownMenuItem icon=\"heroicons:shield-check\" title=\"Privacy & security\" />\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuCheckboxItem v-model=\"compactRows\" title=\"Compact rows\" />\n              <UiDropdownMenuCheckboxItem v-model=\"showTrends\" title=\"Show trend indicators\" />\n            </UiDropdownMenuContent>\n          </UiDropdownMenu>\n\n          <!-- Notifications dropdown -->\n          <UiDropdownMenu>\n            <UiDropdownMenuTrigger as-child>\n              <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full\">\n                <Icon name=\"heroicons:bell\" class=\"size-5 text-muted-foreground\" />\n              </UiButton>\n            </UiDropdownMenuTrigger>\n            <UiDropdownMenuContent align=\"end\" class=\"w-80\">\n              <UiDropdownMenuLabel class=\"flex items-center justify-between\">\n                <span>Notifications</span>\n                <UiBadge variant=\"secondary\" size=\"sm\">3 new</UiBadge>\n              </UiDropdownMenuLabel>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuItem\n                icon=\"heroicons:arrow-trending-up\"\n                title=\"Traffic up 12% this week\"\n              >\n                <template #shortcut>2h ago</template>\n              </UiDropdownMenuItem>\n              <UiDropdownMenuItem icon=\"heroicons:user-plus\" title=\"5 new users joined today\">\n                <template #shortcut>4h ago</template>\n              </UiDropdownMenuItem>\n              <UiDropdownMenuItem\n                icon=\"heroicons:exclamation-circle\"\n                title=\"Unusual login detected\"\n              >\n                <template #shortcut>1d ago</template>\n              </UiDropdownMenuItem>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuItem icon=\"heroicons:check\" title=\"Mark all as read\" />\n            </UiDropdownMenuContent>\n          </UiDropdownMenu>\n\n          <!-- User dropdown -->\n          <UiDropdownMenu>\n            <UiDropdownMenuTrigger as-child>\n              <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full p-0\">\n                <UiAvatar\n                  :src=\"currentUser.avatar\"\n                  :alt=\"currentUser.name\"\n                  :fallback=\"currentUser.fallback\"\n                  class=\"size-8 cursor-pointer\"\n                />\n              </UiButton>\n            </UiDropdownMenuTrigger>\n            <UiDropdownMenuContent align=\"end\" class=\"w-52\">\n              <UiDropdownMenuLabel>\n                <div class=\"flex flex-col\">\n                  <p class=\"text-sm font-medium\">{{ currentUser.name }}</p>\n                  <p class=\"text-xs text-muted-foreground\">{{ currentUser.email }}</p>\n                </div>\n              </UiDropdownMenuLabel>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuGroup>\n                <UiDropdownMenuItem icon=\"heroicons:user\" title=\"Profile\" />\n                <UiDropdownMenuItem icon=\"heroicons:cog-6-tooth\" title=\"Settings\" />\n                <UiDropdownMenuItem icon=\"heroicons:credit-card\" title=\"Billing\" />\n                <UiDropdownMenuItem icon=\"heroicons:users\" title=\"Team\" />\n              </UiDropdownMenuGroup>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuItem\n                variant=\"destructive\"\n                icon=\"heroicons:arrow-right-on-rectangle\"\n                title=\"Sign out\"\n              />\n            </UiDropdownMenuContent>\n          </UiDropdownMenu>\n        </div>\n      </UiContainer>\n    </Motion>\n\n    <!-- Page content -->\n    <UiContainer class=\"space-y-8 py-8\">\n      <!-- Breadcrumb + welcome + user card -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 12 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.1, ease: 'easeOut' }\"\n      >\n        <div class=\"flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between\">\n          <div class=\"space-y-1.5\">\n            <!-- Breadcrumb -->\n            <div class=\"flex items-center gap-2 text-sm text-muted-foreground\">\n              <UiAvatar\n                :src=\"currentUser.avatar\"\n                :alt=\"currentUser.name\"\n                :fallback=\"currentUser.fallback\"\n                class=\"size-5\"\n              />\n              <span>{{ currentUser.name }}</span>\n              <Icon name=\"heroicons:chevron-right\" class=\"size-3.5 shrink-0\" />\n              <span class=\"font-medium text-foreground\">Dashboard</span>\n            </div>\n            <h1 class=\"text-2xl font-bold tracking-tight\">\n              Welcome back, {{ currentUser.firstName }}\n            </h1>\n            <p class=\"text-sm text-muted-foreground\">\n              Here's an overview of your site traffic and recently active users.\n            </p>\n          </div>\n\n          <!-- User card dropdown -->\n          <UiDropdownMenu>\n            <UiDropdownMenuTrigger as-child>\n              <button\n                class=\"flex w-fit cursor-pointer items-center gap-2 rounded-xl border border-border/70 bg-card px-4 py-3 shadow-xs transition-colors hover:bg-muted/40 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none\"\n              >\n                <UiAvatarLabelGroup\n                  :src=\"currentUser.avatar\"\n                  :alt=\"currentUser.name\"\n                  :fallback=\"currentUser.fallback\"\n                  :title=\"currentUser.name\"\n                  :subtitle=\"currentUser.email\"\n                  size=\"sm\"\n                />\n                <Icon\n                  name=\"heroicons:chevron-down\"\n                  class=\"ml-1 size-4 shrink-0 text-muted-foreground\"\n                />\n              </button>\n            </UiDropdownMenuTrigger>\n            <UiDropdownMenuContent align=\"end\" class=\"w-56\">\n              <UiDropdownMenuLabel>\n                <UiAvatarLabelGroup\n                  :src=\"currentUser.avatar\"\n                  :alt=\"currentUser.name\"\n                  :fallback=\"currentUser.fallback\"\n                  :title=\"currentUser.name\"\n                  :subtitle=\"currentUser.email\"\n                  size=\"sm\"\n                />\n              </UiDropdownMenuLabel>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuGroup>\n                <UiDropdownMenuItem icon=\"heroicons:user-circle\" title=\"View profile\" />\n                <UiDropdownMenuItem icon=\"heroicons:cog-6-tooth\" title=\"Account settings\" />\n                <UiDropdownMenuItem icon=\"heroicons:credit-card\" title=\"Billing & plans\" />\n                <UiDropdownMenuItem icon=\"heroicons:users\" title=\"Switch team\" />\n              </UiDropdownMenuGroup>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuItem icon=\"heroicons:question-mark-circle\" title=\"Help & support\" />\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuItem\n                variant=\"destructive\"\n                icon=\"heroicons:arrow-right-on-rectangle\"\n                title=\"Sign out\"\n              />\n            </UiDropdownMenuContent>\n          </UiDropdownMenu>\n        </div>\n      </Motion>\n\n      <!-- Site traffic + chart -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 12 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.2, ease: 'easeOut' }\"\n        class=\"space-y-4\"\n      >\n        <div class=\"flex flex-wrap items-center justify-between gap-3\">\n          <h2 class=\"text-xl font-semibold\">\n            Site traffic\n            <span class=\"ml-1.5 text-emerald-500 dark:text-emerald-400\">+104%</span>\n          </h2>\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <UiTabs v-model=\"activeRange\">\n              <UiTabsList class=\"border border-border/70 bg-muted/30\">\n                <UiTabsTrigger v-for=\"r in timeRanges\" :key=\"r.value\" :value=\"r.value\">\n                  <span class=\"hidden sm:inline\">{{ r.label }}</span>\n                  <span class=\"sm:hidden\">{{ r.short }}</span>\n                </UiTabsTrigger>\n              </UiTabsList>\n            </UiTabs>\n            <UiButton variant=\"outline\" size=\"sm\">\n              <Icon name=\"heroicons:funnel\" class=\"size-4\" />\n              Filters\n            </UiButton>\n          </div>\n        </div>\n\n        <!-- Chart -->\n        <div class=\"overflow-hidden rounded-xl border border-border/70 bg-card shadow-xs\">\n          <UiApexchart type=\"area\" height=\"380\" :series=\"chartSeries\" :options=\"chartOptions\" />\n        </div>\n      </Motion>\n\n      <Motion\n        :initial=\"{ opacity: 0 }\"\n        :animate=\"{ opacity: 1 }\"\n        :transition=\"{ duration: 0.4, delay: 0.3, ease: 'easeOut' }\"\n      >\n        <UiGradientDivider />\n      </Motion>\n\n      <!-- Recently active table -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 16 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, ease: 'easeOut', delay: 0.35 }\"\n      >\n        <UiCard class=\"gap-0 overflow-hidden border-border/70 py-0 shadow-xs\">\n          <!-- Card header -->\n          <UiCardHeader class=\"border-b border-border/60 py-5\">\n            <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n              <UiCardTitle class=\"text-lg font-semibold\">Recently active</UiCardTitle>\n              <!-- Search -->\n              <div class=\"w-full sm:w-56\">\n                <UiVeeInput\n                  v-model=\"tableSearch\"\n                  icon=\"heroicons:magnifying-glass\"\n                  name=\"user-search\"\n                  placeholder=\"Search\"\n                />\n              </div>\n            </div>\n          </UiCardHeader>\n\n          <!-- TanStack table -->\n          <UiTanStackTable\n            :data=\"filteredUsers\"\n            :columns=\"userColumns\"\n            :show-rows-per-page=\"false\"\n            :show-page-info=\"false\"\n            :show-pagination=\"false\"\n            :show-selected-count=\"false\"\n            :show-footer=\"true\"\n            :loading=\"usersPending\"\n            :table-options=\"{ enableRowSelection: true }\"\n          >\n            <template #select-header=\"{ table }\">\n              <UiCheckbox\n                aria-label=\"Select all\"\n                :model-value=\"\n                  table.getIsAllPageRowsSelected() ||\n                  (table.getIsSomePageRowsSelected() && 'indeterminate')\n                \"\n                @update:model-value=\"table.toggleAllPageRowsSelected(!!$event)\"\n              />\n            </template>\n\n            <template #select-cell=\"{ row }\">\n              <UiCheckbox\n                :aria-label=\"`Select ${row.original.name}`\"\n                :model-value=\"row.getIsSelected()\"\n                @update:model-value=\"row.toggleSelected(!!$event)\"\n              />\n            </template>\n\n            <template #name-cell=\"{ row }\">\n              <div class=\"flex items-center gap-3\">\n                <UiAvatar\n                  :src=\"row.original.avatar\"\n                  :alt=\"row.original.name\"\n                  :fallback=\"row.original.fallback\"\n                  class=\"size-8 shrink-0\"\n                />\n                <div class=\"flex min-w-0 flex-col\">\n                  <span class=\"truncate text-sm font-medium\">{{ row.original.name }}</span>\n                  <span class=\"truncate text-xs text-muted-foreground\">{{\n                    row.original.email\n                  }}</span>\n                </div>\n              </div>\n            </template>\n\n            <template #access-cell=\"{ row }\">\n              <div class=\"flex flex-wrap gap-1.5\">\n                <span\n                  v-for=\"perm in row.original.access\"\n                  :key=\"perm\"\n                  class=\"inline-flex items-center gap-1.5 rounded-full border border-border/70 px-2.5 py-0.5 text-xs font-medium\"\n                >\n                  <span class=\"size-1.5 shrink-0 rounded-full\" :class=\"accessDotColor(perm)\" />\n                  {{ perm }}\n                </span>\n              </div>\n            </template>\n\n            <template #actions-cell=\"{ row }\">\n              <UiDropdownMenu>\n                <UiDropdownMenuTrigger as-child>\n                  <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"text-muted-foreground\">\n                    <Icon name=\"heroicons:ellipsis-vertical\" class=\"size-4\" />\n                  </UiButton>\n                </UiDropdownMenuTrigger>\n                <UiDropdownMenuContent align=\"end\" class=\"w-44\">\n                  <UiDropdownMenuItem\n                    icon=\"heroicons:pencil\"\n                    title=\"Edit user\"\n                    @select=\"openEdit(row.original)\"\n                  />\n                  <UiDropdownMenuItem icon=\"heroicons:eye\" title=\"View profile\" />\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem\n                    icon=\"heroicons:trash\"\n                    title=\"Remove user\"\n                    class=\"text-destructive focus:text-destructive\"\n                    @select=\"\n                      () => {\n                        deleteTarget = row.original;\n                        deleteOpen = true;\n                      }\n                    \"\n                  />\n                </UiDropdownMenuContent>\n              </UiDropdownMenu>\n            </template>\n\n            <template #footer=\"{ table }\">\n              <div\n                class=\"flex w-full flex-col gap-3 border-t border-border/60 px-6 py-4 text-sm sm:flex-row sm:items-center sm:justify-between\"\n              >\n                <!-- Selected count -->\n                <p class=\"shrink-0 font-medium text-muted-foreground\">\n                  <template v-if=\"table.getFilteredSelectedRowModel().rows.length > 0\">\n                    {{ table.getFilteredSelectedRowModel().rows.length }} selected\n                  </template>\n                </p>\n\n                <!-- Desktop pagination — numbered pages -->\n                <UiPagination\n                  class=\"mx-0! hidden! justify-end! sm:flex!\"\n                  :total=\"filteredUsers.length\"\n                  :items-per-page=\"10\"\n                  :sibling-count=\"1\"\n                  :page=\"table.getState().pagination.pageIndex + 1\"\n                  @update:page=\"(p) => table.setPageIndex(p - 1)\"\n                >\n                  <UiPaginationList v-slot=\"{ items }\" class=\"gap-1\">\n                    <UiPaginationPrev as-child>\n                      <UiButton variant=\"outline\" size=\"sm\">\n                        <Icon name=\"heroicons:chevron-left\" class=\"size-4\" />\n                        Previous\n                      </UiButton>\n                    </UiPaginationPrev>\n                    <template v-for=\"(item, idx) in items\" :key=\"idx\">\n                      <UiPaginationItem v-if=\"item.type === 'page'\" as-child v-bind=\"item\" />\n                      <UiPaginationEllipsis\n                        v-else-if=\"item.type === 'ellipsis'\"\n                        as-child\n                        v-bind=\"item\"\n                        icon=\"heroicons:ellipsis-horizontal\"\n                      />\n                    </template>\n                    <UiPaginationNext as-child>\n                      <UiButton variant=\"outline\" size=\"sm\">\n                        Next\n                        <Icon name=\"heroicons:chevron-right\" class=\"size-4\" />\n                      </UiButton>\n                    </UiPaginationNext>\n                  </UiPaginationList>\n                </UiPagination>\n\n                <!-- Mobile pagination — prev / page info / next -->\n                <UiPagination\n                  class=\"mx-0! sm:hidden!\"\n                  :total=\"filteredUsers.length\"\n                  :items-per-page=\"10\"\n                  :page=\"table.getState().pagination.pageIndex + 1\"\n                  @update:page=\"(p) => table.setPageIndex(p - 1)\"\n                >\n                  <UiPaginationList class=\"w-full justify-between\">\n                    <UiPaginationPrev as-child>\n                      <UiButton variant=\"outline\" size=\"icon-sm\">\n                        <Icon name=\"heroicons:arrow-left\" class=\"size-4\" />\n                      </UiButton>\n                    </UiPaginationPrev>\n                    <span class=\"text-sm text-muted-foreground\">\n                      Page {{ table.getState().pagination.pageIndex + 1 }} of\n                      {{ table.getPageCount() }}\n                    </span>\n                    <UiPaginationNext as-child>\n                      <UiButton variant=\"outline\" size=\"icon-sm\">\n                        <Icon name=\"heroicons:arrow-right\" class=\"size-4\" />\n                      </UiButton>\n                    </UiPaginationNext>\n                  </UiPaginationList>\n                </UiPagination>\n              </div>\n            </template>\n          </UiTanStackTable>\n        </UiCard>\n      </Motion>\n    </UiContainer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { faker } from \"@faker-js/faker\";\n  import type { ColumnDef } from \"@tanstack/vue-table\";\n  import type { ApexOptions } from \"apexcharts\";\n  import { Motion } from \"motion-v\";\n\n  // ─── Current user ────────────────────────────────────────────────────────────\n  const currentUser = {\n    name: \"Sienna Hewitt\",\n    firstName: \"Sienna\",\n    email: \"sienna@example.com\",\n    avatar: \"https://i.pravatar.cc/150?img=47\",\n    fallback: \"SH\",\n  };\n\n  // ─── Navigation ──────────────────────────────────────────────────────────────\n  const navItems = [\n    { label: \"Home\", active: false },\n    { label: \"Dashboard\", active: true },\n    { label: \"Projects\", active: false },\n    { label: \"Tasks\", active: false },\n    { label: \"Reporting\", active: false },\n    { label: \"Users\", active: false },\n  ];\n\n  // ─── Settings toggles ────────────────────────────────────────────────────────\n  const compactRows = ref(false);\n  const showTrends = ref(true);\n\n  // ─── Search / command dialog ─────────────────────────────────────────────────\n  const searchOpen = ref(false);\n\n  const recentSearches = [\"Recently active users\", \"Traffic this month\", \"New signups last 7 days\"];\n\n  const quickLinks = [\n    { label: \"User management\", icon: \"heroicons:users\", path: \"/users\" },\n    { label: \"Analytics overview\", icon: \"heroicons:chart-bar\", path: \"/analytics\" },\n    { label: \"Traffic sources\", icon: \"heroicons:arrow-trending-up\", path: \"/traffic\" },\n  ];\n\n  const handleKeydown = (e: KeyboardEvent) => {\n    if (e.key === \"Escape\") searchOpen.value = false;\n    if ((e.metaKey || e.ctrlKey) && e.key === \"k\") {\n      e.preventDefault();\n      searchOpen.value = true;\n    }\n  };\n  onMounted(() => document.addEventListener(\"keydown\", handleKeydown));\n  onUnmounted(() => document.removeEventListener(\"keydown\", handleKeydown));\n\n  // ─── Time range tabs ─────────────────────────────────────────────────────────\n  const timeRanges = [\n    { label: \"12 months\", short: \"12m\", value: \"12months\" },\n    { label: \"30 days\", short: \"30d\", value: \"30days\" },\n    { label: \"7 days\", short: \"7d\", value: \"7days\" },\n    { label: \"24 hours\", short: \"24h\", value: \"24hours\" },\n  ];\n  const activeRange = ref(\"12months\");\n\n  // ─── Chart data per range ─────────────────────────────────────────────────────\n  const rangeDataMap: Record<\n    string,\n    { categories: string[]; traffic: number[]; previous: number[] }\n  > = {\n    \"12months\": {\n      categories: [\n        \"Jan\",\n        \"Feb\",\n        \"Mar\",\n        \"Apr\",\n        \"May\",\n        \"Jun\",\n        \"Jul\",\n        \"Aug\",\n        \"Sep\",\n        \"Oct\",\n        \"Nov\",\n        \"Dec\",\n      ],\n      traffic: [820, 932, 901, 960, 1290, 1330, 1320, 1540, 1480, 1680, 1750, 1920],\n      previous: [480, 520, 490, 560, 620, 680, 700, 760, 810, 850, 890, 940],\n    },\n    \"30days\": {\n      categories: Array.from({ length: 30 }, (_, i) => `${i + 1} Jan`),\n      traffic: [\n        180, 210, 195, 230, 215, 260, 245, 280, 265, 300, 285, 320, 305, 340, 325, 360, 345, 380,\n        365, 400, 385, 420, 405, 440, 425, 460, 445, 480, 465, 500,\n      ],\n      previous: [\n        120, 135, 128, 148, 138, 165, 155, 175, 165, 188, 178, 198, 188, 210, 200, 220, 210, 235,\n        224, 248, 238, 260, 248, 270, 258, 280, 268, 290, 278, 310,\n      ],\n    },\n    \"7days\": {\n      categories: [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"],\n      traffic: [480, 520, 610, 540, 680, 320, 290],\n      previous: [320, 360, 420, 380, 450, 240, 210],\n    },\n    \"24hours\": {\n      categories: Array.from({ length: 24 }, (_, i) => `${String(i).padStart(2, \"0\")}:00`),\n      traffic: [\n        45, 32, 28, 25, 30, 48, 85, 148, 186, 210, 224, 238, 252, 245, 232, 218, 195, 178, 165, 145,\n        125, 108, 88, 65,\n      ],\n      previous: [\n        30, 22, 18, 16, 20, 32, 60, 110, 138, 158, 168, 178, 188, 182, 172, 162, 145, 132, 122, 108,\n        92, 80, 65, 48,\n      ],\n    },\n  };\n\n  // ─── Reactive chart options ───────────────────────────────────────────────────\n  // Most defaults (fontFamily, foreColor, toolbar, zoom, stroke.curve, dataLabels,\n  // grid.borderColor, axis label colors/sizes, legend) are set globally in\n  // UiApexchart.client.vue via window.Apex — only chart-specific overrides live here.\n  const chartOptions = computed<ApexOptions>(() => {\n    const data = rangeDataMap[activeRange.value];\n    return {\n      chart: {\n        type: \"area\",\n        background: \"transparent\",\n        parentHeightOffset: 0,\n        animations: { enabled: true, easing: \"easeinout\", speed: 500 },\n      },\n      // Per-series stroke widths + dashed second line\n      stroke: { width: [2, 1.5], dashArray: [0, 6] },\n      // Hex values — ApexCharts can't resolve CSS custom properties reliably\n      colors: [\"#E3A514\", \"#94a3b8\"],\n      fill: {\n        type: [\"gradient\", \"solid\"],\n        gradient: {\n          type: \"vertical\",\n          gradientToColors: [\"#E3A514\"],\n          shadeIntensity: 0,\n          opacityFrom: 0.22,\n          opacityTo: 0,\n          stops: [0, 100],\n        },\n        opacity: [1, 0], // no fill for the dashed previous-period line\n      },\n      grid: {\n        strokeDashArray: 4,\n        xaxis: { lines: { show: false } },\n        yaxis: { lines: { show: true } },\n        padding: { left: 8, right: 8 },\n      },\n      xaxis: {\n        categories: data?.categories ?? [],\n        axisBorder: { show: false },\n        axisTicks: { show: false },\n      },\n      yaxis: {\n        labels: {\n          formatter: (v: number) => (v >= 1000 ? `${(v / 1000).toFixed(1)}k` : String(v)),\n        },\n      },\n      tooltip: {\n        y: { formatter: (v: number) => `${v.toLocaleString()} visitors` },\n      },\n      markers: { size: 0, hover: { size: 5 } },\n    };\n  });\n\n  const chartSeries = computed(() => [\n    { name: \"Traffic\", type: \"area\", data: rangeDataMap[activeRange.value]?.traffic ?? [] },\n    {\n      name: \"Previous period\",\n      type: \"line\",\n      data: rangeDataMap[activeRange.value]?.previous ?? [],\n    },\n  ]);\n\n  // ─── User table ───────────────────────────────────────────────────────────────\n  type UserRow = {\n    id: number;\n    name: string;\n    email: string;\n    avatar: string;\n    fallback: string;\n    access: string[];\n    lastActive: string;\n    dateAdded: string;\n  };\n\n  const accessDotColor = (permission: string): string => {\n    if (permission === \"Admin\") return \"bg-violet-500\";\n    if (permission === \"Data export\") return \"bg-sky-500\";\n    if (permission === \"Data import\") return \"bg-emerald-500\";\n    return \"bg-muted-foreground\";\n  };\n\n  const userColumns: ColumnDef<UserRow>[] = [\n    {\n      id: \"select\",\n      header: \"\",\n      enableSorting: false,\n      enableHiding: false,\n      meta: { class: { th: \"w-12\", td: \"w-12\" } },\n    },\n    {\n      id: \"name\",\n      accessorKey: \"name\",\n      header: \"Name\",\n    },\n    {\n      id: \"access\",\n      accessorKey: \"access\",\n      header: \"Access\",\n      enableSorting: false,\n      meta: { class: { th: \"hidden md:table-cell\", td: \"hidden md:table-cell\" } },\n    },\n    {\n      accessorKey: \"lastActive\",\n      header: \"Last active\",\n      meta: { class: { th: \"hidden sm:table-cell\", td: \"hidden sm:table-cell\" } },\n    },\n    {\n      accessorKey: \"dateAdded\",\n      header: \"Date added\",\n      meta: { class: { th: \"hidden lg:table-cell\", td: \"hidden lg:table-cell\" } },\n    },\n    {\n      id: \"actions\",\n      header: \"\",\n      enableSorting: false,\n      enableHiding: false,\n      meta: { class: { th: \"w-14\", td: \"w-14\" } },\n    },\n  ];\n\n  // ─── User data generation ─────────────────────────────────────────────────────\n  const accessSets = [\n    [\"Admin\", \"Data export\", \"Data import\"],\n    [\"Data export\", \"Data import\"],\n    [\"Admin\", \"Data export\"],\n    [\"Data import\"],\n    [\"Data export\"],\n  ] as const;\n\n  const createUser = (i: number): UserRow => {\n    faker.seed(i);\n    const firstName = faker.person.firstName();\n    const lastName = faker.person.lastName();\n    const name = `${firstName} ${lastName}`;\n    const email = faker.internet.email({ firstName, lastName }).toLowerCase();\n    const fallback = `${firstName[0] ?? \"U\"}${lastName[0] ?? \"N\"}`;\n    const access = [...(accessSets[i % accessSets.length] ?? [\"Data export\"])];\n    const lastActive = faker.date.recent({ days: 30, refDate: new Date(\"2025-03-21\") });\n    const dateAdded = faker.date.past({ years: 2, refDate: new Date(\"2025-03-21\") });\n    return {\n      id: i + 1,\n      name,\n      email,\n      avatar: `https://i.pravatar.cc/150?img=${(i % 70) + 1}`,\n      fallback,\n      access,\n      lastActive: lastActive.toLocaleDateString(\"en-US\", {\n        month: \"short\",\n        day: \"numeric\",\n        year: \"numeric\",\n      }),\n      dateAdded: dateAdded.toLocaleDateString(\"en-US\", {\n        month: \"short\",\n        day: \"numeric\",\n        year: \"numeric\",\n      }),\n    };\n  };\n\n  const { data: usersData, pending: usersPending } = await useAsyncData<UserRow[]>(\n    \"block-dashboard5-users\",\n    async () => Array.from({ length: 100 }, (_, i) => createUser(i)),\n    { default: () => [] }\n  );\n\n  const users = computed(() => usersData.value ?? []);\n  const tableSearch = ref(\"\");\n\n  const filteredUsers = computed(() => {\n    if (!tableSearch.value.trim()) return users.value;\n    const q = tableSearch.value.toLowerCase();\n    return users.value.filter(\n      (u) => u.name.toLowerCase().includes(q) || u.email.toLowerCase().includes(q)\n    );\n  });\n\n  // ─── Edit sheet ───────────────────────────────────────────────────────────────\n  const editOpen = ref(false);\n  const editTarget = ref<UserRow | null>(null);\n  const editForm = reactive({ name: \"\", email: \"\", role: \"\" });\n\n  const openEdit = (user: UserRow) => {\n    editTarget.value = user;\n    editForm.name = user.name;\n    editForm.email = user.email;\n    editForm.role = user.access[0] ?? \"Member\";\n    editOpen.value = true;\n  };\n\n  const saveEdit = () => {\n    editOpen.value = false;\n    useSonner(\"User updated\", { description: `'${editForm.name}' has been saved.` });\n  };\n\n  // ─── Delete dialog ────────────────────────────────────────────────────────────\n  const deleteOpen = ref(false);\n  const deleteTarget = ref<UserRow | null>(null);\n\n  const confirmDelete = () => {\n    if (!deleteTarget.value) return;\n    useSonner(`'${deleteTarget.value.name}' removed`, {\n      description: \"The user has been permanently removed.\",\n    });\n    deleteTarget.value = null;\n  };\n</script>\n","category":"Dashboards","path":"Dashboards/BlockDashboards5.vue","components":["alertdialog","alertdialogaction","alertdialogcancel","alertdialogcontent","alertdialogdescription","alertdialogfooter","alertdialogheader","alertdialogtitle","apexchart","avatar","avatarlabelgroup","badge","button","card","cardheader","cardtitle","checkbox","commanddialog","commandempty","commandgroup","commandinput","commanditem","commandlist","commandseparator","commandshortcut","container","dropdownmenu","dropdownmenucheckboxitem","dropdownmenucontent","dropdownmenugroup","dropdownmenuitem","dropdownmenulabel","dropdownmenuseparator","dropdownmenutrigger","gradientdivider","kbd","pagination","paginationellipsis","paginationitem","paginationlist","paginationnext","paginationprev","popover","popovercontent","popovertrigger","select","selectcontent","selectitem","selecttrigger","selectvalue","sheet","sheetclose","sheetcontent","sheetfooter","tabs","tabslist","tabstrigger","tanstacktable","veeinput"]},{"name":"Dashboards 6","fileName":"BlockDashboards6.vue","file":"<template>\n  <div\n    class=\"min-h-screen bg-background text-foreground [--color-primary:#0ea5e9] [--primary:#0ea5e9] [--radius:12px] [--ring:#0ea5e9]\"\n  >\n    <!-- Import CSV dialog -->\n    <UiDialog v-model:open=\"importOpen\">\n      <UiDialogContent class=\"sm:max-w-md\">\n        <UiDialogHeader>\n          <UiDialogTitle>Import customers</UiDialogTitle>\n          <UiDialogDescription>\n            Upload a CSV file to import customers in bulk. The file must include columns for company\n            name, domain, and status.\n          </UiDialogDescription>\n        </UiDialogHeader>\n\n        <div class=\"space-y-4 py-2\">\n          <!-- Drop zone -->\n          <label\n            class=\"flex cursor-pointer flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed border-border/70 bg-muted/30 px-6 py-10 text-center transition-colors hover:bg-muted/50\"\n            :class=\"{ 'border-[--color-primary] bg-sky-50/50 dark:bg-sky-950/20': importDragOver }\"\n            @dragover.prevent=\"importDragOver = true\"\n            @dragleave.prevent=\"importDragOver = false\"\n            @drop.prevent=\"onImportDrop\"\n          >\n            <div\n              class=\"flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground\"\n            >\n              <Icon name=\"heroicons:arrow-up-tray\" class=\"size-6\" />\n            </div>\n            <div class=\"space-y-1\">\n              <p class=\"text-sm font-medium\">\n                <span class=\"text-[--color-primary]\">Click to upload</span> or drag and drop\n              </p>\n              <p class=\"text-xs text-muted-foreground\">CSV files only, up to 10 MB</p>\n            </div>\n            <input type=\"file\" accept=\".csv\" class=\"sr-only\" @change=\"onImportFileChange\" />\n          </label>\n\n          <!-- Selected file -->\n          <div\n            v-if=\"importFile\"\n            class=\"flex items-center gap-3 rounded-lg border border-border/70 bg-card px-4 py-3\"\n          >\n            <Icon name=\"heroicons:document-text\" class=\"size-5 shrink-0 text-[--color-primary]\" />\n            <div class=\"min-w-0 flex-1\">\n              <p class=\"truncate text-sm font-medium\">{{ importFile.name }}</p>\n              <p class=\"text-xs text-muted-foreground\">\n                {{ (importFile.size / 1024).toFixed(1) }} KB\n              </p>\n            </div>\n            <UiButton\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              class=\"shrink-0 text-muted-foreground\"\n              @click=\"importFile = null\"\n            >\n              <Icon name=\"heroicons:x-mark\" class=\"size-4\" />\n            </UiButton>\n          </div>\n\n          <!-- Download template link -->\n          <p class=\"text-center text-xs text-muted-foreground\">\n            Not sure about the format?\n            <button class=\"font-medium text-[--color-primary] underline-offset-2 hover:underline\">\n              Download template\n            </button>\n          </p>\n        </div>\n\n        <UiDialogFooter>\n          <UiButton variant=\"outline\" @click=\"importOpen = false\">Cancel</UiButton>\n          <UiButton :disabled=\"!importFile\" @click=\"onImportSubmit\">\n            <Icon name=\"heroicons:arrow-up-tray\" class=\"size-4\" />\n            Import customers\n          </UiButton>\n        </UiDialogFooter>\n      </UiDialogContent>\n    </UiDialog>\n\n    <!-- Add customer sheet -->\n    <UiSheet v-model:open=\"addOpen\">\n      <UiSheetContent\n        side=\"right\"\n        variant=\"floating\"\n        translucent\n        title=\"Add customer\"\n        description=\"Fill in the details below to add a new customer.\"\n      >\n        <template #content>\n          <form class=\"space-y-5 px-6\" @submit=\"submitAdd\">\n            <fieldset :disabled=\"isSubmittingAdd\" class=\"space-y-5\">\n              <UiVeeInput required label=\"Company name\" name=\"addName\" placeholder=\"Acme Corp\" />\n              <UiVeeInput required label=\"Domain\" name=\"addDomain\" placeholder=\"acme.com\" />\n              <UiVeeInput\n                label=\"About / product\"\n                name=\"addProduct\"\n                placeholder=\"e.g. Project management tool\"\n              />\n              <UiVeeSelect required label=\"Status\" name=\"addStatus\">\n                <option disabled>Select an option</option>\n                <option value=\"Customer\">Customer</option>\n                <option value=\"Churned\">Churned</option>\n              </UiVeeSelect>\n              <UiVeeInput\n                label=\"Number of users\"\n                name=\"addUsers\"\n                type=\"number\"\n                placeholder=\"e.g. 10\"\n              />\n            </fieldset>\n          </form>\n        </template>\n        <template #footer>\n          <UiSheetFooter class=\"px-6 pb-6\">\n            <UiSheetClose as-child>\n              <UiButton variant=\"outline\" class=\"w-full\">Cancel</UiButton>\n            </UiSheetClose>\n            <UiButton class=\"w-full\" :disabled=\"isSubmittingAdd\" @click=\"submitAdd\">\n              Add customer\n            </UiButton>\n          </UiSheetFooter>\n        </template>\n      </UiSheetContent>\n    </UiSheet>\n\n    <!-- Edit company sheet -->\n    <UiSheet v-model:open=\"editOpen\">\n      <UiSheetContent\n        side=\"right\"\n        variant=\"floating\"\n        translucent\n        title=\"Edit customer\"\n        description=\"Update the customer's details below.\"\n      >\n        <template #content>\n          <form class=\"space-y-5 px-6\" @submit=\"submitEdit\">\n            <fieldset :disabled=\"isSubmittingEdit\" class=\"space-y-5\">\n              <UiVeeInput required label=\"Company name\" name=\"editName\" placeholder=\"Acme Corp\" />\n              <UiVeeInput required label=\"Domain\" name=\"editDomain\" placeholder=\"acme.com\" />\n              <UiVeeSelect required label=\"Status\" name=\"editStatus\">\n                <option disabled>Select an option</option>\n                <option value=\"Customer\">Customer</option>\n                <option value=\"Churned\">Churned</option>\n              </UiVeeSelect>\n            </fieldset>\n          </form>\n        </template>\n        <template #footer>\n          <UiSheetFooter class=\"px-6 pb-6\">\n            <UiSheetClose as-child>\n              <UiButton variant=\"outline\" class=\"w-full\">Cancel</UiButton>\n            </UiSheetClose>\n            <UiButton class=\"w-full\" @click=\"submitEdit\">Save changes</UiButton>\n          </UiSheetFooter>\n        </template>\n      </UiSheetContent>\n    </UiSheet>\n\n    <!-- Delete confirmation dialog -->\n    <UiAlertDialog v-model:open=\"deleteOpen\">\n      <UiAlertDialogContent>\n        <UiAlertDialogHeader>\n          <UiAlertDialogTitle title=\"Remove customer?\" />\n          <UiAlertDialogDescription\n            :description=\"`Are you sure you want to remove '${deleteTarget?.name}'? This action cannot be undone.`\"\n          />\n        </UiAlertDialogHeader>\n        <UiAlertDialogFooter>\n          <UiAlertDialogCancel />\n          <UiAlertDialogAction @click=\"confirmDelete\" />\n        </UiAlertDialogFooter>\n      </UiAlertDialogContent>\n    </UiAlertDialog>\n\n    <!-- Command / search dialog -->\n    <UiCommandDialog\n      v-model:open=\"searchOpen\"\n      title=\"Search customers\"\n      description=\"Search by company name, domain, or product\"\n    >\n      <UiCommandInput placeholder=\"Search customers...\" />\n      <UiCommandList>\n        <UiCommandEmpty>No results found.</UiCommandEmpty>\n        <UiCommandGroup heading=\"Quick actions\">\n          <UiCommandItem value=\"Add customer\">\n            <Icon name=\"heroicons:plus\" />\n            <span>Add customer</span>\n          </UiCommandItem>\n          <UiCommandItem value=\"Import customers\">\n            <Icon name=\"heroicons:arrow-up-tray\" />\n            <span>Import customers</span>\n          </UiCommandItem>\n          <UiCommandItem value=\"Export list\">\n            <Icon name=\"heroicons:arrow-down-tray\" />\n            <span>Export list</span>\n          </UiCommandItem>\n        </UiCommandGroup>\n        <UiCommandSeparator />\n        <UiCommandGroup heading=\"Filter by status\">\n          <UiCommandItem value=\"Customers only\">\n            <Icon name=\"heroicons:check-circle\" />\n            <span>Customers only</span>\n          </UiCommandItem>\n          <UiCommandItem value=\"Churned only\">\n            <Icon name=\"heroicons:x-circle\" />\n            <span>Churned only</span>\n          </UiCommandItem>\n        </UiCommandGroup>\n      </UiCommandList>\n      <div\n        class=\"flex items-center gap-5 border-t border-border/70 bg-muted/20 px-4 py-2.5 text-xs text-muted-foreground\"\n      >\n        <span class=\"flex items-center gap-1.5\"><UiKbd>↵</UiKbd> to select</span>\n        <span class=\"flex items-center gap-1.5\"><UiKbd>↑↓</UiKbd> to navigate</span>\n        <span class=\"flex items-center gap-1.5\"><UiKbd>ESC</UiKbd> to close</span>\n      </div>\n    </UiCommandDialog>\n\n    <!-- Sticky header -->\n    <Motion\n      as=\"header\"\n      :initial=\"{ opacity: 0, y: -16 }\"\n      :animate=\"{ opacity: 1, y: 0 }\"\n      :transition=\"{ duration: 0.4, ease: 'easeOut' }\"\n      class=\"sticky top-0 z-10 border-b border-border/70 bg-background/85 backdrop-blur-md\"\n    >\n      <UiContainer class=\"flex min-h-[4rem] items-center justify-between gap-4\">\n        <!-- Logo + nav -->\n        <div class=\"flex items-center gap-5\">\n          <div class=\"flex items-center gap-2.5\">\n            <div\n              class=\"flex size-8 items-center justify-center rounded-lg border border-border/70 bg-muted shadow-xs\"\n            >\n              <div\n                class=\"size-4 rounded-full bg-[radial-gradient(circle_at_35%_35%,rgba(255,255,255,0.95),rgba(255,255,255,0.2)_32%,transparent_34%),linear-gradient(135deg,var(--color-primary),color-mix(in_oklab,var(--color-primary)_40%,white))]\"\n              />\n            </div>\n            <span class=\"font-semibold tracking-tight\">UI Thing</span>\n          </div>\n\n          <!-- Mobile nav popover -->\n          <UiPopover class=\"lg:hidden\">\n            <UiPopoverTrigger as-child>\n              <UiButton class=\"lg:hidden\" variant=\"ghost\" size=\"icon-sm\">\n                <Icon name=\"heroicons:bars-3\" class=\"size-5\" />\n              </UiButton>\n            </UiPopoverTrigger>\n            <UiPopoverContent align=\"start\" class=\"w-48 p-1\">\n              <UiButton\n                v-for=\"item in navItems\"\n                :key=\"item.label\"\n                variant=\"ghost\"\n                size=\"sm\"\n                class=\"w-full justify-start\"\n                :class=\"\n                  item.active\n                    ? 'bg-muted text-foreground shadow-xs hover:bg-muted'\n                    : 'text-muted-foreground'\n                \"\n              >\n                {{ item.label }}\n              </UiButton>\n            </UiPopoverContent>\n          </UiPopover>\n\n          <!-- Desktop nav -->\n          <nav class=\"hidden items-center gap-1 lg:flex\">\n            <UiButton\n              v-for=\"item in navItems\"\n              :key=\"item.label\"\n              variant=\"ghost\"\n              size=\"sm\"\n              :class=\"\n                item.active\n                  ? 'bg-muted text-foreground shadow-xs hover:bg-muted'\n                  : 'text-muted-foreground'\n              \"\n            >\n              {{ item.label }}\n            </UiButton>\n          </nav>\n        </div>\n\n        <!-- Right actions -->\n        <div class=\"flex items-center gap-1\">\n          <UiTooltip>\n            <UiTooltipTrigger as-child>\n              <UiButton\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                class=\"rounded-full\"\n                aria-label=\"Open search\"\n                @click=\"searchOpen = true\"\n              >\n                <Icon name=\"heroicons:magnifying-glass\" class=\"size-5 text-muted-foreground\" />\n              </UiButton>\n            </UiTooltipTrigger>\n            <UiTooltipContent><p>Search</p></UiTooltipContent>\n          </UiTooltip>\n\n          <!-- Settings dropdown -->\n          <UiTooltip>\n            <UiDropdownMenu>\n              <UiDropdownMenuTrigger as-child>\n                <UiTooltipTrigger as-child>\n                  <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full\">\n                    <Icon name=\"heroicons:cog-6-tooth\" class=\"size-5 text-muted-foreground\" />\n                  </UiButton>\n                </UiTooltipTrigger>\n              </UiDropdownMenuTrigger>\n              <UiTooltipContent><p>Settings</p></UiTooltipContent>\n              <UiDropdownMenuContent align=\"end\" class=\"w-52\">\n                <UiDropdownMenuLabel>Settings</UiDropdownMenuLabel>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem icon=\"heroicons:user\" title=\"Account settings\" />\n                <UiDropdownMenuItem icon=\"heroicons:swatch\" title=\"Appearance\" />\n                <UiDropdownMenuItem icon=\"heroicons:bell\" title=\"Notifications\" />\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem\n                  variant=\"destructive\"\n                  icon=\"heroicons:arrow-right-on-rectangle\"\n                  title=\"Sign out\"\n                />\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiTooltip>\n\n          <!-- Notifications dropdown -->\n          <UiTooltip>\n            <UiDropdownMenu>\n              <UiDropdownMenuTrigger as-child>\n                <UiTooltipTrigger as-child>\n                  <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full\">\n                    <Icon name=\"heroicons:bell\" class=\"size-5 text-muted-foreground\" />\n                  </UiButton>\n                </UiTooltipTrigger>\n              </UiDropdownMenuTrigger>\n              <UiTooltipContent><p>Notifications</p></UiTooltipContent>\n              <UiDropdownMenuContent align=\"end\" class=\"w-96\">\n                <UiDropdownMenuLabel class=\"flex items-center justify-between\">\n                  <span>Notifications</span>\n                  <UiBadge variant=\"secondary\" size=\"sm\">2 new</UiBadge>\n                </UiDropdownMenuLabel>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem icon=\"heroicons:user-plus\" title=\"Ephemeral signed a new plan\">\n                  <template #shortcut>1h ago</template>\n                </UiDropdownMenuItem>\n                <UiDropdownMenuItem\n                  icon=\"heroicons:arrow-trending-up\"\n                  title=\"Customer growth up 12% this week\"\n                >\n                  <template #shortcut>3h ago</template>\n                </UiDropdownMenuItem>\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiTooltip>\n\n          <!-- User avatar dropdown -->\n          <UiTooltip>\n            <UiDropdownMenu>\n              <UiDropdownMenuTrigger as-child>\n                <UiTooltipTrigger as-child>\n                  <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full p-0\">\n                    <UiAvatar\n                      src=\"https://i.pravatar.cc/150?img=47\"\n                      alt=\"Current user\"\n                      fallback=\"SH\"\n                      class=\"size-8 cursor-pointer\"\n                    />\n                  </UiButton>\n                </UiTooltipTrigger>\n              </UiDropdownMenuTrigger>\n              <UiTooltipContent><p>Account</p></UiTooltipContent>\n              <UiDropdownMenuContent align=\"end\" class=\"w-52\">\n                <UiDropdownMenuLabel>\n                  <div class=\"flex flex-col\">\n                    <p class=\"text-sm font-medium\">Sienna Hewitt</p>\n                    <p class=\"text-xs text-muted-foreground\">sienna@ui-thing.com</p>\n                  </div>\n                </UiDropdownMenuLabel>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem icon=\"heroicons:user\" title=\"Profile\" />\n                <UiDropdownMenuItem icon=\"heroicons:cog-6-tooth\" title=\"Settings\" />\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem\n                  variant=\"destructive\"\n                  icon=\"heroicons:arrow-right-on-rectangle\"\n                  title=\"Sign out\"\n                />\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiTooltip>\n        </div>\n      </UiContainer>\n    </Motion>\n\n    <!-- Page content -->\n    <UiContainer class=\"space-y-6 py-8\">\n      <!-- Page header -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 12 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.1, ease: 'easeOut' }\"\n        class=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\"\n      >\n        <h1 class=\"text-2xl font-bold tracking-tight\">Customers</h1>\n        <div class=\"flex items-center gap-3\">\n          <UiButton variant=\"outline\" size=\"sm\" @click=\"importOpen = true\">\n            <Icon name=\"heroicons:arrow-up-tray\" class=\"size-4\" />\n            Import\n          </UiButton>\n          <UiButton size=\"sm\" @click=\"addOpen = true\">\n            <Icon name=\"heroicons:plus\" class=\"size-4\" />\n            Add customer\n          </UiButton>\n        </div>\n      </Motion>\n\n      <!-- Two-column charts row -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 12 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.2, ease: 'easeOut' }\"\n        class=\"grid gap-4 lg:grid-cols-[1fr_2fr]\"\n      >\n        <!-- Active now — radial rings card -->\n        <div class=\"overflow-hidden rounded-xl border border-border/70 bg-card shadow-xs\">\n          <div class=\"flex items-center justify-between border-b border-border/60 px-5 py-4\">\n            <h2 class=\"text-sm font-semibold\">Active now</h2>\n            <UiTooltip>\n              <UiDropdownMenu>\n                <UiTooltipTrigger as-child>\n                  <UiDropdownMenuTrigger as-child>\n                    <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"-mr-1 text-muted-foreground\">\n                      <Icon name=\"heroicons:ellipsis-vertical\" class=\"size-4\" />\n                    </UiButton>\n                  </UiDropdownMenuTrigger>\n                </UiTooltipTrigger>\n                <UiDropdownMenuContent align=\"end\">\n                  <UiDropdownMenuItem icon=\"heroicons:arrow-path\" title=\"Refresh\" />\n                  <UiDropdownMenuItem icon=\"heroicons:arrow-down-tray\" title=\"Export\" />\n                </UiDropdownMenuContent>\n              </UiDropdownMenu>\n              <UiTooltipContent><p>Options</p></UiTooltipContent>\n            </UiTooltip>\n          </div>\n          <div class=\"p-2\">\n            <UiApexchart\n              type=\"radialBar\"\n              height=\"280\"\n              :series=\"radialSeries\"\n              :options=\"radialOptions\"\n            />\n          </div>\n        </div>\n\n        <!-- Total customers — multi-line chart card -->\n        <div class=\"overflow-hidden rounded-xl border border-border/70 bg-card shadow-xs\">\n          <div class=\"flex items-center justify-between border-b border-border/60 px-5 py-4\">\n            <h2 class=\"text-sm font-semibold\">Total customers</h2>\n            <UiTooltip>\n              <UiDropdownMenu>\n                <UiTooltipTrigger as-child>\n                  <UiDropdownMenuTrigger as-child>\n                    <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"-mr-1 text-muted-foreground\">\n                      <Icon name=\"heroicons:ellipsis-vertical\" class=\"size-4\" />\n                    </UiButton>\n                  </UiDropdownMenuTrigger>\n                </UiTooltipTrigger>\n                <UiDropdownMenuContent align=\"end\">\n                  <UiDropdownMenuItem icon=\"heroicons:arrow-path\" title=\"Refresh\" />\n                  <UiDropdownMenuItem icon=\"heroicons:arrow-down-tray\" title=\"Export\" />\n                </UiDropdownMenuContent>\n              </UiDropdownMenu>\n              <UiTooltipContent><p>Options</p></UiTooltipContent>\n            </UiTooltip>\n          </div>\n          <UiApexchart type=\"area\" height=\"280\" :series=\"lineSeries\" :options=\"lineOptions\" />\n        </div>\n      </Motion>\n\n      <!-- Filters + search row -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 8 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.3, ease: 'easeOut' }\"\n        class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\"\n      >\n        <!-- Filter chips -->\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <button\n            v-for=\"chip in activeFilters\"\n            :key=\"chip.label\"\n            class=\"flex items-center gap-1.5 rounded-full border border-border/70 bg-card px-3 py-1 text-xs font-medium text-foreground transition-colors hover:bg-muted/60\"\n            @click=\"removeFilter(chip.label)\"\n          >\n            {{ chip.label }}\n            <Icon name=\"heroicons:x-mark\" class=\"size-3.5 text-muted-foreground\" />\n          </button>\n          <UiButton variant=\"outline\" size=\"sm\" class=\"h-7 rounded-full text-xs\">\n            <Icon name=\"heroicons:funnel\" class=\"size-3.5\" />\n            More filters\n          </UiButton>\n        </div>\n\n        <!-- Search input (filters table) -->\n        <div class=\"relative w-full sm:w-64\">\n          <Icon\n            name=\"heroicons:magnifying-glass\"\n            class=\"absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground\"\n          />\n          <input\n            v-model=\"tableSearch\"\n            type=\"text\"\n            placeholder=\"Search customers...\"\n            class=\"h-9 w-full rounded-lg border border-border/70 bg-card pr-3 pl-9 text-sm text-foreground shadow-xs transition-colors placeholder:text-muted-foreground focus:border-[--color-primary] focus:ring-1 focus:ring-[--color-primary] focus:outline-none\"\n          />\n        </div>\n      </Motion>\n\n      <!-- Customers table card -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 16 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.35, ease: 'easeOut' }\"\n      >\n        <UiCard class=\"gap-0 overflow-hidden border-border/70 py-0 shadow-xs\">\n          <UiTanStackTable\n            :data=\"filteredCompanies\"\n            :columns=\"companyColumns\"\n            :show-rows-per-page=\"false\"\n            :show-page-info=\"false\"\n            :show-pagination=\"false\"\n            :show-selected-count=\"false\"\n            :show-footer=\"true\"\n            :loading=\"companiesPending\"\n            :table-options=\"{ enableRowSelection: true }\"\n          >\n            <!-- Select all -->\n            <template #select-header=\"{ table }\">\n              <UiCheckbox\n                aria-label=\"Select all\"\n                :model-value=\"\n                  table.getIsAllPageRowsSelected() ||\n                  (table.getIsSomePageRowsSelected() && 'indeterminate')\n                \"\n                @update:model-value=\"table.toggleAllPageRowsSelected(!!$event)\"\n              />\n            </template>\n\n            <template #select-cell=\"{ row }\">\n              <UiCheckbox\n                :aria-label=\"`Select ${row.original.name}`\"\n                :model-value=\"row.getIsSelected()\"\n                @update:model-value=\"row.toggleSelected(!!$event)\"\n              />\n            </template>\n\n            <!-- Company cell: logo + name + domain -->\n            <template #company-cell=\"{ row }\">\n              <div class=\"flex items-center gap-3\">\n                <div\n                  class=\"flex size-9 shrink-0 items-center justify-center rounded-lg text-sm font-semibold text-white\"\n                  :style=\"{ backgroundColor: row.original.logoColor }\"\n                >\n                  {{ row.original.logoInitial }}\n                </div>\n                <div class=\"flex min-w-0 flex-col\">\n                  <span class=\"truncate text-sm font-medium\">{{ row.original.name }}</span>\n                  <span class=\"truncate text-xs text-muted-foreground\">{{\n                    row.original.domain\n                  }}</span>\n                </div>\n              </div>\n            </template>\n\n            <!-- Status cell -->\n            <template #status-cell=\"{ row }\">\n              <UiBadge\n                v-if=\"row.original.status === 'Customer'\"\n                variant=\"outline\"\n                class=\"rounded-full border-emerald-300 bg-emerald-50 text-emerald-700 dark:border-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-400\"\n              >\n                {{ row.original.status }}\n              </UiBadge>\n              <span v-else class=\"text-sm text-muted-foreground\">{{ row.original.status }}</span>\n            </template>\n\n            <!-- About cell: product + description -->\n            <template #about-cell=\"{ row }\">\n              <div class=\"flex min-w-0 flex-col\">\n                <span class=\"truncate text-sm font-medium\">{{ row.original.aboutProduct }}</span>\n                <span class=\"truncate text-xs text-muted-foreground\">{{\n                  row.original.aboutDescription\n                }}</span>\n              </div>\n            </template>\n\n            <!-- Users cell: avatar group -->\n            <template #users-cell=\"{ row }\">\n              <div class=\"flex items-center\">\n                <div class=\"flex -space-x-2\">\n                  <UiAvatar\n                    v-for=\"(url, i) in row.original.userAvatars\"\n                    :key=\"i\"\n                    :src=\"url\"\n                    :alt=\"`User ${i + 1}`\"\n                    fallback=\"U\"\n                    class=\"size-7 shrink-0 ring-2 ring-background\"\n                  />\n                </div>\n                <span class=\"ml-1.5 text-xs text-muted-foreground\">+5</span>\n              </div>\n            </template>\n\n            <!-- License use cell: progress bar + value -->\n            <template #licenseUse-cell=\"{ row }\">\n              <div class=\"flex w-28 flex-col gap-1.5\">\n                <span class=\"text-xs text-muted-foreground\">{{ row.original.licenseUse }}%</span>\n                <div class=\"h-1.5 w-full overflow-hidden rounded-full bg-muted\">\n                  <div\n                    class=\"h-full rounded-full\"\n                    :style=\"{\n                      width: `${row.original.licenseUse}%`,\n                      backgroundColor: 'var(--color-primary)',\n                    }\"\n                  />\n                </div>\n              </div>\n            </template>\n\n            <!-- Actions cell -->\n            <template #actions-cell=\"{ row }\">\n              <div class=\"flex items-center gap-1\">\n                <UiTooltip>\n                  <UiTooltipTrigger as-child>\n                    <UiButton\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      class=\"text-muted-foreground hover:text-destructive\"\n                      aria-label=\"Delete customer\"\n                      @click=\"\n                        () => {\n                          deleteTarget = row.original;\n                          deleteOpen = true;\n                        }\n                      \"\n                    >\n                      <Icon name=\"heroicons:trash\" class=\"size-4\" />\n                    </UiButton>\n                  </UiTooltipTrigger>\n                  <UiTooltipContent><p>Delete customer</p></UiTooltipContent>\n                </UiTooltip>\n                <UiTooltip>\n                  <UiTooltipTrigger as-child>\n                    <UiButton\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      class=\"text-muted-foreground\"\n                      aria-label=\"Edit customer\"\n                      @click=\"openEdit(row.original)\"\n                    >\n                      <Icon name=\"heroicons:pencil\" class=\"size-4\" />\n                    </UiButton>\n                  </UiTooltipTrigger>\n                  <UiTooltipContent><p>Edit customer</p></UiTooltipContent>\n                </UiTooltip>\n              </div>\n            </template>\n\n            <!-- Footer with pagination -->\n            <template #footer=\"{ table }\">\n              <div\n                class=\"flex w-full flex-col gap-3 border-t border-border/60 px-5 py-4 sm:flex-row sm:items-center sm:justify-between\"\n              >\n                <p class=\"shrink-0 text-sm text-muted-foreground\">\n                  <template v-if=\"table.getFilteredSelectedRowModel().rows.length > 0\">\n                    {{ table.getFilteredSelectedRowModel().rows.length }} selected\n                  </template>\n                </p>\n\n                <!-- Desktop pagination -->\n                <UiPagination\n                  class=\"mx-0! hidden! justify-end! sm:flex!\"\n                  :total=\"filteredCompanies.length\"\n                  :items-per-page=\"10\"\n                  :sibling-count=\"1\"\n                  :page=\"table.getState().pagination.pageIndex + 1\"\n                  @update:page=\"(p) => table.setPageIndex(p - 1)\"\n                >\n                  <UiPaginationList class=\"w-full justify-between gap-1\">\n                    <UiPaginationPrev as-child>\n                      <UiButton variant=\"outline\" size=\"sm\">\n                        <Icon name=\"heroicons:chevron-left\" class=\"size-4\" />\n                        Previous\n                      </UiButton>\n                    </UiPaginationPrev>\n                    <div class=\"text-sm text-muted-foreground\">\n                      Page\n                      <span class=\"font-medium text-foreground\">{{\n                        table.getState().pagination.pageIndex + 1\n                      }}</span>\n                      of\n                      <span class=\"font-medium text-foreground\">{{ table.getPageCount() }}</span>\n                    </div>\n                    <UiPaginationNext as-child>\n                      <UiButton variant=\"outline\" size=\"sm\">\n                        Next\n                        <Icon name=\"heroicons:chevron-right\" class=\"size-4\" />\n                      </UiButton>\n                    </UiPaginationNext>\n                  </UiPaginationList>\n                </UiPagination>\n\n                <!-- Mobile pagination -->\n                <UiPagination\n                  class=\"mx-0! sm:hidden!\"\n                  :total=\"filteredCompanies.length\"\n                  :items-per-page=\"10\"\n                  :page=\"table.getState().pagination.pageIndex + 1\"\n                  @update:page=\"(p) => table.setPageIndex(p - 1)\"\n                >\n                  <UiPaginationList class=\"w-full justify-between\">\n                    <UiPaginationPrev as-child>\n                      <UiButton variant=\"outline\" size=\"icon-sm\">\n                        <Icon name=\"heroicons:arrow-left\" class=\"size-4\" />\n                      </UiButton>\n                    </UiPaginationPrev>\n                    <span class=\"text-sm text-muted-foreground\">\n                      Page {{ table.getState().pagination.pageIndex + 1 }} of\n                      {{ table.getPageCount() }}\n                    </span>\n                    <UiPaginationNext as-child>\n                      <UiButton variant=\"outline\" size=\"icon-sm\">\n                        <Icon name=\"heroicons:arrow-right\" class=\"size-4\" />\n                      </UiButton>\n                    </UiPaginationNext>\n                  </UiPaginationList>\n                </UiPagination>\n              </div>\n            </template>\n          </UiTanStackTable>\n        </UiCard>\n      </Motion>\n    </UiContainer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { faker } from \"@faker-js/faker\";\n  import type { ColumnDef } from \"@tanstack/vue-table\";\n  import type { ApexOptions } from \"apexcharts\";\n  import { Motion } from \"motion-v\";\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  // ─── Navigation ────────────────────────────────────────────────────────────────\n  const navItems = [\n    { label: \"Home\", active: false },\n    { label: \"Customers\", active: true },\n    { label: \"Projects\", active: false },\n    { label: \"Tasks\", active: false },\n    { label: \"Reporting\", active: false },\n    { label: \"Users\", active: false },\n  ];\n\n  // ─── Search dialog ─────────────────────────────────────────────────────────────\n  const searchOpen = ref(false);\n  const handleKeydown = (e: KeyboardEvent) => {\n    if (e.key === \"Escape\") searchOpen.value = false;\n    if ((e.metaKey || e.ctrlKey) && e.key === \"k\") {\n      e.preventDefault();\n      searchOpen.value = true;\n    }\n  };\n  onMounted(() => document.addEventListener(\"keydown\", handleKeydown));\n  onUnmounted(() => document.removeEventListener(\"keydown\", handleKeydown));\n\n  // ─── Filter chips ──────────────────────────────────────────────────────────────\n  const activeFilters = ref([{ label: \"All time\" }, { label: \"US, AU, +4\" }]);\n  const removeFilter = (label: string) => {\n    activeFilters.value = activeFilters.value.filter((f) => f.label !== label);\n  };\n\n  // ─── Radial chart (Active now) ─────────────────────────────────────────────────\n  // Three concentric rings representing engagement tiers across 2025, 2024, 2023\n  const radialSeries = [78, 54, 38];\n\n  const radialOptions: ApexOptions = {\n    chart: { type: \"radialBar\", background: \"transparent\", parentHeightOffset: 0 },\n    stroke: { lineCap: \"round\" },\n    colors: [\"#0ea5e9\", \"#38bdf8\", \"#7dd3fc\"],\n    plotOptions: {\n      radialBar: {\n        hollow: { size: \"42%\", background: \"transparent\", margin: 0 },\n        track: { background: \"transparent\", margin: 6 },\n        dataLabels: {\n          show: true,\n          name: {\n            show: true,\n            fontSize: \"11px\",\n            offsetY: 24,\n          },\n          value: {\n            show: true,\n            fontSize: \"30px\",\n            fontWeight: \"700\",\n            offsetY: -8,\n          },\n          total: {\n            show: true,\n            label: \"Active users\",\n            formatter: () => \"316\",\n          },\n        },\n      },\n    },\n    legend: {\n      show: true,\n      position: \"bottom\",\n      horizontalAlign: \"center\",\n      fontSize: \"12px\",\n    },\n    labels: [\"2025\", \"2024\", \"2023\"],\n    states: { hover: { filter: { type: \"none\" } }, active: { filter: { type: \"none\" } } },\n  };\n\n  // ─── Line chart (Total customers) ─────────────────────────────────────────────\n  const months = [\n    \"Jan\",\n    \"Feb\",\n    \"Mar\",\n    \"Apr\",\n    \"May\",\n    \"Jun\",\n    \"Jul\",\n    \"Aug\",\n    \"Sep\",\n    \"Oct\",\n    \"Nov\",\n    \"Dec\",\n  ];\n\n  const lineSeries = [\n    { name: \"2025\", data: [320, 380, 410, 460, 520, 590, 640, 700, 780, 850, 920, 1010] },\n    { name: \"2024\", data: [200, 240, 260, 295, 330, 370, 395, 430, 470, 510, 550, 590] },\n    { name: \"2023\", data: [120, 145, 158, 175, 195, 220, 235, 255, 275, 295, 315, 340] },\n  ];\n\n  const lineOptions: ApexOptions = {\n    chart: { type: \"area\", background: \"transparent\", parentHeightOffset: 0 },\n    stroke: { width: [2, 1.5, 1.5], dashArray: [0, 6, 3] },\n    colors: [\"#0ea5e9\", \"#38bdf8\", \"#7dd3fc\"],\n    fill: {\n      type: [\"gradient\", \"solid\", \"solid\"],\n      gradient: {\n        type: \"vertical\",\n        gradientToColors: [\"#0ea5e9\"],\n        shadeIntensity: 0,\n        opacityFrom: 0.15,\n        opacityTo: 0,\n        stops: [0, 100],\n      },\n      opacity: [1, 0, 0],\n    },\n    grid: {\n      strokeDashArray: 4,\n      xaxis: { lines: { show: false } },\n      yaxis: { lines: { show: true } },\n      padding: { left: 8, right: 8 },\n    },\n    xaxis: {\n      categories: months,\n      axisBorder: { show: false },\n      axisTicks: { show: false },\n    },\n    yaxis: {\n      labels: {\n        formatter: (v: number) => (v >= 1000 ? `${(v / 1000).toFixed(1)}k` : String(v)),\n      },\n    },\n    tooltip: { y: { formatter: (v: number) => `${v.toLocaleString()} customers` } },\n    markers: { size: 0, hover: { size: 5 } },\n    legend: {\n      show: true,\n      position: \"top\",\n      horizontalAlign: \"right\",\n      markers: { size: 6, shape: \"circle\" },\n    },\n  };\n\n  // ─── Company table ─────────────────────────────────────────────────────────────\n  type CompanyRow = {\n    id: number;\n    name: string;\n    domain: string;\n    logoColor: string;\n    logoInitial: string;\n    status: \"Customer\" | \"Churned\";\n    aboutProduct: string;\n    aboutDescription: string;\n    userAvatars: string[];\n    licenseUse: number;\n  };\n\n  const logoColors = [\n    \"#0ea5e9\",\n    \"#6366f1\",\n    \"#10b981\",\n    \"#f59e0b\",\n    \"#ef4444\",\n    \"#ec4899\",\n    \"#14b8a6\",\n    \"#f97316\",\n    \"#8b5cf6\",\n    \"#84cc16\",\n  ];\n\n  const createCompany = (i: number): CompanyRow => {\n    faker.seed(i + 200);\n    const name = faker.company.name();\n    const domain = `${name\n      .toLowerCase()\n      .replace(/[^a-z0-9]/g, \"\")\n      .slice(0, 12)}.com`;\n    const status: \"Customer\" | \"Churned\" = i % 5 === 1 ? \"Churned\" : \"Customer\";\n    const logoColor = logoColors[i % logoColors.length]!;\n    const logoInitial = name[0]?.toUpperCase() ?? \"C\";\n    const userAvatars = Array.from(\n      { length: 3 },\n      (_, j) => `https://i.pravatar.cc/150?img=${((i * 3 + j) % 70) + 1}`\n    );\n    const licenseUse = faker.number.int({ min: 15, max: 95 });\n    const aboutProduct = faker.commerce.productName();\n    const aboutDescription = faker.commerce.productDescription().slice(0, 48);\n    return {\n      id: i + 1,\n      name,\n      domain,\n      logoColor,\n      logoInitial,\n      status,\n      aboutProduct,\n      aboutDescription,\n      userAvatars,\n      licenseUse,\n    };\n  };\n\n  const { data: companiesData, pending: companiesPending } = await useAsyncData<CompanyRow[]>(\n    \"block-dashboards6-companies\",\n    async () => Array.from({ length: 100 }, (_, i) => createCompany(i)),\n    { default: () => [] }\n  );\n\n  const companies = computed(() => companiesData.value ?? []);\n\n  const tableSearch = ref(\"\");\n\n  const filteredCompanies = computed(() => {\n    const q = tableSearch.value.trim().toLowerCase();\n    if (!q) return companies.value;\n    return companies.value.filter(\n      (c) =>\n        c.name.toLowerCase().includes(q) ||\n        c.domain.toLowerCase().includes(q) ||\n        c.aboutProduct.toLowerCase().includes(q) ||\n        c.status.toLowerCase().includes(q)\n    );\n  });\n\n  // ─── Table columns ─────────────────────────────────────────────────────────────\n  const companyColumns: ColumnDef<CompanyRow>[] = [\n    {\n      id: \"select\",\n      header: \"\",\n      enableSorting: false,\n      enableHiding: false,\n      meta: { class: { th: \"w-12\", td: \"w-12\" } },\n    },\n    {\n      id: \"company\",\n      accessorKey: \"name\",\n      header: \"Company\",\n    },\n    {\n      id: \"status\",\n      accessorKey: \"status\",\n      header: \"Status\",\n    },\n    {\n      id: \"about\",\n      accessorKey: \"aboutProduct\",\n      header: \"About\",\n      enableSorting: false,\n      meta: { class: { th: \"hidden md:table-cell\", td: \"hidden md:table-cell\" } },\n    },\n    {\n      id: \"users\",\n      accessorKey: \"userAvatars\",\n      header: \"Users\",\n      enableSorting: false,\n      meta: { class: { th: \"hidden lg:table-cell\", td: \"hidden lg:table-cell\" } },\n    },\n    {\n      id: \"licenseUse\",\n      accessorKey: \"licenseUse\",\n      header: \"License use\",\n      enableSorting: false,\n      meta: { class: { th: \"hidden lg:table-cell w-36\", td: \"hidden lg:table-cell w-36\" } },\n    },\n    {\n      id: \"actions\",\n      header: \"\",\n      enableSorting: false,\n      enableHiding: false,\n      meta: { class: { th: \"w-20\", td: \"w-20\" } },\n    },\n  ];\n\n  // ─── Add customer sheet (vee-validate) ────────────────────────────────────────\n  const addOpen = ref(false);\n\n  const AddSchema = object({\n    addName: string().required().label(\"Company name\").min(2).max(100),\n    addDomain: string().required().label(\"Domain\").min(3).max(80),\n    addProduct: string().optional().label(\"About / product\").max(120),\n    addStatus: string().required().label(\"Status\"),\n    addUsers: string().optional().label(\"Number of users\"),\n  });\n\n  const {\n    handleSubmit: handleAddSubmit,\n    isSubmitting: isSubmittingAdd,\n    resetForm: resetAddForm,\n    controlledValues: addControlledValues,\n  } = useForm({ name: \"addForm\", validationSchema: toTypedSchema(AddSchema) });\n\n  const submitAdd = handleAddSubmit(() => {\n    addOpen.value = false;\n    useSonner(\"Customer added\", {\n      description: `'${addControlledValues.value.addName}' has been added.`,\n    });\n    resetAddForm();\n  });\n\n  // ─── Edit sheet (vee-validate) ─────────────────────────────────────────────────\n  const editOpen = ref(false);\n  const editTarget = ref<CompanyRow | null>(null);\n\n  const EditSchema = object({\n    editName: string().required().label(\"Company name\").min(2).max(100),\n    editDomain: string().required().label(\"Domain\").min(3).max(80),\n    editStatus: string().required().label(\"Status\"),\n  });\n\n  const {\n    handleSubmit: handleEditSubmit,\n    isSubmitting: isSubmittingEdit,\n    setValues,\n  } = useForm<InferType<typeof EditSchema>>({\n    validationSchema: EditSchema,\n  });\n\n  const submitEdit = handleEditSubmit(() => {\n    editOpen.value = false;\n    useSonner(\"Customer updated\", {\n      description: `'${editTarget.value?.name}' has been saved.`,\n    });\n  });\n\n  const openEdit = (company: CompanyRow) => {\n    editTarget.value = company;\n    setValues({\n      editName: company.name,\n      editDomain: company.domain,\n      editStatus: company.status,\n    });\n    editOpen.value = true;\n  };\n\n  // ─── Import CSV dialog ─────────────────────────────────────────────────────────\n  const importOpen = ref(false);\n  const importFile = ref<File | null>(null);\n  const importDragOver = ref(false);\n\n  const onImportFileChange = (e: Event) => {\n    const file = (e.target as HTMLInputElement).files?.[0];\n    if (file) importFile.value = file;\n  };\n\n  const onImportDrop = (e: DragEvent) => {\n    importDragOver.value = false;\n    const file = e.dataTransfer?.files?.[0];\n    if (file && file.name.endsWith(\".csv\")) importFile.value = file;\n  };\n\n  const onImportSubmit = () => {\n    if (!importFile.value) return;\n    importOpen.value = false;\n    useSonner(\"Import started\", {\n      description: `'${importFile.value.name}' is being processed.`,\n    });\n    importFile.value = null;\n  };\n\n  // ─── Delete dialog ─────────────────────────────────────────────────────────────\n  const deleteOpen = ref(false);\n  const deleteTarget = ref<CompanyRow | null>(null);\n\n  const confirmDelete = () => {\n    if (!deleteTarget.value) return;\n    useSonner(`'${deleteTarget.value.name}' removed`, {\n      description: \"The customer has been permanently removed.\",\n    });\n    deleteTarget.value = null;\n  };\n</script>\n","category":"Dashboards","path":"Dashboards/BlockDashboards6.vue","components":["alertdialog","alertdialogaction","alertdialogcancel","alertdialogcontent","alertdialogdescription","alertdialogfooter","alertdialogheader","alertdialogtitle","apexchart","avatar","badge","button","card","checkbox","commanddialog","commandempty","commandgroup","commandinput","commanditem","commandlist","commandseparator","container","dialog","dialogcontent","dialogdescription","dialogfooter","dialogheader","dialogtitle","dropdownmenu","dropdownmenucontent","dropdownmenuitem","dropdownmenulabel","dropdownmenuseparator","dropdownmenutrigger","kbd","pagination","paginationlist","paginationnext","paginationprev","popover","popovercontent","popovertrigger","sheet","sheetclose","sheetcontent","sheetfooter","tanstacktable","tooltip","tooltipcontent","tooltiptrigger","veeinput","veeselect"]},{"name":"Dashboards 7","fileName":"BlockDashboards7.vue","file":"<template>\n  <div class=\"min-h-screen bg-background text-foreground\">\n    <!-- Upgrade plan dialog -->\n    <UiDialog v-model:open=\"upgradeOpen\">\n      <UiDialogContent class=\"sm:max-w-lg\">\n        <UiDialogHeader class=\"text-center sm:text-center\">\n          <div\n            class=\"mx-auto mb-3 flex size-12 items-center justify-center rounded-full\"\n            :style=\"{ backgroundColor: 'var(--color-primary)' }\"\n          >\n            <Icon name=\"heroicons:bolt\" class=\"size-6 text-white\" />\n          </div>\n          <UiDialogTitle class=\"text-xl\">Upgrade to Pro</UiDialogTitle>\n          <UiDialogDescription>\n            Unlock unlimited customers, advanced analytics, and priority support.\n          </UiDialogDescription>\n        </UiDialogHeader>\n\n        <div class=\"space-y-3 py-2\">\n          <!-- Plan cards (radio-style) -->\n          <div class=\"grid grid-cols-2 gap-3\">\n            <!-- Free -->\n            <button\n              type=\"button\"\n              class=\"relative cursor-pointer rounded-xl border-2 p-4 text-left transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none\"\n              :class=\"\n                selectedPlan === 'free'\n                  ? 'border-foreground bg-card shadow-sm'\n                  : 'border-border/60 bg-muted/30 hover:border-border hover:bg-muted/50'\n              \"\n              :style=\"\n                selectedPlan === 'free'\n                  ? { borderColor: 'var(--color-primary)', outline: 'none' }\n                  : {}\n              \"\n              @click=\"selectedPlan = 'free'\"\n            >\n              <!-- Selected check -->\n              <div\n                class=\"absolute top-3 right-3 flex size-5 items-center justify-center rounded-full border-2 transition-colors\"\n                :style=\"\n                  selectedPlan === 'free'\n                    ? {\n                        borderColor: 'var(--color-primary)',\n                        backgroundColor: 'var(--color-primary)',\n                      }\n                    : { borderColor: 'var(--border)' }\n                \"\n              >\n                <Icon\n                  v-if=\"selectedPlan === 'free'\"\n                  name=\"heroicons:check\"\n                  class=\"size-3 text-white\"\n                />\n              </div>\n\n              <p class=\"pr-6 text-xs font-semibold tracking-wider text-muted-foreground uppercase\">\n                Free\n              </p>\n              <p class=\"mt-2 text-2xl font-bold\">$0<span class=\"text-sm font-normal\">/mo</span></p>\n              <ul class=\"mt-3 space-y-2 text-sm text-muted-foreground\">\n                <li class=\"flex items-center gap-2\">\n                  <Icon name=\"heroicons:check\" class=\"size-4 shrink-0 text-emerald-500\" />\n                  Up to 250 customers\n                </li>\n                <li class=\"flex items-center gap-2\">\n                  <Icon name=\"heroicons:check\" class=\"size-4 shrink-0 text-emerald-500\" />\n                  Basic analytics\n                </li>\n                <li class=\"flex items-center gap-2\">\n                  <Icon name=\"heroicons:x-mark\" class=\"size-4 shrink-0 text-muted-foreground/40\" />\n                  CSV import\n                </li>\n                <li class=\"flex items-center gap-2\">\n                  <Icon name=\"heroicons:x-mark\" class=\"size-4 shrink-0 text-muted-foreground/40\" />\n                  Priority support\n                </li>\n              </ul>\n            </button>\n\n            <!-- Pro -->\n            <button\n              type=\"button\"\n              class=\"relative cursor-pointer rounded-xl border-2 p-4 text-left transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none\"\n              :class=\"\n                selectedPlan === 'pro'\n                  ? 'bg-card shadow-sm'\n                  : 'border-border/60 bg-muted/30 hover:border-border hover:bg-muted/50'\n              \"\n              :style=\"selectedPlan === 'pro' ? { borderColor: 'var(--color-primary)' } : {}\"\n              @click=\"selectedPlan = 'pro'\"\n            >\n              <!-- Selected check -->\n              <div\n                class=\"absolute top-3 right-3 flex size-5 items-center justify-center rounded-full border-2 transition-colors\"\n                :style=\"\n                  selectedPlan === 'pro'\n                    ? {\n                        borderColor: 'var(--color-primary)',\n                        backgroundColor: 'var(--color-primary)',\n                      }\n                    : { borderColor: 'var(--border)' }\n                \"\n              >\n                <Icon\n                  v-if=\"selectedPlan === 'pro'\"\n                  name=\"heroicons:check\"\n                  class=\"size-3 text-white\"\n                />\n              </div>\n\n              <p\n                class=\"pr-6 text-xs font-semibold tracking-wider uppercase\"\n                :style=\"{ color: 'var(--color-primary)' }\"\n              >\n                Pro\n              </p>\n              <p class=\"mt-2 text-2xl font-bold\">$29<span class=\"text-sm font-normal\">/mo</span></p>\n              <ul class=\"mt-3 space-y-2 text-sm\">\n                <li class=\"flex items-center gap-2\">\n                  <Icon name=\"heroicons:check\" class=\"size-4 shrink-0 text-emerald-500\" />\n                  Unlimited customers\n                </li>\n                <li class=\"flex items-center gap-2\">\n                  <Icon name=\"heroicons:check\" class=\"size-4 shrink-0 text-emerald-500\" />\n                  Advanced analytics\n                </li>\n                <li class=\"flex items-center gap-2\">\n                  <Icon name=\"heroicons:check\" class=\"size-4 shrink-0 text-emerald-500\" />\n                  CSV import &amp; export\n                </li>\n                <li class=\"flex items-center gap-2\">\n                  <Icon name=\"heroicons:check\" class=\"size-4 shrink-0 text-emerald-500\" />\n                  Priority support\n                </li>\n              </ul>\n            </button>\n          </div>\n\n          <p class=\"text-center text-xs text-muted-foreground\">\n            No credit card required. Cancel anytime.\n          </p>\n        </div>\n\n        <UiDialogFooter class=\"flex-col gap-2 sm:flex-col\">\n          <UiButton v-if=\"selectedPlan === 'pro'\" class=\"w-full gap-2\" @click=\"upgradeOpen = false\">\n            <Icon name=\"heroicons:bolt\" class=\"size-4\" />\n            Upgrade to Pro — $29/mo\n          </UiButton>\n          <UiButton v-else variant=\"outline\" class=\"w-full\" @click=\"upgradeOpen = false\">\n            Continue with Free\n          </UiButton>\n          <UiButton variant=\"ghost\" class=\"w-full\" @click=\"upgradeOpen = false\">\n            Maybe later\n          </UiButton>\n        </UiDialogFooter>\n      </UiDialogContent>\n    </UiDialog>\n\n    <!-- Import CSV dialog -->\n    <UiDialog v-model:open=\"importOpen\">\n      <UiDialogContent class=\"sm:max-w-md\">\n        <UiDialogHeader>\n          <UiDialogTitle>Import customers</UiDialogTitle>\n          <UiDialogDescription>\n            Upload a CSV file to import customers in bulk. The file must include columns for company\n            name, domain, and status.\n          </UiDialogDescription>\n        </UiDialogHeader>\n\n        <div class=\"space-y-4 py-2\">\n          <label\n            class=\"flex cursor-pointer flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed border-border/70 bg-muted/30 px-6 py-10 text-center transition-colors hover:bg-muted/50\"\n            :class=\"{ 'border-[--color-primary] bg-sky-50/50 dark:bg-sky-950/20': importDragOver }\"\n            @dragover.prevent=\"importDragOver = true\"\n            @dragleave.prevent=\"importDragOver = false\"\n            @drop.prevent=\"onImportDrop\"\n          >\n            <div\n              class=\"flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground\"\n            >\n              <Icon name=\"heroicons:arrow-up-tray\" class=\"size-6\" />\n            </div>\n            <div class=\"space-y-1\">\n              <p class=\"text-sm font-medium\">\n                <span class=\"text-[--color-primary]\">Click to upload</span> or drag and drop\n              </p>\n              <p class=\"text-xs text-muted-foreground\">CSV files only, up to 10 MB</p>\n            </div>\n            <input type=\"file\" accept=\".csv\" class=\"sr-only\" @change=\"onImportFileChange\" />\n          </label>\n\n          <div\n            v-if=\"importFile\"\n            class=\"flex items-center gap-3 rounded-lg border border-border/70 bg-card px-4 py-3\"\n          >\n            <Icon name=\"heroicons:document-text\" class=\"size-5 shrink-0 text-[--color-primary]\" />\n            <div class=\"min-w-0 flex-1\">\n              <p class=\"truncate text-sm font-medium\">{{ importFile.name }}</p>\n              <p class=\"text-xs text-muted-foreground\">\n                {{ (importFile.size / 1024).toFixed(1) }} KB\n              </p>\n            </div>\n            <UiButton\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              class=\"shrink-0 text-muted-foreground\"\n              @click=\"importFile = null\"\n            >\n              <Icon name=\"heroicons:x-mark\" class=\"size-4\" />\n            </UiButton>\n          </div>\n\n          <p class=\"text-center text-xs text-muted-foreground\">\n            Not sure about the format?\n            <button class=\"font-medium text-[--color-primary] underline-offset-2 hover:underline\">\n              Download template\n            </button>\n          </p>\n        </div>\n\n        <UiDialogFooter>\n          <UiButton variant=\"outline\" @click=\"importOpen = false\">Cancel</UiButton>\n          <UiButton :disabled=\"!importFile\" @click=\"onImportSubmit\">\n            <Icon name=\"heroicons:arrow-up-tray\" class=\"size-4\" />\n            Import customers\n          </UiButton>\n        </UiDialogFooter>\n      </UiDialogContent>\n    </UiDialog>\n\n    <!-- Add customer sheet -->\n    <UiSheet v-model:open=\"addOpen\">\n      <UiSheetContent\n        side=\"right\"\n        variant=\"floating\"\n        translucent\n        title=\"Add customer\"\n        description=\"Fill in the details below to add a new customer.\"\n      >\n        <template #content>\n          <form class=\"space-y-5 px-6\" @submit=\"submitAdd\">\n            <fieldset :disabled=\"isSubmittingAdd\" class=\"space-y-5\">\n              <UiVeeInput required label=\"Company name\" name=\"addName\" placeholder=\"Acme Corp\" />\n              <UiVeeInput required label=\"Domain\" name=\"addDomain\" placeholder=\"acme.com\" />\n              <UiVeeInput\n                label=\"About / product\"\n                name=\"addProduct\"\n                placeholder=\"e.g. Project management tool\"\n              />\n              <UiVeeSelect required label=\"Status\" name=\"addStatus\">\n                <option disabled>Select an option</option>\n                <option value=\"Customer\">Customer</option>\n                <option value=\"Churned\">Churned</option>\n              </UiVeeSelect>\n              <UiVeeInput\n                label=\"Number of users\"\n                name=\"addUsers\"\n                type=\"number\"\n                placeholder=\"e.g. 10\"\n              />\n            </fieldset>\n          </form>\n        </template>\n        <template #footer>\n          <UiSheetFooter class=\"px-6 pb-6\">\n            <UiSheetClose as-child>\n              <UiButton variant=\"outline\" class=\"w-full\">Cancel</UiButton>\n            </UiSheetClose>\n            <UiButton class=\"w-full\" :disabled=\"isSubmittingAdd\" @click=\"submitAdd\">\n              Add customer\n            </UiButton>\n          </UiSheetFooter>\n        </template>\n      </UiSheetContent>\n    </UiSheet>\n\n    <!-- Edit customer sheet -->\n    <UiSheet v-model:open=\"editOpen\">\n      <UiSheetContent\n        side=\"right\"\n        variant=\"floating\"\n        translucent\n        title=\"Edit customer\"\n        description=\"Update the customer's details below.\"\n      >\n        <template #content>\n          <form class=\"space-y-5 px-6\" @submit=\"submitEdit\">\n            <fieldset :disabled=\"isSubmittingEdit\" class=\"space-y-5\">\n              <UiVeeInput required label=\"Company name\" name=\"editName\" placeholder=\"Acme Corp\" />\n              <UiVeeInput required label=\"Domain\" name=\"editDomain\" placeholder=\"acme.com\" />\n              <UiVeeSelect required label=\"Status\" name=\"editStatus\">\n                <option disabled>Select an option</option>\n                <option value=\"Customer\">Customer</option>\n                <option value=\"Churned\">Churned</option>\n              </UiVeeSelect>\n            </fieldset>\n          </form>\n        </template>\n        <template #footer>\n          <UiSheetFooter class=\"px-6 pb-6\">\n            <UiSheetClose as-child>\n              <UiButton variant=\"outline\" class=\"w-full\">Cancel</UiButton>\n            </UiSheetClose>\n            <UiButton class=\"w-full\" @click=\"submitEdit\">Save changes</UiButton>\n          </UiSheetFooter>\n        </template>\n      </UiSheetContent>\n    </UiSheet>\n\n    <!-- Delete confirmation dialog -->\n    <UiAlertDialog v-model:open=\"deleteOpen\">\n      <UiAlertDialogContent>\n        <UiAlertDialogHeader>\n          <UiAlertDialogTitle title=\"Remove customer?\" />\n          <UiAlertDialogDescription\n            :description=\"`Are you sure you want to remove '${deleteTarget?.name}'? This action cannot be undone.`\"\n          />\n        </UiAlertDialogHeader>\n        <UiAlertDialogFooter>\n          <UiAlertDialogCancel />\n          <UiAlertDialogAction @click=\"confirmDelete\" />\n        </UiAlertDialogFooter>\n      </UiAlertDialogContent>\n    </UiAlertDialog>\n\n    <!-- Command / search dialog -->\n    <UiCommandDialog\n      v-model:open=\"searchOpen\"\n      title=\"Search customers\"\n      description=\"Search by company name, domain, or product\"\n    >\n      <UiCommandInput placeholder=\"Search customers...\" />\n      <UiCommandList>\n        <UiCommandEmpty>No results found.</UiCommandEmpty>\n        <UiCommandGroup heading=\"Quick actions\">\n          <UiCommandItem value=\"Add customer\">\n            <Icon name=\"heroicons:plus\" />\n            <span>Add customer</span>\n          </UiCommandItem>\n          <UiCommandItem value=\"Import customers\">\n            <Icon name=\"heroicons:arrow-up-tray\" />\n            <span>Import customers</span>\n          </UiCommandItem>\n          <UiCommandItem value=\"Export list\">\n            <Icon name=\"heroicons:arrow-down-tray\" />\n            <span>Export list</span>\n          </UiCommandItem>\n        </UiCommandGroup>\n        <UiCommandSeparator />\n        <UiCommandGroup heading=\"Filter by status\">\n          <UiCommandItem value=\"Customers only\">\n            <Icon name=\"heroicons:check-circle\" />\n            <span>Customers only</span>\n          </UiCommandItem>\n          <UiCommandItem value=\"Churned only\">\n            <Icon name=\"heroicons:x-circle\" />\n            <span>Churned only</span>\n          </UiCommandItem>\n        </UiCommandGroup>\n      </UiCommandList>\n      <div\n        class=\"flex items-center gap-5 border-t border-border/70 bg-muted/20 px-4 py-2.5 text-xs text-muted-foreground\"\n      >\n        <span class=\"flex items-center gap-1.5\"><UiKbd>↵</UiKbd> to select</span>\n        <span class=\"flex items-center gap-1.5\"><UiKbd>↑↓</UiKbd> to navigate</span>\n        <span class=\"flex items-center gap-1.5\"><UiKbd>ESC</UiKbd> to close</span>\n      </div>\n    </UiCommandDialog>\n\n    <!-- Sticky header -->\n    <Motion\n      as=\"header\"\n      :initial=\"{ opacity: 0, y: -16 }\"\n      :animate=\"{ opacity: 1, y: 0 }\"\n      :transition=\"{ duration: 0.4, ease: 'easeOut' }\"\n      class=\"sticky top-0 z-10 border-b border-border/70 bg-background/85 backdrop-blur-md\"\n    >\n      <UiContainer class=\"flex min-h-[4rem] items-center justify-between gap-4\">\n        <!-- Logo + nav -->\n        <div class=\"flex items-center gap-5\">\n          <div class=\"flex items-center gap-2.5\">\n            <div\n              class=\"flex size-8 items-center justify-center rounded-lg border border-border/70 bg-muted shadow-xs\"\n            >\n              <div\n                class=\"size-4 rounded-full bg-[radial-gradient(circle_at_35%_35%,rgba(255,255,255,0.95),rgba(255,255,255,0.2)_32%,transparent_34%),linear-gradient(135deg,var(--color-primary),color-mix(in_oklab,var(--color-primary)_40%,white))]\"\n              />\n            </div>\n            <span class=\"font-semibold tracking-tight\">UI Thing</span>\n          </div>\n\n          <!-- Mobile nav popover -->\n          <UiPopover class=\"lg:hidden\">\n            <UiPopoverTrigger as-child>\n              <UiButton class=\"lg:hidden\" variant=\"ghost\" size=\"icon-sm\">\n                <Icon name=\"heroicons:bars-3\" class=\"size-5\" />\n              </UiButton>\n            </UiPopoverTrigger>\n            <UiPopoverContent align=\"start\" class=\"w-48 p-1\">\n              <UiButton\n                v-for=\"item in navItems\"\n                :key=\"item.label\"\n                variant=\"ghost\"\n                size=\"sm\"\n                class=\"w-full justify-start\"\n                :class=\"\n                  item.active\n                    ? 'bg-muted text-foreground shadow-xs hover:bg-muted'\n                    : 'text-muted-foreground'\n                \"\n              >\n                {{ item.label }}\n              </UiButton>\n            </UiPopoverContent>\n          </UiPopover>\n\n          <!-- Desktop nav -->\n          <nav class=\"hidden items-center gap-1 lg:flex\">\n            <UiButton\n              v-for=\"item in navItems\"\n              :key=\"item.label\"\n              variant=\"ghost\"\n              size=\"sm\"\n              :class=\"\n                item.active\n                  ? 'bg-muted text-foreground shadow-xs hover:bg-muted'\n                  : 'text-muted-foreground'\n              \"\n            >\n              {{ item.label }}\n            </UiButton>\n          </nav>\n        </div>\n\n        <!-- Right actions -->\n        <div class=\"flex items-center gap-2\">\n          <!-- Upgrade now button -->\n          <UiTooltip>\n            <UiTooltipTrigger as-child>\n              <!-- Desktop: icon + label -->\n              <UiButton size=\"sm\" class=\"hidden gap-1.5 sm:flex\" @click=\"upgradeOpen = true\">\n                <Icon name=\"heroicons:bolt\" class=\"size-4\" />\n                Upgrade now\n              </UiButton>\n            </UiTooltipTrigger>\n            <UiTooltipContent class=\"sm:hidden\"><p>Upgrade to Pro</p></UiTooltipContent>\n          </UiTooltip>\n          <!-- Mobile: icon only -->\n          <UiTooltip>\n            <UiTooltipTrigger as-child>\n              <UiButton size=\"icon-sm\" class=\"sm:hidden\" @click=\"upgradeOpen = true\">\n                <Icon name=\"heroicons:bolt\" class=\"size-4\" />\n              </UiButton>\n            </UiTooltipTrigger>\n            <UiTooltipContent><p>Upgrade to Pro</p></UiTooltipContent>\n          </UiTooltip>\n\n          <div class=\"flex items-center gap-1\">\n            <!-- Settings dropdown -->\n            <UiTooltip>\n              <UiDropdownMenu>\n                <UiTooltipTrigger as-child>\n                  <UiDropdownMenuTrigger as-child>\n                    <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full\">\n                      <Icon name=\"heroicons:cog-6-tooth\" class=\"size-5 text-muted-foreground\" />\n                    </UiButton>\n                  </UiDropdownMenuTrigger>\n                </UiTooltipTrigger>\n                <UiTooltipContent><p>Settings</p></UiTooltipContent>\n                <UiDropdownMenuContent align=\"end\" class=\"w-52\">\n                  <UiDropdownMenuLabel>Settings</UiDropdownMenuLabel>\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem icon=\"heroicons:user\" title=\"Account settings\" />\n                  <UiDropdownMenuItem icon=\"heroicons:swatch\" title=\"Appearance\" />\n                  <UiDropdownMenuItem icon=\"heroicons:bell\" title=\"Notifications\" />\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem\n                    variant=\"destructive\"\n                    icon=\"heroicons:arrow-right-on-rectangle\"\n                    title=\"Sign out\"\n                  />\n                </UiDropdownMenuContent>\n              </UiDropdownMenu>\n            </UiTooltip>\n\n            <!-- Notifications dropdown -->\n            <UiTooltip>\n              <UiDropdownMenu>\n                <UiTooltipTrigger as-child>\n                  <UiDropdownMenuTrigger as-child>\n                    <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full\">\n                      <Icon name=\"heroicons:bell\" class=\"size-5 text-muted-foreground\" />\n                    </UiButton>\n                  </UiDropdownMenuTrigger>\n                </UiTooltipTrigger>\n                <UiTooltipContent><p>Notifications</p></UiTooltipContent>\n                <UiDropdownMenuContent align=\"end\" class=\"w-96\">\n                  <UiDropdownMenuLabel class=\"flex items-center justify-between\">\n                    <span>Notifications</span>\n                    <UiBadge variant=\"secondary\" size=\"sm\">2 new</UiBadge>\n                  </UiDropdownMenuLabel>\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem\n                    icon=\"heroicons:user-plus\"\n                    title=\"Ephemeral signed a new plan\"\n                  >\n                    <template #shortcut>1h ago</template>\n                  </UiDropdownMenuItem>\n                  <UiDropdownMenuItem\n                    icon=\"heroicons:arrow-trending-up\"\n                    title=\"Customer growth up 12% this week\"\n                  >\n                    <template #shortcut>3h ago</template>\n                  </UiDropdownMenuItem>\n                </UiDropdownMenuContent>\n              </UiDropdownMenu>\n            </UiTooltip>\n\n            <!-- User avatar dropdown -->\n            <UiTooltip>\n              <UiDropdownMenu>\n                <UiTooltipTrigger as-child>\n                  <UiDropdownMenuTrigger as-child>\n                    <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full p-0\">\n                      <UiAvatar\n                        src=\"https://i.pravatar.cc/150?img=47\"\n                        alt=\"Olivia Rhye\"\n                        fallback=\"OR\"\n                        class=\"size-8 cursor-pointer\"\n                      />\n                    </UiButton>\n                  </UiDropdownMenuTrigger>\n                </UiTooltipTrigger>\n                <UiTooltipContent><p>Account</p></UiTooltipContent>\n                <UiDropdownMenuContent align=\"end\" class=\"w-52\">\n                  <UiDropdownMenuLabel>\n                    <div class=\"flex flex-col\">\n                      <p class=\"text-sm font-medium\">Olivia Rhye</p>\n                      <p class=\"text-xs text-muted-foreground\">olivia@ui-thing.com</p>\n                    </div>\n                  </UiDropdownMenuLabel>\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem icon=\"heroicons:user\" title=\"Profile\" />\n                  <UiDropdownMenuItem icon=\"heroicons:cog-6-tooth\" title=\"Settings\" />\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem\n                    variant=\"destructive\"\n                    icon=\"heroicons:arrow-right-on-rectangle\"\n                    title=\"Sign out\"\n                  />\n                </UiDropdownMenuContent>\n              </UiDropdownMenu>\n            </UiTooltip>\n          </div>\n        </div>\n      </UiContainer>\n    </Motion>\n\n    <!-- Secondary tab nav -->\n    <Motion\n      :initial=\"{ opacity: 0, y: -8 }\"\n      :animate=\"{ opacity: 1, y: 0 }\"\n      :transition=\"{ duration: 0.35, delay: 0.05, ease: 'easeOut' }\"\n      class=\"border-b border-border/70 bg-background\"\n    >\n      <UiContainer class=\"flex items-center justify-between gap-4 py-0\">\n        <!-- Tabs (desktop) -->\n        <div class=\"hidden items-center gap-0.5 overflow-x-auto sm:flex\">\n          <button\n            v-for=\"tab in secondaryTabs\"\n            :key=\"tab.label\"\n            class=\"relative shrink-0 px-3 py-3.5 text-sm font-medium transition-colors\"\n            :class=\"\n              tab.active\n                ? 'text-foreground after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-primary'\n                : 'text-muted-foreground hover:text-foreground'\n            \"\n            @click=\"setActiveTab(tab.label)\"\n          >\n            {{ tab.label }}\n          </button>\n        </div>\n\n        <!-- Mobile tab selector -->\n        <UiPopover class=\"sm:hidden\">\n          <UiPopoverTrigger as-child>\n            <UiButton variant=\"ghost\" size=\"sm\" class=\"gap-1.5 text-sm font-medium sm:hidden\">\n              {{ activeTabLabel }}\n              <Icon name=\"heroicons:chevron-down\" class=\"size-4 text-muted-foreground\" />\n            </UiButton>\n          </UiPopoverTrigger>\n          <UiPopoverContent align=\"start\" class=\"w-52 p-1\">\n            <UiButton\n              v-for=\"tab in secondaryTabs\"\n              :key=\"tab.label\"\n              variant=\"ghost\"\n              size=\"sm\"\n              class=\"w-full justify-start\"\n              :class=\"tab.active ? 'bg-muted font-semibold' : 'text-muted-foreground'\"\n              @click=\"setActiveTab(tab.label)\"\n            >\n              {{ tab.label }}\n            </UiButton>\n          </UiPopoverContent>\n        </UiPopover>\n\n        <!-- ⌘K search button -->\n        <UiButton\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"hidden shrink-0 gap-2 text-muted-foreground sm:flex\"\n          @click=\"searchOpen = true\"\n        >\n          <Icon name=\"heroicons:magnifying-glass\" class=\"size-4\" />\n          <span class=\"text-sm\">Search...</span>\n          <UiKbd class=\"ml-1\">⌘K</UiKbd>\n        </UiButton>\n      </UiContainer>\n    </Motion>\n\n    <!-- Page content -->\n    <UiContainer class=\"space-y-6 py-8\">\n      <!-- Page header -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 12 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.1, ease: 'easeOut' }\"\n        class=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\"\n      >\n        <div>\n          <h1 class=\"text-2xl font-bold tracking-tight\">Welcome back, Olivia</h1>\n          <p class=\"mt-1 text-sm text-muted-foreground\">\n            Track, manage and forecast your customers and orders.\n          </p>\n        </div>\n        <div class=\"flex items-center gap-3\">\n          <UiButton variant=\"outline\" size=\"sm\" @click=\"importOpen = true\">\n            <Icon name=\"heroicons:arrow-up-tray\" class=\"size-4\" />\n            Import\n          </UiButton>\n          <UiButton size=\"sm\" @click=\"addOpen = true\">\n            <Icon name=\"heroicons:plus\" class=\"size-4\" />\n            Add customer\n          </UiButton>\n        </div>\n      </Motion>\n\n      <!-- Stat cards row -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 12 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.18, ease: 'easeOut' }\"\n        class=\"grid gap-4 sm:grid-cols-3\"\n      >\n        <div\n          v-for=\"stat in statCards\"\n          :key=\"stat.label\"\n          class=\"flex flex-col justify-between overflow-hidden rounded-xl border border-border/70 bg-card p-5 shadow-xs\"\n        >\n          <!-- Card header -->\n          <div class=\"flex items-center justify-between\">\n            <p class=\"text-sm font-medium text-muted-foreground\">{{ stat.label }}</p>\n            <UiTooltip>\n              <UiDropdownMenu>\n                <UiTooltipTrigger as-child>\n                  <UiDropdownMenuTrigger as-child>\n                    <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"-mr-1 text-muted-foreground\">\n                      <Icon name=\"heroicons:ellipsis-vertical\" class=\"size-4\" />\n                    </UiButton>\n                  </UiDropdownMenuTrigger>\n                </UiTooltipTrigger>\n                <UiTooltipContent><p>Options</p></UiTooltipContent>\n                <UiDropdownMenuContent align=\"end\">\n                  <UiDropdownMenuItem icon=\"heroicons:arrow-path\" title=\"Refresh\" />\n                  <UiDropdownMenuItem icon=\"heroicons:arrow-down-tray\" title=\"Export\" />\n                </UiDropdownMenuContent>\n              </UiDropdownMenu>\n            </UiTooltip>\n          </div>\n\n          <!-- Value + trend -->\n          <div class=\"mt-3 flex items-end justify-between gap-3\">\n            <div>\n              <p class=\"text-3xl font-bold tracking-tight\">{{ stat.value }}</p>\n              <div class=\"mt-1.5 flex items-center gap-1.5\">\n                <span\n                  class=\"flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-xs font-medium\"\n                  :class=\"\n                    stat.positive\n                      ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/60 dark:text-emerald-400'\n                      : 'bg-red-50 text-red-700 dark:bg-red-950/60 dark:text-red-400'\n                  \"\n                >\n                  <Icon\n                    :name=\"\n                      stat.positive\n                        ? 'heroicons:arrow-trending-up'\n                        : 'heroicons:arrow-trending-down'\n                    \"\n                    class=\"size-3\"\n                  />\n                  {{ stat.trend }}\n                </span>\n                <span class=\"text-xs text-muted-foreground\">vs last month</span>\n              </div>\n            </div>\n\n            <!-- Sparkline -->\n            <div class=\"-mr-2 -mb-1 w-28 shrink-0\">\n              <UiApexchart\n                type=\"line\"\n                height=\"56\"\n                :series=\"[{ name: stat.label, data: stat.sparkData }]\"\n                :options=\"sparklineOptions(stat.positive)\"\n              />\n            </div>\n          </div>\n        </div>\n      </Motion>\n\n      <!-- Filter row -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 8 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.26, ease: 'easeOut' }\"\n        class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\"\n      >\n        <!-- Filter chips -->\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <button\n            v-for=\"chip in activeFilters\"\n            :key=\"chip.label\"\n            class=\"flex items-center gap-1.5 rounded-full border border-border/70 bg-card px-3 py-1 text-xs font-medium text-foreground transition-colors hover:bg-muted/60\"\n            @click=\"removeFilter(chip.label)\"\n          >\n            {{ chip.label }}\n            <Icon name=\"heroicons:x-mark\" class=\"size-3.5 text-muted-foreground\" />\n          </button>\n          <UiButton variant=\"outline\" size=\"sm\" class=\"h-7 rounded-full text-xs\">\n            <Icon name=\"heroicons:funnel\" class=\"size-3.5\" />\n            More filters\n          </UiButton>\n        </div>\n\n        <!-- Table search -->\n        <div class=\"relative w-full sm:w-64\">\n          <Icon\n            name=\"heroicons:magnifying-glass\"\n            class=\"absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground\"\n          />\n          <input\n            v-model=\"tableSearch\"\n            type=\"text\"\n            placeholder=\"Search customers...\"\n            class=\"h-9 w-full rounded-lg border border-border/70 bg-card pr-3 pl-9 text-sm text-foreground shadow-xs transition-colors placeholder:text-muted-foreground focus:border-[--color-primary] focus:ring-1 focus:ring-[--color-primary] focus:outline-none\"\n          />\n        </div>\n      </Motion>\n\n      <!-- Customers table card -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 16 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.32, ease: 'easeOut' }\"\n      >\n        <UiCard class=\"gap-0 overflow-hidden border-border/70 py-0 shadow-xs\">\n          <UiTanStackTable\n            :data=\"filteredCompanies\"\n            :columns=\"companyColumns\"\n            :show-rows-per-page=\"false\"\n            :show-page-info=\"false\"\n            :show-pagination=\"false\"\n            :show-selected-count=\"false\"\n            :show-footer=\"true\"\n            :loading=\"companiesPending\"\n            :table-options=\"{ enableRowSelection: true }\"\n          >\n            <!-- Select all -->\n            <template #select-header=\"{ table }\">\n              <UiCheckbox\n                aria-label=\"Select all\"\n                :model-value=\"\n                  table.getIsAllPageRowsSelected() ||\n                  (table.getIsSomePageRowsSelected() && 'indeterminate')\n                \"\n                @update:model-value=\"table.toggleAllPageRowsSelected(!!$event)\"\n              />\n            </template>\n\n            <template #select-cell=\"{ row }\">\n              <UiCheckbox\n                :aria-label=\"`Select ${row.original.name}`\"\n                :model-value=\"row.getIsSelected()\"\n                @update:model-value=\"row.toggleSelected(!!$event)\"\n              />\n            </template>\n\n            <!-- Company cell: logo + name + domain -->\n            <template #company-cell=\"{ row }\">\n              <div class=\"flex items-center gap-3\">\n                <div\n                  class=\"flex size-9 shrink-0 items-center justify-center rounded-lg text-sm font-semibold text-white\"\n                  :style=\"{ backgroundColor: row.original.logoColor }\"\n                >\n                  {{ row.original.logoInitial }}\n                </div>\n                <div class=\"flex min-w-0 flex-col\">\n                  <span class=\"truncate text-sm font-medium\">{{ row.original.name }}</span>\n                  <span class=\"truncate text-xs text-muted-foreground\">{{\n                    row.original.domain\n                  }}</span>\n                </div>\n              </div>\n            </template>\n\n            <!-- License use cell: progress bar + value -->\n            <template #licenseUse-cell=\"{ row }\">\n              <div class=\"flex w-28 flex-col gap-1.5\">\n                <span class=\"text-xs text-muted-foreground\">{{ row.original.licenseUse }}%</span>\n                <div class=\"h-1.5 w-full overflow-hidden rounded-full bg-muted\">\n                  <div\n                    class=\"h-full rounded-full\"\n                    :style=\"{\n                      width: `${row.original.licenseUse}%`,\n                      backgroundColor: 'var(--color-primary)',\n                    }\"\n                  />\n                </div>\n              </div>\n            </template>\n\n            <!-- Status cell -->\n            <template #status-cell=\"{ row }\">\n              <UiBadge\n                v-if=\"row.original.status === 'Customer'\"\n                variant=\"outline\"\n                class=\"rounded-full border-emerald-300 bg-emerald-50 text-emerald-700 dark:border-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-400\"\n              >\n                {{ row.original.status }}\n              </UiBadge>\n              <span v-else class=\"text-sm text-muted-foreground\">{{ row.original.status }}</span>\n            </template>\n\n            <!-- Users cell: avatar group -->\n            <template #users-cell=\"{ row }\">\n              <div class=\"flex items-center\">\n                <div class=\"flex -space-x-2\">\n                  <UiAvatar\n                    v-for=\"(url, i) in row.original.userAvatars\"\n                    :key=\"i\"\n                    :src=\"url\"\n                    :alt=\"`User ${i + 1}`\"\n                    fallback=\"U\"\n                    class=\"size-7 shrink-0 ring-2 ring-background\"\n                  />\n                </div>\n                <span class=\"ml-1.5 text-xs text-muted-foreground\">+5</span>\n              </div>\n            </template>\n\n            <!-- About cell: product + description -->\n            <template #about-cell=\"{ row }\">\n              <div class=\"flex min-w-0 flex-col\">\n                <span class=\"truncate text-sm font-medium\">{{ row.original.aboutProduct }}</span>\n                <span class=\"truncate text-xs text-muted-foreground\">{{\n                  row.original.aboutDescription\n                }}</span>\n              </div>\n            </template>\n\n            <!-- Actions cell -->\n            <template #actions-cell=\"{ row }\">\n              <div class=\"flex items-center gap-1\">\n                <UiTooltip>\n                  <UiTooltipTrigger as-child>\n                    <UiButton\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      class=\"text-muted-foreground hover:text-destructive\"\n                      aria-label=\"Delete customer\"\n                      @click=\"\n                        () => {\n                          deleteTarget = row.original;\n                          deleteOpen = true;\n                        }\n                      \"\n                    >\n                      <Icon name=\"heroicons:trash\" class=\"size-4\" />\n                    </UiButton>\n                  </UiTooltipTrigger>\n                  <UiTooltipContent><p>Delete customer</p></UiTooltipContent>\n                </UiTooltip>\n                <UiTooltip>\n                  <UiTooltipTrigger as-child>\n                    <UiButton\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      class=\"text-muted-foreground\"\n                      aria-label=\"Edit customer\"\n                      @click=\"openEdit(row.original)\"\n                    >\n                      <Icon name=\"heroicons:pencil\" class=\"size-4\" />\n                    </UiButton>\n                  </UiTooltipTrigger>\n                  <UiTooltipContent><p>Edit customer</p></UiTooltipContent>\n                </UiTooltip>\n              </div>\n            </template>\n\n            <!-- Footer with pagination -->\n            <template #footer=\"{ table }\">\n              <div\n                class=\"flex w-full flex-col gap-3 border-t border-border/60 px-5 py-4 sm:flex-row sm:items-center sm:justify-between\"\n              >\n                <p class=\"shrink-0 text-sm text-muted-foreground\">\n                  <template v-if=\"table.getFilteredSelectedRowModel().rows.length > 0\">\n                    {{ table.getFilteredSelectedRowModel().rows.length }} selected\n                  </template>\n                </p>\n\n                <!-- Desktop pagination -->\n                <UiPagination\n                  class=\"mx-0! hidden! justify-end! sm:flex!\"\n                  :total=\"filteredCompanies.length\"\n                  :items-per-page=\"10\"\n                  :sibling-count=\"1\"\n                  :page=\"table.getState().pagination.pageIndex + 1\"\n                  @update:page=\"(p) => table.setPageIndex(p - 1)\"\n                >\n                  <UiPaginationList class=\"w-full justify-between gap-1\">\n                    <UiPaginationPrev as-child>\n                      <UiButton variant=\"outline\" size=\"sm\">\n                        <Icon name=\"heroicons:chevron-left\" class=\"size-4\" />\n                        Previous\n                      </UiButton>\n                    </UiPaginationPrev>\n                    <div class=\"text-sm text-muted-foreground\">\n                      Page\n                      <span class=\"font-medium text-foreground\">{{\n                        table.getState().pagination.pageIndex + 1\n                      }}</span>\n                      of\n                      <span class=\"font-medium text-foreground\">{{ table.getPageCount() }}</span>\n                    </div>\n                    <UiPaginationNext as-child>\n                      <UiButton variant=\"outline\" size=\"sm\">\n                        Next\n                        <Icon name=\"heroicons:chevron-right\" class=\"size-4\" />\n                      </UiButton>\n                    </UiPaginationNext>\n                  </UiPaginationList>\n                </UiPagination>\n\n                <!-- Mobile pagination -->\n                <UiPagination\n                  class=\"mx-0! sm:hidden!\"\n                  :total=\"filteredCompanies.length\"\n                  :items-per-page=\"10\"\n                  :page=\"table.getState().pagination.pageIndex + 1\"\n                  @update:page=\"(p) => table.setPageIndex(p - 1)\"\n                >\n                  <UiPaginationList class=\"w-full justify-between\">\n                    <UiPaginationPrev as-child>\n                      <UiButton variant=\"outline\" size=\"icon-sm\">\n                        <Icon name=\"heroicons:arrow-left\" class=\"size-4\" />\n                      </UiButton>\n                    </UiPaginationPrev>\n                    <span class=\"text-sm text-muted-foreground\">\n                      Page {{ table.getState().pagination.pageIndex + 1 }} of\n                      {{ table.getPageCount() }}\n                    </span>\n                    <UiPaginationNext as-child>\n                      <UiButton variant=\"outline\" size=\"icon-sm\">\n                        <Icon name=\"heroicons:arrow-right\" class=\"size-4\" />\n                      </UiButton>\n                    </UiPaginationNext>\n                  </UiPaginationList>\n                </UiPagination>\n              </div>\n            </template>\n          </UiTanStackTable>\n        </UiCard>\n      </Motion>\n    </UiContainer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { faker } from \"@faker-js/faker\";\n  import type { ColumnDef } from \"@tanstack/vue-table\";\n  import type { ApexOptions } from \"apexcharts\";\n  import { Motion } from \"motion-v\";\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  // ─── Navigation ────────────────────────────────────────────────────────────────\n  const navItems = [\n    { label: \"Home\", active: false },\n    { label: \"Customers\", active: true },\n    { label: \"Projects\", active: false },\n    { label: \"Tasks\", active: false },\n    { label: \"Reporting\", active: false },\n    { label: \"Users\", active: false },\n  ];\n\n  // ─── Secondary tabs ─────────────────────────────────────────────────────────────\n  const secondaryTabs = ref([\n    { label: \"Overview\", active: true },\n    { label: \"Notifications\", active: false },\n    { label: \"Analytics\", active: false },\n    { label: \"Saved reports\", active: false },\n    { label: \"Scheduled reports\", active: false },\n    { label: \"User reports\", active: false },\n  ]);\n\n  const activeTabLabel = computed(\n    () => secondaryTabs.value.find((t) => t.active)?.label ?? \"Overview\"\n  );\n\n  const setActiveTab = (label: string) => {\n    secondaryTabs.value = secondaryTabs.value.map((t) => ({ ...t, active: t.label === label }));\n  };\n\n  // ─── Upgrade dialog ────────────────────────────────────────────────────────────\n  const upgradeOpen = ref(false);\n  const selectedPlan = ref<\"free\" | \"pro\">(\"pro\");\n\n  // ─── Search dialog ─────────────────────────────────────────────────────────────\n  const searchOpen = ref(false);\n  const handleKeydown = (e: KeyboardEvent) => {\n    if (e.key === \"Escape\") searchOpen.value = false;\n    if ((e.metaKey || e.ctrlKey) && e.key === \"k\") {\n      e.preventDefault();\n      searchOpen.value = true;\n    }\n  };\n  onMounted(() => document.addEventListener(\"keydown\", handleKeydown));\n  onUnmounted(() => document.removeEventListener(\"keydown\", handleKeydown));\n\n  // ─── Filter chips ──────────────────────────────────────────────────────────────\n  const activeFilters = ref([{ label: \"All time\" }, { label: \"US, AU, +4\" }]);\n  const removeFilter = (label: string) => {\n    activeFilters.value = activeFilters.value.filter((f) => f.label !== label);\n  };\n\n  // ─── Stat cards with sparklines ────────────────────────────────────────────────\n  const statCards = [\n    {\n      label: \"Total customers\",\n      value: \"2,420\",\n      trend: \"+40%\",\n      positive: true,\n      sparkData: [18, 22, 19, 25, 30, 28, 35, 32, 40, 38, 45, 48],\n    },\n    {\n      label: \"Members\",\n      value: \"1,210\",\n      trend: \"-10%\",\n      positive: false,\n      sparkData: [30, 28, 32, 25, 22, 28, 20, 18, 22, 16, 14, 12],\n    },\n    {\n      label: \"Active now\",\n      value: \"316\",\n      trend: \"+20%\",\n      positive: true,\n      sparkData: [10, 14, 12, 18, 16, 22, 20, 26, 24, 28, 30, 32],\n    },\n  ];\n\n  const sparklineOptions = (positive: boolean): ApexOptions => ({\n    chart: {\n      type: \"line\",\n      background: \"transparent\",\n      sparkline: { enabled: true },\n      parentHeightOffset: 0,\n      animations: { enabled: false },\n    },\n    stroke: { width: 2, curve: \"smooth\" },\n    colors: [positive ? \"#10b981\" : \"#ef4444\"],\n    markers: {\n      size: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5],\n      colors: [positive ? \"#10b981\" : \"#ef4444\"],\n      strokeWidth: 0,\n      hover: { size: 5 },\n    },\n    tooltip: { enabled: false },\n    grid: { show: false },\n    xaxis: { labels: { show: false }, axisBorder: { show: false }, axisTicks: { show: false } },\n    yaxis: { show: false },\n  });\n\n  // ─── Company table ─────────────────────────────────────────────────────────────\n  type CompanyRow = {\n    id: number;\n    name: string;\n    domain: string;\n    logoColor: string;\n    logoInitial: string;\n    status: \"Customer\" | \"Churned\";\n    aboutProduct: string;\n    aboutDescription: string;\n    userAvatars: string[];\n    licenseUse: number;\n  };\n\n  const logoColors = [\n    \"#0ea5e9\",\n    \"#6366f1\",\n    \"#10b981\",\n    \"#f59e0b\",\n    \"#ef4444\",\n    \"#ec4899\",\n    \"#14b8a6\",\n    \"#f97316\",\n    \"#8b5cf6\",\n    \"#84cc16\",\n  ];\n\n  const createCompany = (i: number): CompanyRow => {\n    faker.seed(i + 700);\n    const name = faker.company.name();\n    const domain = `${name\n      .toLowerCase()\n      .replace(/[^a-z0-9]/g, \"\")\n      .slice(0, 12)}.com`;\n    const status: \"Customer\" | \"Churned\" = i % 5 === 1 ? \"Churned\" : \"Customer\";\n    const logoColor = logoColors[i % logoColors.length]!;\n    const logoInitial = name[0]?.toUpperCase() ?? \"C\";\n    const userAvatars = Array.from(\n      { length: 3 },\n      (_, j) => `https://i.pravatar.cc/150?img=${((i * 3 + j) % 70) + 1}`\n    );\n    const licenseUse = faker.number.int({ min: 15, max: 95 });\n    const aboutProduct = faker.commerce.productName();\n    const aboutDescription = faker.commerce.productDescription().slice(0, 48);\n    return {\n      id: i + 1,\n      name,\n      domain,\n      logoColor,\n      logoInitial,\n      status,\n      aboutProduct,\n      aboutDescription,\n      userAvatars,\n      licenseUse,\n    };\n  };\n\n  const { data: companiesData, pending: companiesPending } = await useAsyncData<CompanyRow[]>(\n    \"block-dashboards7-companies\",\n    async () => Array.from({ length: 100 }, (_, i) => createCompany(i)),\n    { default: () => [] }\n  );\n\n  const companies = computed(() => companiesData.value ?? []);\n\n  const tableSearch = ref(\"\");\n\n  const filteredCompanies = computed(() => {\n    const q = tableSearch.value.trim().toLowerCase();\n    if (!q) return companies.value;\n    return companies.value.filter(\n      (c) =>\n        c.name.toLowerCase().includes(q) ||\n        c.domain.toLowerCase().includes(q) ||\n        c.aboutProduct.toLowerCase().includes(q) ||\n        c.status.toLowerCase().includes(q)\n    );\n  });\n\n  // ─── Table columns ─────────────────────────────────────────────────────────────\n  const companyColumns: ColumnDef<CompanyRow>[] = [\n    {\n      id: \"select\",\n      header: \"\",\n      enableSorting: false,\n      enableHiding: false,\n      meta: { class: { th: \"w-12\", td: \"w-12\" } },\n    },\n    {\n      id: \"company\",\n      accessorKey: \"name\",\n      header: \"Company\",\n    },\n    {\n      id: \"licenseUse\",\n      accessorKey: \"licenseUse\",\n      header: \"License use\",\n      enableSorting: false,\n      meta: { class: { th: \"hidden lg:table-cell w-36\", td: \"hidden lg:table-cell w-36\" } },\n    },\n    {\n      id: \"status\",\n      accessorKey: \"status\",\n      header: \"Status\",\n    },\n    {\n      id: \"users\",\n      accessorKey: \"userAvatars\",\n      header: \"Users\",\n      enableSorting: false,\n      meta: { class: { th: \"hidden lg:table-cell\", td: \"hidden lg:table-cell\" } },\n    },\n    {\n      id: \"about\",\n      accessorKey: \"aboutProduct\",\n      header: \"About\",\n      enableSorting: false,\n      meta: { class: { th: \"hidden md:table-cell\", td: \"hidden md:table-cell\" } },\n    },\n    {\n      id: \"actions\",\n      header: \"\",\n      enableSorting: false,\n      enableHiding: false,\n      meta: { class: { th: \"w-20\", td: \"w-20\" } },\n    },\n  ];\n\n  // ─── Add customer sheet (vee-validate) ────────────────────────────────────────\n  const addOpen = ref(false);\n\n  const AddSchema = object({\n    addName: string().required().label(\"Company name\").min(2).max(100),\n    addDomain: string().required().label(\"Domain\").min(3).max(80),\n    addProduct: string().optional().label(\"About / product\").max(120),\n    addStatus: string().required().label(\"Status\"),\n    addUsers: string().optional().label(\"Number of users\"),\n  });\n\n  const {\n    handleSubmit: handleAddSubmit,\n    isSubmitting: isSubmittingAdd,\n    resetForm: resetAddForm,\n    controlledValues: addControlledValues,\n  } = useForm({ name: \"addForm7\", validationSchema: toTypedSchema(AddSchema) });\n\n  const submitAdd = handleAddSubmit(() => {\n    addOpen.value = false;\n    useSonner(\"Customer added\", {\n      description: `'${addControlledValues.value.addName}' has been added.`,\n    });\n    resetAddForm();\n  });\n\n  // ─── Edit sheet (vee-validate) ─────────────────────────────────────────────────\n  const editOpen = ref(false);\n  const editTarget = ref<CompanyRow | null>(null);\n\n  const EditSchema = object({\n    editName: string().required().label(\"Company name\").min(2).max(100),\n    editDomain: string().required().label(\"Domain\").min(3).max(80),\n    editStatus: string().required().label(\"Status\"),\n  });\n\n  const {\n    handleSubmit: handleEditSubmit,\n    isSubmitting: isSubmittingEdit,\n    setValues,\n  } = useForm<InferType<typeof EditSchema>>({\n    validationSchema: EditSchema,\n  });\n\n  const submitEdit = handleEditSubmit(() => {\n    editOpen.value = false;\n    useSonner(\"Customer updated\", {\n      description: `'${editTarget.value?.name}' has been saved.`,\n    });\n  });\n\n  const openEdit = (company: CompanyRow) => {\n    editTarget.value = company;\n    setValues({\n      editName: company.name,\n      editDomain: company.domain,\n      editStatus: company.status,\n    });\n    editOpen.value = true;\n  };\n\n  // ─── Import CSV dialog ─────────────────────────────────────────────────────────\n  const importOpen = ref(false);\n  const importFile = ref<File | null>(null);\n  const importDragOver = ref(false);\n\n  const onImportFileChange = (e: Event) => {\n    const file = (e.target as HTMLInputElement).files?.[0];\n    if (file) importFile.value = file;\n  };\n\n  const onImportDrop = (e: DragEvent) => {\n    importDragOver.value = false;\n    const file = e.dataTransfer?.files?.[0];\n    if (file && file.name.endsWith(\".csv\")) importFile.value = file;\n  };\n\n  const onImportSubmit = () => {\n    if (!importFile.value) return;\n    importOpen.value = false;\n    useSonner(\"Import started\", {\n      description: `'${importFile.value.name}' is being processed.`,\n    });\n    importFile.value = null;\n  };\n\n  // ─── Delete dialog ─────────────────────────────────────────────────────────────\n  const deleteOpen = ref(false);\n  const deleteTarget = ref<CompanyRow | null>(null);\n\n  const confirmDelete = () => {\n    if (!deleteTarget.value) return;\n    useSonner(`'${deleteTarget.value.name}' removed`, {\n      description: \"The customer has been permanently removed.\",\n    });\n    deleteTarget.value = null;\n  };\n</script>\n","category":"Dashboards","path":"Dashboards/BlockDashboards7.vue","components":["alertdialog","alertdialogaction","alertdialogcancel","alertdialogcontent","alertdialogdescription","alertdialogfooter","alertdialogheader","alertdialogtitle","apexchart","avatar","badge","button","card","checkbox","commanddialog","commandempty","commandgroup","commandinput","commanditem","commandlist","commandseparator","container","dialog","dialogcontent","dialogdescription","dialogfooter","dialogheader","dialogtitle","dropdownmenu","dropdownmenucontent","dropdownmenuitem","dropdownmenulabel","dropdownmenuseparator","dropdownmenutrigger","kbd","pagination","paginationlist","paginationnext","paginationprev","popover","popovercontent","popovertrigger","sheet","sheetclose","sheetcontent","sheetfooter","tanstacktable","tooltip","tooltipcontent","tooltiptrigger","veeinput","veeselect"]},{"name":"Dashboards 8","fileName":"BlockDashboards8.vue","file":"<template>\n  <div class=\"min-h-screen bg-background text-foreground\">\n    <!-- Delete confirmation dialog -->\n    <UiAlertDialog v-model:open=\"deleteOpen\">\n      <UiAlertDialogContent>\n        <UiAlertDialogHeader>\n          <UiAlertDialogTitle title=\"Remove vendor?\" />\n          <UiAlertDialogDescription\n            :description=\"`Are you sure you want to remove '${deleteTarget?.name}'? This action cannot be undone.`\"\n          />\n        </UiAlertDialogHeader>\n        <UiAlertDialogFooter>\n          <UiAlertDialogCancel />\n          <UiAlertDialogAction @click=\"confirmDelete\" />\n        </UiAlertDialogFooter>\n      </UiAlertDialogContent>\n    </UiAlertDialog>\n\n    <!-- Edit vendor sheet -->\n    <UiSheet v-model:open=\"editOpen\">\n      <UiSheetContent\n        side=\"right\"\n        variant=\"floating\"\n        translucent\n        title=\"Edit vendor\"\n        description=\"Update the vendor's details below.\"\n      >\n        <template #content>\n          <form class=\"space-y-5 px-6\" @submit=\"submitEdit\">\n            <fieldset :disabled=\"isSubmittingEdit\" class=\"space-y-5\">\n              <UiVeeInput required label=\"Vendor name\" name=\"editName\" placeholder=\"Acme Corp\" />\n              <UiVeeInput required label=\"Domain\" name=\"editDomain\" placeholder=\"acme.com\" />\n              <UiVeeSelect required label=\"Status\" name=\"editStatus\">\n                <option disabled>Select an option</option>\n                <option value=\"Active\">Active</option>\n                <option value=\"Inactive\">Inactive</option>\n              </UiVeeSelect>\n            </fieldset>\n          </form>\n        </template>\n        <template #footer>\n          <UiSheetFooter class=\"px-6 pb-6\">\n            <UiSheetClose as-child>\n              <UiButton variant=\"outline\" class=\"w-full\">Cancel</UiButton>\n            </UiSheetClose>\n            <UiButton class=\"w-full\" @click=\"submitEdit\">Save changes</UiButton>\n          </UiSheetFooter>\n        </template>\n      </UiSheetContent>\n    </UiSheet>\n\n    <!-- Command search dialog -->\n    <UiCommandDialog\n      v-model:open=\"searchOpen\"\n      title=\"Search vendors\"\n      description=\"Search by vendor name, domain, or category\"\n    >\n      <UiCommandInput placeholder=\"Search vendors...\" />\n      <UiCommandList>\n        <UiCommandEmpty>No results found.</UiCommandEmpty>\n        <UiCommandGroup heading=\"Quick actions\">\n          <UiCommandItem value=\"Export data\">\n            <Icon name=\"heroicons:arrow-down-tray\" />\n            <span>Export data</span>\n          </UiCommandItem>\n          <UiCommandItem value=\"Customize columns\">\n            <Icon name=\"heroicons:adjustments-horizontal\" />\n            <span>Customize columns</span>\n          </UiCommandItem>\n        </UiCommandGroup>\n        <UiCommandSeparator />\n        <UiCommandGroup heading=\"Filter by status\">\n          <UiCommandItem value=\"Active vendors\">\n            <Icon name=\"heroicons:check-circle\" />\n            <span>Active vendors</span>\n          </UiCommandItem>\n          <UiCommandItem value=\"Inactive vendors\">\n            <Icon name=\"heroicons:x-circle\" />\n            <span>Inactive vendors</span>\n          </UiCommandItem>\n        </UiCommandGroup>\n      </UiCommandList>\n      <div\n        class=\"flex items-center gap-5 border-t border-border/70 bg-muted/20 px-4 py-2.5 text-xs text-muted-foreground\"\n      >\n        <span class=\"flex items-center gap-1.5\"><UiKbd>↵</UiKbd> to select</span>\n        <span class=\"flex items-center gap-1.5\"><UiKbd>↑↓</UiKbd> to navigate</span>\n        <span class=\"flex items-center gap-1.5\"><UiKbd>ESC</UiKbd> to close</span>\n      </div>\n    </UiCommandDialog>\n\n    <!-- Sticky header -->\n    <Motion\n      as=\"header\"\n      :initial=\"{ opacity: 0, y: -16 }\"\n      :animate=\"{ opacity: 1, y: 0 }\"\n      :transition=\"{ duration: 0.4, ease: 'easeOut' }\"\n      class=\"sticky top-0 z-10 border-b border-border/70 bg-background/85 backdrop-blur-md\"\n    >\n      <UiContainer class=\"flex min-h-[4rem] items-center justify-between gap-4\">\n        <!-- Logo + nav -->\n        <div class=\"flex items-center gap-5\">\n          <div class=\"flex items-center gap-2.5\">\n            <div\n              class=\"flex size-8 items-center justify-center rounded-lg border border-border/70 bg-muted shadow-xs\"\n            >\n              <div\n                class=\"size-4 rounded-full bg-[radial-gradient(circle_at_35%_35%,rgba(255,255,255,0.95),rgba(255,255,255,0.2)_32%,transparent_34%),linear-gradient(135deg,var(--color-primary),color-mix(in_oklab,var(--color-primary)_40%,white))]\"\n              />\n            </div>\n            <span class=\"font-semibold tracking-tight\">UI Thing</span>\n          </div>\n\n          <!-- Mobile nav popover -->\n          <UiPopover class=\"lg:hidden\">\n            <UiPopoverTrigger as-child>\n              <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"lg:hidden\">\n                <Icon name=\"heroicons:bars-3\" class=\"size-5\" />\n              </UiButton>\n            </UiPopoverTrigger>\n            <UiPopoverContent align=\"start\" class=\"w-48 p-1\">\n              <UiButton\n                v-for=\"item in navItems\"\n                :key=\"item.label\"\n                variant=\"ghost\"\n                size=\"sm\"\n                class=\"w-full justify-start\"\n                :class=\"\n                  item.active\n                    ? 'bg-muted text-foreground shadow-xs hover:bg-muted'\n                    : 'text-muted-foreground'\n                \"\n              >\n                {{ item.label }}\n              </UiButton>\n            </UiPopoverContent>\n          </UiPopover>\n\n          <!-- Desktop nav -->\n          <nav class=\"hidden items-center gap-1 lg:flex\">\n            <UiButton\n              v-for=\"item in navItems\"\n              :key=\"item.label\"\n              variant=\"ghost\"\n              size=\"sm\"\n              :class=\"\n                item.active\n                  ? 'bg-muted text-foreground shadow-xs hover:bg-muted'\n                  : 'text-muted-foreground'\n              \"\n            >\n              {{ item.label }}\n            </UiButton>\n          </nav>\n        </div>\n\n        <!-- Right actions -->\n        <div class=\"flex items-center gap-1\">\n          <UiTooltip>\n            <UiTooltipTrigger as-child>\n              <UiButton\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                class=\"rounded-full\"\n                @click=\"searchOpen = true\"\n              >\n                <Icon name=\"heroicons:magnifying-glass\" class=\"size-5 text-muted-foreground\" />\n              </UiButton>\n            </UiTooltipTrigger>\n            <UiTooltipContent><p>Search</p></UiTooltipContent>\n          </UiTooltip>\n\n          <UiTooltip>\n            <UiDropdownMenu>\n              <UiTooltipTrigger as-child>\n                <UiDropdownMenuTrigger as-child>\n                  <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full\">\n                    <Icon name=\"heroicons:cog-6-tooth\" class=\"size-5 text-muted-foreground\" />\n                  </UiButton>\n                </UiDropdownMenuTrigger>\n              </UiTooltipTrigger>\n              <UiTooltipContent><p>Settings</p></UiTooltipContent>\n              <UiDropdownMenuContent align=\"end\" class=\"w-52\">\n                <UiDropdownMenuLabel>Settings</UiDropdownMenuLabel>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem icon=\"heroicons:user\" title=\"Account settings\" />\n                <UiDropdownMenuItem icon=\"heroicons:swatch\" title=\"Appearance\" />\n                <UiDropdownMenuItem icon=\"heroicons:bell\" title=\"Notifications\" />\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem\n                  variant=\"destructive\"\n                  icon=\"heroicons:arrow-right-on-rectangle\"\n                  title=\"Sign out\"\n                />\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiTooltip>\n\n          <UiTooltip>\n            <UiDropdownMenu>\n              <UiTooltipTrigger as-child>\n                <UiDropdownMenuTrigger as-child>\n                  <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full\">\n                    <Icon name=\"heroicons:bell\" class=\"size-5 text-muted-foreground\" />\n                  </UiButton>\n                </UiDropdownMenuTrigger>\n              </UiTooltipTrigger>\n              <UiTooltipContent><p>Notifications</p></UiTooltipContent>\n              <UiDropdownMenuContent align=\"end\" class=\"w-96\">\n                <UiDropdownMenuLabel class=\"flex items-center justify-between\">\n                  <span>Notifications</span>\n                  <UiBadge variant=\"secondary\" size=\"sm\">2 new</UiBadge>\n                </UiDropdownMenuLabel>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem\n                  icon=\"heroicons:shield-check\"\n                  title=\"Warpspeed passed security review\"\n                >\n                  <template #shortcut>2h ago</template>\n                </UiDropdownMenuItem>\n                <UiDropdownMenuItem\n                  icon=\"heroicons:arrow-trending-down\"\n                  title=\"CloudWatch rating dropped below 40\"\n                >\n                  <template #shortcut>5h ago</template>\n                </UiDropdownMenuItem>\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiTooltip>\n\n          <UiTooltip>\n            <UiDropdownMenu>\n              <UiTooltipTrigger as-child>\n                <UiDropdownMenuTrigger as-child>\n                  <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full p-0\">\n                    <UiAvatar\n                      src=\"https://i.pravatar.cc/150?img=47\"\n                      alt=\"Current user\"\n                      fallback=\"OR\"\n                      class=\"size-8 cursor-pointer\"\n                    />\n                  </UiButton>\n                </UiDropdownMenuTrigger>\n              </UiTooltipTrigger>\n              <UiTooltipContent><p>Account</p></UiTooltipContent>\n              <UiDropdownMenuContent align=\"end\" class=\"w-52\">\n                <UiDropdownMenuLabel>\n                  <div class=\"flex flex-col\">\n                    <p class=\"text-sm font-medium\">Olivia Rhye</p>\n                    <p class=\"text-xs text-muted-foreground\">olivia@ui-thing.com</p>\n                  </div>\n                </UiDropdownMenuLabel>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem icon=\"heroicons:user\" title=\"Profile\" />\n                <UiDropdownMenuItem icon=\"heroicons:cog-6-tooth\" title=\"Settings\" />\n                <UiDropdownMenuItem icon=\"heroicons:credit-card\" title=\"Billing\" />\n                <UiDropdownMenuItem icon=\"heroicons:users\" title=\"Team\" />\n                <UiDropdownMenuItem icon=\"heroicons:shield-check\" title=\"Security\" />\n                <UiDropdownMenuItem icon=\"heroicons:bell\" title=\"Notification preferences\" />\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem icon=\"heroicons:question-mark-circle\" title=\"Help & support\" />\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem\n                  variant=\"destructive\"\n                  icon=\"heroicons:arrow-right-on-rectangle\"\n                  title=\"Sign out\"\n                />\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiTooltip>\n        </div>\n      </UiContainer>\n    </Motion>\n\n    <!-- Page content -->\n    <UiContainer class=\"space-y-6 py-8\">\n      <!-- Page header -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 12 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.1, ease: 'easeOut' }\"\n        class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\"\n      >\n        <h1 class=\"text-2xl font-bold tracking-tight\">Organization overview</h1>\n\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <!-- Search icon (desktop only) -->\n          <UiTooltip>\n            <UiTooltipTrigger as-child>\n              <UiButton\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                class=\"hidden sm:flex\"\n                @click=\"searchOpen = true\"\n              >\n                <Icon name=\"heroicons:magnifying-glass\" class=\"size-4 text-muted-foreground\" />\n              </UiButton>\n            </UiTooltipTrigger>\n            <UiTooltipContent><p>Search vendors</p></UiTooltipContent>\n          </UiTooltip>\n\n          <!-- Filters (desktop) -->\n          <UiButton variant=\"outline\" size=\"sm\" class=\"hidden gap-2 sm:flex\">\n            <Icon name=\"heroicons:adjustments-horizontal\" class=\"size-4\" />\n            Filters\n          </UiButton>\n\n          <UiButton variant=\"outline\" size=\"sm\" class=\"gap-2\">\n            <Icon name=\"heroicons:squares-2x2\" class=\"size-4\" />\n            Customize\n          </UiButton>\n\n          <UiButton variant=\"outline\" size=\"sm\" class=\"gap-2\">\n            <Icon name=\"heroicons:arrow-up-tray\" class=\"size-4\" />\n            Export\n          </UiButton>\n        </div>\n      </Motion>\n\n      <!-- Charts row -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 12 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.18, ease: 'easeOut' }\"\n        class=\"grid gap-4 lg:grid-cols-[5fr_7fr]\"\n      >\n        <!-- Vendor breakdown — radar chart -->\n        <div class=\"overflow-hidden rounded-xl border border-border/70 bg-card shadow-xs\">\n          <div class=\"flex items-center justify-between border-b border-border/60 px-5 py-4\">\n            <h2 class=\"text-sm font-semibold\">Vendor breakdown</h2>\n            <UiTooltip>\n              <UiDropdownMenu>\n                <UiTooltipTrigger as-child>\n                  <UiDropdownMenuTrigger as-child>\n                    <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"-mr-1 text-muted-foreground\">\n                      <Icon name=\"heroicons:ellipsis-vertical\" class=\"size-4\" />\n                    </UiButton>\n                  </UiDropdownMenuTrigger>\n                </UiTooltipTrigger>\n                <UiTooltipContent><p>Options</p></UiTooltipContent>\n                <UiDropdownMenuContent align=\"end\">\n                  <UiDropdownMenuItem icon=\"heroicons:arrow-path\" title=\"Refresh\" />\n                  <UiDropdownMenuItem icon=\"heroicons:arrow-down-tray\" title=\"Export\" />\n                </UiDropdownMenuContent>\n              </UiDropdownMenu>\n            </UiTooltip>\n          </div>\n\n          <div class=\"p-2\">\n            <UiApexchart type=\"radar\" height=\"300\" :series=\"radarSeries\" :options=\"radarOptions\" />\n          </div>\n\n          <div class=\"border-t border-border/60 px-5 py-3\">\n            <UiButton variant=\"outline\" size=\"sm\" class=\"w-full\">View full report</UiButton>\n          </div>\n        </div>\n\n        <!-- Average vendor rating — stacked bar chart -->\n        <div class=\"overflow-hidden rounded-xl border border-border/70 bg-card shadow-xs\">\n          <div class=\"flex items-start justify-between border-b border-border/60 px-5 py-4\">\n            <div>\n              <h2 class=\"text-sm font-semibold\">Average vendor rating</h2>\n              <p class=\"mt-0.5 text-xs text-muted-foreground\">\n                Track how your rating compares to your industry average.\n              </p>\n            </div>\n            <UiTooltip>\n              <UiDropdownMenu>\n                <UiTooltipTrigger as-child>\n                  <UiDropdownMenuTrigger as-child>\n                    <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"-mr-1 text-muted-foreground\">\n                      <Icon name=\"heroicons:ellipsis-vertical\" class=\"size-4\" />\n                    </UiButton>\n                  </UiDropdownMenuTrigger>\n                </UiTooltipTrigger>\n                <UiTooltipContent><p>Options</p></UiTooltipContent>\n                <UiDropdownMenuContent align=\"end\">\n                  <UiDropdownMenuItem icon=\"heroicons:arrow-path\" title=\"Refresh\" />\n                  <UiDropdownMenuItem icon=\"heroicons:arrow-down-tray\" title=\"Export\" />\n                </UiDropdownMenuContent>\n              </UiDropdownMenu>\n            </UiTooltip>\n          </div>\n\n          <UiApexchart type=\"bar\" height=\"340\" :series=\"barSeries\" :options=\"barOptions\" />\n        </div>\n      </Motion>\n\n      <!-- Vendor movements section header -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 8 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.26, ease: 'easeOut' }\"\n        class=\"flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between\"\n      >\n        <div>\n          <h2 class=\"text-lg font-bold tracking-tight\">Vendor movements</h2>\n          <p class=\"mt-0.5 text-sm text-muted-foreground\">\n            Keep track of vendors and their security ratings.\n          </p>\n        </div>\n\n        <!-- Search input (desktop) -->\n        <div class=\"relative hidden w-64 sm:block\">\n          <Icon\n            name=\"heroicons:magnifying-glass\"\n            class=\"absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground\"\n          />\n          <input\n            v-model=\"tableSearch\"\n            type=\"text\"\n            placeholder=\"Search\"\n            class=\"h-9 w-full rounded-lg border border-border/70 bg-card pr-12 pl-9 text-sm text-foreground shadow-xs transition-colors placeholder:text-muted-foreground focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none\"\n          />\n          <div class=\"absolute top-1/2 right-2.5 -translate-y-1/2\">\n            <UiKbd class=\"text-[10px]\">⌘K</UiKbd>\n          </div>\n        </div>\n      </Motion>\n\n      <!-- Mobile: search + filters row -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 4 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.3, ease: 'easeOut' }\"\n        class=\"flex flex-col gap-2 sm:hidden\"\n      >\n        <div class=\"relative\">\n          <Icon\n            name=\"heroicons:magnifying-glass\"\n            class=\"absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground\"\n          />\n          <input\n            v-model=\"tableSearch\"\n            type=\"text\"\n            placeholder=\"Search\"\n            class=\"h-9 w-full rounded-lg border border-border/70 bg-card pr-12 pl-9 text-sm text-foreground shadow-xs transition-colors placeholder:text-muted-foreground focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none\"\n          />\n          <div class=\"absolute top-1/2 right-2.5 -translate-y-1/2\">\n            <UiKbd class=\"text-[10px]\">⌘K</UiKbd>\n          </div>\n        </div>\n        <UiButton variant=\"outline\" size=\"sm\" class=\"w-full gap-2\">\n          <Icon name=\"heroicons:adjustments-horizontal\" class=\"size-4\" />\n          Filters\n        </UiButton>\n      </Motion>\n\n      <!-- Vendor table -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 16 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.33, ease: 'easeOut' }\"\n      >\n        <UiCard class=\"gap-0 overflow-hidden border-border/70 py-0 shadow-xs\">\n          <UiTanStackTable\n            :data=\"filteredVendors\"\n            :columns=\"vendorColumns\"\n            :show-rows-per-page=\"false\"\n            :show-page-info=\"false\"\n            :show-pagination=\"false\"\n            :show-selected-count=\"false\"\n            :show-footer=\"true\"\n            :loading=\"vendorsPending\"\n            :table-options=\"{ enableRowSelection: true }\"\n          >\n            <!-- Select all -->\n            <template #select-header=\"{ table }\">\n              <UiCheckbox\n                aria-label=\"Select all\"\n                :model-value=\"\n                  table.getIsAllPageRowsSelected() ||\n                  (table.getIsSomePageRowsSelected() && 'indeterminate')\n                \"\n                @update:model-value=\"table.toggleAllPageRowsSelected(!!$event)\"\n              />\n            </template>\n\n            <template #select-cell=\"{ row }\">\n              <UiCheckbox\n                :aria-label=\"`Select ${row.original.name}`\"\n                :model-value=\"row.getIsSelected()\"\n                @update:model-value=\"row.toggleSelected(!!$event)\"\n              />\n            </template>\n\n            <!-- Vendor cell: avatar + name + domain -->\n            <template #vendor-cell=\"{ row }\">\n              <div class=\"flex items-center gap-3\">\n                <div\n                  class=\"flex size-10 shrink-0 items-center justify-center rounded-full\"\n                  :style=\"{ backgroundColor: row.original.logoColor }\"\n                >\n                  <Icon :name=\"row.original.logoIcon\" class=\"size-5 text-white\" />\n                </div>\n                <div class=\"flex min-w-0 flex-col\">\n                  <span class=\"truncate text-sm font-semibold\">{{ row.original.name }}</span>\n                  <span class=\"truncate text-xs text-muted-foreground\">{{\n                    row.original.domain\n                  }}</span>\n                </div>\n              </div>\n            </template>\n\n            <!-- Rating cell: progress bar + number + trend badge -->\n            <template #rating-cell=\"{ row }\">\n              <div class=\"flex items-center gap-3\">\n                <div class=\"h-1.5 w-32 overflow-hidden rounded-full bg-muted\">\n                  <div\n                    class=\"h-full rounded-full transition-all\"\n                    :style=\"{\n                      width: `${row.original.rating}%`,\n                      backgroundColor: 'var(--color-primary)',\n                    }\"\n                  />\n                </div>\n                <span class=\"w-6 shrink-0 text-sm font-medium tabular-nums\">{{\n                  row.original.rating\n                }}</span>\n                <span\n                  class=\"flex shrink-0 items-center gap-0.5 rounded-full px-1.5 py-0.5 text-xs font-medium\"\n                  :class=\"\n                    row.original.trendPositive\n                      ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/60 dark:text-emerald-400'\n                      : 'bg-red-50 text-red-700 dark:bg-red-950/60 dark:text-red-400'\n                  \"\n                >\n                  <Icon\n                    :name=\"\n                      row.original.trendPositive ? 'heroicons:arrow-up' : 'heroicons:arrow-down'\n                    \"\n                    class=\"size-2.5\"\n                  />\n                  {{ Math.abs(row.original.trendPct) }}%\n                </span>\n              </div>\n            </template>\n\n            <!-- Last assessed cell -->\n            <template #lastAssessed-cell=\"{ row }\">\n              <span class=\"text-sm text-muted-foreground\">{{ row.original.lastAssessed }}</span>\n            </template>\n\n            <!-- Categories cell: status + tags + overflow -->\n            <template #categories-cell=\"{ row }\">\n              <div class=\"flex flex-wrap items-center gap-1.5\">\n                <!-- Status badge with dot -->\n                <span\n                  class=\"flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs font-medium\"\n                  :class=\"\n                    row.original.status === 'Active'\n                      ? 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950/50 dark:text-emerald-400'\n                      : 'border-border/70 bg-muted/50 text-muted-foreground'\n                  \"\n                >\n                  <span\n                    class=\"size-1.5 rounded-full\"\n                    :class=\"\n                      row.original.status === 'Active' ? 'bg-emerald-500' : 'bg-muted-foreground'\n                    \"\n                  />\n                  {{ row.original.status }}\n                </span>\n\n                <!-- Category tags (up to 2 visible) -->\n                <span\n                  v-for=\"cat in row.original.categories.slice(0, 2)\"\n                  :key=\"cat\"\n                  class=\"rounded-full border border-border/60 bg-card px-2 py-0.5 text-xs font-medium text-foreground\"\n                >\n                  {{ cat }}\n                </span>\n\n                <!-- Overflow count -->\n                <span\n                  v-if=\"row.original.categories.length > 2\"\n                  class=\"rounded-full border border-border/60 bg-card px-2 py-0.5 text-xs font-medium text-muted-foreground\"\n                >\n                  +{{ row.original.categories.length - 2 }}\n                </span>\n              </div>\n            </template>\n\n            <!-- Actions cell -->\n            <template #actions-cell=\"{ row }\">\n              <div class=\"flex items-center gap-1\">\n                <UiTooltip>\n                  <UiTooltipTrigger as-child>\n                    <UiButton\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      class=\"text-muted-foreground hover:text-destructive\"\n                      aria-label=\"Delete vendor\"\n                      @click=\"\n                        () => {\n                          deleteTarget = row.original;\n                          deleteOpen = true;\n                        }\n                      \"\n                    >\n                      <Icon name=\"heroicons:trash\" class=\"size-4\" />\n                    </UiButton>\n                  </UiTooltipTrigger>\n                  <UiTooltipContent><p>Delete vendor</p></UiTooltipContent>\n                </UiTooltip>\n                <UiTooltip>\n                  <UiTooltipTrigger as-child>\n                    <UiButton\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      class=\"text-muted-foreground\"\n                      aria-label=\"Edit vendor\"\n                      @click=\"openEdit(row.original)\"\n                    >\n                      <Icon name=\"heroicons:pencil\" class=\"size-4\" />\n                    </UiButton>\n                  </UiTooltipTrigger>\n                  <UiTooltipContent><p>Edit vendor</p></UiTooltipContent>\n                </UiTooltip>\n              </div>\n            </template>\n\n            <!-- Footer with pagination -->\n            <template #footer=\"{ table }\">\n              <div\n                class=\"flex w-full flex-col gap-3 border-t border-border/60 px-5 py-4 sm:flex-row sm:items-center sm:justify-between\"\n              >\n                <p class=\"shrink-0 text-sm text-muted-foreground\">\n                  <template v-if=\"table.getFilteredSelectedRowModel().rows.length > 0\">\n                    {{ table.getFilteredSelectedRowModel().rows.length }} selected\n                  </template>\n                </p>\n\n                <!-- Desktop pagination -->\n                <UiPagination\n                  class=\"mx-0! hidden! justify-end! sm:flex!\"\n                  :total=\"filteredVendors.length\"\n                  :items-per-page=\"10\"\n                  :sibling-count=\"1\"\n                  :page=\"table.getState().pagination.pageIndex + 1\"\n                  @update:page=\"(p) => table.setPageIndex(p - 1)\"\n                >\n                  <UiPaginationList class=\"w-full justify-between gap-1\">\n                    <UiPaginationPrev as-child>\n                      <UiButton variant=\"outline\" size=\"sm\">\n                        <Icon name=\"heroicons:chevron-left\" class=\"size-4\" />\n                        Previous\n                      </UiButton>\n                    </UiPaginationPrev>\n                    <div class=\"text-sm text-muted-foreground\">\n                      Page\n                      <span class=\"font-medium text-foreground\">{{\n                        table.getState().pagination.pageIndex + 1\n                      }}</span>\n                      of\n                      <span class=\"font-medium text-foreground\">{{ table.getPageCount() }}</span>\n                    </div>\n                    <UiPaginationNext as-child>\n                      <UiButton variant=\"outline\" size=\"sm\">\n                        Next\n                        <Icon name=\"heroicons:chevron-right\" class=\"size-4\" />\n                      </UiButton>\n                    </UiPaginationNext>\n                  </UiPaginationList>\n                </UiPagination>\n\n                <!-- Mobile pagination -->\n                <UiPagination\n                  class=\"mx-0! sm:hidden!\"\n                  :total=\"filteredVendors.length\"\n                  :items-per-page=\"10\"\n                  :page=\"table.getState().pagination.pageIndex + 1\"\n                  @update:page=\"(p) => table.setPageIndex(p - 1)\"\n                >\n                  <UiPaginationList class=\"w-full justify-between\">\n                    <UiPaginationPrev as-child>\n                      <UiButton variant=\"outline\" size=\"icon-sm\">\n                        <Icon name=\"heroicons:arrow-left\" class=\"size-4\" />\n                      </UiButton>\n                    </UiPaginationPrev>\n                    <span class=\"text-sm text-muted-foreground\">\n                      Page {{ table.getState().pagination.pageIndex + 1 }} of\n                      {{ table.getPageCount() }}\n                    </span>\n                    <UiPaginationNext as-child>\n                      <UiButton variant=\"outline\" size=\"icon-sm\">\n                        <Icon name=\"heroicons:arrow-right\" class=\"size-4\" />\n                      </UiButton>\n                    </UiPaginationNext>\n                  </UiPaginationList>\n                </UiPagination>\n              </div>\n            </template>\n          </UiTanStackTable>\n        </UiCard>\n      </Motion>\n    </UiContainer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { faker } from \"@faker-js/faker\";\n  import type { ColumnDef } from \"@tanstack/vue-table\";\n  import type { ApexOptions } from \"apexcharts\";\n  import { Motion } from \"motion-v\";\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  // ─── Navigation ────────────────────────────────────────────────────────────────\n  const navItems = [\n    { label: \"Home\", active: false },\n    { label: \"Dashboard\", active: true },\n    { label: \"Projects\", active: false },\n    { label: \"Tasks\", active: false },\n    { label: \"Reporting\", active: false },\n    { label: \"Users\", active: false },\n  ];\n\n  // ─── Search dialog ─────────────────────────────────────────────────────────────\n  const searchOpen = ref(false);\n  const handleKeydown = (e: KeyboardEvent) => {\n    if (e.key === \"Escape\") searchOpen.value = false;\n    if ((e.metaKey || e.ctrlKey) && e.key === \"k\") {\n      e.preventDefault();\n      searchOpen.value = true;\n    }\n  };\n  onMounted(() => document.addEventListener(\"keydown\", handleKeydown));\n  onUnmounted(() => document.removeEventListener(\"keydown\", handleKeydown));\n\n  // ─── Radar chart (Vendor breakdown) ───────────────────────────────────────────\n  const radarSeries = [\n    { name: \"2025\", data: [850, 750, 620, 380, 480, 420, 680] },\n    { name: \"2024\", data: [680, 900, 480, 340, 320, 370, 560] },\n    { name: \"2023\", data: [580, 620, 730, 480, 430, 580, 480] },\n  ];\n\n  const radarOptions: ApexOptions = {\n    chart: {\n      type: \"radar\",\n      background: \"transparent\",\n      parentHeightOffset: 0,\n      toolbar: { show: false },\n    },\n    colors: [\"#0ea5e9\", \"#f43f5e\", \"#a78bfa\"],\n    fill: { opacity: 0.15 },\n    stroke: { width: 2 },\n    markers: { size: 0 },\n    xaxis: {\n      categories: [\"Tier 1\", \"Tier 2\", \"Tier 3\", \"Tier 4\", \"Tier 5\", \"Tier 6\", \"Tier 7\"],\n    },\n    yaxis: { show: true, tickAmount: 4, min: 0, max: 1000 },\n    legend: {\n      show: true,\n      position: \"bottom\",\n      horizontalAlign: \"center\",\n      fontSize: \"12px\",\n    },\n    tooltip: { y: { formatter: (v: number) => v.toLocaleString() } },\n  };\n\n  // ─── Stacked bar chart (Average vendor rating) ─────────────────────────────────\n  const months = [\n    \"Jan\",\n    \"Feb\",\n    \"Mar\",\n    \"Apr\",\n    \"May\",\n    \"Jun\",\n    \"Jul\",\n    \"Aug\",\n    \"Sep\",\n    \"Oct\",\n    \"Nov\",\n    \"Dec\",\n  ];\n\n  const barSeries = [\n    { name: \"Your rating\", data: [58, 55, 64, 56, 62, 62, 54, 58, 60, 62, 64, 60] },\n    { name: \"Industry Average\", data: [24, 22, 16, 22, 18, 18, 22, 18, 16, 16, 20, 14] },\n  ];\n\n  const barOptions: ApexOptions = {\n    chart: {\n      type: \"bar\",\n      stacked: true,\n      background: \"transparent\",\n      parentHeightOffset: 0,\n      toolbar: { show: false },\n    },\n    colors: [\"var(--primary)\", \"#cbd5e1\"],\n    plotOptions: {\n      bar: { borderRadius: 2, columnWidth: \"55%\", borderRadiusApplication: \"end\" },\n    },\n    dataLabels: { enabled: false },\n    xaxis: {\n      categories: months,\n      axisBorder: { show: false },\n      axisTicks: { show: false },\n      title: { text: \"Month\", offsetY: -4, style: { fontSize: \"11px\", fontWeight: 400 } },\n    },\n    yaxis: {\n      min: 0,\n      max: 100,\n      tickAmount: 5,\n      title: { text: \"Security rating\", style: { fontSize: \"11px\", fontWeight: 400 } },\n    },\n    grid: {\n      strokeDashArray: 4,\n      xaxis: { lines: { show: false } },\n      yaxis: { lines: { show: true } },\n      padding: { left: 8, right: 8 },\n    },\n    legend: {\n      show: true,\n      position: \"top\",\n      horizontalAlign: \"right\",\n      markers: { size: 7, shape: \"circle\" },\n    },\n    tooltip: {\n      y: { formatter: (v: number) => `${v} / 100` },\n    },\n  };\n\n  // ─── Vendor table ───────────────────────────────────────────────────────────────\n  type VendorRow = {\n    id: number;\n    name: string;\n    domain: string;\n    logoColor: string;\n    logoIcon: string;\n    rating: number;\n    trendPct: number;\n    trendPositive: boolean;\n    lastAssessed: string;\n    status: \"Active\" | \"Inactive\";\n    categories: string[];\n  };\n\n  const logoColors = [\n    \"#6366f1\",\n    \"#0ea5e9\",\n    \"#1a1a2e\",\n    \"#38bdf8\",\n    \"#6d28d9\",\n    \"#0f172a\",\n    \"#10b981\",\n    \"#f59e0b\",\n    \"#ef4444\",\n    \"#ec4899\",\n  ];\n\n  const logoIcons = [\n    \"heroicons:cpu-chip\",\n    \"heroicons:cube-transparent\",\n    \"heroicons:bolt\",\n    \"heroicons:cloud\",\n    \"heroicons:eye\",\n    \"heroicons:signal\",\n    \"heroicons:arrow-path\",\n    \"heroicons:globe-alt\",\n    \"heroicons:shield-check\",\n    \"heroicons:chart-bar\",\n  ];\n\n  const allCategories = [\n    \"Customer data\",\n    \"Business data\",\n    \"Database access\",\n    \"Salesforce\",\n    \"Financials\",\n    \"Admin\",\n    \"HR data\",\n    \"Legal\",\n  ];\n\n  const assessmentDates = [\n    \"22 Jan 2025\",\n    \"20 Jan 2025\",\n    \"24 Jan 2025\",\n    \"26 Jan 2025\",\n    \"18 Jan 2025\",\n    \"28 Jan 2025\",\n    \"16 Jan 2025\",\n    \"14 Jan 2025\",\n    \"30 Jan 2025\",\n    \"12 Jan 2025\",\n  ];\n\n  const vendorNames = [\n    \"Ephemeral\",\n    \"Stack3d Lab\",\n    \"Warpspeed\",\n    \"CloudWatch\",\n    \"ContrastAI\",\n    \"Convergence\",\n    \"Sisyphus\",\n    \"NovaSec\",\n    \"DataForge\",\n    \"Axiom\",\n    \"Meridian\",\n    \"Vaultix\",\n    \"TrustLayer\",\n    \"CipherBase\",\n    \"Sentinel\",\n    \"Gridlock\",\n    \"Helios\",\n    \"Prism\",\n    \"Velox\",\n    \"Ironclad\",\n  ];\n\n  const vendorDomains = [\n    \"ephemeral.io\",\n    \"stack3dlab.com\",\n    \"getwarpspeed.com\",\n    \"cloudwatch.app\",\n    \"contrastai.com\",\n    \"convergence.io\",\n    \"sisyphus.com\",\n    \"novasec.io\",\n    \"dataforge.co\",\n    \"axiom.xyz\",\n    \"meridian.ai\",\n    \"vaultix.com\",\n    \"trustlayer.io\",\n    \"cipherbase.dev\",\n    \"sentinel.app\",\n    \"gridlock.io\",\n    \"helios.ai\",\n    \"prism.co\",\n    \"velox.app\",\n    \"ironclad.io\",\n  ];\n\n  const createVendor = (i: number): VendorRow => {\n    faker.seed(i + 800);\n    const trendPct = faker.number.int({ min: -10, max: 10 });\n    const catCount = faker.number.int({ min: 2, max: 5 });\n    const shuffled = [...allCategories].sort(() => faker.number.float() - 0.5);\n    return {\n      id: i + 1,\n      name: vendorNames[i % vendorNames.length]!,\n      domain: vendorDomains[i % vendorDomains.length]!,\n      logoColor: logoColors[i % logoColors.length]!,\n      logoIcon: logoIcons[i % logoIcons.length]!,\n      rating: faker.number.int({ min: 28, max: 95 }),\n      trendPct,\n      trendPositive: trendPct >= 0,\n      lastAssessed: assessmentDates[i % assessmentDates.length]!,\n      status: i % 6 === 4 ? \"Inactive\" : \"Active\",\n      categories: shuffled.slice(0, catCount),\n    };\n  };\n\n  const { data: vendorsData, pending: vendorsPending } = await useAsyncData<VendorRow[]>(\n    \"block-dashboards8-vendors\",\n    async () => Array.from({ length: 100 }, (_, i) => createVendor(i)),\n    { default: () => [] }\n  );\n\n  const vendors = computed(() => vendorsData.value ?? []);\n\n  const tableSearch = ref(\"\");\n\n  const filteredVendors = computed(() => {\n    const q = tableSearch.value.trim().toLowerCase();\n    if (!q) return vendors.value;\n    return vendors.value.filter(\n      (v) =>\n        v.name.toLowerCase().includes(q) ||\n        v.domain.toLowerCase().includes(q) ||\n        v.status.toLowerCase().includes(q) ||\n        v.categories.some((c) => c.toLowerCase().includes(q))\n    );\n  });\n\n  // ─── Table columns ──────────────────────────────────────────────────────────────\n  const vendorColumns: ColumnDef<VendorRow>[] = [\n    {\n      id: \"select\",\n      header: \"\",\n      enableSorting: false,\n      enableHiding: false,\n      meta: { class: { th: \"w-12\", td: \"w-12\" } },\n    },\n    {\n      id: \"vendor\",\n      accessorKey: \"name\",\n      header: \"Vendor\",\n    },\n    {\n      id: \"rating\",\n      accessorKey: \"rating\",\n      header: \"Rating\",\n      meta: { class: { th: \"min-w-[220px]\", td: \"min-w-[220px]\" } },\n    },\n    {\n      id: \"lastAssessed\",\n      accessorKey: \"lastAssessed\",\n      header: \"Last assessed\",\n      enableSorting: false,\n      meta: { class: { th: \"hidden md:table-cell\", td: \"hidden md:table-cell\" } },\n    },\n    {\n      id: \"categories\",\n      accessorKey: \"categories\",\n      header: \"Categories\",\n      enableSorting: false,\n      meta: { class: { th: \"hidden lg:table-cell\", td: \"hidden lg:table-cell\" } },\n    },\n    {\n      id: \"actions\",\n      header: \"\",\n      enableSorting: false,\n      enableHiding: false,\n      meta: { class: { th: \"w-20\", td: \"w-20\" } },\n    },\n  ];\n\n  // ─── Edit sheet (vee-validate) ──────────────────────────────────────────────────\n  const editOpen = ref(false);\n  const editTarget = ref<VendorRow | null>(null);\n\n  const EditSchema = object({\n    editName: string().required().label(\"Vendor name\").min(2).max(100),\n    editDomain: string().required().label(\"Domain\").min(3).max(80),\n    editStatus: string().required().label(\"Status\"),\n  });\n\n  const {\n    handleSubmit: handleEditSubmit,\n    isSubmitting: isSubmittingEdit,\n    setValues,\n  } = useForm<InferType<typeof EditSchema>>({ validationSchema: EditSchema });\n\n  const submitEdit = handleEditSubmit(() => {\n    editOpen.value = false;\n    useSonner(\"Vendor updated\", {\n      description: `'${editTarget.value?.name}' has been saved.`,\n    });\n  });\n\n  const openEdit = (vendor: VendorRow) => {\n    editTarget.value = vendor;\n    setValues({\n      editName: vendor.name,\n      editDomain: vendor.domain,\n      editStatus: vendor.status,\n    });\n    editOpen.value = true;\n  };\n\n  // ─── Delete dialog ───────────────────────────────────────────────────────────────\n  const deleteOpen = ref(false);\n  const deleteTarget = ref<VendorRow | null>(null);\n\n  const confirmDelete = () => {\n    if (!deleteTarget.value) return;\n    useSonner(`'${deleteTarget.value.name}' removed`, {\n      description: \"The vendor has been permanently removed.\",\n    });\n    deleteTarget.value = null;\n  };\n</script>\n","category":"Dashboards","path":"Dashboards/BlockDashboards8.vue","components":["alertdialog","alertdialogaction","alertdialogcancel","alertdialogcontent","alertdialogdescription","alertdialogfooter","alertdialogheader","alertdialogtitle","apexchart","avatar","badge","button","card","checkbox","commanddialog","commandempty","commandgroup","commandinput","commanditem","commandlist","commandseparator","container","dropdownmenu","dropdownmenucontent","dropdownmenuitem","dropdownmenulabel","dropdownmenuseparator","dropdownmenutrigger","kbd","pagination","paginationlist","paginationnext","paginationprev","popover","popovercontent","popovertrigger","sheet","sheetclose","sheetcontent","sheetfooter","tanstacktable","tooltip","tooltipcontent","tooltiptrigger","veeinput","veeselect"]},{"name":"Dashboards 9","fileName":"BlockDashboards9.vue","file":"<template>\n  <div class=\"min-h-screen bg-background text-foreground\">\n    <!-- Delete confirmation dialog -->\n    <UiAlertDialog v-model:open=\"deleteOpen\">\n      <UiAlertDialogContent>\n        <UiAlertDialogHeader>\n          <UiAlertDialogTitle title=\"Remove vendor?\" />\n          <UiAlertDialogDescription\n            :description=\"`Are you sure you want to remove '${deleteTarget?.name}'? This action cannot be undone.`\"\n          />\n        </UiAlertDialogHeader>\n        <UiAlertDialogFooter>\n          <UiAlertDialogCancel />\n          <UiAlertDialogAction @click=\"confirmDelete\" />\n        </UiAlertDialogFooter>\n      </UiAlertDialogContent>\n    </UiAlertDialog>\n\n    <!-- Add vendor sheet -->\n    <UiSheet v-model:open=\"addOpen\">\n      <UiSheetContent\n        side=\"right\"\n        variant=\"floating\"\n        translucent\n        title=\"Add vendor\"\n        description=\"Fill in the details to add a new vendor.\"\n      >\n        <template #content>\n          <form class=\"space-y-5 px-6\" @submit=\"submitAdd\">\n            <fieldset :disabled=\"isSubmittingAdd\" class=\"space-y-5\">\n              <UiVeeInput required label=\"Vendor name\" name=\"addName\" placeholder=\"Acme Corp\" />\n              <UiVeeInput required label=\"Domain\" name=\"addDomain\" placeholder=\"acme.com\" />\n              <UiVeeSelect required label=\"Status\" name=\"addStatus\">\n                <option disabled>Select an option</option>\n                <option value=\"Active\">Active</option>\n                <option value=\"Inactive\">Inactive</option>\n              </UiVeeSelect>\n            </fieldset>\n          </form>\n        </template>\n        <template #footer>\n          <UiSheetFooter class=\"px-6 pb-6\">\n            <UiSheetClose as-child>\n              <UiButton variant=\"outline\" class=\"w-full\">Cancel</UiButton>\n            </UiSheetClose>\n            <UiButton class=\"w-full\" :disabled=\"isSubmittingAdd\" @click=\"submitAdd\">\n              Add vendor\n            </UiButton>\n          </UiSheetFooter>\n        </template>\n      </UiSheetContent>\n    </UiSheet>\n\n    <!-- Edit vendor sheet -->\n    <UiSheet v-model:open=\"editOpen\">\n      <UiSheetContent\n        side=\"right\"\n        variant=\"floating\"\n        translucent\n        title=\"Edit vendor\"\n        description=\"Update the vendor's details below.\"\n      >\n        <template #content>\n          <form class=\"space-y-5 px-6\" @submit=\"submitEdit\">\n            <fieldset :disabled=\"isSubmittingEdit\" class=\"space-y-5\">\n              <UiVeeInput required label=\"Vendor name\" name=\"editName\" placeholder=\"Acme Corp\" />\n              <UiVeeInput required label=\"Domain\" name=\"editDomain\" placeholder=\"acme.com\" />\n              <UiVeeSelect required label=\"Status\" name=\"editStatus\">\n                <option disabled>Select an option</option>\n                <option value=\"Active\">Active</option>\n                <option value=\"Inactive\">Inactive</option>\n              </UiVeeSelect>\n            </fieldset>\n          </form>\n        </template>\n        <template #footer>\n          <UiSheetFooter class=\"px-6 pb-6\">\n            <UiSheetClose as-child>\n              <UiButton variant=\"outline\" class=\"w-full\">Cancel</UiButton>\n            </UiSheetClose>\n            <UiButton class=\"w-full\" @click=\"submitEdit\">Save changes</UiButton>\n          </UiSheetFooter>\n        </template>\n      </UiSheetContent>\n    </UiSheet>\n\n    <!-- Command search dialog -->\n    <UiCommandDialog\n      v-model:open=\"searchOpen\"\n      title=\"Search vendors\"\n      description=\"Search by vendor name, domain, or category\"\n    >\n      <UiCommandInput placeholder=\"Search vendors...\" />\n      <UiCommandList>\n        <UiCommandEmpty>No results found.</UiCommandEmpty>\n        <UiCommandGroup heading=\"Quick actions\">\n          <UiCommandItem value=\"Add vendor\">\n            <Icon name=\"heroicons:plus\" />\n            <span>Add vendor</span>\n          </UiCommandItem>\n          <UiCommandItem value=\"Import vendors\">\n            <Icon name=\"heroicons:arrow-up-tray\" />\n            <span>Import vendors</span>\n          </UiCommandItem>\n          <UiCommandItem value=\"Export data\">\n            <Icon name=\"heroicons:arrow-down-tray\" />\n            <span>Export data</span>\n          </UiCommandItem>\n        </UiCommandGroup>\n        <UiCommandSeparator />\n        <UiCommandGroup heading=\"Filter by status\">\n          <UiCommandItem value=\"Active vendors\">\n            <Icon name=\"heroicons:check-circle\" />\n            <span>Active vendors</span>\n          </UiCommandItem>\n          <UiCommandItem value=\"Inactive vendors\">\n            <Icon name=\"heroicons:x-circle\" />\n            <span>Inactive vendors</span>\n          </UiCommandItem>\n        </UiCommandGroup>\n      </UiCommandList>\n      <div\n        class=\"flex items-center gap-5 border-t border-border/70 bg-muted/20 px-4 py-2.5 text-xs text-muted-foreground\"\n      >\n        <span class=\"flex items-center gap-1.5\"><UiKbd>↵</UiKbd> to select</span>\n        <span class=\"flex items-center gap-1.5\"><UiKbd>↑↓</UiKbd> to navigate</span>\n        <span class=\"flex items-center gap-1.5\"><UiKbd>ESC</UiKbd> to close</span>\n      </div>\n    </UiCommandDialog>\n\n    <!-- Sticky header -->\n    <Motion\n      as=\"header\"\n      :initial=\"{ opacity: 0, y: -16 }\"\n      :animate=\"{ opacity: 1, y: 0 }\"\n      :transition=\"{ duration: 0.4, ease: 'easeOut' }\"\n      class=\"sticky top-0 z-10 border-b border-border/70 bg-background/85 backdrop-blur-md\"\n    >\n      <UiContainer class=\"flex min-h-[4rem] items-center justify-between gap-4\">\n        <!-- Logo + nav -->\n        <div class=\"flex items-center gap-5\">\n          <div class=\"flex items-center gap-2.5\">\n            <div\n              class=\"flex size-8 items-center justify-center rounded-lg border border-border/70 bg-muted shadow-xs\"\n            >\n              <div\n                class=\"size-4 rounded-full bg-[radial-gradient(circle_at_35%_35%,rgba(255,255,255,0.95),rgba(255,255,255,0.2)_32%,transparent_34%),linear-gradient(135deg,var(--color-primary),color-mix(in_oklab,var(--color-primary)_40%,white))]\"\n              />\n            </div>\n            <span class=\"font-semibold tracking-tight\">UI Thing</span>\n          </div>\n\n          <!-- Mobile nav popover -->\n          <UiPopover class=\"lg:hidden\">\n            <UiPopoverTrigger as-child>\n              <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"lg:hidden\">\n                <Icon name=\"heroicons:bars-3\" class=\"size-5\" />\n              </UiButton>\n            </UiPopoverTrigger>\n            <UiPopoverContent align=\"start\" class=\"w-48 p-1\">\n              <UiButton\n                v-for=\"item in navItems\"\n                :key=\"item.label\"\n                variant=\"ghost\"\n                size=\"sm\"\n                class=\"w-full justify-start\"\n                :class=\"\n                  item.active\n                    ? 'bg-muted text-foreground shadow-xs hover:bg-muted'\n                    : 'text-muted-foreground'\n                \"\n              >\n                {{ item.label }}\n              </UiButton>\n            </UiPopoverContent>\n          </UiPopover>\n\n          <!-- Desktop nav -->\n          <nav class=\"hidden items-center gap-1 lg:flex\">\n            <UiButton\n              v-for=\"item in navItems\"\n              :key=\"item.label\"\n              variant=\"ghost\"\n              size=\"sm\"\n              :class=\"\n                item.active\n                  ? 'bg-muted text-foreground shadow-xs hover:bg-muted'\n                  : 'text-muted-foreground'\n              \"\n            >\n              {{ item.label }}\n            </UiButton>\n          </nav>\n        </div>\n\n        <!-- Right actions -->\n        <div class=\"flex items-center gap-1\">\n          <UiTooltip>\n            <UiTooltipTrigger as-child>\n              <UiButton\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                class=\"rounded-full\"\n                @click=\"searchOpen = true\"\n              >\n                <Icon name=\"heroicons:magnifying-glass\" class=\"size-5 text-muted-foreground\" />\n              </UiButton>\n            </UiTooltipTrigger>\n            <UiTooltipContent><p>Search</p></UiTooltipContent>\n          </UiTooltip>\n\n          <UiTooltip>\n            <UiDropdownMenu>\n              <UiTooltipTrigger as-child>\n                <UiDropdownMenuTrigger as-child>\n                  <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full\">\n                    <Icon name=\"heroicons:cog-6-tooth\" class=\"size-5 text-muted-foreground\" />\n                  </UiButton>\n                </UiDropdownMenuTrigger>\n              </UiTooltipTrigger>\n              <UiTooltipContent><p>Settings</p></UiTooltipContent>\n              <UiDropdownMenuContent align=\"end\" class=\"w-52\">\n                <UiDropdownMenuLabel>Settings</UiDropdownMenuLabel>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem icon=\"heroicons:user\" title=\"Account settings\" />\n                <UiDropdownMenuItem icon=\"heroicons:swatch\" title=\"Appearance\" />\n                <UiDropdownMenuItem icon=\"heroicons:bell\" title=\"Notifications\" />\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem\n                  variant=\"destructive\"\n                  icon=\"heroicons:arrow-right-on-rectangle\"\n                  title=\"Sign out\"\n                />\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiTooltip>\n\n          <UiTooltip>\n            <UiDropdownMenu>\n              <UiTooltipTrigger as-child>\n                <UiDropdownMenuTrigger as-child>\n                  <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full\">\n                    <Icon name=\"heroicons:bell\" class=\"size-5 text-muted-foreground\" />\n                  </UiButton>\n                </UiDropdownMenuTrigger>\n              </UiTooltipTrigger>\n              <UiTooltipContent><p>Notifications</p></UiTooltipContent>\n              <UiDropdownMenuContent align=\"end\" class=\"w-96\">\n                <UiDropdownMenuLabel class=\"flex items-center justify-between\">\n                  <span>Notifications</span>\n                  <UiBadge variant=\"secondary\" size=\"sm\">2 new</UiBadge>\n                </UiDropdownMenuLabel>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem\n                  icon=\"heroicons:shield-check\"\n                  title=\"Warpspeed passed security review\"\n                >\n                  <template #shortcut>2h ago</template>\n                </UiDropdownMenuItem>\n                <UiDropdownMenuItem\n                  icon=\"heroicons:arrow-trending-down\"\n                  title=\"CloudWatch rating dropped below 40\"\n                >\n                  <template #shortcut>5h ago</template>\n                </UiDropdownMenuItem>\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiTooltip>\n\n          <UiTooltip>\n            <UiDropdownMenu>\n              <UiTooltipTrigger as-child>\n                <UiDropdownMenuTrigger as-child>\n                  <UiButton variant=\"ghost\" size=\"icon-sm\" class=\"rounded-full p-0\">\n                    <UiAvatar\n                      src=\"https://i.pravatar.cc/150?img=47\"\n                      alt=\"Sasha Smith\"\n                      fallback=\"OR\"\n                      class=\"size-8 cursor-pointer\"\n                    />\n                  </UiButton>\n                </UiDropdownMenuTrigger>\n              </UiTooltipTrigger>\n              <UiTooltipContent><p>Account</p></UiTooltipContent>\n              <UiDropdownMenuContent align=\"end\" class=\"w-52\">\n                <UiDropdownMenuLabel>\n                  <div class=\"flex flex-col\">\n                    <p class=\"text-sm font-medium\">Sasha Smith</p>\n                    <p class=\"text-xs text-muted-foreground\">sasha@ui-thing.com</p>\n                  </div>\n                </UiDropdownMenuLabel>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem icon=\"heroicons:user\" title=\"Profile\" />\n                <UiDropdownMenuItem icon=\"heroicons:cog-6-tooth\" title=\"Settings\" />\n                <UiDropdownMenuItem icon=\"heroicons:credit-card\" title=\"Billing\" />\n                <UiDropdownMenuItem icon=\"heroicons:users\" title=\"Team\" />\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem icon=\"heroicons:question-mark-circle\" title=\"Help & support\" />\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem\n                  variant=\"destructive\"\n                  icon=\"heroicons:arrow-right-on-rectangle\"\n                  title=\"Sign out\"\n                />\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiTooltip>\n        </div>\n      </UiContainer>\n    </Motion>\n\n    <!-- Page content -->\n    <UiContainer class=\"space-y-6 py-8\">\n      <!-- Page header -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 12 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.1, ease: 'easeOut' }\"\n        class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\"\n      >\n        <h1 class=\"text-2xl font-bold tracking-tight\">Welcome back, Sasha</h1>\n        <div class=\"flex items-center gap-2\">\n          <UiTooltip>\n            <UiTooltipTrigger as-child>\n              <UiButton\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                class=\"hidden sm:flex\"\n                @click=\"searchOpen = true\"\n              >\n                <Icon name=\"heroicons:magnifying-glass\" class=\"size-4 text-muted-foreground\" />\n              </UiButton>\n            </UiTooltipTrigger>\n            <UiTooltipContent><p>Search vendors</p></UiTooltipContent>\n          </UiTooltip>\n          <UiButton variant=\"outline\" size=\"sm\" class=\"gap-2\">\n            <Icon name=\"heroicons:squares-2x2\" class=\"size-4\" />\n            Customize\n          </UiButton>\n          <UiButton variant=\"outline\" size=\"sm\" class=\"gap-2\">\n            <Icon name=\"heroicons:arrow-up-tray\" class=\"size-4\" />\n            Export\n          </UiButton>\n        </div>\n      </Motion>\n\n      <!-- Two-column charts row -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 12 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.18, ease: 'easeOut' }\"\n        class=\"grid gap-4 lg:grid-cols-[3fr_2fr]\"\n      >\n        <!-- Vendor breakdown — line chart -->\n        <div class=\"overflow-hidden rounded-xl border border-border/70 bg-card shadow-xs\">\n          <!-- Card header -->\n          <div class=\"flex items-start justify-between border-b border-border/60 px-5 py-4\">\n            <div class=\"flex items-center gap-3\">\n              <div\n                class=\"flex size-10 shrink-0 items-center justify-center rounded-full bg-foreground\"\n              >\n                <Icon name=\"heroicons:arrow-path\" class=\"size-5 text-background\" />\n              </div>\n              <div>\n                <p class=\"text-sm font-semibold\">Vendor breakdown</p>\n                <p class=\"text-xs text-muted-foreground\">\n                  Keep track of vendors and their security ratings.\n                </p>\n              </div>\n            </div>\n            <UiTooltip>\n              <UiDropdownMenu>\n                <UiTooltipTrigger as-child>\n                  <UiDropdownMenuTrigger as-child>\n                    <UiButton\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      class=\"-mr-1 shrink-0 text-muted-foreground\"\n                    >\n                      <Icon name=\"heroicons:ellipsis-vertical\" class=\"size-4\" />\n                    </UiButton>\n                  </UiDropdownMenuTrigger>\n                </UiTooltipTrigger>\n                <UiTooltipContent><p>Options</p></UiTooltipContent>\n                <UiDropdownMenuContent align=\"end\">\n                  <UiDropdownMenuItem icon=\"heroicons:arrow-path\" title=\"Refresh\" />\n                  <UiDropdownMenuItem icon=\"heroicons:arrow-down-tray\" title=\"Export\" />\n                </UiDropdownMenuContent>\n              </UiDropdownMenu>\n            </UiTooltip>\n          </div>\n\n          <!-- Line chart -->\n          <UiApexchart type=\"line\" height=\"300\" :series=\"lineSeries\" :options=\"lineOptions\" />\n\n          <!-- Footer -->\n          <div class=\"border-t border-border/60 px-5 py-3\">\n            <UiButton variant=\"outline\" size=\"sm\" class=\"w-full\">View full report</UiButton>\n          </div>\n        </div>\n\n        <!-- Vendors monitored — donut card -->\n        <div\n          class=\"flex flex-col overflow-hidden rounded-xl border border-border/70 bg-card shadow-xs\"\n        >\n          <!-- Card header -->\n          <div class=\"flex items-start justify-between border-b border-border/60 px-5 py-4\">\n            <div>\n              <p class=\"text-sm font-semibold\">Vendors monitored</p>\n              <p class=\"text-xs text-muted-foreground\">You're using 80% of available spots.</p>\n            </div>\n            <UiTooltip>\n              <UiDropdownMenu>\n                <UiTooltipTrigger as-child>\n                  <UiDropdownMenuTrigger as-child>\n                    <UiButton\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      class=\"-mr-1 shrink-0 text-muted-foreground\"\n                    >\n                      <Icon name=\"heroicons:ellipsis-vertical\" class=\"size-4\" />\n                    </UiButton>\n                  </UiDropdownMenuTrigger>\n                </UiTooltipTrigger>\n                <UiTooltipContent><p>Options</p></UiTooltipContent>\n                <UiDropdownMenuContent align=\"end\">\n                  <UiDropdownMenuItem icon=\"heroicons:arrow-path\" title=\"Refresh\" />\n                  <UiDropdownMenuItem icon=\"heroicons:arrow-up-tray\" title=\"Upgrade plan\" />\n                </UiDropdownMenuContent>\n              </UiDropdownMenu>\n            </UiTooltip>\n          </div>\n\n          <!-- Donut chart area -->\n          <div class=\"relative flex-1 px-5 pt-2\">\n            <!-- +10% trend badge -->\n            <div class=\"flex justify-end\">\n              <span\n                class=\"flex items-center gap-0.5 rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-950/60 dark:text-emerald-400\"\n              >\n                <Icon name=\"heroicons:arrow-up\" class=\"size-3\" />\n                10%\n              </span>\n            </div>\n            <UiApexchart type=\"donut\" height=\"200\" :series=\"donutSeries\" :options=\"donutOptions\" />\n          </div>\n\n          <!-- Warning message -->\n          <div class=\"space-y-3 border-t border-border/60 px-5 py-4\">\n            <div>\n              <p class=\"text-sm font-semibold\">You've almost reached your limit</p>\n              <p class=\"mt-0.5 text-xs text-muted-foreground\">\n                You have used 80% of your available spots. Upgrade plan to monitor more vendors.\n              </p>\n            </div>\n            <UiButton variant=\"outline\" size=\"sm\" class=\"w-full gap-2\">\n              <Icon name=\"heroicons:bolt\" class=\"size-4\" />\n              Upgrade plan\n            </UiButton>\n          </div>\n        </div>\n      </Motion>\n\n      <!-- Vendor movements card -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 16 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.26, ease: 'easeOut' }\"\n      >\n        <UiCard class=\"gap-0 overflow-hidden border-border/70 py-0 shadow-xs\">\n          <!-- Section header -->\n          <div\n            class=\"flex flex-col gap-3 border-b border-border/60 px-5 py-4 sm:flex-row sm:items-start sm:justify-between\"\n          >\n            <div>\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <h2 class=\"text-base font-bold tracking-tight\">Vendor movements</h2>\n                <UiBadge variant=\"secondary\" class=\"rounded-full text-xs font-medium\">\n                  240 vendors\n                </UiBadge>\n              </div>\n              <p class=\"mt-0.5 text-sm text-muted-foreground\">\n                Keep track of vendor and their security ratings.\n              </p>\n            </div>\n            <div class=\"flex shrink-0 items-center gap-2\">\n              <UiButton variant=\"outline\" size=\"sm\" class=\"gap-2\">\n                <Icon name=\"heroicons:arrow-up-tray\" class=\"size-4\" />\n                Import\n              </UiButton>\n              <UiButton size=\"sm\" class=\"gap-2\" @click=\"addOpen = true\">\n                <Icon name=\"heroicons:plus\" class=\"size-4\" />\n                Add vendor\n              </UiButton>\n            </div>\n          </div>\n\n          <!-- Filter tabs + search row -->\n          <div\n            class=\"flex flex-col gap-3 border-b border-border/60 px-5 py-3 sm:flex-row sm:items-center sm:justify-between\"\n          >\n            <!-- Tab buttons -->\n            <UiButtonGroup>\n              <UiButton\n                v-for=\"tab in filterTabs\"\n                :key=\"tab.value\"\n                variant=\"outline\"\n                size=\"sm\"\n                :class=\"activeFilter === tab.value ? 'text-primary hover:text-primary' : ''\"\n                @click=\"activeFilter = tab.value\"\n              >\n                {{ tab.label }}\n              </UiButton>\n            </UiButtonGroup>\n\n            <!-- Search + filters -->\n            <div class=\"flex items-center gap-2\">\n              <div class=\"relative w-full sm:w-52\">\n                <Icon\n                  name=\"heroicons:magnifying-glass\"\n                  class=\"absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground\"\n                />\n                <UiInput v-model=\"tableSearch\" placeholder=\"Search\" class=\"pr-12 pl-9\" />\n                <div class=\"absolute top-1/2 right-2.5 -translate-y-1/2\">\n                  <UiKbd class=\"text-[10px]\">⌘K</UiKbd>\n                </div>\n              </div>\n              <UiButton variant=\"outline\" size=\"sm\" class=\"shrink-0 gap-2\">\n                <Icon name=\"heroicons:adjustments-horizontal\" class=\"size-4\" />\n                <span class=\"hidden sm:inline\">Filters</span>\n              </UiButton>\n            </div>\n          </div>\n\n          <!-- Table -->\n          <UiTanStackTable\n            :data=\"filteredVendors\"\n            :columns=\"vendorColumns\"\n            :show-rows-per-page=\"false\"\n            :show-page-info=\"false\"\n            :show-pagination=\"false\"\n            :show-selected-count=\"false\"\n            :show-footer=\"true\"\n            :loading=\"vendorsPending\"\n            :table-options=\"{ enableRowSelection: true }\"\n          >\n            <!-- Select all -->\n            <template #select-header=\"{ table }\">\n              <UiCheckbox\n                aria-label=\"Select all\"\n                :model-value=\"\n                  table.getIsAllPageRowsSelected() ||\n                  (table.getIsSomePageRowsSelected() && 'indeterminate')\n                \"\n                @update:model-value=\"table.toggleAllPageRowsSelected(!!$event)\"\n              />\n            </template>\n\n            <template #select-cell=\"{ row }\">\n              <UiCheckbox\n                :aria-label=\"`Select ${row.original.name}`\"\n                :model-value=\"row.getIsSelected()\"\n                @update:model-value=\"row.toggleSelected(!!$event)\"\n              />\n            </template>\n\n            <!-- Vendor cell: avatar + name + domain -->\n            <template #vendor-cell=\"{ row }\">\n              <div class=\"flex items-center gap-3\">\n                <div\n                  class=\"flex size-10 shrink-0 items-center justify-center rounded-full\"\n                  :style=\"{ backgroundColor: row.original.logoColor }\"\n                >\n                  <Icon :name=\"row.original.logoIcon\" class=\"size-5 text-white\" />\n                </div>\n                <div class=\"flex min-w-0 flex-col\">\n                  <span class=\"truncate text-sm font-semibold\">{{ row.original.name }}</span>\n                  <span class=\"truncate text-xs text-muted-foreground\">{{\n                    row.original.domain\n                  }}</span>\n                </div>\n              </div>\n            </template>\n\n            <!-- Rating cell: progress bar + number + trend badge -->\n            <template #rating-cell=\"{ row }\">\n              <div class=\"flex items-center gap-3\">\n                <div class=\"h-1.5 w-32 overflow-hidden rounded-full bg-muted\">\n                  <div\n                    class=\"h-full rounded-full transition-all\"\n                    :style=\"{\n                      width: `${row.original.rating}%`,\n                      backgroundColor: 'var(--color-primary)',\n                    }\"\n                  />\n                </div>\n                <span class=\"w-6 shrink-0 text-sm font-medium tabular-nums\">{{\n                  row.original.rating\n                }}</span>\n                <span\n                  class=\"flex shrink-0 items-center gap-0.5 rounded-full px-1.5 py-0.5 text-xs font-medium\"\n                  :class=\"\n                    row.original.trendPositive\n                      ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/60 dark:text-emerald-400'\n                      : 'bg-red-50 text-red-700 dark:bg-red-950/60 dark:text-red-400'\n                  \"\n                >\n                  <Icon\n                    :name=\"\n                      row.original.trendPositive ? 'heroicons:arrow-up' : 'heroicons:arrow-down'\n                    \"\n                    class=\"size-2.5\"\n                  />\n                  {{ Math.abs(row.original.trendPct) }}%\n                </span>\n              </div>\n            </template>\n\n            <!-- Last assessed cell -->\n            <template #lastAssessed-cell=\"{ row }\">\n              <span class=\"text-sm text-muted-foreground\">{{ row.original.lastAssessed }}</span>\n            </template>\n\n            <!-- Categories cell: status + tags + overflow -->\n            <template #categories-cell=\"{ row }\">\n              <div class=\"flex flex-wrap items-center gap-1.5\">\n                <span\n                  class=\"flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs font-medium\"\n                  :class=\"\n                    row.original.status === 'Active'\n                      ? 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950/50 dark:text-emerald-400'\n                      : 'border-border/70 bg-muted/50 text-muted-foreground'\n                  \"\n                >\n                  <span\n                    class=\"size-1.5 rounded-full\"\n                    :class=\"\n                      row.original.status === 'Active' ? 'bg-emerald-500' : 'bg-muted-foreground'\n                    \"\n                  />\n                  {{ row.original.status }}\n                </span>\n                <span\n                  v-for=\"cat in row.original.categories.slice(0, 2)\"\n                  :key=\"cat\"\n                  class=\"rounded-full border border-border/60 bg-card px-2 py-0.5 text-xs font-medium text-foreground\"\n                >\n                  {{ cat }}\n                </span>\n                <span\n                  v-if=\"row.original.categories.length > 2\"\n                  class=\"rounded-full border border-border/60 bg-card px-2 py-0.5 text-xs font-medium text-muted-foreground\"\n                >\n                  +{{ row.original.categories.length - 2 }}\n                </span>\n              </div>\n            </template>\n\n            <!-- Actions cell -->\n            <template #actions-cell=\"{ row }\">\n              <div class=\"flex items-center gap-1\">\n                <UiTooltip>\n                  <UiTooltipTrigger as-child>\n                    <UiButton\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      class=\"text-muted-foreground hover:text-destructive\"\n                      aria-label=\"Delete vendor\"\n                      @click=\"\n                        () => {\n                          deleteTarget = row.original;\n                          deleteOpen = true;\n                        }\n                      \"\n                    >\n                      <Icon name=\"heroicons:trash\" class=\"size-4\" />\n                    </UiButton>\n                  </UiTooltipTrigger>\n                  <UiTooltipContent><p>Delete vendor</p></UiTooltipContent>\n                </UiTooltip>\n                <UiTooltip>\n                  <UiTooltipTrigger as-child>\n                    <UiButton\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      class=\"text-muted-foreground\"\n                      aria-label=\"Edit vendor\"\n                      @click=\"openEdit(row.original)\"\n                    >\n                      <Icon name=\"heroicons:pencil\" class=\"size-4\" />\n                    </UiButton>\n                  </UiTooltipTrigger>\n                  <UiTooltipContent><p>Edit vendor</p></UiTooltipContent>\n                </UiTooltip>\n              </div>\n            </template>\n\n            <!-- Footer with pagination -->\n            <template #footer=\"{ table }\">\n              <div\n                class=\"flex w-full items-center justify-between border-t border-border/60 px-5 py-4\"\n              >\n                <p class=\"text-sm text-muted-foreground\">\n                  Page {{ table.getState().pagination.pageIndex + 1 }} of\n                  {{ table.getPageCount() }}\n                </p>\n\n                <!-- Desktop pagination -->\n                <UiPagination\n                  class=\"mx-0! hidden! justify-end! sm:flex!\"\n                  :total=\"filteredVendors.length\"\n                  :items-per-page=\"10\"\n                  :sibling-count=\"1\"\n                  :page=\"table.getState().pagination.pageIndex + 1\"\n                  @update:page=\"(p) => table.setPageIndex(p - 1)\"\n                >\n                  <UiPaginationList class=\"gap-1\">\n                    <UiPaginationPrev as-child>\n                      <UiButton variant=\"outline\" size=\"sm\">\n                        <Icon name=\"heroicons:chevron-left\" class=\"size-4\" />\n                        Previous\n                      </UiButton>\n                    </UiPaginationPrev>\n                    <UiPaginationNext as-child>\n                      <UiButton variant=\"outline\" size=\"sm\">\n                        Next\n                        <Icon name=\"heroicons:chevron-right\" class=\"size-4\" />\n                      </UiButton>\n                    </UiPaginationNext>\n                  </UiPaginationList>\n                </UiPagination>\n\n                <!-- Mobile pagination -->\n                <UiPagination\n                  class=\"mx-0! sm:hidden!\"\n                  :total=\"filteredVendors.length\"\n                  :items-per-page=\"10\"\n                  :page=\"table.getState().pagination.pageIndex + 1\"\n                  @update:page=\"(p) => table.setPageIndex(p - 1)\"\n                >\n                  <UiPaginationList class=\"gap-1\">\n                    <UiPaginationPrev as-child>\n                      <UiButton variant=\"outline\" size=\"icon-sm\">\n                        <Icon name=\"heroicons:arrow-left\" class=\"size-4\" />\n                      </UiButton>\n                    </UiPaginationPrev>\n                    <UiPaginationNext as-child>\n                      <UiButton variant=\"outline\" size=\"icon-sm\">\n                        <Icon name=\"heroicons:arrow-right\" class=\"size-4\" />\n                      </UiButton>\n                    </UiPaginationNext>\n                  </UiPaginationList>\n                </UiPagination>\n              </div>\n            </template>\n          </UiTanStackTable>\n        </UiCard>\n      </Motion>\n    </UiContainer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { faker } from \"@faker-js/faker\";\n  import type { ColumnDef } from \"@tanstack/vue-table\";\n  import type { ApexOptions } from \"apexcharts\";\n  import { Motion } from \"motion-v\";\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  // ─── Navigation ────────────────────────────────────────────────────────────────\n  const navItems = [\n    { label: \"Home\", active: false },\n    { label: \"Dashboard\", active: true },\n    { label: \"Projects\", active: false },\n    { label: \"Tasks\", active: false },\n    { label: \"Reporting\", active: false },\n    { label: \"Users\", active: false },\n  ];\n\n  // ─── Search dialog ─────────────────────────────────────────────────────────────\n  const searchOpen = ref(false);\n  const handleKeydown = (e: KeyboardEvent) => {\n    if (e.key === \"Escape\") searchOpen.value = false;\n    if ((e.metaKey || e.ctrlKey) && e.key === \"k\") {\n      e.preventDefault();\n      searchOpen.value = true;\n    }\n  };\n  onMounted(() => document.addEventListener(\"keydown\", handleKeydown));\n  onUnmounted(() => document.removeEventListener(\"keydown\", handleKeydown));\n\n  // ─── Line chart (Vendor breakdown) ────────────────────────────────────────────\n  const months = [\n    \"Jan\",\n    \"Feb\",\n    \"Mar\",\n    \"Apr\",\n    \"May\",\n    \"Jun\",\n    \"Jul\",\n    \"Aug\",\n    \"Sep\",\n    \"Oct\",\n    \"Nov\",\n    \"Dec\",\n  ];\n\n  const lineSeries = [\n    { name: \"Your rating\", data: [42, 46, 50, 53, 58, 62, 66, 70, 76, 80, 85, 90] },\n    { name: \"Industry average\", data: [8, 10, 13, 14, 18, 20, 22, 26, 28, 32, 36, 40] },\n  ];\n\n  const lineOptions: ApexOptions = {\n    chart: {\n      type: \"line\",\n      background: \"transparent\",\n      parentHeightOffset: 0,\n      toolbar: { show: false },\n    },\n    colors: [\"var(--color-primary)\", \"#94a3b8\"],\n    stroke: { width: [2, 2], curve: \"smooth\" },\n    fill: { opacity: 1 },\n    dataLabels: { enabled: false },\n    markers: { size: 0, hover: { size: 5 } },\n    grid: {\n      strokeDashArray: 4,\n      xaxis: { lines: { show: false } },\n      yaxis: { lines: { show: true } },\n      padding: { left: 8, right: 8 },\n    },\n    xaxis: {\n      categories: months,\n      axisBorder: { show: false },\n      axisTicks: { show: false },\n      title: { text: \"Month\", offsetY: -4, style: { fontSize: \"11px\", fontWeight: 400 } },\n    },\n    yaxis: {\n      min: 0,\n      max: 100,\n      tickAmount: 5,\n      title: { text: \"Security rating\", style: { fontSize: \"11px\", fontWeight: 400 } },\n    },\n    legend: {\n      show: true,\n      position: \"top\",\n      horizontalAlign: \"right\",\n      markers: { size: 6, shape: \"circle\" },\n    },\n    tooltip: { y: { formatter: (v: number) => `${v} / 100` } },\n  };\n\n  // ─── Donut chart (Vendors monitored) ──────────────────────────────────────────\n  const donutSeries = [80, 20];\n\n  const donutOptions: ApexOptions = {\n    chart: {\n      type: \"donut\",\n      background: \"transparent\",\n      parentHeightOffset: 0,\n    },\n    colors: [\"var(--color-primary)\", \"#e2e8f0\"],\n    labels: [\"Used\", \"Available\"],\n    dataLabels: { enabled: false },\n    plotOptions: {\n      pie: {\n        donut: {\n          size: \"72%\",\n          labels: {\n            show: true,\n            name: { show: false },\n            value: {\n              show: true,\n              fontSize: \"36px\",\n              fontWeight: \"700\",\n              offsetY: 10,\n              color: undefined,\n              formatter: () => \"240\",\n            },\n            total: {\n              show: true,\n              label: \"\",\n              formatter: () => \"240\",\n            },\n          },\n        },\n      },\n    },\n    stroke: { width: 0 },\n    legend: { show: false },\n    tooltip: { enabled: false },\n    states: { hover: { filter: { type: \"none\" } }, active: { filter: { type: \"none\" } } },\n  };\n\n  // ─── Filter tabs ──────────────────────────────────────────────────────────────\n  const filterTabs = [\n    { label: \"View all\", value: \"all\" },\n    { label: \"Monitored\", value: \"monitored\" },\n    { label: \"Unmonitored\", value: \"unmonitored\" },\n  ];\n  const activeFilter = ref(\"all\");\n\n  // ─── Vendor table ──────────────────────────────────────────────────────────────\n  type VendorRow = {\n    id: number;\n    name: string;\n    domain: string;\n    logoColor: string;\n    logoIcon: string;\n    rating: number;\n    trendPct: number;\n    trendPositive: boolean;\n    lastAssessed: string;\n    status: \"Active\" | \"Inactive\";\n    monitored: boolean;\n    categories: string[];\n  };\n\n  const logoColors = [\n    \"#6366f1\",\n    \"#0ea5e9\",\n    \"#1a1a2e\",\n    \"#38bdf8\",\n    \"#6d28d9\",\n    \"#0f172a\",\n    \"#10b981\",\n    \"#f59e0b\",\n    \"#ef4444\",\n    \"#ec4899\",\n  ];\n\n  const logoIcons = [\n    \"heroicons:cpu-chip\",\n    \"heroicons:cube-transparent\",\n    \"heroicons:bolt\",\n    \"heroicons:cloud\",\n    \"heroicons:eye\",\n    \"heroicons:signal\",\n    \"heroicons:arrow-path\",\n    \"heroicons:globe-alt\",\n    \"heroicons:shield-check\",\n    \"heroicons:chart-bar\",\n  ];\n\n  const allCategories = [\n    \"Customer data\",\n    \"Business data\",\n    \"Database access\",\n    \"Salesforce\",\n    \"Financials\",\n    \"Admin\",\n    \"HR data\",\n    \"Legal\",\n  ];\n\n  const assessmentDates = [\n    \"22 Jan 2025\",\n    \"20 Jan 2025\",\n    \"24 Jan 2025\",\n    \"26 Jan 2025\",\n    \"18 Jan 2025\",\n    \"28 Jan 2025\",\n    \"16 Jan 2025\",\n    \"14 Jan 2025\",\n    \"30 Jan 2025\",\n    \"12 Jan 2025\",\n  ];\n\n  const vendorNames = [\n    \"Ephemeral\",\n    \"Stack3d Lab\",\n    \"Warpspeed\",\n    \"CloudWatch\",\n    \"ContrastAI\",\n    \"Convergence\",\n    \"Sisyphus\",\n    \"NovaSec\",\n    \"DataForge\",\n    \"Axiom\",\n    \"Meridian\",\n    \"Vaultix\",\n    \"TrustLayer\",\n    \"CipherBase\",\n    \"Sentinel\",\n    \"Gridlock\",\n    \"Helios\",\n    \"Prism\",\n    \"Velox\",\n    \"Ironclad\",\n  ];\n\n  const vendorDomains = [\n    \"ephemeral.io\",\n    \"stack3dlab.com\",\n    \"getwarpspeed.com\",\n    \"cloudwatch.app\",\n    \"contrastai.com\",\n    \"convergence.io\",\n    \"sisyphus.com\",\n    \"novasec.io\",\n    \"dataforge.co\",\n    \"axiom.xyz\",\n    \"meridian.ai\",\n    \"vaultix.com\",\n    \"trustlayer.io\",\n    \"cipherbase.dev\",\n    \"sentinel.app\",\n    \"gridlock.io\",\n    \"helios.ai\",\n    \"prism.co\",\n    \"velox.app\",\n    \"ironclad.io\",\n  ];\n\n  const createVendor = (i: number): VendorRow => {\n    faker.seed(i + 900);\n    const trendPct = faker.number.int({ min: -10, max: 10 });\n    const catCount = faker.number.int({ min: 2, max: 5 });\n    const shuffled = [...allCategories].sort(() => faker.number.float() - 0.5);\n    return {\n      id: i + 1,\n      name: vendorNames[i % vendorNames.length]!,\n      domain: vendorDomains[i % vendorDomains.length]!,\n      logoColor: logoColors[i % logoColors.length]!,\n      logoIcon: logoIcons[i % logoIcons.length]!,\n      rating: faker.number.int({ min: 28, max: 95 }),\n      trendPct,\n      trendPositive: trendPct >= 0,\n      lastAssessed: assessmentDates[i % assessmentDates.length]!,\n      status: i % 6 === 4 ? \"Inactive\" : \"Active\",\n      monitored: i % 4 !== 3,\n      categories: shuffled.slice(0, catCount),\n    };\n  };\n\n  const { data: vendorsData, pending: vendorsPending } = await useAsyncData<VendorRow[]>(\n    \"block-dashboards9-vendors\",\n    async () => Array.from({ length: 100 }, (_, i) => createVendor(i)),\n    { default: () => [] }\n  );\n\n  const vendors = computed(() => vendorsData.value ?? []);\n\n  const tableSearch = ref(\"\");\n\n  const filteredVendors = computed(() => {\n    let list = vendors.value;\n\n    if (activeFilter.value === \"monitored\") list = list.filter((v) => v.monitored);\n    else if (activeFilter.value === \"unmonitored\") list = list.filter((v) => !v.monitored);\n\n    const q = tableSearch.value.trim().toLowerCase();\n    if (!q) return list;\n    return list.filter(\n      (v) =>\n        v.name.toLowerCase().includes(q) ||\n        v.domain.toLowerCase().includes(q) ||\n        v.status.toLowerCase().includes(q) ||\n        v.categories.some((c) => c.toLowerCase().includes(q))\n    );\n  });\n\n  // ─── Table columns ─────────────────────────────────────────────────────────────\n  const vendorColumns: ColumnDef<VendorRow>[] = [\n    {\n      id: \"select\",\n      header: \"\",\n      enableSorting: false,\n      enableHiding: false,\n      meta: { class: { th: \"w-12\", td: \"w-12\" } },\n    },\n    {\n      id: \"vendor\",\n      accessorKey: \"name\",\n      header: \"Vendor\",\n    },\n    {\n      id: \"rating\",\n      accessorKey: \"rating\",\n      header: \"Rating\",\n      meta: { class: { th: \"min-w-[220px]\", td: \"min-w-[220px]\" } },\n    },\n    {\n      id: \"lastAssessed\",\n      accessorKey: \"lastAssessed\",\n      header: \"Last assessed\",\n      enableSorting: false,\n      meta: { class: { th: \"hidden md:table-cell\", td: \"hidden md:table-cell\" } },\n    },\n    {\n      id: \"categories\",\n      accessorKey: \"categories\",\n      header: \"Categories\",\n      enableSorting: false,\n      meta: { class: { th: \"hidden lg:table-cell\", td: \"hidden lg:table-cell\" } },\n    },\n    {\n      id: \"actions\",\n      header: \"\",\n      enableSorting: false,\n      enableHiding: false,\n      meta: { class: { th: \"w-20\", td: \"w-20\" } },\n    },\n  ];\n\n  // ─── Add vendor sheet ──────────────────────────────────────────────────────────\n  const addOpen = ref(false);\n\n  const AddSchema = object({\n    addName: string().required().label(\"Vendor name\").min(2).max(100),\n    addDomain: string().required().label(\"Domain\").min(3).max(80),\n    addStatus: string().required().label(\"Status\"),\n  });\n\n  const {\n    handleSubmit: handleAddSubmit,\n    isSubmitting: isSubmittingAdd,\n    resetForm: resetAddForm,\n    controlledValues: addControlledValues,\n  } = useForm({ name: \"addVendorForm9\", validationSchema: toTypedSchema(AddSchema) });\n\n  const submitAdd = handleAddSubmit(() => {\n    addOpen.value = false;\n    useSonner(\"Vendor added\", {\n      description: `'${addControlledValues.value.addName}' has been added.`,\n    });\n    resetAddForm();\n  });\n\n  // ─── Edit vendor sheet ─────────────────────────────────────────────────────────\n  const editOpen = ref(false);\n  const editTarget = ref<VendorRow | null>(null);\n\n  const EditSchema = object({\n    editName: string().required().label(\"Vendor name\").min(2).max(100),\n    editDomain: string().required().label(\"Domain\").min(3).max(80),\n    editStatus: string().required().label(\"Status\"),\n  });\n\n  const {\n    handleSubmit: handleEditSubmit,\n    isSubmitting: isSubmittingEdit,\n    setValues,\n  } = useForm<InferType<typeof EditSchema>>({ validationSchema: EditSchema });\n\n  const submitEdit = handleEditSubmit(() => {\n    editOpen.value = false;\n    useSonner(\"Vendor updated\", {\n      description: `'${editTarget.value?.name}' has been saved.`,\n    });\n  });\n\n  const openEdit = (vendor: VendorRow) => {\n    editTarget.value = vendor;\n    setValues({ editName: vendor.name, editDomain: vendor.domain, editStatus: vendor.status });\n    editOpen.value = true;\n  };\n\n  // ─── Delete dialog ─────────────────────────────────────────────────────────────\n  const deleteOpen = ref(false);\n  const deleteTarget = ref<VendorRow | null>(null);\n\n  const confirmDelete = () => {\n    if (!deleteTarget.value) return;\n    useSonner(`'${deleteTarget.value.name}' removed`, {\n      description: \"The vendor has been permanently removed.\",\n    });\n    deleteTarget.value = null;\n  };\n</script>\n","category":"Dashboards","path":"Dashboards/BlockDashboards9.vue","components":["alertdialog","alertdialogaction","alertdialogcancel","alertdialogcontent","alertdialogdescription","alertdialogfooter","alertdialogheader","alertdialogtitle","apexchart","avatar","badge","button","buttongroup","card","checkbox","commanddialog","commandempty","commandgroup","commandinput","commanditem","commandlist","commandseparator","container","dropdownmenu","dropdownmenucontent","dropdownmenuitem","dropdownmenulabel","dropdownmenuseparator","dropdownmenutrigger","input","kbd","pagination","paginationlist","paginationnext","paginationprev","popover","popovercontent","popovertrigger","sheet","sheetclose","sheetcontent","sheetfooter","tanstacktable","tooltip","tooltipcontent","tooltiptrigger","veeinput","veeselect"]},{"name":"App Empty State 1","fileName":"BlockAppEmptyState1.vue","file":"<template>\n  <UiContainer class=\"relative\">\n    <div\n      class=\"absolute inset-0 bg-[radial-gradient(--alpha(var(--color-border)/90%)_1px,transparent_1px)] mask-[radial-gradient(ellipse_closest-side_at_50%_50%,#000_50%,transparent_100%)] bg-size-[20px_20px]\"\n    />\n    <div class=\"relative z-10 flex flex-col items-center justify-center py-16 text-center lg:py-24\">\n      <slot name=\"icon\">\n        <UiFancyIcon v-if=\"props.icon\" icon=\"lucide:search\" />\n      </slot>\n      <slot name=\"title\">\n        <p class=\"mt-6 mb-2 text-xl font-bold tracking-tight text-balance\" v-html=\"props.title\" />\n      </slot>\n      <slot name=\"description\">\n        <p class=\"text-muted-foreground\" v-html=\"props.description\" />\n      </slot>\n      <slot>\n        <div class=\"mt-5 grid w-full grid-cols-1 justify-center gap-3 sm:flex sm:items-center\">\n          <UiButton variant=\"outline\">New search</UiButton>\n          <UiButton>Create record</UiButton>\n        </div>\n      </slot>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const props = withDefaults(\n    defineProps<{\n      title?: string;\n      description?: string;\n      icon?: string;\n    }>(),\n    {\n      icon: \"lucide:search\",\n      title: \"No results found\",\n      description: \"Try changing your search query or adding a new record.\",\n    }\n  );\n</script>\n","category":"EmptyState","path":"App/EmptyState/BlockAppEmptyState1.vue","components":["button","container","fancyicon"]},{"name":"App Empty State 2","fileName":"BlockAppEmptyState2.vue","file":"<template>\n  <div class=\"flex items-center justify-center px-4 py-12 sm:px-6 lg:px-8\">\n    <div class=\"flex w-full max-w-md flex-col items-center gap-6 text-center\">\n      <slot name=\"image\">\n        <svg\n          class=\"w-full max-w-[12rem]\"\n          viewBox=\"0 0 238 190\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <rect\n            y=\"61.8035\"\n            width=\"200\"\n            height=\"120\"\n            rx=\"16\"\n            transform=\"rotate(-18 0 61.8035)\"\n            fill=\"#EDEDEF\"\n          />\n          <g filter=\"url(#filter0_d_10_153)\">\n            <rect x=\"34\" y=\"62\" width=\"200\" height=\"120\" rx=\"16\" fill=\"white\" />\n          </g>\n          <rect x=\"51\" y=\"85\" width=\"28\" height=\"20\" rx=\"4\" fill=\"#D4D4D8\" />\n          <rect x=\"51\" y=\"149\" width=\"28\" height=\"10\" rx=\"4\" fill=\"#D4D4D8\" />\n          <rect x=\"97\" y=\"149\" width=\"28\" height=\"10\" rx=\"4\" fill=\"#D4D4D8\" />\n          <rect x=\"143\" y=\"149\" width=\"28\" height=\"10\" rx=\"4\" fill=\"#D4D4D8\" />\n          <rect x=\"189\" y=\"149\" width=\"28\" height=\"10\" rx=\"4\" fill=\"#D4D4D8\" />\n          <defs>\n            <filter\n              id=\"filter0_d_10_153\"\n              x=\"30\"\n              y=\"62\"\n              width=\"208\"\n              height=\"128\"\n              filterUnits=\"userSpaceOnUse\"\n              color-interpolation-filters=\"sRGB\"\n            >\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n              <feColorMatrix\n                in=\"SourceAlpha\"\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                result=\"hardAlpha\"\n              />\n              <feOffset dy=\"4\" />\n              <feGaussianBlur stdDeviation=\"2\" />\n              <feComposite in2=\"hardAlpha\" operator=\"out\" />\n              <feColorMatrix\n                type=\"matrix\"\n                values=\"0 0 0 0 0.262745 0 0 0 0 0.262745 0 0 0 0 0.286275 0 0 0 0.05 0\"\n              />\n              <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_10_153\" />\n              <feBlend\n                mode=\"normal\"\n                in=\"SourceGraphic\"\n                in2=\"effect1_dropShadow_10_153\"\n                result=\"shape\"\n              />\n            </filter>\n          </defs>\n        </svg>\n      </slot>\n      <div class=\"flex flex-col gap-2\">\n        <slot name=\"title\">\n          <h1 v-if=\"title\" class=\"text-lg font-bold\" v-html=\"title\" />\n        </slot>\n        <slot name=\"description\">\n          <p v-if=\"description\" class=\"text-sm text-muted-foreground\" v-html=\"description\" />\n        </slot>\n      </div>\n      <div class=\"flex items-center gap-2\">\n        <slot name=\"button\">\n          <UiButton v-if=\"buttonText || icon\">\n            <slot name=\"icon\">\n              <Icon v-if=\"icon\" :name=\"icon\" class=\"size-4\" />\n            </slot>\n            <slot name=\"buttonText\">\n              <span v-if=\"buttonText\" v-html=\"buttonText\" />\n            </slot>\n          </UiButton>\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  withDefaults(\n    defineProps<{\n      title?: string;\n      description?: string;\n      icon?: string;\n      buttonText?: string;\n    }>(),\n    {\n      title: \"You don't have any cards\",\n      description: \"Please add a new card to your account to get started.\",\n      icon: \"lucide:plus\",\n      buttonText: \"Add card\",\n    }\n  );\n</script>\n","category":"EmptyState","path":"App/EmptyState/BlockAppEmptyState2.vue","components":["button"]},{"name":"App Empty State 3","fileName":"BlockAppEmptyState3.vue","file":"<template>\n  <div class=\"flex items-center justify-center px-4 py-12 sm:px-6 lg:px-8\">\n    <div class=\"flex w-full max-w-md flex-col items-center gap-6 text-center\">\n      <div class=\"flex items-center gap-3\">\n        <div class=\"-rotate-8 rounded-md border p-3 shadow\">\n          <Icon :name=\"icon1\" class=\"size-5 text-muted-foreground\" />\n        </div>\n        <div class=\"-translate-y-2 rounded-md border p-3 shadow\">\n          <Icon :name=\"icon2\" class=\"size-5 text-muted-foreground\" />\n        </div>\n        <div class=\"rotate-8 rounded-md border p-3 shadow\">\n          <Icon :name=\"icon3\" class=\"size-5 text-muted-foreground\" />\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-2\">\n        <slot name=\"title\">\n          <h1 v-if=\"title\" class=\"text-lg font-bold\" v-html=\"title\" />\n        </slot>\n        <slot name=\"description\">\n          <p v-if=\"description\" class=\"text-sm text-muted-foreground\" v-html=\"description\" />\n        </slot>\n      </div>\n      <div class=\"flex items-center gap-2\">\n        <slot name=\"button1\">\n          <UiButton>\n            <slot name=\"buttonIcon1\">\n              <Icon :name=\"buttonIcon1\" class=\"size-4\" />\n            </slot>\n            <slot name=\"buttonText1\">\n              <span v-if=\"buttonText1\" v-html=\"buttonText1\" />\n            </slot>\n          </UiButton>\n        </slot>\n        <slot name=\"button2\">\n          <UiButton variant=\"outline\">\n            <slot name=\"buttonIcon2\">\n              <Icon :name=\"buttonIcon2\" class=\"size-4\" />\n            </slot>\n            <slot name=\"buttonText2\">\n              <span v-if=\"buttonText2\" v-html=\"buttonText2\" />\n            </slot>\n          </UiButton>\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  withDefaults(\n    defineProps<{\n      title?: string;\n      description?: string;\n      buttonText1?: string;\n      buttonText2?: string;\n      buttonIcon1?: string;\n      buttonIcon2?: string;\n      icon1?: string;\n      icon2?: string;\n      icon3?: string;\n    }>(),\n    {\n      title: \"No data found\",\n      description:\n        \"It looks like there's no data in this page. You can create a new one or refresh the page.\",\n      buttonText1: \"Create new\",\n      buttonText2: \"Refresh\",\n      buttonIcon1: \"lucide:plus\",\n      buttonIcon2: \"lucide:refresh-ccw\",\n      icon1: \"lucide:file\",\n      icon2: \"lucide:calendar\",\n      icon3: \"lucide:user\",\n    }\n  );\n</script>\n","category":"EmptyState","path":"App/EmptyState/BlockAppEmptyState3.vue","components":["button"]},{"name":"App Empty State 4","fileName":"BlockAppEmptyState4.vue","file":"<template>\n  <div class=\"flex items-center justify-center px-4 py-12 sm:px-6 lg:px-8\">\n    <Motion :variants=\"parentVariant\" initial=\"initial\" animate=\"animate\">\n      <UiCard class=\"w-full max-w-lg\">\n        <UiCardContent class=\"flex flex-col items-center gap-6 text-center\">\n          <Motion :variants=\"childVariant\" class=\"relative rounded-full\">\n            <div class=\"rounded-full bg-muted p-6\">\n              <Icon :name=\"icon\" class=\"size-6 text-muted-foreground\" />\n            </div>\n          </Motion>\n          <div class=\"flex flex-col gap-2\">\n            <slot name=\"title\">\n              <Motion\n                v-if=\"title\"\n                as=\"h3\"\n                :variants=\"childVariant\"\n                class=\"text-xl font-bold tracking-tight\"\n              >\n                {{ title }}\n              </Motion>\n            </slot>\n            <slot name=\"description\">\n              <Motion\n                v-if=\"description\"\n                as=\"p\"\n                :variants=\"childVariant\"\n                class=\"text-sm text-muted-foreground\"\n              >\n                {{ description }}\n              </Motion>\n            </slot>\n          </div>\n          <div class=\"flex w-full flex-col gap-2\">\n            <slot name=\"primaryButton\">\n              <Motion :variants=\"childVariant\" class=\"relative rounded-md\">\n                <UiButton class=\"w-full\">\n                  <Icon :name=\"primaryIcon\" class=\"size-4\" />\n                  <span v-html=\"primaryText\" />\n                </UiButton>\n                <UiBorderBeam :duration=\"15\" />\n              </Motion>\n            </slot>\n            <slot name=\"secondaryButton\">\n              <Motion :variants=\"childVariant\">\n                <UiButton variant=\"ghost\" class=\"w-full\">\n                  <Icon :name=\"secondaryIcon\" class=\"size-4\" />\n                  <span v-html=\"secondaryText\" />\n                </UiButton>\n              </Motion>\n            </slot>\n          </div>\n        </UiCardContent>\n      </UiCard>\n    </Motion>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, scale: 0.95 },\n    animate: { opacity: 1, scale: 1, transition: { delayChildren: stagger(0.2) } },\n  };\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 10 },\n    animate: { opacity: 1, y: 0, transition: { type: \"keyframes\", duration: 0.3 } },\n  };\n  withDefaults(\n    defineProps<{\n      title?: string;\n      description?: string;\n      icon?: string;\n      primaryText?: string;\n      primaryIcon?: string;\n      secondaryText?: string;\n      secondaryIcon?: string;\n    }>(),\n    {\n      title: \"No projects yet\",\n      description: \"Get started by creating your first project. You can always add more later.\",\n      icon: \"lucide:folder-open\",\n      primaryText: \"Create project\",\n      primaryIcon: \"lucide:plus\",\n      secondaryText: \"Import existing\",\n      secondaryIcon: \"lucide:upload\",\n    }\n  );\n</script>\n","category":"EmptyState","path":"App/EmptyState/BlockAppEmptyState4.vue","components":["borderbeam","button","card","cardcontent"]},{"name":"App Empty State 5","fileName":"BlockAppEmptyState5.vue","file":"<template>\n  <div class=\"flex items-center justify-center px-4 py-12 sm:px-6 lg:px-8\">\n    <Motion\n      :variants=\"parentVariant\"\n      initial=\"initial\"\n      animate=\"animate\"\n      class=\"flex w-full max-w-2xl flex-col items-center gap-8 text-center\"\n    >\n      <Motion :variants=\"gridVariant\" class=\"relative\">\n        <div\n          class=\"absolute top-1/2 left-1/2 -z-10 size-32 -translate-x-1/2 -translate-y-1/2 rounded-full bg-linear-to-br from-primary/20 to-transparent blur-3xl\"\n        />\n        <div class=\"grid grid-cols-3 gap-3\">\n          <Motion\n            v-for=\"i in 9\"\n            :key=\"i\"\n            :variants=\"boxVariant\"\n            :custom=\"i\"\n            class=\"size-12 rounded-lg bg-muted\"\n          />\n        </div>\n      </Motion>\n      <div class=\"flex flex-col gap-3\">\n        <slot name=\"title\">\n          <Motion\n            v-if=\"title\"\n            as=\"h1\"\n            :variants=\"childVariant\"\n            class=\"text-2xl font-bold tracking-tight\"\n          >\n            <span v-html=\"title\" />\n          </Motion>\n        </slot>\n        <slot name=\"description\">\n          <Motion\n            v-if=\"description\"\n            as=\"p\"\n            :variants=\"childVariant\"\n            class=\"mx-auto max-w-md text-muted-foreground\"\n          >\n            <span v-html=\"description\" />\n          </Motion>\n        </slot>\n      </div>\n      <Motion :variants=\"childVariant\" class=\"flex flex-wrap items-center justify-center gap-3\">\n        <slot name=\"buttons\">\n          <UiButton size=\"lg\">\n            <Icon :name=\"primaryIcon\" class=\"size-4\" />\n            <span v-html=\"primaryText\" />\n          </UiButton>\n          <UiButton variant=\"outline\" size=\"lg\">\n            <Icon :name=\"secondaryIcon\" class=\"size-4\" />\n            <span v-html=\"secondaryText\" />\n          </UiButton>\n        </slot>\n      </Motion>\n      <slot name=\"footer\">\n        <Motion\n          v-if=\"footerText\"\n          as=\"p\"\n          :variants=\"childVariant\"\n          class=\"text-xs text-muted-foreground\"\n        >\n          <span v-html=\"footerText\" />\n        </Motion>\n      </slot>\n    </Motion>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: { opacity: 1, transition: { delayChildren: stagger(0.1) } },\n  };\n\n  const gridVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, scale: 0.8 },\n    animate: { opacity: 1, scale: 1, transition: { delayChildren: stagger(0.05) } },\n  };\n\n  const boxVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, scale: 0, backgroundColor: \"var(--color-muted)\" },\n    animate: (i: unknown) => ({\n      opacity: 1,\n      scale: [1, 1.05, 1],\n      backgroundColor: [\"#B12A414C\", \"#1C731C3A\", \"#6C1A9235\"],\n      transition: {\n        scale: {\n          repeat: Infinity,\n          repeatDelay: 3,\n          delay: Number(i) * 0.05,\n        },\n        backgroundColor: {\n          repeat: Infinity,\n          repeatDelay: 3,\n          duration: 1.5,\n          delay: Number(i) * 0.05 + 0.3,\n          times: [0, 0.5, 1],\n        },\n      },\n    }),\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 10 },\n    animate: { opacity: 1, y: 0, transition: { type: \"keyframes\", duration: 0.3 } },\n  };\n  withDefaults(\n    defineProps<{\n      title?: string;\n      description?: string;\n      primaryText?: string;\n      primaryIcon?: string;\n      secondaryText?: string;\n      secondaryIcon?: string;\n      footerText?: string;\n    }>(),\n    {\n      title: \"Nothing to see here\",\n      description:\n        \"Your dashboard is empty. Start by creating your first item or importing data from another source.\",\n      primaryText: \"Get started\",\n      primaryIcon: \"lucide:arrow-right\",\n      secondaryText: \"Learn more\",\n      secondaryIcon: \"lucide:book-open\",\n      footerText: \"Need help? Check out our documentation\",\n    }\n  );\n</script>\n","category":"EmptyState","path":"App/EmptyState/BlockAppEmptyState5.vue","components":["button"]},{"name":"App Empty State 6","fileName":"BlockAppEmptyState6.vue","file":"<template>\n  <div class=\"flex items-center justify-center px-4 py-12 sm:px-6 lg:px-8\">\n    <Motion\n      :variants=\"parentVariant\"\n      initial=\"initial\"\n      animate=\"animate\"\n      class=\"flex w-full max-w-md flex-col items-center gap-6 text-center\"\n    >\n      <Motion :variants=\"iconVariant\" class=\"relative\">\n        <div\n          class=\"group rounded-2xl border-2 border-dashed border-border bg-muted/30 p-12 transition-all hover:border-primary\"\n        >\n          <Icon\n            :name=\"icon\"\n            class=\"size-8 text-muted-foreground/50 transition-all duration-300 group-hover:-translate-y-1\"\n          />\n        </div>\n        <Motion\n          :variants=\"badgeVariant\"\n          class=\"absolute -top-2 -right-2 rounded-full bg-primary p-2 shadow-lg ring-4 ring-background\"\n        >\n          <Icon :name=\"badgeIcon\" class=\"size-4 text-primary-foreground\" />\n        </Motion>\n      </Motion>\n      <div class=\"flex flex-col gap-2\">\n        <slot name=\"title\">\n          <Motion v-if=\"title\" as=\"h1\" :variants=\"childVariant\" class=\"text-lg font-bold\">\n            <span v-html=\"title\" />\n          </Motion>\n        </slot>\n        <slot name=\"description\">\n          <Motion\n            v-if=\"description\"\n            as=\"p\"\n            :variants=\"childVariant\"\n            class=\"text-sm text-muted-foreground\"\n          >\n            <span v-html=\"description\" />\n          </Motion>\n        </slot>\n      </div>\n      <slot name=\"features\">\n        <Motion\n          v-if=\"features.length\"\n          :variants=\"featureListVariant\"\n          class=\"flex w-full flex-col gap-2 text-left\"\n        >\n          <Motion\n            v-for=\"(feature, index) in features\"\n            :key=\"index\"\n            :variants=\"featureVariant\"\n            class=\"flex items-center gap-2 text-sm\"\n          >\n            <Icon name=\"lucide:check\" class=\"size-4 shrink-0 text-primary\" />\n            <span class=\"text-muted-foreground\" v-html=\"feature\" />\n          </Motion>\n        </Motion>\n      </slot>\n      <slot name=\"button\">\n        <Motion :variants=\"childVariant\" class=\"relative w-full rounded-md\">\n          <UiButton class=\"w-full\" size=\"lg\">\n            <Icon :name=\"buttonIcon\" class=\"size-4\" />\n            <span v-html=\"buttonText\" />\n          </UiButton>\n          <UiBorderBeam :duration=\"15\" />\n        </Motion>\n      </slot>\n    </Motion>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: { opacity: 1, transition: { delayChildren: stagger(0.15) } },\n  };\n\n  const iconVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, scale: 0.8 },\n    animate: { opacity: 1, scale: 1, transition: { type: \"spring\", stiffness: 300, damping: 20 } },\n  };\n\n  const badgeVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, scale: 0, rotate: -45 },\n    animate: {\n      opacity: 1,\n      scale: 1,\n      rotate: 0,\n      transition: { type: \"spring\", stiffness: 400, damping: 15, delay: 0.3 },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 10 },\n    animate: { opacity: 1, y: 0, transition: { type: \"keyframes\", duration: 0.3 } },\n  };\n\n  const featureListVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: { opacity: 1, transition: { delayChildren: stagger(0.1) } },\n  };\n\n  const featureVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, x: -10 },\n    animate: { opacity: 1, x: 0, transition: { type: \"keyframes\", duration: 0.3 } },\n  };\n  withDefaults(\n    defineProps<{\n      title?: string;\n      description?: string;\n      icon?: string;\n      badgeIcon?: string;\n      buttonText?: string;\n      buttonIcon?: string;\n      features?: string[];\n    }>(),\n    {\n      title: \"Start your journey\",\n      description: \"Upload your first file to get started with your workspace.\",\n      icon: \"lucide:cloud-upload\",\n      badgeIcon: \"lucide:sparkles\",\n      buttonText: \"Upload file\",\n      buttonIcon: \"lucide:upload\",\n      features: () => [\n        \"Support for multiple file formats\",\n        \"Automatic processing and optimization\",\n        \"Secure cloud storage\",\n      ],\n    }\n  );\n</script>\n","category":"EmptyState","path":"App/EmptyState/BlockAppEmptyState6.vue","components":["borderbeam","button"]},{"name":"App Empty State 7","fileName":"BlockAppEmptyState7.vue","file":"<template>\n  <div class=\"flex items-center justify-center px-4 py-12 sm:px-6 lg:px-8\">\n    <Motion\n      :variants=\"parentVariant\"\n      initial=\"initial\"\n      animate=\"animate\"\n      class=\"flex w-full max-w-xl flex-col gap-8\"\n    >\n      <Motion :variants=\"headerVariant\" class=\"flex items-start gap-4\">\n        <div\n          class=\"flex size-12 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary\"\n        >\n          <Icon :name=\"icon\" class=\"size-6\" />\n        </div>\n        <div class=\"flex flex-1 flex-col gap-0.5\">\n          <slot name=\"title\">\n            <h1 v-if=\"title\" class=\"text-xl font-bold tracking-tight\">\n              <span v-html=\"title\" />\n            </h1>\n          </slot>\n          <slot name=\"description\">\n            <p v-if=\"description\" class=\"text-[15px] text-muted-foreground\">\n              <span v-html=\"description\" />\n            </p>\n          </slot>\n        </div>\n      </Motion>\n\n      <Motion :variants=\"cardsVariant\" class=\"grid gap-3 sm:grid-cols-2\">\n        <slot name=\"card1\">\n          <Motion :variants=\"cardVariant\">\n            <UiCard class=\"cursor-pointer transition-colors hover:bg-muted/50\">\n              <UiCardContent class=\"flex items-start gap-3\">\n                <div class=\"rounded-md bg-primary/10 p-2\">\n                  <Icon :name=\"card1Icon\" class=\"size-5 text-primary\" />\n                </div>\n                <div class=\"flex-1\">\n                  <h3 class=\"font-semibold\" v-html=\"card1Title\" />\n                  <p class=\"mt-1 text-sm text-muted-foreground\" v-html=\"card1Description\" />\n                </div>\n              </UiCardContent>\n            </UiCard>\n          </Motion>\n        </slot>\n        <slot name=\"card2\">\n          <Motion :variants=\"cardVariant\">\n            <UiCard class=\"cursor-pointer transition-colors hover:bg-muted/50\">\n              <UiCardContent class=\"flex items-start gap-3\">\n                <div class=\"rounded-md bg-primary/10 p-2\">\n                  <Icon :name=\"card2Icon\" class=\"size-5 text-primary\" />\n                </div>\n                <div class=\"flex-1\">\n                  <h3 class=\"font-semibold\" v-html=\"card2Title\" />\n                  <p class=\"mt-1 text-sm text-muted-foreground\" v-html=\"card2Description\" />\n                </div>\n              </UiCardContent>\n            </UiCard>\n          </Motion>\n        </slot>\n      </Motion>\n\n      <Motion :variants=\"footerVariant\" class=\"flex items-center gap-2\">\n        <slot name=\"helpText\">\n          <Icon name=\"lucide:info\" class=\"size-4 text-muted-foreground\" />\n          <p v-if=\"helpText\" class=\"text-sm text-muted-foreground\" v-html=\"helpText\" />\n        </slot>\n      </Motion>\n    </Motion>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: { opacity: 1, transition: { delayChildren: stagger(0.2) } },\n  };\n\n  const headerVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: -20 },\n    animate: { opacity: 1, y: 0, transition: { type: \"spring\", stiffness: 150, damping: 25 } },\n  };\n\n  const cardsVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: { opacity: 1, transition: { delayChildren: stagger(0.2) } },\n  };\n\n  const cardVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20, scale: 0.95 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      scale: 1,\n      transition: { type: \"spring\" },\n    },\n  };\n\n  const footerVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: { opacity: 1, transition: { duration: 0.3, delay: 0.1 } },\n  };\n  withDefaults(\n    defineProps<{\n      title?: string;\n      description?: string;\n      icon?: string;\n      card1Title?: string;\n      card1Description?: string;\n      card1Icon?: string;\n      card2Title?: string;\n      card2Description?: string;\n      card2Icon?: string;\n      helpText?: string;\n    }>(),\n    {\n      title: \"Choose how to get started\",\n      description: \"Select an option below to begin working on your project.\",\n      icon: \"lucide:rocket\",\n      card1Title: \"Start from scratch\",\n      card1Description: \"Create a new project with custom settings\",\n      card1Icon: \"lucide:file-plus\",\n      card2Title: \"Use a template\",\n      card2Description: \"Choose from pre-built templates\",\n      card2Icon: \"lucide:layout-template\",\n      helpText: \"You can always change these settings later\",\n    }\n  );\n</script>\n","category":"EmptyState","path":"App/EmptyState/BlockAppEmptyState7.vue","components":["card","cardcontent"]},{"name":"App Empty State 8","fileName":"BlockAppEmptyState8.vue","file":"<template>\n  <div class=\"flex items-center justify-center px-4 py-12 sm:px-6 lg:px-8\">\n    <Motion\n      :variants=\"parentVariant\"\n      initial=\"initial\"\n      animate=\"animate\"\n      class=\"flex w-full max-w-md flex-col items-center gap-6 text-center\"\n    >\n      <Motion :variants=\"spinnerVariant\" class=\"relative flex items-center justify-center\">\n        <div class=\"animate-spin rounded-full border-2 border-dashed animation-duration-[8.5s]\">\n          <div class=\"relative z-10 animate-none rounded-full bg-background p-6\">\n            <Icon :name=\"icon\" class=\"size-8 text-muted-foreground\" />\n          </div>\n        </div>\n      </Motion>\n      <Motion :variants=\"headerVariant\" class=\"flex flex-col gap-2\">\n        <slot name=\"title\">\n          <h1 v-if=\"title\" class=\"text-lg font-bold\">\n            <span v-html=\"title\" />\n          </h1>\n        </slot>\n        <slot name=\"description\">\n          <p v-if=\"description\" class=\"text-sm text-muted-foreground\">\n            <span v-html=\"description\" />\n          </p>\n        </slot>\n      </Motion>\n      <Motion :variants=\"separatorVariant\">\n        <UiGradientDivider class=\"my-2\" />\n      </Motion>\n      <Motion :variants=\"stepsListVariant\" class=\"mx-auto flex w-full max-w-[250px] flex-col gap-3\">\n        <slot name=\"steps\">\n          <Motion\n            v-for=\"(step, index) in steps\"\n            :key=\"index\"\n            :variants=\"stepVariant\"\n            :custom=\"index\"\n            class=\"flex items-start gap-3 text-left\"\n          >\n            <div\n              class=\"flex size-6 shrink-0 items-center justify-center rounded-full bg-primary text-xs font-semibold text-primary-foreground\"\n            >\n              {{ index + 1 }}\n            </div>\n            <p class=\"text-sm text-muted-foreground\" v-html=\"step\" />\n          </Motion>\n        </slot>\n      </Motion>\n      <Motion :variants=\"buttonVariant\">\n        <slot name=\"button\">\n          <UiButton class=\"w-full\">\n            <Icon :name=\"buttonIcon\" class=\"size-4\" />\n            <span v-html=\"buttonText\" />\n          </UiButton>\n        </slot>\n      </Motion>\n    </Motion>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: { opacity: 1, transition: { delayChildren: stagger(0.15) } },\n  };\n\n  const spinnerVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, scale: 0.8 },\n    animate: { opacity: 1, scale: 1, transition: { type: \"spring\", stiffness: 300, damping: 25 } },\n  };\n\n  const headerVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 10 },\n    animate: { opacity: 1, y: 0, transition: { type: \"keyframes\", duration: 0.3 } },\n  };\n\n  const separatorVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, scaleX: 0, width: 0 },\n    animate: { opacity: 1, scaleX: 1, width: \"100%\", transition: { duration: 0.3 } },\n  };\n\n  const stepsListVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: { opacity: 1, transition: { delayChildren: stagger(0.1) } },\n  };\n\n  const stepVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 10 },\n    animate: (i: unknown) => ({\n      opacity: 1,\n      y: 0,\n      transition: { type: \"keyframes\", duration: 0.3, delay: Number(i) * 0.5 },\n    }),\n  };\n\n  const buttonVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 10 },\n    animate: { opacity: 1, y: 0, transition: { type: \"keyframes\", duration: 0.3 } },\n  };\n\n  withDefaults(\n    defineProps<{\n      title?: string;\n      description?: string;\n      icon?: string;\n      buttonText?: string;\n      buttonIcon?: string;\n      steps?: string[];\n    }>(),\n    {\n      title: \"Let's get you set up\",\n      description: \"Follow these simple steps to complete your setup\",\n      icon: \"lucide:settings\",\n      buttonText: \"Start setup\",\n      buttonIcon: \"lucide:play\",\n      steps: () => [\n        \"Connect your account\",\n        \"Configure your preferences\",\n        \"Invite your team members\",\n      ],\n    }\n  );\n</script>\n","category":"EmptyState","path":"App/EmptyState/BlockAppEmptyState8.vue","components":["button","gradientdivider"]},{"name":"Error","fileName":"BlockError.vue","file":"<template>\n  <!-- \n    Simple error page with grid pattern\n    Features: Grid background pattern, staggered animations, error code badge\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.15),\n        },\n      },\n    }\"\n  >\n    <div class=\"relative flex min-h-screen items-center py-16\">\n      <div\n        class=\"absolute inset-0 bg-[linear-gradient(to_right,--alpha(var(--color-border)/80%)_1px,transparent_1px),linear-gradient(to_bottom,--alpha(var(--color-border)/80%)_1px,transparent_1px)] mask-[radial-gradient(ellipse_closest-side_at_50%_0%,#000_70%,transparent_110%)] bg-size-[60px_60px]\"\n      />\n      <div class=\"relative z-1 container\">\n        <Motion as=\"p\" :variants=\"childVariant\" class=\"mb-5 font-bold tracking-tight text-primary\">\n          {{ statusCode }} error\n        </Motion>\n        <Motion\n          as=\"h1\"\n          :variants=\"childVariant\"\n          class=\"text-4xl font-bold tracking-tight lg:text-5xl\"\n        >\n          {{ title }}\n        </Motion>\n        <Motion :variants=\"childVariant\">\n          <UiButton class=\"mt-5\" @click=\"clearError({ redirect: '#' })\">\n            Take me home\n            <Icon name=\"lucide:arrow-right\" class=\"ml-2 h-4 w-4\" />\n          </UiButton>\n        </Motion>\n      </div>\n    </div>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const props = withDefaults(\n    defineProps<{\n      statusCode?: number;\n      fatal?: boolean;\n      unhandled?: boolean;\n      statusMessage?: string;\n      message?: string;\n      data?: unknown;\n      cause?: unknown;\n    }>(),\n    {\n      statusCode: 404,\n      fatal: false,\n      unhandled: false,\n      statusMessage: \"\",\n      message: \"We can't find this page\",\n      data: undefined,\n      cause: undefined,\n    }\n  );\n\n  const title = computed(() => {\n    if (!props.message) return \"Error\";\n    return props.message;\n  });\n\n  useSeoMeta({ title });\n</script>\n","category":"Error","path":"Error/BlockError.vue","components":["button"]},{"name":"Error 5","fileName":"BlockError5.vue","file":"<template>\n  <!-- \n    Animated error with gradient background\n    Features: Gradient background, GSAP text animation, animated blobs\n  -->\n  <div\n    ref=\"container\"\n    class=\"relative flex min-h-screen items-center overflow-hidden bg-linear-to-br from-primary/10 via-background to-background\"\n  >\n    <div\n      class=\"absolute top-[20%] left-[10%] h-[300px] w-[300px] rounded-full bg-primary/20 blur-[100px]\"\n      style=\"animation: blob-float 8s ease-in-out infinite\"\n    />\n    <div\n      class=\"absolute right-[10%] bottom-[20%] h-[400px] w-[400px] rounded-full bg-primary/10 blur-[120px]\"\n      style=\"animation: blob-float 10s ease-in-out infinite reverse\"\n    />\n    <div class=\"relative z-1 container\">\n      <p ref=\"errorCode\" class=\"mb-5 font-bold tracking-tight text-primary\">\n        {{ statusCode }} error\n      </p>\n      <h1 ref=\"errorTitle\" class=\"text-4xl font-bold tracking-tight lg:text-6xl\">\n        {{ title }}\n      </h1>\n      <p ref=\"errorDesc\" class=\"mt-5 max-w-md text-muted-foreground\">\n        The page you're looking for doesn't exist or has been moved. Let's get you back on track.\n      </p>\n      <div ref=\"errorButton\" class=\"mt-8 flex items-center gap-3\">\n        <UiButton @click=\"clearError({ redirect: '#' })\">\n          <Icon name=\"lucide:home\" class=\"mr-2 h-4 w-4\" />\n          Go Home\n        </UiButton>\n        <UiButton variant=\"outline\" @click=\"clearError({ redirect: '#' })\">\n          <Icon name=\"lucide:arrow-left\" class=\"mr-2 h-4 w-4\" />\n          Go Back\n        </UiButton>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import gsap from \"gsap\";\n\n  const props = withDefaults(\n    defineProps<{\n      statusCode?: number;\n      fatal?: boolean;\n      unhandled?: boolean;\n      statusMessage?: string;\n      message?: string;\n      data?: unknown;\n      cause?: unknown;\n    }>(),\n    {\n      statusCode: 404,\n      fatal: false,\n      unhandled: false,\n      statusMessage: \"\",\n      message: \"We can't find this page\",\n      data: undefined,\n      cause: undefined,\n    }\n  );\n\n  const title = computed(() => {\n    if (!props.message) return \"Error\";\n    return props.message;\n  });\n\n  useSeoMeta({ title });\n\n  const container = ref<HTMLElement | null>(null);\n  const errorCode = ref<HTMLElement | null>(null);\n  const errorTitle = ref<HTMLElement | null>(null);\n  const errorDesc = ref<HTMLElement | null>(null);\n  const errorButton = ref<HTMLElement | null>(null);\n\n  onMounted(() => {\n    const tl = gsap.timeline();\n    tl.from(errorCode.value, {\n      opacity: 0,\n      y: 10,\n      duration: 0.6,\n      ease: \"power2.out\",\n    })\n      .from(\n        errorTitle.value,\n        {\n          opacity: 0,\n          y: 10,\n          duration: 0.8,\n          ease: \"power3.out\",\n        },\n        \"-=0.3\"\n      )\n      .from(\n        errorDesc.value,\n        {\n          opacity: 0,\n          y: 10,\n          duration: 0.6,\n          ease: \"power2.out\",\n        },\n        \"-=0.4\"\n      )\n      .from(\n        errorButton.value,\n        {\n          opacity: 0,\n          y: 10,\n          duration: 0.6,\n          ease: \"back.out(1.2)\",\n        },\n        \"-=0.3\"\n      );\n  });\n</script>\n\n<style>\n  @keyframes blob-float {\n    0%,\n    100% {\n      transform: translate(0, 0) scale(1);\n    }\n    33% {\n      transform: translate(30px, -30px) scale(1.1);\n    }\n    66% {\n      transform: translate(-20px, 20px) scale(0.9);\n    }\n  }\n</style>\n","category":"Error","path":"Error/BlockError5.vue","components":["button"]},{"name":"Error 6","fileName":"BlockError6.vue","file":"<template>\n  <!-- \n    Error page with helpful suggestions carousel\n    Features: Swiper carousel, helpful links, search suggestion\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.15),\n        },\n      },\n    }\"\n  >\n    <div class=\"relative flex min-h-screen items-center\">\n      <div\n        class=\"absolute inset-0 bg-[radial-gradient(var(--color-border)_1px,transparent_1px)] bg-size-[20px_20px]\"\n      />\n      <div class=\"relative z-1 container max-w-4xl\">\n        <Motion as=\"div\" :variants=\"childVariant\" class=\"text-center\">\n          <p class=\"mb-3 text-6xl font-bold text-primary lg:text-8xl\">{{ statusCode }}</p>\n          <h1 class=\"text-3xl font-bold tracking-tight lg:text-4xl\">{{ title }}</h1>\n        </Motion>\n\n        <Motion as=\"div\" :variants=\"childVariant\" class=\"mt-8\">\n          <p class=\"mb-4 text-center text-sm font-medium text-muted-foreground\">\n            Here are some helpful resources:\n          </p>\n          <swiper-container\n            :autoplay=\"{ delay: 3500 }\"\n            :speed=\"800\"\n            loop\n            grab-cursor\n            :slides-per-view=\"1\"\n            :breakpoints=\"{\n              640: { slidesPerView: 2, spaceBetween: 20 },\n              1024: { slidesPerView: 3, spaceBetween: 20 },\n            }\"\n            class=\"pb-2!\"\n          >\n            <swiper-slide v-for=\"(item, i) in suggestions\" :key=\"i\">\n              <UiCard class=\"h-full transition-shadow hover:shadow-lg\">\n                <UiCardHeader class=\"flex flex-col\">\n                  <div class=\"mb-3 inline-flex rounded-lg bg-primary/10 p-3\">\n                    <Icon :name=\"item.icon\" class=\"h-5 w-5 text-primary\" />\n                  </div>\n                  <UiCardTitle class=\"text-lg\">{{ item.title }}</UiCardTitle>\n                  <UiCardDescription>{{ item.description }}</UiCardDescription>\n                </UiCardHeader>\n                <UiCardFooter>\n                  <UiButton variant=\"ghost\" size=\"sm\" as=\"a\" :href=\"item.href\" class=\"w-full\">\n                    {{ item.action }}\n                    <Icon name=\"lucide:arrow-right\" class=\"ml-2 h-3 w-3\" />\n                  </UiButton>\n                </UiCardFooter>\n              </UiCard>\n            </swiper-slide>\n          </swiper-container>\n        </Motion>\n\n        <Motion :variants=\"childVariant\">\n          <UiButton class=\"mt-8 w-full sm:w-auto\" @click=\"clearError({ redirect: '#' })\">\n            <Icon name=\"lucide:home\" class=\"mr-2 h-4 w-4\" />\n            Return to Homepage\n          </UiButton>\n        </Motion>\n      </div>\n    </div>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const props = withDefaults(\n    defineProps<{\n      statusCode?: number;\n      fatal?: boolean;\n      unhandled?: boolean;\n      statusMessage?: string;\n      message?: string;\n      data?: unknown;\n      cause?: unknown;\n    }>(),\n    {\n      statusCode: 404,\n      fatal: false,\n      unhandled: false,\n      statusMessage: \"\",\n      message: \"We can't find this page\",\n      data: undefined,\n      cause: undefined,\n    }\n  );\n\n  const title = computed(() => {\n    if (!props.message) return \"Error\";\n    return props.message;\n  });\n\n  useSeoMeta({ title });\n\n  const suggestions = [\n    {\n      icon: \"lucide:book-open\",\n      title: \"Documentation\",\n      description: \"Browse our comprehensive guides and API reference\",\n      action: \"View Docs\",\n      href: \"#\",\n    },\n    {\n      icon: \"lucide:message-circle\",\n      title: \"Get Help\",\n      description: \"Contact our support team for assistance\",\n      action: \"Contact Us\",\n      href: \"#\",\n    },\n    {\n      icon: \"lucide:search\",\n      title: \"Search\",\n      description: \"Find what you're looking for across the site\",\n      action: \"Start Search\",\n      href: \"#\",\n    },\n    {\n      icon: \"lucide:compass\",\n      title: \"Explore\",\n      description: \"Discover popular pages and features\",\n      action: \"Browse All\",\n      href: \"#\",\n    },\n  ];\n</script>\n","category":"Error","path":"Error/BlockError6.vue","components":["button","card","carddescription","cardfooter","cardheader","cardtitle"]},{"name":"Error 7","fileName":"BlockError7.vue","file":"<template>\n  <!-- \n    Minimal error page with illustration\n    Features: SVG illustration, clean minimal design, subtle animations\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.12),\n        },\n      },\n    }\"\n  >\n    <div class=\"flex min-h-screen items-center\">\n      <div class=\"container max-w-2xl text-center\">\n        <Motion\n          :variants=\"{\n            initial: { opacity: 0, scale: 0.8 },\n            animate: {\n              opacity: 1,\n              scale: 1,\n              transition: {\n                type: 'spring',\n                stiffness: 150,\n                damping: 15,\n              },\n            },\n          }\"\n          class=\"mb-8 inline-block\"\n        >\n          <svg\n            class=\"h-48 w-48 text-primary/20\"\n            viewBox=\"0 0 200 200\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <circle cx=\"100\" cy=\"100\" r=\"80\" stroke=\"currentColor\" stroke-width=\"2\" />\n            <path\n              d=\"M70 85 Q70 70 85 70 L115 70 Q130 70 130 85 L130 115 Q130 130 115 130 L85 130 Q70 130 70 115 Z\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              fill=\"none\"\n            />\n            <circle cx=\"85\" cy=\"90\" r=\"5\" fill=\"currentColor\" />\n            <circle cx=\"115\" cy=\"90\" r=\"5\" fill=\"currentColor\" />\n            <path\n              d=\"M85 115 Q100 105 115 115\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </Motion>\n\n        <Motion as=\"h1\" :variants=\"childVariant\" class=\"mb-3 text-6xl font-bold text-primary\">\n          {{ statusCode }}\n        </Motion>\n        <Motion\n          as=\"h2\"\n          :variants=\"childVariant\"\n          class=\"mb-4 text-2xl font-semibold tracking-tight lg:text-3xl\"\n        >\n          {{ title }}\n        </Motion>\n        <Motion as=\"p\" :variants=\"childVariant\" class=\"mb-8 text-muted-foreground\">\n          Oops! The page you're looking for seems to have wandered off. Don't worry, it happens to\n          the best of us.\n        </Motion>\n\n        <Motion\n          as=\"div\"\n          :variants=\"childVariant\"\n          class=\"flex flex-col items-center justify-center gap-3 sm:flex-row\"\n        >\n          <UiButton @click=\"clearError({ redirect: '#' })\">\n            <Icon name=\"lucide:home\" class=\"mr-2 h-4 w-4\" />\n            Go Home\n          </UiButton>\n          <UiButton variant=\"outline\" @click=\"clearError({ redirect: '#' })\">\n            <Icon name=\"lucide:arrow-left\" class=\"mr-2 h-4 w-4\" />\n            Go Back\n          </UiButton>\n        </Motion>\n      </div>\n    </div>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 15 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const props = withDefaults(\n    defineProps<{\n      statusCode?: number;\n      fatal?: boolean;\n      unhandled?: boolean;\n      statusMessage?: string;\n      message?: string;\n      data?: unknown;\n      cause?: unknown;\n    }>(),\n    {\n      statusCode: 404,\n      fatal: false,\n      unhandled: false,\n      statusMessage: \"\",\n      message: \"Page Not Found\",\n      data: undefined,\n      cause: undefined,\n    }\n  );\n\n  const title = computed(() => {\n    if (!props.message) return \"Error\";\n    return props.message;\n  });\n\n  useSeoMeta({ title });\n</script>\n","category":"Error","path":"Error/BlockError7.vue","components":["button"]},{"name":"Error 8","fileName":"BlockError8.vue","file":"<template>\n  <!-- \n    Dark themed error with stats\n    Features: Dark gradient background, error stats cards, terminal-style code\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <div\n      class=\"relative flex min-h-screen items-center bg-linear-to-br from-background via-background to-primary/5 py-16\"\n    >\n      <div\n        class=\"absolute inset-0 bg-[linear-gradient(to_right,--alpha(var(--color-border)/40%)_1px,transparent_1px),linear-gradient(to_bottom,--alpha(var(--color-border)/40%)_1px,transparent_1px)] bg-size-[80px_80px]\"\n      />\n      <div class=\"relative z-1 container max-w-4xl\">\n        <Motion as=\"div\" :variants=\"childVariant\" class=\"mb-10\">\n          <UiBadge variant=\"outline\" class=\"mb-4\">Error {{ statusCode }}</UiBadge>\n          <h1 class=\"text-4xl font-bold tracking-tight lg:text-5xl\">{{ title }}</h1>\n          <p class=\"mt-4 text-lg text-muted-foreground\">\n            The server encountered an unexpected condition that prevented it from fulfilling the\n            request.\n          </p>\n        </Motion>\n\n        <Motion as=\"div\" :variants=\"childVariant\" class=\"mb-8 grid gap-4 sm:grid-cols-3\">\n          <UiCard>\n            <UiCardHeader class=\"pb-3\">\n              <UiCardDescription>Status Code</UiCardDescription>\n              <UiCardTitle class=\"text-2xl\">{{ statusCode }}</UiCardTitle>\n            </UiCardHeader>\n          </UiCard>\n          <UiCard>\n            <UiCardHeader class=\"pb-3\">\n              <UiCardDescription>Error Type</UiCardDescription>\n              <UiCardTitle class=\"text-2xl\">{{ fatal ? \"Fatal\" : \"Standard\" }}</UiCardTitle>\n            </UiCardHeader>\n          </UiCard>\n          <UiCard>\n            <UiCardHeader class=\"pb-3\">\n              <UiCardDescription>Timestamp</UiCardDescription>\n              <UiCardTitle class=\"text-2xl\">{{ timestamp }}</UiCardTitle>\n            </UiCardHeader>\n          </UiCard>\n        </Motion>\n\n        <Motion as-child :variants=\"childVariant\">\n          <UiCard class=\"mb-8 border-primary/20 bg-primary/5\">\n            <UiCardHeader>\n              <UiCardDescription class=\"font-mono text-xs\">Error Details</UiCardDescription>\n            </UiCardHeader>\n            <UiCardContent>\n              <pre\n                class=\"overflow-x-auto text-xs text-muted-foreground\"\n              ><code>{{ errorDetails }}</code></pre>\n            </UiCardContent>\n          </UiCard>\n        </Motion>\n\n        <Motion as=\"div\" :variants=\"childVariant\" class=\"flex flex-wrap gap-3\">\n          <UiButton @click=\"clearError({ redirect: '#' })\">\n            <Icon name=\"lucide:refresh-cw\" class=\"mr-2 h-4 w-4\" />\n            Retry\n          </UiButton>\n          <UiButton variant=\"outline\" @click=\"clearError({ redirect: '#' })\">\n            <Icon name=\"lucide:home\" class=\"mr-2 h-4 w-4\" />\n            Go Home\n          </UiButton>\n          <UiButton variant=\"ghost\" as=\"a\" href=\"#\">\n            <Icon name=\"lucide:bug\" class=\"mr-2 h-4 w-4\" />\n            Report Issue\n          </UiButton>\n        </Motion>\n      </div>\n    </div>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const props = withDefaults(\n    defineProps<{\n      statusCode?: number;\n      fatal?: boolean;\n      unhandled?: boolean;\n      statusMessage?: string;\n      message?: string;\n      data?: unknown;\n      cause?: unknown;\n    }>(),\n    {\n      statusCode: 500,\n      fatal: false,\n      unhandled: false,\n      statusMessage: \"\",\n      message: \"Internal Server Error\",\n      data: undefined,\n      cause: undefined,\n    }\n  );\n\n  const title = computed(() => {\n    if (!props.message) return \"Error\";\n    return props.message;\n  });\n\n  useSeoMeta({ title });\n\n  const timestamp = computed(() => {\n    const now = new Date();\n    return now.toLocaleTimeString(\"en-US\", { hour12: false });\n  });\n\n  const errorDetails = computed(() => {\n    return `{\n  \"error\": \"${props.message}\",\n  \"statusCode\": ${props.statusCode},\n  \"fatal\": ${props.fatal},\n  \"timestamp\": \"${new Date().toISOString()}\",\n  \"path\": \"${window.location.pathname}\"\n}`;\n  });\n</script>\n","category":"Error","path":"Error/BlockError8.vue","components":["badge","button","card","cardcontent","carddescription","cardheader","cardtitle"]},{"name":"Error 9","fileName":"BlockError9.vue","file":"<template>\n  <!-- \n    Interactive error page with search\n    Features: Inline search, recent pages, quick actions\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.12),\n        },\n      },\n    }\"\n  >\n    <div class=\"flex min-h-screen items-center\">\n      <div class=\"container max-w-3xl py-16\">\n        <Motion as=\"div\" :variants=\"childVariant\" class=\"mb-10 text-center\">\n          <div\n            class=\"mb-4 inline-flex items-center gap-2 rounded-full border bg-primary/5 px-4 py-1.5\"\n          >\n            <Icon name=\"lucide:alert-circle\" class=\"h-4 w-4 text-primary\" />\n            <span class=\"text-sm font-medium text-primary\">Error {{ statusCode }}</span>\n          </div>\n          <h1 class=\"mb-3 text-4xl font-bold tracking-tight lg:text-5xl\">{{ title }}</h1>\n          <p class=\"text-muted-foreground\">\n            We couldn't find what you're looking for. Try searching or explore our popular pages\n            below.\n          </p>\n        </Motion>\n\n        <Motion as-child :variants=\"childVariant\">\n          <UiCard class=\"mb-8\">\n            <UiCardHeader>\n              <UiCardTitle class=\"text-lg\">Search for what you need</UiCardTitle>\n            </UiCardHeader>\n            <UiCardContent>\n              <div class=\"relative\">\n                <Icon\n                  name=\"lucide:search\"\n                  class=\"absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground\"\n                />\n                <UiInput\n                  v-model=\"searchQuery\"\n                  placeholder=\"Search documentation, guides, articles...\"\n                  class=\"pl-10\"\n                />\n              </div>\n            </UiCardContent>\n          </UiCard>\n        </Motion>\n\n        <Motion as=\"div\" :variants=\"childVariant\" class=\"mb-8\">\n          <h2 class=\"mb-4 text-sm font-semibold tracking-wide text-muted-foreground uppercase\">\n            Popular Pages\n          </h2>\n          <div class=\"grid gap-3 sm:grid-cols-2\">\n            <Motion v-for=\"(page, i) in popularPages\" :key=\"i\" :variants=\"childVariant\">\n              <UiCard\n                class=\"group cursor-pointer transition-shadow hover:shadow-md\"\n                @click=\"clearError({ redirect: page.href })\"\n              >\n                <UiCardHeader>\n                  <div class=\"flex items-start justify-between\">\n                    <div class=\"flex items-center gap-3\">\n                      <div class=\"rounded-lg bg-primary/10 p-2\">\n                        <Icon :name=\"page.icon\" class=\"h-4 w-4 text-primary\" />\n                      </div>\n                      <div>\n                        <UiCardTitle class=\"text-base\">{{ page.title }}</UiCardTitle>\n                        <UiCardDescription class=\"text-sm\">{{\n                          page.description\n                        }}</UiCardDescription>\n                      </div>\n                    </div>\n                    <Icon\n                      name=\"lucide:arrow-right\"\n                      class=\"h-4 w-4 text-muted-foreground transition-transform group-hover:translate-x-1\"\n                    />\n                  </div>\n                </UiCardHeader>\n              </UiCard>\n            </Motion>\n          </div>\n        </Motion>\n\n        <Motion as=\"div\" :variants=\"childVariant\" class=\"flex justify-center\">\n          <UiButton variant=\"outline\" @click=\"clearError({ redirect: '#' })\">\n            <Icon name=\"lucide:home\" class=\"mr-2 h-4 w-4\" />\n            Back to Homepage\n          </UiButton>\n        </Motion>\n      </div>\n    </div>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 15 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const props = withDefaults(\n    defineProps<{\n      statusCode?: number;\n      fatal?: boolean;\n      unhandled?: boolean;\n      statusMessage?: string;\n      message?: string;\n      data?: unknown;\n      cause?: unknown;\n    }>(),\n    {\n      statusCode: 404,\n      fatal: false,\n      unhandled: false,\n      statusMessage: \"\",\n      message: \"Page Not Found\",\n      data: undefined,\n      cause: undefined,\n    }\n  );\n\n  const title = computed(() => {\n    if (!props.message) return \"Error\";\n    return props.message;\n  });\n\n  useSeoMeta({ title });\n\n  const searchQuery = ref(\"\");\n\n  const popularPages = [\n    {\n      icon: \"lucide:book-open\",\n      title: \"Documentation\",\n      description: \"Complete guides and references\",\n      href: \"#\",\n    },\n    {\n      icon: \"lucide:rocket\",\n      title: \"Getting Started\",\n      description: \"Quick start tutorials\",\n      href: \"#\",\n    },\n    {\n      icon: \"lucide:puzzle\",\n      title: \"Components\",\n      description: \"UI component library\",\n      href: \"#\",\n    },\n    {\n      icon: \"lucide:life-buoy\",\n      title: \"Support\",\n      description: \"Get help from our team\",\n      href: \"#\",\n    },\n  ];\n</script>\n","category":"Error","path":"Error/BlockError9.vue","components":["button","card","cardcontent","carddescription","cardheader","cardtitle","input"]},{"name":"Error Centered","fileName":"BlockErrorCentered.vue","file":"<template>\n  <!-- \n    Centered error page with radial pattern\n    Features: Radial dot pattern, centered content, animated entrance\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.15),\n        },\n      },\n    }\"\n  >\n    <div class=\"relative flex min-h-screen items-center\">\n      <div\n        class=\"absolute h-full w-full bg-[radial-gradient(var(--color-border)_1px,transparent_1px)] mask-[radial-gradient(ellipse_closest-side_at_50%_50%,#000_60%,transparent_100%)] bg-size-[20px_20px]\"\n      />\n      <div class=\"relative z-1 container flex flex-col items-center justify-center text-center\">\n        <Motion as=\"p\" :variants=\"childVariant\" class=\"mb-5 font-bold tracking-tight text-primary\">\n          {{ statusCode }} error\n        </Motion>\n        <Motion\n          as=\"h1\"\n          :variants=\"childVariant\"\n          class=\"text-4xl font-bold tracking-tight lg:text-5xl\"\n        >\n          {{ title }}\n        </Motion>\n        <Motion :variants=\"childVariant\">\n          <UiButton class=\"mt-5\" @click=\"clearError({ redirect: '#' })\">\n            Take me home\n            <Icon name=\"lucide:arrow-right\" class=\"ml-2 h-4 w-4\" />\n          </UiButton>\n        </Motion>\n      </div>\n    </div>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const props = withDefaults(\n    defineProps<{\n      statusCode?: number;\n      fatal?: boolean;\n      unhandled?: boolean;\n      statusMessage?: string;\n      message?: string;\n      data?: unknown;\n      cause?: unknown;\n    }>(),\n    {\n      statusCode: 404,\n      fatal: false,\n      unhandled: false,\n      statusMessage: \"\",\n      message: \"We can't find this page\",\n      data: undefined,\n      cause: undefined,\n    }\n  );\n\n  const title = computed(() => {\n    if (!props.message) return \"Error\";\n    return props.message;\n  });\n\n  useSeoMeta({ title });\n</script>\n","category":"Error","path":"Error/BlockErrorCentered.vue","components":["button"]},{"name":"Error Image","fileName":"BlockErrorImage.vue","file":"<template>\n  <!-- \n    Error page with split image layout\n    Features: Two-column split, decorative image, animated content\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.15),\n        },\n      },\n    }\"\n  >\n    <div class=\"relative flex min-h-screen items-center overflow-x-hidden\">\n      <div class=\"container flex w-full items-center justify-center md:w-1/2\">\n        <div>\n          <Motion\n            as=\"p\"\n            :variants=\"childVariant\"\n            class=\"mb-5 font-bold tracking-tight text-primary\"\n          >\n            {{ statusCode }} error\n          </Motion>\n          <Motion\n            as=\"h1\"\n            :variants=\"childVariant\"\n            class=\"text-4xl font-bold tracking-tight lg:text-5xl\"\n          >\n            {{ title }}\n          </Motion>\n          <Motion :variants=\"childVariant\">\n            <UiButton class=\"mt-5\" @click=\"clearError({ redirect: '#' })\">\n              Take me home\n              <Icon name=\"lucide:arrow-right\" class=\"ml-2 h-4 w-4\" />\n            </UiButton>\n          </Motion>\n        </div>\n      </div>\n      <Motion\n        :variants=\"{\n          initial: { opacity: 0, x: 30 },\n          animate: {\n            opacity: 1,\n            x: 0,\n            transition: {\n              type: 'spring',\n              stiffness: 200,\n              damping: 25,\n            },\n          },\n        }\"\n        class=\"hidden h-screen md:block md:w-1/2 lg:w-1/2\"\n      >\n        <img\n          src=\"https://images.unsplash.com/photo-1512551980832-13df02babc9e?q=60&w=2864&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Error page image\"\n          class=\"size-full object-cover\"\n        />\n      </Motion>\n    </div>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const props = withDefaults(\n    defineProps<{\n      statusCode?: number;\n      fatal?: boolean;\n      unhandled?: boolean;\n      statusMessage?: string;\n      message?: string;\n      data?: unknown;\n      cause?: unknown;\n    }>(),\n    {\n      statusCode: 404,\n      fatal: false,\n      unhandled: false,\n      statusMessage: \"\",\n      message: \"We can't find this page\",\n      data: undefined,\n      cause: undefined,\n    }\n  );\n\n  const title = computed(() => {\n    if (!props.message) return \"Error\";\n    return props.message;\n  });\n\n  useSeoMeta({ title });\n</script>\n","category":"Error","path":"Error/BlockErrorImage.vue","components":["button"]},{"name":"Error Links","fileName":"BlockErrorLinks.vue","file":"<template>\n  <!-- \n    Error page with helpful links\n    Features: Grid pattern, quick navigation links, staggered animations\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <div class=\"relative flex min-h-screen items-center\">\n      <div\n        class=\"absolute inset-0 bg-[linear-gradient(to_right,--alpha(var(--color-border)/80%)_1px,transparent_1px),linear-gradient(to_bottom,--alpha(var(--color-border)/80%)_1px,transparent_1px)] mask-[radial-gradient(ellipse_closest-side_at_50%_0%,#000_70%,transparent_110%)] bg-size-[60px_60px]\"\n      />\n      <div class=\"relative z-1 container\">\n        <Motion as=\"p\" :variants=\"childVariant\" class=\"mb-5 font-bold tracking-tight text-primary\">\n          {{ statusCode }} error\n        </Motion>\n        <Motion\n          as=\"h1\"\n          :variants=\"childVariant\"\n          class=\"text-4xl font-bold tracking-tight lg:text-5xl\"\n        >\n          {{ title }}\n        </Motion>\n        <Motion :variants=\"childVariant\">\n          <UiButton class=\"mt-5\" @click=\"clearError({ redirect: '#' })\">\n            Take me home\n            <Icon name=\"lucide:arrow-right\" class=\"ml-2 h-4 w-4\" />\n          </UiButton>\n        </Motion>\n        <ul class=\"mt-10 flex flex-col gap-5\">\n          <Motion v-for=\"(l, i) in links\" :key=\"i\" :variants=\"childVariant\" as=\"li\">\n            <NuxtLink class=\"group inline-flex flex-col gap-0.5\" :to=\"l.href\">\n              <span\n                class=\"font-bold text-primary underline-offset-2 transition-all group-hover:translate-x-1 group-hover:underline\"\n              >\n                {{ l.title }}\n                <Icon\n                  name=\"lucide:arrow-right\"\n                  class=\"ml-1 inline h-4 w-4 transition-transform group-hover:translate-x-1\"\n                />\n              </span>\n              <span class=\"text-sm text-muted-foreground\">{{ l.text }}</span>\n            </NuxtLink>\n          </Motion>\n        </ul>\n      </div>\n    </div>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const props = withDefaults(\n    defineProps<{\n      statusCode?: number;\n      fatal?: boolean;\n      unhandled?: boolean;\n      statusMessage?: string;\n      message?: string;\n      data?: unknown;\n      cause?: unknown;\n    }>(),\n    {\n      statusCode: 404,\n      fatal: false,\n      unhandled: false,\n      statusMessage: \"\",\n      message: \"We can't find this page\",\n      data: undefined,\n      cause: undefined,\n    }\n  );\n\n  const title = computed(() => {\n    if (!props.message) return \"Error\";\n    return props.message;\n  });\n\n  useSeoMeta({ title });\n\n  const links = [\n    { title: \"Documentation\", href: \"#\", text: \"Learn more about the error\" },\n    { title: \"Contact support\", href: \"#\", text: \"Get help from our support team\" },\n    { title: \"Our blog\", href: \"#\", text: \"Read the latest news\" },\n  ];\n</script>\n","category":"Error","path":"Error/BlockErrorLinks.vue","components":["button"]},{"name":"FAQ 1","fileName":"BlockFAQ1.vue","file":"<template>\n  <!-- \n    Grid FAQ layout with icon cards\n    Features: Three-column grid, icon cards, staggered animations, centered text\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"pb-16\">\n      <UiContainer class=\"py-16 text-center lg:py-24\">\n        <Motion\n          as=\"h2\"\n          :variants=\"childVariant\"\n          class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:mb-6 lg:text-5xl\"\n        >\n          Frequently asked questions\n        </Motion>\n\n        <Motion\n          as=\"p\"\n          :variants=\"childVariant\"\n          class=\"mx-auto max-w-[800px] text-lg text-muted-foreground lg:text-xl\"\n        >\n          Everything you need to know about the product and billing.\n        </Motion>\n      </UiContainer>\n      <section class=\"grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3 lg:gap-y-12\">\n        <Motion\n          v-for=\"(faq, n) in faqs\"\n          :key=\"n\"\n          :variants=\"childVariant\"\n          class=\"flex flex-col items-center text-center\"\n        >\n          <div\n            class=\"flex h-12 w-12 items-center justify-center rounded-lg border bg-primary/5 transition-colors hover:bg-primary/10\"\n          >\n            <Icon :name=\"faq.icon\" class=\"h-6 w-6 text-primary\" />\n          </div>\n          <p class=\"mt-5 text-lg font-semibold\">{{ faq.question }}</p>\n          <p class=\"mt-2 text-muted-foreground\">\n            {{ faq.answer }}\n          </p>\n        </Motion>\n      </section>\n\n      <Motion as-child :variants=\"childVariant\">\n        <section\n          class=\"mx-auto mt-16 flex flex-col items-center gap-6 rounded-lg bg-muted/50 py-8 text-center dark:bg-muted/20\"\n        >\n          <p class=\"text-lg font-semibold\">Still have questions?</p>\n          <p class=\"text-muted-foreground\">\n            Can't find the answer you're looking for? Please chat to our friendly team.\n          </p>\n          <UiButton>\n            Get in touch\n            <Icon name=\"lucide:arrow-right\" class=\"ml-2 h-4 w-4\" />\n          </UiButton>\n        </section>\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const faqs = [\n    {\n      icon: \"lucide:sparkles\",\n      question: \"Is there a free trial available?\",\n      answer:\n        \"Yes, you can try us for free for 30 days. Our friendly team will work with you to get you up and running as soon as possible.\",\n    },\n    {\n      icon: \"lucide:credit-card\",\n      question: \"Can I change my plan later?\",\n      answer:\n        \"Of course! You can upgrade or downgrade your plan at any time. Changes will be reflected in your next billing cycle.\",\n    },\n    {\n      icon: \"lucide:users\",\n      question: \"What is your cancellation policy?\",\n      answer:\n        \"You can cancel your subscription at any time. Your account will remain active until the end of your billing period.\",\n    },\n    {\n      icon: \"lucide:lock\",\n      question: \"Is my data secure?\",\n      answer:\n        \"Absolutely. We use industry-standard encryption and security measures to protect your data at all times.\",\n    },\n    {\n      icon: \"lucide:headphones\",\n      question: \"Do you offer customer support?\",\n      answer:\n        \"Yes! Our support team is available 24/7 via email and live chat to help you with any questions or issues.\",\n    },\n    {\n      icon: \"lucide:zap\",\n      question: \"How do I get started?\",\n      answer:\n        \"Simply sign up for an account, choose your plan, and you'll be up and running in minutes with our quick onboarding process.\",\n    },\n  ];\n</script>\n","category":"FAQ","path":"FAQ/BlockFAQ1.vue","components":["button","container"]},{"name":"FAQ 2","fileName":"BlockFAQ2.vue","file":"<template>\n  <!-- \n    Grid FAQ with left-aligned cards\n    Features: Three-column grid, left-aligned text, icon cards, horizontal CTA\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"pb-16\">\n      <UiContainer class=\"py-16 text-center lg:py-24\">\n        <Motion\n          as=\"h2\"\n          :variants=\"childVariant\"\n          class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:mb-6 lg:text-5xl\"\n        >\n          FAQs\n        </Motion>\n\n        <Motion\n          as=\"p\"\n          :variants=\"childVariant\"\n          class=\"mx-auto max-w-[800px] text-lg text-muted-foreground lg:text-xl\"\n        >\n          Everything you need to know about the product and billing.\n        </Motion>\n      </UiContainer>\n      <section class=\"grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3 lg:gap-y-12\">\n        <Motion v-for=\"(faq, n) in faqs\" :key=\"n\" :variants=\"childVariant\" class=\"flex flex-col\">\n          <div\n            class=\"flex h-12 w-12 items-center justify-center rounded-lg border bg-primary/5 transition-colors hover:bg-primary/10\"\n          >\n            <Icon :name=\"faq.icon\" class=\"h-6 w-6 text-primary\" />\n          </div>\n          <p class=\"mt-5 text-lg font-semibold\">{{ faq.question }}</p>\n          <p class=\"mt-2 text-muted-foreground\">\n            {{ faq.answer }}\n          </p>\n        </Motion>\n      </section>\n\n      <Motion as-child :variants=\"childVariant\">\n        <section\n          class=\"mx-auto mt-16 flex flex-col items-center justify-between gap-6 rounded-lg bg-muted/50 p-8 py-8 text-center lg:flex-row lg:text-left dark:bg-muted/20\"\n        >\n          <div>\n            <p class=\"mb-3 text-lg font-semibold\">Still have questions?</p>\n            <p class=\"text-muted-foreground\">\n              Can't find the answer you're looking for? Please chat to our friendly team.\n            </p>\n          </div>\n          <UiButton class=\"shrink-0\">\n            Get in touch\n            <Icon name=\"lucide:arrow-right\" class=\"ml-2 h-4 w-4\" />\n          </UiButton>\n        </section>\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const faqs = [\n    {\n      icon: \"lucide:sparkles\",\n      question: \"Is there a free trial available?\",\n      answer:\n        \"Yes, you can try us for free for 30 days. Our friendly team will work with you to get you up and running as soon as possible.\",\n    },\n    {\n      icon: \"lucide:credit-card\",\n      question: \"Can I change my plan later?\",\n      answer:\n        \"Of course! You can upgrade or downgrade your plan at any time. Changes will be reflected in your next billing cycle.\",\n    },\n    {\n      icon: \"lucide:users\",\n      question: \"What is your cancellation policy?\",\n      answer:\n        \"You can cancel your subscription at any time. Your account will remain active until the end of your billing period.\",\n    },\n    {\n      icon: \"lucide:lock\",\n      question: \"Is my data secure?\",\n      answer:\n        \"Absolutely. We use industry-standard encryption and security measures to protect your data at all times.\",\n    },\n    {\n      icon: \"lucide:headphones\",\n      question: \"Do you offer customer support?\",\n      answer:\n        \"Yes! Our support team is available 24/7 via email and live chat to help you with any questions or issues.\",\n    },\n    {\n      icon: \"lucide:zap\",\n      question: \"How do I get started?\",\n      answer:\n        \"Simply sign up for an account, choose your plan, and you'll be up and running in minutes with our quick onboarding process.\",\n    },\n  ];\n</script>\n","category":"FAQ","path":"FAQ/BlockFAQ2.vue","components":["button","container"]},{"name":"FAQ 3","fileName":"BlockFAQ3.vue","file":"<template>\n  <!-- \n    Accordion FAQ layout\n    Features: Classic accordion with expand/collapse, centered layout, animated content\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"pb-16\">\n      <UiContainer class=\"py-16 text-center lg:py-24\">\n        <Motion\n          as=\"h2\"\n          :variants=\"childVariant\"\n          class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:mb-6 lg:text-5xl\"\n        >\n          Frequently asked questions\n        </Motion>\n\n        <Motion\n          as=\"p\"\n          :variants=\"childVariant\"\n          class=\"mx-auto max-w-[800px] text-lg text-muted-foreground lg:text-xl\"\n        >\n          Everything you need to know about the product and billing.\n        </Motion>\n      </UiContainer>\n      <Motion as-child :variants=\"childVariant\">\n        <section class=\"mx-auto max-w-[768px]\">\n          <UiAccordion :default-value=\"['item-1']\" type=\"multiple\">\n            <UiAccordionItem v-for=\"i in items\" :key=\"i.value\" :value=\"i.value\">\n              <UiAccordionHeader>\n                <UiAccordionTrigger class=\"text-lg hover:text-primary\">{{\n                  i.title\n                }}</UiAccordionTrigger>\n              </UiAccordionHeader>\n              <UiAccordionContent>\n                <p class=\"text-base text-muted-foreground\">{{ i.content }}</p>\n              </UiAccordionContent>\n            </UiAccordionItem>\n          </UiAccordion>\n        </section>\n      </Motion>\n\n      <Motion as-child :variants=\"childVariant\">\n        <section\n          class=\"mx-auto mt-16 flex flex-col items-center gap-6 rounded-lg bg-muted/50 py-8 text-center dark:bg-muted/20\"\n        >\n          <p class=\"text-lg font-semibold\">Still have questions?</p>\n          <p class=\"text-muted-foreground\">\n            Can't find the answer you're looking for? Please chat to our friendly team.\n          </p>\n          <UiButton>\n            Get in touch\n            <Icon name=\"lucide:arrow-right\" class=\"ml-2 h-4 w-4\" />\n          </UiButton>\n        </section>\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const items = [\n    {\n      value: \"item-1\",\n      title: \"Is there a free trial available?\",\n      content:\n        \"Yes, you can try us for free for 30 days. If you want, we'll provide you with a free, personalized 30-minute onboarding call to get you up and running as soon as possible.\",\n    },\n    {\n      value: \"item-2\",\n      title: \"Can I change my plan later?\",\n      content:\n        \"Of course! You can upgrade or downgrade your plan at any time. Changes will be reflected in your next billing cycle, and we'll prorate any differences.\",\n    },\n    {\n      value: \"item-3\",\n      title: \"What is your cancellation policy?\",\n      content:\n        \"You can cancel your subscription at any time with no penalties. Your account will remain active until the end of your current billing period.\",\n    },\n    {\n      value: \"item-4\",\n      title: \"Can other info be added to an invoice?\",\n      content:\n        \"Yes, you can add custom information to your invoices such as PO numbers, tax IDs, or billing addresses through your account settings.\",\n    },\n    {\n      value: \"item-5\",\n      title: \"How does billing work?\",\n      content:\n        \"We bill you automatically at the start of each billing period. You'll receive an invoice via email, and payment will be processed using your saved payment method.\",\n    },\n    {\n      value: \"item-6\",\n      title: \"How do I change my account email?\",\n      content:\n        \"You can update your email address in your account settings. We'll send a verification email to your new address to confirm the change.\",\n    },\n  ];\n</script>\n","category":"FAQ","path":"FAQ/BlockFAQ3.vue","components":["accordion","accordioncontent","accordionheader","accordionitem","accordiontrigger","button","container"]},{"name":"FAQ 4","fileName":"BlockFAQ4.vue","file":"<template>\n  <!-- \n    Two-column FAQ with categories\n    Features: Split layout, category tabs, accordion per category, search bar\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <div class=\"mb-8 text-center\">\n        <Motion\n          as=\"h2\"\n          :variants=\"childVariant\"\n          class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:text-5xl\"\n        >\n          How can we help?\n        </Motion>\n\n        <Motion\n          as=\"p\"\n          :variants=\"childVariant\"\n          class=\"mx-auto max-w-[800px] text-lg text-muted-foreground lg:text-xl\"\n        >\n          Search our FAQ or browse by category below.\n        </Motion>\n\n        <Motion as-child :variants=\"childVariant\">\n          <div class=\"mx-auto mt-8 max-w-lg\">\n            <UiVeeInput\n              v-model=\"searchQuery\"\n              icon=\"lucide:search\"\n              placeholder=\"Search for answers...\"\n            />\n          </div>\n        </Motion>\n      </div>\n\n      <Motion :variants=\"childVariant\">\n        <UiTabs default-value=\"general\" class=\"mx-auto w-full max-w-lg\">\n          <UiTabsList class=\"mx-auto mb-8 grid w-full grid-cols-3\">\n            <UiTabsTrigger value=\"general\">General</UiTabsTrigger>\n            <UiTabsTrigger value=\"billing\">Billing</UiTabsTrigger>\n            <UiTabsTrigger value=\"technical\">Technical</UiTabsTrigger>\n          </UiTabsList>\n\n          <UiTabsContent value=\"general\">\n            <section class=\"mx-auto\">\n              <UiAccordion type=\"single\" collapsible>\n                <UiAccordionItem v-for=\"i in generalFaqs\" :key=\"i.value\" :value=\"i.value\">\n                  <UiAccordionHeader>\n                    <UiAccordionTrigger class=\"text-base hover:text-primary\">{{\n                      i.title\n                    }}</UiAccordionTrigger>\n                  </UiAccordionHeader>\n                  <UiAccordionContent>\n                    <p class=\"text-base text-muted-foreground\">{{ i.content }}</p>\n                  </UiAccordionContent>\n                </UiAccordionItem>\n              </UiAccordion>\n            </section>\n          </UiTabsContent>\n\n          <UiTabsContent value=\"billing\">\n            <section class=\"mx-auto\">\n              <UiAccordion type=\"single\" collapsible>\n                <UiAccordionItem v-for=\"i in billingFaqs\" :key=\"i.value\" :value=\"i.value\">\n                  <UiAccordionHeader>\n                    <UiAccordionTrigger class=\"text-base hover:text-primary\">{{\n                      i.title\n                    }}</UiAccordionTrigger>\n                  </UiAccordionHeader>\n                  <UiAccordionContent>\n                    <p class=\"text-base text-muted-foreground\">{{ i.content }}</p>\n                  </UiAccordionContent>\n                </UiAccordionItem>\n              </UiAccordion>\n            </section>\n          </UiTabsContent>\n\n          <UiTabsContent value=\"technical\">\n            <section class=\"mx-auto\">\n              <UiAccordion type=\"single\" collapsible>\n                <UiAccordionItem v-for=\"i in technicalFaqs\" :key=\"i.value\" :value=\"i.value\">\n                  <UiAccordionHeader>\n                    <UiAccordionTrigger class=\"text-base hover:text-primary\">{{\n                      i.title\n                    }}</UiAccordionTrigger>\n                  </UiAccordionHeader>\n                  <UiAccordionContent>\n                    <p class=\"text-base text-muted-foreground\">{{ i.content }}</p>\n                  </UiAccordionContent>\n                </UiAccordionItem>\n              </UiAccordion>\n            </section>\n          </UiTabsContent>\n        </UiTabs>\n      </Motion>\n\n      <Motion as-child :variants=\"childVariant\">\n        <section\n          class=\"mx-auto mt-16 flex max-w-4xl flex-col items-center gap-6 rounded-lg bg-muted/50 py-8 text-center dark:bg-muted/20\"\n        >\n          <p class=\"text-lg font-semibold\">Still need help?</p>\n          <p class=\"text-muted-foreground\">Our support team is here to answer your questions.</p>\n          <UiButton>\n            Contact Support\n            <Icon name=\"lucide:arrow-right\" class=\"ml-2 h-4 w-4\" />\n          </UiButton>\n        </section>\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const searchQuery = ref(\"\");\n\n  const generalFaqs = [\n    {\n      value: \"gen-1\",\n      title: \"What is your product?\",\n      content:\n        \"Our product is a comprehensive solution that helps teams collaborate more effectively and get work done faster.\",\n    },\n    {\n      value: \"gen-2\",\n      title: \"Who can use this product?\",\n      content:\n        \"Anyone! Our product is designed for teams of all sizes, from startups to large enterprises.\",\n    },\n    {\n      value: \"gen-3\",\n      title: \"Is there a mobile app?\",\n      content:\n        \"Yes, we offer mobile apps for both iOS and Android devices with full feature parity.\",\n    },\n  ];\n\n  const billingFaqs = [\n    {\n      value: \"bill-1\",\n      title: \"What payment methods do you accept?\",\n      content:\n        \"We accept all major credit cards, PayPal, and bank transfers for enterprise customers.\",\n    },\n    {\n      value: \"bill-2\",\n      title: \"Can I get a refund?\",\n      content:\n        \"Yes, we offer a 30-day money-back guarantee if you're not satisfied with our service.\",\n    },\n    {\n      value: \"bill-3\",\n      title: \"Do you offer discounts for nonprofits?\",\n      content:\n        \"Yes, we offer special pricing for nonprofit organizations and educational institutions.\",\n    },\n  ];\n\n  const technicalFaqs = [\n    {\n      value: \"tech-1\",\n      title: \"What are the system requirements?\",\n      content:\n        \"Our product works on all modern browsers and requires a stable internet connection.\",\n    },\n    {\n      value: \"tech-2\",\n      title: \"How do I integrate with other tools?\",\n      content: \"We offer integrations with popular tools through our API and native connectors.\",\n    },\n    {\n      value: \"tech-3\",\n      title: \"Is my data backed up?\",\n      content:\n        \"Yes, we perform automated backups every hour and store them in multiple geographic locations.\",\n    },\n  ];\n</script>\n","category":"FAQ","path":"FAQ/BlockFAQ4.vue","components":["accordion","accordioncontent","accordionheader","accordionitem","accordiontrigger","button","container","tabs","tabscontent","tabslist","tabstrigger","veeinput"]},{"name":"FAQ 5","fileName":"BlockFAQ5.vue","file":"<template>\n  <!-- \n    Card-based FAQ with search\n    Features: FAQ cards with hover effects, search filter, category badges\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.08),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"pb-16\">\n      <div class=\"py-16 text-center lg:py-24\">\n        <Motion\n          as=\"h2\"\n          :variants=\"childVariant\"\n          class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:mb-6 lg:text-5xl\"\n        >\n          Frequently Asked Questions\n        </Motion>\n\n        <Motion\n          as=\"p\"\n          :variants=\"childVariant\"\n          class=\"mx-auto max-w-[800px] text-lg text-muted-foreground lg:text-xl\"\n        >\n          Find answers to common questions about our service.\n        </Motion>\n\n        <Motion as-child :variants=\"childVariant\">\n          <div class=\"mx-auto mt-8 max-w-lg\">\n            <UiVeeInput v-model=\"searchQuery\" icon=\"lucide:search\" placeholder=\"Search FAQs...\" />\n          </div>\n        </Motion>\n      </div>\n\n      <section class=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n        <Motion v-for=\"faq in filteredFaqs\" :key=\"faq.id\" :variants=\"childVariant\" class=\"h-full\">\n          <UiCard\n            as-child\n            class=\"group cursor-pointer transition-all hover:border-primary/50 hover:shadow-lg\"\n          >\n            <NuxtLink :to=\"faq.link || '#'\" class=\"block h-full\">\n              <UiCardHeader>\n                <div class=\"mb-3 flex items-center gap-2\">\n                  <UiBadge variant=\"outline\" class=\"text-xs\">{{ faq.category }}</UiBadge>\n                </div>\n                <UiCardTitle class=\"text-xl group-hover:text-primary\">{{\n                  faq.question\n                }}</UiCardTitle>\n              </UiCardHeader>\n              <UiCardContent>\n                <p class=\"text-muted-foreground\">{{ faq.answer }}</p>\n              </UiCardContent>\n            </NuxtLink>\n          </UiCard>\n        </Motion>\n      </section>\n\n      <Motion as-child :variants=\"childVariant\">\n        <section\n          class=\"mx-auto mt-16 flex flex-col items-center gap-6 rounded-lg border bg-muted/30 py-12 text-center dark:bg-muted/10\"\n        >\n          <div class=\"flex h-14 w-14 items-center justify-center rounded-full bg-primary/10\">\n            <Icon name=\"lucide:message-circle\" class=\"h-7 w-7 text-primary\" />\n          </div>\n          <div>\n            <p class=\"mb-2 text-xl font-semibold\">Can't find what you're looking for?</p>\n            <p class=\"text-muted-foreground\">\n              Our team is always happy to help you find the answers you need.\n            </p>\n          </div>\n          <div class=\"flex flex-wrap gap-3\">\n            <UiButton>\n              <Icon name=\"lucide:mail\" class=\"mr-2 h-4 w-4\" />\n              Email Us\n            </UiButton>\n            <UiButton variant=\"outline\">\n              <Icon name=\"lucide:phone\" class=\"mr-2 h-4 w-4\" />\n              Call Support\n            </UiButton>\n          </div>\n        </section>\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const searchQuery = ref(\"\");\n\n  const faqs = [\n    {\n      id: 1,\n      category: \"General\",\n      question: \"How do I get started?\",\n      answer:\n        \"Sign up for a free account, complete the onboarding, and you'll be ready to go in minutes.\",\n      link: \"/getting-started/introduction\",\n    },\n    {\n      id: 2,\n      category: \"Billing\",\n      question: \"What payment methods are accepted?\",\n      answer: \"We accept all major credit cards, PayPal, and wire transfers for enterprise plans.\",\n      link: \"\",\n    },\n    {\n      id: 3,\n      category: \"Features\",\n      question: \"Can I collaborate with my team?\",\n      answer: \"Yes! You can invite unlimited team members and collaborate in real-time.\",\n      link: \"\",\n    },\n    {\n      id: 4,\n      category: \"Security\",\n      question: \"How secure is my data?\",\n      answer: \"We use bank-level encryption and security measures to protect all your data.\",\n      link: \"\",\n    },\n    {\n      id: 5,\n      category: \"Support\",\n      question: \"Do you offer 24/7 support?\",\n      answer: \"Yes, our support team is available around the clock via email and live chat.\",\n      link: \"\",\n    },\n    {\n      id: 6,\n      category: \"Integration\",\n      question: \"Does it integrate with other tools?\",\n      answer:\n        \"We integrate with over 50+ popular tools including Slack, Google Workspace, and more.\",\n      link: \"\",\n    },\n  ];\n\n  const filteredFaqs = computed(() => {\n    if (!searchQuery.value) return faqs;\n    const query = searchQuery.value.toLowerCase();\n    return faqs.filter(\n      (faq) =>\n        faq.question.toLowerCase().includes(query) ||\n        faq.answer.toLowerCase().includes(query) ||\n        faq.category.toLowerCase().includes(query)\n    );\n  });\n</script>\n","category":"FAQ","path":"FAQ/BlockFAQ5.vue","components":["badge","button","card","cardcontent","cardheader","cardtitle","container","veeinput"]},{"name":"FAQ 6","fileName":"BlockFAQ6.vue","file":"<template>\n  <!-- \n    Minimal two-column FAQ\n    Features: Side-by-side layout, compact design, visual hierarchy\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"py-16\">\n      <div class=\"grid gap-16 lg:grid-cols-2 lg:gap-24\">\n        <Motion as-child :variants=\"childVariant\">\n          <div class=\"lg:sticky lg:top-16 lg:self-start\">\n            <UiBadge class=\"mb-4\">FAQ</UiBadge>\n            <h2 class=\"mb-4 text-4xl font-bold lg:text-5xl\">Questions & Answers</h2>\n            <p class=\"mb-8 text-lg text-muted-foreground\">\n              Everything you need to know about our product and how it works.\n            </p>\n            <UiButton variant=\"outline\">\n              Contact Support\n              <Icon name=\"lucide:arrow-right\" class=\"ml-2 h-4 w-4\" />\n            </UiButton>\n          </div>\n        </Motion>\n\n        <ul class=\"space-y-8\">\n          <Motion\n            v-for=\"(faq, idx) in faqs\"\n            :key=\"idx\"\n            as=\"li\"\n            :variants=\"childVariant\"\n            class=\"border-b pb-8 last:border-0\"\n          >\n            <h3 class=\"mb-3 font-bold text-pretty\">{{ faq.question }}</h3>\n            <p class=\"text-muted-foreground\">{{ faq.answer }}</p>\n          </Motion>\n        </ul>\n      </div>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const faqs = [\n    {\n      question: \"Is there a free trial available?\",\n      answer:\n        \"Yes, you can try us for free for 30 days. Our friendly team will work with you to get you up and running as soon as possible.\",\n    },\n    {\n      question: \"Can I change my plan later?\",\n      answer:\n        \"Of course! You can upgrade or downgrade your plan at any time. Changes will be reflected in your next billing cycle.\",\n    },\n    {\n      question: \"What is your cancellation policy?\",\n      answer:\n        \"You can cancel your subscription at any time with no penalties. Your account will remain active until the end of your billing period.\",\n    },\n    {\n      question: \"Can other info be added to an invoice?\",\n      answer:\n        \"Yes, you can add custom information to your invoices such as PO numbers, tax IDs, or billing addresses.\",\n    },\n    {\n      question: \"How does billing work?\",\n      answer:\n        \"We bill you automatically at the start of each billing period. You'll receive an invoice via email.\",\n    },\n    {\n      question: \"How do I change my account email?\",\n      answer:\n        \"You can update your email address in your account settings. We'll send a verification email to confirm.\",\n    },\n  ];\n</script>\n","category":"FAQ","path":"FAQ/BlockFAQ6.vue","components":["badge","button","container"]},{"name":"FAQ 7","fileName":"BlockFAQ7.vue","file":"<template>\n  <!-- \n    Interactive collapsible FAQ cards\n    Features: Animated expand/collapse, card hover, toggle icons\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.08),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"pb-16\">\n      <div class=\"py-16 text-center lg:py-24\">\n        <Motion\n          as=\"h2\"\n          :variants=\"childVariant\"\n          class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:text-5xl\"\n        >\n          Got Questions?\n        </Motion>\n\n        <Motion\n          as=\"p\"\n          :variants=\"childVariant\"\n          class=\"mx-auto max-w-[800px] text-lg text-muted-foreground lg:text-xl\"\n        >\n          We've got answers. Browse our most common questions below.\n        </Motion>\n      </div>\n      <section class=\"mx-auto max-w-3xl space-y-4\">\n        <Motion v-for=\"(faq, idx) in faqs\" :key=\"idx\" :variants=\"childVariant\">\n          <UiCard\n            class=\"cursor-pointer gap-0 transition-all hover:shadow-md\"\n            :class=\"[openIndex === idx ? 'border-primary' : '']\"\n            @click=\"toggleFaq(idx)\"\n          >\n            <UiCardHeader>\n              <div class=\"flex items-center justify-between gap-4\">\n                <UiCardTitle class=\"text-lg\">{{ faq.question }}</UiCardTitle>\n                <Icon\n                  :name=\"openIndex === idx ? 'lucide:minus' : 'lucide:plus'\"\n                  class=\"h-5 w-5 shrink-0 text-primary transition-transform\"\n                />\n              </div>\n            </UiCardHeader>\n\n            <AnimatePresence>\n              <Motion\n                v-if=\"openIndex === idx\"\n                :initial=\"{ opacity: 0, height: 0 }\"\n                :animate=\"{ opacity: 1, height: 'auto' }\"\n                :exit=\"{ height: 0, opacity: 0 }\"\n              >\n                <UiCardContent class=\"mt-3\">\n                  <p class=\"text-muted-foreground\">{{ faq.answer }}</p>\n                </UiCardContent>\n              </Motion>\n            </AnimatePresence>\n          </UiCard>\n        </Motion>\n      </section>\n\n      <Motion as-child :variants=\"childVariant\">\n        <div class=\"mx-auto mt-16 max-w-2xl text-center\">\n          <p class=\"mb-4 text-lg font-semibold\">Still have a question?</p>\n          <p class=\"mb-6 text-muted-foreground\">\n            If you can't find the answer you're looking for, please reach out to our support team.\n          </p>\n          <div class=\"flex flex-wrap justify-center gap-3\">\n            <UiButton>\n              <Icon name=\"lucide:headphones\" class=\"mr-2 h-4 w-4\" />\n              Live Chat\n            </UiButton>\n            <UiButton variant=\"outline\">\n              <Icon name=\"lucide:mail\" class=\"mr-2 h-4 w-4\" />\n              Send Email\n            </UiButton>\n          </div>\n        </div>\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const openIndex = ref<number | null>(0);\n\n  const toggleFaq = (idx: number) => {\n    openIndex.value = openIndex.value === idx ? null : idx;\n  };\n\n  const faqs = [\n    {\n      question: \"What makes your product different?\",\n      answer:\n        \"Our product combines powerful features with an intuitive interface, making it easier for teams to collaborate and achieve their goals.\",\n    },\n    {\n      question: \"Is there a setup fee?\",\n      answer:\n        \"No, there are no setup fees. You only pay for your chosen plan, and you can start using the product immediately after signing up.\",\n    },\n    {\n      question: \"Do you offer training or onboarding?\",\n      answer:\n        \"Yes, we provide comprehensive onboarding for all new customers, including live training sessions and detailed documentation.\",\n    },\n    {\n      question: \"Can I export my data?\",\n      answer:\n        \"Absolutely! You can export all your data at any time in multiple formats including CSV, JSON, and Excel.\",\n    },\n    {\n      question: \"What kind of support do you offer?\",\n      answer:\n        \"We offer 24/7 email support for all plans, with priority live chat and phone support available on premium plans.\",\n    },\n    {\n      question: \"Do you have an API?\",\n      answer:\n        \"Yes, we provide a comprehensive REST API that allows you to integrate our platform with your existing tools and workflows.\",\n    },\n  ];\n</script>\n","category":"FAQ","path":"FAQ/BlockFAQ7.vue","components":["button","card","cardcontent","cardheader","cardtitle","container"]},{"name":"Feature 1","fileName":"BlockFeature1.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.12),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <Motion :variants=\"childVariant\">\n        <Motion as=\"p\" :variants=\"childVariant\" class=\"text-center font-semibold text-primary\"\n          >Features</Motion\n        >\n        <Motion\n          as=\"h2\"\n          :variants=\"childVariant\"\n          class=\"mt-3 mb-4 text-center text-3xl font-semibold lg:mb-5 lg:text-4xl\"\n        >\n          Beautiful analytics to grow smarter\n        </Motion>\n        <Motion\n          as=\"p\"\n          :variants=\"childVariant\"\n          class=\"mx-auto max-w-[760px] text-center text-lg text-muted-foreground lg:text-xl\"\n        >\n          Powerful, self-serve product and growth analytics to help you convert, engage, and retain\n          more users. Trusted by over 4,000 startups.\n        </Motion>\n      </Motion>\n\n      <template v-for=\"(f, i) in features\" :key=\"i\">\n        <Motion :variants=\"childVariant\" :transition=\"{ delay: i * 0.2 }\">\n          <section\n            class=\"mt-12 grid grid-cols-1 items-center gap-10 lg:mt-24 lg:h-[520px] lg:grid-cols-2 lg:gap-20\"\n          >\n            <div :class=\"[i % 2 == 0 ? 'lg:order-0' : 'lg:order-1']\">\n              <div\n                class=\"mb-5 flex h-12 w-12 items-center justify-center rounded-full bg-primary/20\"\n              >\n                <Icon name=\"heroicons:chat-bubble-left-right\" class=\"h-6 w-6 text-primary\" />\n              </div>\n              <h3 class=\"mb-2 text-2xl font-semibold lg:mb-4 lg:text-3xl\" v-html=\"f.title\" />\n              <p class=\"text-muted-foreground lg:text-lg\" v-html=\"f.description\" />\n\n              <Motion\n                as=\"ul\"\n                class=\"mt-8 flex flex-col gap-5 text-muted-foreground\"\n                :initial=\"{ opacity: 0 }\"\n                :visible-once=\"{ opacity: 1, transition: { staggerChildren: 0.1 } }\"\n              >\n                <Motion\n                  v-for=\"(p, k) in f.points\"\n                  :key=\"`Point-${k}`\"\n                  as=\"li\"\n                  class=\"flex gap-3 lg:text-lg\"\n                  :initial=\"{ opacity: 0, x: -10 }\"\n                  :visible-once=\"{ opacity: 1, x: 0 }\"\n                >\n                  <Icon name=\"heroicons:check-circle\" class=\"h-6 w-6 shrink-0 text-primary\" />\n                  <span v-html=\"p.text\" />\n                </Motion>\n              </Motion>\n            </div>\n\n            <Motion\n              as=\"img\"\n              :while-hover=\"{ scale: 1.03 }\"\n              :variants=\"{\n                initial: { opacity: 0, scale: 1.1 },\n                animate: { opacity: 1, scale: 1, transition: { duration: 0.3 } },\n              }\"\n              :src=\"f.imageUrl\"\n              :alt=\"f.title\"\n              class=\"h-[300px] w-full rounded-lg object-cover shadow-xs lg:h-[520px]\"\n            />\n          </section>\n        </Motion>\n      </template>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: { when: \"beforeChildren\", delayChildren: stagger(0.12) },\n    },\n  };\n\n  const features = [\n    {\n      title: \"Share team inboxes\",\n      icon: \"heroicons:chat-bubble-left-right\",\n      description:\n        \"Whether you have a team of 2 or 200, our shared team inboxes keep everyone on the same page and in the loop.\",\n      imageUrl:\n        \"https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n      points: [\n        { text: \"Leverage automation to move fast\" },\n        { text: \"Always give customers a human to chat to\" },\n        { text: \"Automate customer support and close leads faster\" },\n      ],\n    },\n    {\n      title: \"Deliver instant answers\",\n      icon: \"heroicons:bolt\",\n      description:\n        \"An all-in-one customer service platform that helps you balance everything your customers need to be happy.\",\n      imageUrl:\n        \"https://images.unsplash.com/photo-1542744173-8e7e53415bb0?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n      points: [\n        { text: \"Keep your customers in the loop with live chat\" },\n        { text: \"Embed help articles right on your website\" },\n        { text: \"Customers never have to leave the page to find an answer\" },\n      ],\n    },\n    {\n      title: \"Manage your team with reports\",\n      icon: \"heroicons:cursor-arrow-rays\",\n      description: `Measure what matters with ${COMPANY_NAME} easy-to-use reports. You can filter, export, and drill down on the data in a couple clicks.`,\n      imageUrl:\n        \"https://images.unsplash.com/photo-1628348068343-c6a848d2b6dd?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n      points: [\n        { text: \"Filter, export, and drilldown on the data quickly\" },\n        { text: \"Save, schedule, and automate reports to your inbox\" },\n        { text: \"Connect the tools you already use with 100+ integrations\" },\n      ],\n    },\n  ];\n</script>\n","category":"Feature","path":"Feature/BlockFeature1.vue","components":["container"]},{"name":"Feature 10","fileName":"BlockFeature10.vue","file":"<template>\n  <Motion initial=\"initial\" while-in-view=\"animate\" as-child :variants=\"parentVariant\">\n    <UiContainer class=\"py-16 lg:py-24\">\n      <div class=\"mx-auto max-w-[760px]\">\n        <Motion :variants=\"childVariant\" class=\"text-center\">\n          <UiBadge variant=\"outline\" class=\"gap-2 px-3 py-1.5 text-sm font-normal\"\n            ><Icon name=\"lucide:circle-dot\" class=\"size-4 text-primary\" /> Features</UiBadge\n          >\n        </Motion>\n        <Motion\n          as=\"h2\"\n          :variants=\"childVariant\"\n          class=\"mt-3 mb-4 text-center text-3xl font-semibold lg:mt-7 lg:mb-5 lg:text-4xl\"\n        >\n          Cutting-edge features for advanced analytics\n        </Motion>\n        <Motion\n          as=\"p\"\n          :variants=\"childVariant\"\n          class=\"mx-auto max-w-[760px] text-center text-lg text-muted-foreground lg:text-xl\"\n        >\n          Powerful, self-serve product and growth analytics to help you convert, engage, and retain\n          more users. Trusted by over 4,000 startups.\n        </Motion>\n      </div>\n\n      <div\n        class=\"grid grid-cols-1 gap-y-12 py-10 md:grid-cols-2 lg:grid-cols-3 lg:gap-x-16 lg:py-20\"\n      >\n        <Motion\n          as=\"div\"\n          class=\"flex flex-col gap-10 lg:gap-12\"\n          :variants=\"parentVariant\"\n          initial=\"initial\"\n          while-in-view=\"animate\"\n        >\n          <Motion\n            v-for=\"(f, i) in features1\"\n            :key=\"i\"\n            class=\"group flex flex-col\"\n            :variants=\"{\n              initial: { opacity: 0, x: -20 },\n              animate: { opacity: 1, x: 0 },\n            }\"\n          >\n            <div class=\"flex h-12 w-12 items-center justify-center rounded-md border\">\n              <Icon\n                :name=\"f.icon\"\n                class=\"h-5 w-5 transition-colors group-hover:text-primary lg:h-6 lg:w-6\"\n              />\n            </div>\n            <h3\n              class=\"mt-4 text-lg font-semibold text-balance lg:mt-5 lg:text-xl\"\n              v-text=\"f.title\"\n            />\n            <p class=\"mt-1 text-balance text-muted-foreground lg:mt-2\" v-text=\"f.description\" />\n            <NuxtLink\n              class=\"mt-4 inline-flex items-center gap-2 font-semibold text-primary underline-offset-2 hover:underline lg:mt-5\"\n              :to=\"f.link.url\"\n              >{{ f.link.text }}\n              <Icon\n                name=\"heroicons:arrow-right\"\n                class=\"size-4 transition-transform group-hover:translate-x-1\"\n            /></NuxtLink>\n          </Motion>\n        </Motion>\n\n        <Motion\n          :variants=\"{\n            initial: { opacity: 0, scale: 0.95 },\n            animate: { opacity: 1, scale: 1 },\n          }\"\n          :transition=\"{ duration: 0.6, delay: 0.3 }\"\n          class=\"order-last col-span-full lg:order-0 lg:col-span-1\"\n        >\n          <img\n            src=\"/phone-mockup.png\"\n            alt=\"Features section nine image\"\n            class=\"mx-auto h-[360px] w-[400px] object-cover object-top lg:h-[640px] lg:w-full lg:object-contain\"\n          />\n        </Motion>\n\n        <Motion\n          as=\"div\"\n          class=\"flex flex-col gap-10 lg:gap-12\"\n          :variants=\"parentVariant\"\n          initial=\"initial\"\n          while-in-view=\"animate\"\n        >\n          <Motion\n            v-for=\"(f, i) in features2\"\n            :key=\"i\"\n            class=\"group flex flex-col\"\n            :variants=\"{\n              initial: { opacity: 0, x: 20 },\n              animate: { opacity: 1, x: 0 },\n            }\"\n          >\n            <div class=\"flex h-12 w-12 items-center justify-center rounded-md border\">\n              <Icon\n                :name=\"f.icon\"\n                class=\"h-5 w-5 transition-colors group-hover:text-primary lg:h-6 lg:w-6\"\n              />\n            </div>\n            <h3\n              class=\"mt-4 text-lg font-semibold text-balance lg:mt-5 lg:text-xl\"\n              v-text=\"f.title\"\n            />\n            <p class=\"mt-1 text-balance text-muted-foreground lg:mt-2\" v-text=\"f.description\" />\n            <NuxtLink\n              class=\"mt-4 inline-flex items-center gap-2 font-semibold text-primary underline-offset-2 hover:underline lg:mt-5\"\n              :to=\"f.link.url\"\n              >{{ f.link.text }}\n              <Icon\n                name=\"heroicons:arrow-right\"\n                class=\"size-4 transition-transform group-hover:translate-x-1\"\n            /></NuxtLink>\n          </Motion>\n        </Motion>\n      </div>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n  const features1 = [\n    {\n      icon: \"lucide:message-square-dot\",\n      title: \"Share team inboxes\",\n      description:\n        \"Whether you have a team of 2 or 200, our shared team inboxes keep everyone on the same page and in the loop.\",\n      link: { text: \"Learn more\", url: \"#\" },\n    },\n    {\n      icon: \"lucide:zap\",\n      title: \"Deliver instant answers\",\n      description:\n        \"An all-in-one customer service platform that helps you balance everything your customers need to be happy.\",\n      link: { text: \"Learn more\", url: \"#\" },\n    },\n  ];\n  const features2 = [\n    {\n      icon: \"lucide:mouse-pointer-click\",\n      title: \"Manage your team with reports\",\n      description: `Measure what matters with ${COMPANY_NAME} easy-to-use reports. You can filter, export, and drill down on the data in a couple clicks.`,\n      link: { text: \"Learn more\", url: \"#\" },\n    },\n    {\n      icon: \"lucide:users\",\n      title: \"Connect with customers\",\n      description:\n        \"Solve a problem or close a sale in real-time with chat. If no one is available, customers are seamlessly routed to email without confusion.\",\n      link: { text: \"Learn more\", url: \"#\" },\n    },\n  ];\n</script>\n","category":"Feature","path":"Feature/BlockFeature10.vue","components":["badge","container"]},{"name":"Feature 11","fileName":"BlockFeature11.vue","file":"<template>\n  <Motion initial=\"initial\" while-in-view=\"animate\" as-child :variants=\"parentVariant\">\n    <UiContainer class=\"py-16 lg:py-24\">\n      <div class=\"mx-auto max-w-[760px]\">\n        <Motion :variants=\"childVariant\" class=\"text-center\">\n          <UiBadge variant=\"outline\" class=\"gap-2 px-3 py-1.5 text-sm font-normal\">\n            Integrations\n          </UiBadge>\n        </Motion>\n        <Motion\n          as=\"h2\"\n          :variants=\"childVariant\"\n          class=\"mt-3 mb-4 text-center text-3xl font-semibold lg:mt-7 lg:mb-5 lg:text-4xl\"\n        >\n          Get more value from your tools\n        </Motion>\n        <Motion\n          as=\"p\"\n          :variants=\"childVariant\"\n          class=\"mx-auto max-w-[760px] text-center text-lg text-muted-foreground lg:text-xl\"\n        >\n          Connect your tools, connect your teams. With over 100 apps already available in our\n          directory, your team's favourite tools are just a click away.\n        </Motion>\n      </div>\n\n      <Motion\n        as=\"div\"\n        class=\"my-12 grid grid-cols-1 gap-y-10 lg:my-24 lg:grid-cols-3 lg:gap-8 lg:gap-y-16\"\n        :variants=\"parentVariant\"\n        initial=\"initial\"\n        while-in-view=\"animate\"\n      >\n        <Motion\n          v-for=\"(f, i) in features\"\n          :key=\"i\"\n          class=\"group flex flex-col items-center\"\n          :variants=\"childVariant\"\n        >\n          <div class=\"flex h-12 w-12 items-center justify-center rounded-md border\">\n            <Icon\n              :name=\"f.icon\"\n              class=\"h-5 w-5 transition-colors group-hover:text-primary lg:h-6 lg:w-6\"\n            />\n          </div>\n          <h3 class=\"mt-4 text-center text-lg font-semibold text-balance lg:mt-5 lg:text-xl\">\n            {{ f.title }} integration\n          </h3>\n          <p class=\"mt-1 max-w-[650px] text-center text-balance text-muted-foreground lg:mt-2\">\n            Work faster and smarter by integrating directly with {{ f.title }}, right in the app.\n          </p>\n          <NuxtLink\n            class=\"mt-4 inline-flex items-center gap-2 font-semibold text-primary underline-offset-2 hover:underline lg:mt-5\"\n            to=\"#\"\n            >View integration\n            <Icon\n              name=\"heroicons:arrow-right\"\n              class=\"size-4 transition-transform group-hover:translate-x-1\"\n          /></NuxtLink>\n        </Motion>\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n  const features = [\n    { icon: \"logos:notion-icon\", title: \"Notion\" },\n    { icon: \"logos:slack-icon\", title: \"Slack\" },\n    { icon: \"logos:figma\", title: \"Figma\" },\n    { icon: \"logos:google-analytics\", title: \"Google Analytics\" },\n    { icon: \"logos:google-drive\", title: \"Google Drive\" },\n    { icon: \"logos:jira\", title: \"Jira\" },\n  ];\n</script>\n","category":"Feature","path":"Feature/BlockFeature11.vue","components":["badge","container"]},{"name":"Feature 12","fileName":"BlockFeature12.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"parentVariant\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <Motion :variants=\"childVariant\">\n        <div class=\"mx-auto max-w-[760px] text-center\">\n          <h2 class=\"mb-4 text-3xl font-semibold lg:mb-5 lg:text-4xl\">\n            Explore our powerful features\n          </h2>\n          <p class=\"text-lg text-muted-foreground lg:text-xl\">\n            Everything you need to build, deploy, and scale your applications with confidence.\n          </p>\n        </div>\n      </Motion>\n\n      <div class=\"mt-12 lg:mt-16\">\n        <UiTabs v-model=\"tab\" class=\"w-full\">\n          <Motion as-child :variants=\"childVariant\">\n            <UiTabsList class=\"mx-auto grid w-full max-w-lg grid-cols-3\">\n              <UiTabsTrigger v-for=\"(item, i) in feats\" :key=\"i\" :value=\"item.value\">\n                <Icon :name=\"item.icon\" class=\"mr-2 size-4\" />\n                <span class=\"capitalize\">{{ item.value }}</span>\n              </UiTabsTrigger>\n            </UiTabsList>\n          </Motion>\n\n          <template v-if=\"selectedFeat\">\n            <UiTabsContent :key=\"tab\" :value=\"selectedFeat?.value\" class=\"mt-8 lg:mt-12\">\n              <div class=\"grid grid-cols-1 gap-10 lg:grid-cols-2 lg:gap-16\">\n                <Motion :variants=\"childVariant\">\n                  <img\n                    :src=\"selectedFeat?.image\"\n                    :alt=\"selectedFeat?.alt\"\n                    class=\"h-[300px] w-full rounded-lg object-cover shadow-lg lg:h-[400px]\"\n                  />\n                </Motion>\n                <div>\n                  <Motion\n                    as=\"h3\"\n                    :variants=\"childVariant\"\n                    class=\"mb-4 text-2xl font-semibold lg:text-3xl\"\n                    >{{ selectedFeat?.title }}</Motion\n                  >\n                  <Motion\n                    as=\"p\"\n                    :variants=\"childVariant\"\n                    class=\"mb-6 text-muted-foreground lg:text-lg\"\n                  >\n                    {{ selectedFeat?.description }}\n                  </Motion>\n\n                  <Motion\n                    v-for=\"(f, i) in selectedFeat?.items\"\n                    :key=\"i\"\n                    class=\"mb-4 flex gap-3\"\n                    :variants=\"{\n                      initial: { opacity: 0, x: -10 },\n                      animate: { opacity: 1, x: 0 },\n                    }\"\n                  >\n                    <Icon name=\"heroicons:check-circle\" class=\"h-6 w-6 shrink-0 text-primary\" />\n                    <div>\n                      <p class=\"font-semibold\">{{ f.title }}</p>\n                      <p class=\"text-sm text-muted-foreground\">{{ f.description }}</p>\n                    </div>\n                  </Motion>\n                </div>\n              </div>\n            </UiTabsContent>\n          </template>\n        </UiTabs>\n      </div>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.12),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const tab = ref(\"analytics\");\n\n  const feats = ref([\n    {\n      title: \"Advanced Analytics\",\n      description:\n        \"Get deep insights into your data with real-time analytics and customizable dashboards.\",\n      value: \"analytics\",\n      icon: \"lucide:bar-chart-3\",\n      image:\n        \"https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop\",\n      alt: \"Analytics dashboard\",\n      items: [\n        { title: \"Real-time Data\", description: \"Monitor your metrics as they happen\" },\n        { title: \"Custom Dashboards\", description: \"Build dashboards tailored to your needs\" },\n        { title: \"Export Reports\", description: \"Generate and share detailed reports\" },\n      ],\n    },\n    {\n      title: \"Enterprise Security\",\n      description:\n        \"Protect your data with industry-leading security features and compliance certifications.\",\n      value: \"security\",\n      icon: \"lucide:shield-check\",\n      image:\n        \"https://images.unsplash.com/photo-1563013544-824ae1b704d3?q=80&w=2070&auto=format&fit=crop\",\n      alt: \"Enterprise security\",\n      items: [\n        {\n          title: \"End-to-End Encryption\",\n          description: \"Your data is encrypted at rest and in transit\",\n        },\n        {\n          title: \"SSO Integration\",\n          description: \"Single sign-on with your existing identity provider\",\n        },\n        { title: \"Compliance Ready\", description: \"SOC 2, GDPR, and HIPAA compliant\" },\n      ],\n    },\n    {\n      title: \"Smart Automation\",\n      description:\n        \"Automate repetitive tasks and workflows to save time and increase productivity.\",\n      value: \"automation\",\n      icon: \"lucide:zap\",\n      image:\n        \"https://images.unsplash.com/photo-1518186285589-2f7649de83e0?q=80&w=2074&auto=format&fit=crop\",\n      alt: \"Automation workflows\",\n      items: [\n        { title: \"Workflow Builder\", description: \"Create custom workflows with drag-and-drop\" },\n        { title: \"API Integrations\", description: \"Connect with 1000+ apps and services\" },\n        { title: \"Scheduled Tasks\", description: \"Run tasks automatically on a schedule\" },\n      ],\n    },\n  ]);\n\n  const selectedFeat = computed(() => {\n    return feats.value.find((f) => f.value === tab.value);\n  });\n</script>\n","category":"Feature","path":"Feature/BlockFeature12.vue","components":["container","tabs","tabscontent","tabslist","tabstrigger"]},{"name":"Feature 13","fileName":"BlockFeature13.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"parentVariant\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <Motion :variants=\"childVariant\">\n        <div class=\"mx-auto max-w-[760px] text-center\">\n          <p class=\"font-semibold text-primary\">Everything you need</p>\n          <h2 class=\"mt-3 mb-4 text-3xl font-semibold lg:mb-5 lg:text-4xl\">\n            Built for modern teams\n          </h2>\n          <p class=\"text-lg text-muted-foreground lg:text-xl\">\n            A comprehensive suite of tools designed to help teams collaborate and succeed.\n          </p>\n        </div>\n      </Motion>\n\n      <Motion\n        as=\"div\"\n        class=\"mt-12 grid grid-cols-1 gap-4 md:grid-cols-2 lg:mt-16 lg:grid-cols-3 lg:gap-6\"\n        :variants=\"parentVariant\"\n        initial=\"initial\"\n        while-in-view=\"animate\"\n        :in-view-options=\"{ once: true }\"\n      >\n        <!-- Large featured card -->\n        <Motion :variants=\"childVariant\" class=\"group col-span-1 md:col-span-2 lg:row-span-2\">\n          <UiCard class=\"h-full overflow-hidden py-0 transition-all hover:shadow-lg\">\n            <div class=\"relative h-[300px] overflow-hidden lg:h-full\">\n              <img\n                src=\"https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2015&auto=format&fit=crop\"\n                alt=\"Team collaboration\"\n                class=\"h-full w-full object-cover transition-transform duration-300 group-hover:scale-105\"\n              />\n              <div class=\"absolute inset-0 bg-linear-to-t from-black/80 to-transparent\" />\n              <div class=\"absolute bottom-0 p-6 text-white lg:p-8\">\n                <div\n                  class=\"mb-3 flex h-12 w-12 items-center justify-center rounded-lg bg-white/20 backdrop-blur-sm\"\n                >\n                  <Icon name=\"lucide:users\" class=\"h-6 w-6\" />\n                </div>\n                <h3 class=\"mb-2 text-2xl font-semibold lg:text-3xl\">Team Collaboration</h3>\n                <p class=\"text-white/90 lg:text-lg\">\n                  Work together seamlessly with real-time collaboration tools and shared workspaces.\n                </p>\n              </div>\n            </div>\n          </UiCard>\n        </Motion>\n\n        <!-- Small cards -->\n        <Motion :variants=\"childVariant\" class=\"group col-span-1\">\n          <UiCard class=\"h-full p-6 transition-all hover:shadow-lg lg:p-8\">\n            <div class=\"mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10\">\n              <Icon name=\"lucide:rocket\" class=\"h-6 w-6 text-primary\" />\n            </div>\n            <h3 class=\"mb-2 text-xl font-semibold lg:text-2xl\">Fast Deployment</h3>\n            <p class=\"text-muted-foreground\">\n              Deploy in seconds with our streamlined CI/CD pipeline.\n            </p>\n          </UiCard>\n        </Motion>\n\n        <Motion :variants=\"childVariant\" class=\"group col-span-1\">\n          <UiCard class=\"h-full p-6 transition-all hover:shadow-lg lg:p-8\">\n            <div class=\"mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10\">\n              <Icon name=\"lucide:code-2\" class=\"h-6 w-6 text-primary\" />\n            </div>\n            <h3 class=\"mb-2 text-xl font-semibold lg:text-2xl\">Developer Tools</h3>\n            <p class=\"text-muted-foreground\">\n              Built-in debugging and testing tools for developers.\n            </p>\n          </UiCard>\n        </Motion>\n\n        <Motion :variants=\"childVariant\" class=\"group col-span-1 md:col-span-2 lg:col-span-1\">\n          <UiCard class=\"h-full p-6 transition-all hover:shadow-lg lg:p-8\">\n            <div class=\"mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10\">\n              <Icon name=\"lucide:gauge\" class=\"h-6 w-6 text-primary\" />\n            </div>\n            <h3 class=\"mb-2 text-xl font-semibold lg:text-2xl\">Performance</h3>\n            <p class=\"text-muted-foreground\">\n              Lightning-fast performance with global CDN and edge caching.\n            </p>\n          </UiCard>\n        </Motion>\n\n        <Motion :variants=\"childVariant\" class=\"group col-span-1\">\n          <UiCard class=\"h-full p-6 transition-all hover:shadow-lg lg:p-8\">\n            <div class=\"mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10\">\n              <Icon name=\"lucide:lock\" class=\"h-6 w-6 text-primary\" />\n            </div>\n            <h3 class=\"mb-2 text-xl font-semibold lg:text-2xl\">Secure</h3>\n            <p class=\"text-muted-foreground\">Enterprise-grade security with SOC 2 compliance.</p>\n          </UiCard>\n        </Motion>\n\n        <Motion :variants=\"childVariant\" class=\"group col-span-1\">\n          <UiCard class=\"h-full p-6 transition-all hover:shadow-lg lg:p-8\">\n            <div class=\"mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10\">\n              <Icon name=\"lucide:headphones\" class=\"h-6 w-6 text-primary\" />\n            </div>\n            <h3 class=\"mb-2 text-xl font-semibold lg:text-2xl\">24/7 Support</h3>\n            <p class=\"text-muted-foreground\">Expert support whenever you need it.</p>\n          </UiCard>\n        </Motion>\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.08),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20, scale: 0.95 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      scale: 1,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n</script>\n","category":"Feature","path":"Feature/BlockFeature13.vue","components":["card","container"]},{"name":"Feature 14","fileName":"BlockFeature14.vue","file":"<template>\n  <div class=\"relative overflow-hidden py-16 lg:py-24\">\n    <!-- Background decoration -->\n    <div class=\"absolute inset-0\">\n      <div\n        class=\"absolute top-0 left-1/2 h-[500px] w-[500px] -translate-x-1/2 rounded-full bg-primary/5 blur-3xl\"\n      />\n    </div>\n\n    <Motion\n      initial=\"initial\"\n      while-in-view=\"animate\"\n      :in-view-options=\"{ once: true }\"\n      as-child\n      :variants=\"parentVariant\"\n    >\n      <UiContainer class=\"relative\">\n        <Motion :variants=\"childVariant\">\n          <div class=\"mx-auto max-w-[760px] text-center\">\n            <UiBadge variant=\"outline\" class=\"mb-4\">Our Services</UiBadge>\n            <h2 class=\"mb-4 text-3xl font-semibold lg:mb-5 lg:text-4xl\">\n              Professional services tailored to your needs\n            </h2>\n            <p class=\"text-lg text-muted-foreground lg:text-xl\">\n              We offer comprehensive solutions to help your business thrive in the digital age.\n            </p>\n          </div>\n        </Motion>\n\n        <div\n          as=\"div\"\n          class=\"mt-12 grid grid-cols-1 gap-6 md:grid-cols-2 lg:mt-16 lg:grid-cols-3 lg:gap-8\"\n        >\n          <Motion\n            v-for=\"(service, i) in services\"\n            :key=\"i\"\n            class=\"group relative overflow-hidden rounded-lg border bg-card p-6 hover:border-primary hover:shadow-lg lg:p-6\"\n            :variants=\"childVariant\"\n          >\n            <div class=\"relative z-10 flex h-full flex-col\">\n              <div\n                class=\"mb-4 inline-flex h-14 w-14 items-center justify-center rounded-lg transition-colors\"\n                :class=\"service.bgClass\"\n              >\n                <Icon :name=\"service.icon\" class=\"h-7 w-7\" :class=\"service.iconClass\" />\n              </div>\n              <h3 class=\"mb-3 text-xl font-semibold lg:text-2xl\">{{ service.title }}</h3>\n              <p class=\"mb-4 text-muted-foreground\">{{ service.description }}</p>\n              <ul class=\"space-y-2\">\n                <li\n                  v-for=\"(feature, j) in service.features\"\n                  :key=\"j\"\n                  class=\"flex items-center gap-2 text-sm\"\n                >\n                  <Icon name=\"heroicons:check\" class=\"h-4 w-4 text-primary\" />\n                  <span>{{ feature }}</span>\n                </li>\n              </ul>\n              <div class=\"mt-auto\" />\n              <UiButton variant=\"ghost\" class=\"mt-6 w-full group-hover:bg-primary/10\">\n                Learn More\n                <Icon\n                  name=\"heroicons:arrow-right\"\n                  class=\"ml-2 size-4 transition-transform group-hover:translate-x-1\"\n                />\n              </UiButton>\n            </div>\n            <div\n              class=\"absolute -right-20 -bottom-20 h-40 w-40 rounded-full opacity-0 blur-3xl transition-opacity group-hover:opacity-100\"\n              :class=\"service.glowClass\"\n            />\n          </Motion>\n        </div>\n      </UiContainer>\n    </Motion>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const services = [\n    {\n      icon: \"lucide:palette\",\n      title: \"Design Services\",\n      description: \"Create stunning, user-friendly designs that captivate your audience.\",\n      features: [\"UI/UX Design\", \"Brand Identity\", \"Prototyping\"],\n      bgClass: \"bg-blue-500/10\",\n      iconClass: \"text-blue-500\",\n      glowClass: \"bg-blue-500/20\",\n    },\n    {\n      icon: \"lucide:code\",\n      title: \"Development\",\n      description: \"Build robust, scalable applications with cutting-edge technologies.\",\n      features: [\"Web Development\", \"Mobile Apps\", \"API Integration\"],\n      bgClass: \"bg-green-500/10\",\n      iconClass: \"text-green-500\",\n      glowClass: \"bg-green-500/20\",\n    },\n    {\n      icon: \"lucide:megaphone\",\n      title: \"Marketing\",\n      description: \"Grow your brand with data-driven marketing strategies.\",\n      features: [\"SEO Optimization\", \"Content Strategy\", \"Social Media\"],\n      bgClass: \"bg-purple-500/10\",\n      iconClass: \"text-purple-500\",\n      glowClass: \"bg-purple-500/20\",\n    },\n    {\n      icon: \"lucide:line-chart\",\n      title: \"Analytics\",\n      description: \"Make informed decisions with comprehensive data analysis.\",\n      features: [\"Data Tracking\", \"Custom Reports\", \"Insights\"],\n      bgClass: \"bg-orange-500/10\",\n      iconClass: \"text-orange-500\",\n      glowClass: \"bg-orange-500/20\",\n    },\n    {\n      icon: \"lucide:shield-check\",\n      title: \"Security\",\n      description: \"Protect your business with enterprise-grade security solutions.\",\n      features: [\"Threat Detection\", \"Compliance\", \"Monitoring\"],\n      bgClass: \"bg-red-500/10\",\n      iconClass: \"text-red-500\",\n      glowClass: \"bg-red-500/20\",\n    },\n    {\n      icon: \"lucide:headset\",\n      title: \"Support\",\n      description: \"Get expert help whenever you need it with 24/7 support.\",\n      features: [\"Live Chat\", \"Phone Support\", \"Documentation\"],\n      bgClass: \"bg-cyan-500/10\",\n      iconClass: \"text-cyan-500\",\n      glowClass: \"bg-cyan-500/20\",\n    },\n  ];\n</script>\n","category":"Feature","path":"Feature/BlockFeature14.vue","components":["badge","button","container"]},{"name":"Feature 15","fileName":"BlockFeature15.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"parentVariant\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <Motion :variants=\"childVariant\">\n        <div class=\"mx-auto max-w-[760px] text-center\">\n          <h2 class=\"mb-4 text-3xl font-semibold lg:mb-5 lg:text-4xl\">Feature Comparison</h2>\n          <p class=\"text-lg text-muted-foreground lg:text-xl\">\n            See how our platform stacks up with comprehensive feature coverage.\n          </p>\n        </div>\n      </Motion>\n\n      <Motion :variants=\"childVariant\" class=\"mt-12 lg:mt-16\">\n        <UiCard class=\"overflow-hidden py-0\">\n          <div class=\"overflow-x-auto\">\n            <table class=\"w-full\">\n              <thead>\n                <tr class=\"border-b bg-muted/50\">\n                  <th class=\"p-4 text-left font-semibold lg:p-6\">Feature</th>\n                  <th class=\"p-4 text-center font-semibold lg:p-6\">Starter</th>\n                  <th class=\"p-4 text-center font-semibold lg:p-6\">Professional</th>\n                  <th class=\"p-4 text-center font-semibold lg:p-6\">Enterprise</th>\n                </tr>\n              </thead>\n              <tbody>\n                <tr\n                  v-for=\"(feature, i) in features\"\n                  :key=\"i\"\n                  class=\"border-b transition-colors last:border-b-0 hover:bg-muted/50\"\n                >\n                  <td class=\"p-4 font-medium lg:p-6\">\n                    <div class=\"flex items-start gap-4\">\n                      <Icon :name=\"feature.icon\" class=\"size-6 text-primary\" />\n                      <div class=\"flex flex-col gap-0.5\">\n                        <p class=\"leading-none\">{{ feature.name }}</p>\n                        <p class=\"text-sm whitespace-nowrap text-muted-foreground\">\n                          {{ feature.description }}\n                        </p>\n                      </div>\n                    </div>\n                  </td>\n                  <td class=\"p-4 text-center lg:p-6\">\n                    <component\n                      :is=\"getFeatureComponent(feature.starter)\"\n                      :value=\"feature.starter\"\n                    />\n                  </td>\n                  <td class=\"p-4 text-center lg:p-6\">\n                    <component\n                      :is=\"getFeatureComponent(feature.professional)\"\n                      :value=\"feature.professional\"\n                    />\n                  </td>\n                  <td class=\"p-4 text-center lg:p-6\">\n                    <component\n                      :is=\"getFeatureComponent(feature.enterprise)\"\n                      :value=\"feature.enterprise\"\n                    />\n                  </td>\n                </tr>\n              </tbody>\n            </table>\n          </div>\n        </UiCard>\n      </Motion>\n\n      <Motion :variants=\"childVariant\" class=\"mt-8 text-center\">\n        <UiButton size=\"lg\">\n          Get Started\n          <Icon name=\"heroicons:arrow-right\" class=\"ml-2 size-4\" />\n        </UiButton>\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.15),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const features = [\n    {\n      name: \"Team Members\",\n      description: \"Number of users\",\n      icon: \"lucide:users\",\n      starter: \"5\",\n      professional: \"25\",\n      enterprise: \"Unlimited\",\n    },\n    {\n      name: \"Storage\",\n      description: \"File storage space\",\n      icon: \"lucide:hard-drive\",\n      starter: \"10 GB\",\n      professional: \"100 GB\",\n      enterprise: \"Unlimited\",\n    },\n    {\n      name: \"API Access\",\n      description: \"Programmatic access\",\n      icon: \"lucide:code\",\n      starter: false,\n      professional: true,\n      enterprise: true,\n    },\n    {\n      name: \"Advanced Analytics\",\n      description: \"Detailed insights\",\n      icon: \"lucide:bar-chart\",\n      starter: false,\n      professional: true,\n      enterprise: true,\n    },\n    {\n      name: \"Custom Integrations\",\n      description: \"Connect your tools\",\n      icon: \"lucide:puzzle\",\n      starter: false,\n      professional: \"Limited\",\n      enterprise: true,\n    },\n    {\n      name: \"Priority Support\",\n      description: \"Get help faster\",\n      icon: \"lucide:headphones\",\n      starter: false,\n      professional: true,\n      enterprise: true,\n    },\n    {\n      name: \"SLA Guarantee\",\n      description: \"Uptime commitment\",\n      icon: \"lucide:shield-check\",\n      starter: false,\n      professional: false,\n      enterprise: \"99.9%\",\n    },\n    {\n      name: \"Dedicated Manager\",\n      description: \"Personal account support\",\n      icon: \"lucide:user-check\",\n      starter: false,\n      professional: false,\n      enterprise: true,\n    },\n  ];\n\n  const getFeatureComponent = (value: boolean | string) => {\n    const IconComponent = resolveComponent(\"Icon\");\n    if (typeof value === \"boolean\") {\n      return value\n        ? h(IconComponent, { name: \"heroicons:check\", class: \"mx-auto size-5 text-green-500\" })\n        : h(IconComponent, {\n            name: \"heroicons:x-mark\",\n            class: \"mx-auto size-5 text-muted-foreground/50\",\n          });\n    }\n    return h(\"span\", { class: \"font-medium\" }, value);\n  };\n</script>\n","category":"Feature","path":"Feature/BlockFeature15.vue","components":["button","card","container"]},{"name":"Feature 16","fileName":"BlockFeature16.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"parentVariant\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <Motion :variants=\"childVariant\">\n        <div class=\"mx-auto max-w-[760px] text-center\">\n          <h2 class=\"mb-4 text-3xl font-semibold lg:mb-5 lg:text-4xl\">Why choose our platform?</h2>\n          <p class=\"text-lg text-muted-foreground lg:text-xl\">\n            Discover the features that make us the best choice for your business.\n          </p>\n        </div>\n      </Motion>\n\n      <Motion\n        as=\"div\"\n        class=\"mt-12 grid grid-cols-1 gap-6 md:grid-cols-2 lg:mt-16 lg:gap-8\"\n        :variants=\"parentVariant\"\n        initial=\"initial\"\n        while-in-view=\"animate\"\n        :in-view-options=\"{ once: true }\"\n      >\n        <Motion\n          v-for=\"(feature, i) in features\"\n          :key=\"i\"\n          class=\"group relative overflow-hidden rounded-xl border bg-card p-6 hover:shadow-xl lg:p-8\"\n          :variants=\"childVariant\"\n        >\n          <div class=\"relative z-10\">\n            <div class=\"mb-4 inline-flex items-center gap-3\">\n              <div\n                class=\"flex h-12 w-12 items-center justify-center rounded-lg transition-all group-hover:scale-110\"\n                :class=\"feature.bgClass\"\n              >\n                <Icon :name=\"feature.icon\" class=\"h-6 w-6\" :class=\"feature.iconClass\" />\n              </div>\n              <UiBadge v-if=\"feature.badge\" variant=\"secondary\">{{ feature.badge }}</UiBadge>\n            </div>\n\n            <h3 class=\"mb-3 text-xl font-semibold lg:text-2xl\">{{ feature.title }}</h3>\n            <p class=\"mb-6 text-muted-foreground\">{{ feature.description }}</p>\n\n            <div class=\"space-y-3\">\n              <div\n                v-for=\"(point, j) in feature.points\"\n                :key=\"j\"\n                class=\"flex items-start gap-2 transition-transform duration-300 hover:translate-x-1\"\n              >\n                <Icon name=\"heroicons:check-circle\" class=\"mt-0.5 h-5 w-5 shrink-0 text-primary\" />\n                <span class=\"text-sm\">{{ point }}</span>\n              </div>\n            </div>\n\n            <div class=\"mt-6 flex items-center gap-2 text-sm font-semibold text-primary\">\n              <span>Explore feature</span>\n              <Icon\n                name=\"heroicons:arrow-right\"\n                class=\"h-4 w-4 transition-transform group-hover:translate-x-1\"\n              />\n            </div>\n          </div>\n\n          <!-- Hover effect -->\n          <div\n            class=\"absolute -top-10 -right-10 size-44 rounded-full opacity-0 blur-2xl transition-opacity duration-500 group-hover:opacity-100\"\n            :class=\"feature.glowClass\"\n          />\n        </Motion>\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.12),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 30, rotateX: 10 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      rotateX: 0,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const features = [\n    {\n      icon: \"lucide:zap\",\n      title: \"Lightning Fast\",\n      description: \"Experience blazing-fast performance with our optimized infrastructure.\",\n      badge: \"Popular\",\n      bgClass: \"bg-yellow-500/10\",\n      iconClass: \"text-yellow-500\",\n      glowClass: \"bg-yellow-500/30\",\n      points: [\n        \"Global CDN distribution\",\n        \"Edge caching for instant delivery\",\n        \"Optimized asset loading\",\n      ],\n    },\n    {\n      icon: \"lucide:shield\",\n      title: \"Enterprise Security\",\n      description: \"Keep your data safe with bank-grade security and compliance.\",\n      bgClass: \"bg-blue-500/10\",\n      iconClass: \"text-blue-500\",\n      glowClass: \"bg-blue-500/30\",\n      points: [\"End-to-end encryption\", \"SOC 2 Type II certified\", \"Regular security audits\"],\n    },\n    {\n      icon: \"lucide:scaling\",\n      title: \"Auto Scaling\",\n      description: \"Handle any traffic spike without breaking a sweat.\",\n      bgClass: \"bg-green-500/10\",\n      iconClass: \"text-green-500\",\n      glowClass: \"bg-green-500/30\",\n      points: [\n        \"Automatic resource allocation\",\n        \"Load balancing across regions\",\n        \"Zero-downtime deployments\",\n      ],\n    },\n    {\n      icon: \"lucide:bot\",\n      title: \"AI-Powered\",\n      description: \"Leverage artificial intelligence to automate and optimize.\",\n      badge: \"New\",\n      bgClass: \"bg-purple-500/10\",\n      iconClass: \"text-purple-500\",\n      glowClass: \"bg-purple-500/30\",\n      points: [\"Smart recommendations\", \"Automated workflows\", \"Predictive analytics\"],\n    },\n    {\n      icon: \"lucide:globe\",\n      title: \"Global Reach\",\n      description: \"Deploy to 200+ locations worldwide with a single click.\",\n      bgClass: \"bg-cyan-500/10\",\n      iconClass: \"text-cyan-500\",\n      glowClass: \"bg-cyan-500/30\",\n      points: [\"Multi-region deployment\", \"Geo-routing optimization\", \"Local data compliance\"],\n    },\n    {\n      icon: \"lucide:chart-line\",\n      title: \"Advanced Analytics\",\n      description: \"Make data-driven decisions with comprehensive insights.\",\n      bgClass: \"bg-orange-500/10\",\n      iconClass: \"text-orange-500\",\n      glowClass: \"bg-orange-500/30\",\n      points: [\"Real-time metrics dashboard\", \"Custom report builder\", \"API usage tracking\"],\n    },\n  ];\n</script>\n","category":"Feature","path":"Feature/BlockFeature16.vue","components":["badge","container"]},{"name":"Feature 17","fileName":"BlockFeature17.vue","file":"<template>\n  <div class=\"relative overflow-hidden py-16 lg:py-24\">\n    <!-- Gradient background -->\n    <div class=\"absolute inset-0 bg-linear-to-br from-primary/10 via-purple-500/5 to-pink-500/10\" />\n\n    <!-- Floating elements -->\n    <div class=\"absolute top-20 left-10 hidden lg:block\">\n      <div\n        class=\"animate-float h-64 w-64 rounded-full bg-linear-to-br from-primary/20 to-purple-500/20 blur-3xl\"\n      />\n    </div>\n\n    <div class=\"absolute right-10 bottom-20 hidden lg:block\">\n      <div\n        class=\"animate-float-delayed h-80 w-80 rounded-full bg-linear-to-br from-pink-500/20 to-orange-500/20 blur-3xl\"\n      />\n    </div>\n\n    <div class=\"absolute top-1/3 right-1/3 hidden lg:block\">\n      <div\n        class=\"animate-pulse-slow h-48 w-48 rounded-full bg-linear-to-br from-cyan-500/20 to-blue-500/20 blur-3xl\"\n      />\n    </div>\n\n    <Motion\n      initial=\"initial\"\n      while-in-view=\"animate\"\n      :in-view-options=\"{ once: true }\"\n      as-child\n      :variants=\"parentVariant\"\n    >\n      <UiContainer class=\"relative\">\n        <Motion :variants=\"childVariant\">\n          <div class=\"mx-auto max-w-[800px] text-center\">\n            <UiBadge variant=\"outline\" class=\"mb-4 border-primary/50 bg-primary/10\">\n              <Icon name=\"lucide:sparkles\" class=\"mr-2 size-3\" />\n              Next-Generation Platform\n            </UiBadge>\n            <h2 class=\"mb-4 text-3xl font-bold lg:mb-6 lg:text-5xl\">\n              Transform your workflow with\n              <span\n                class=\"bg-linear-to-r from-primary via-purple-500 to-pink-500 bg-clip-text text-transparent\"\n              >\n                intelligent features\n              </span>\n            </h2>\n            <p class=\"text-lg text-muted-foreground lg:text-xl\">\n              Harness the power of modern technology to streamline your operations and drive growth.\n            </p>\n          </div>\n        </Motion>\n\n        <Motion\n          as=\"div\"\n          class=\"mt-16 grid grid-cols-1 gap-6 md:grid-cols-2 lg:mt-24 lg:grid-cols-3 lg:gap-8\"\n          :variants=\"parentVariant\"\n          initial=\"initial\"\n          while-in-view=\"animate\"\n          :in-view-options=\"{ once: true }\"\n        >\n          <Motion\n            v-for=\"(feature, i) in features\"\n            :key=\"i\"\n            class=\"group relative overflow-hidden rounded-2xl border border-primary/20 bg-card/50 p-6 backdrop-blur-sm hover:border-primary/40 lg:p-8\"\n            :variants=\"childVariant\"\n          >\n            <!-- Card gradient -->\n            <div\n              class=\"absolute inset-0 -z-10 opacity-0 transition-opacity duration-500 group-hover:opacity-100\"\n            >\n              <div class=\"absolute inset-0 bg-linear-to-br\" :class=\"feature.gradientClass\" />\n            </div>\n\n            <div class=\"relative\">\n              <div\n                class=\"mb-4 inline-flex h-14 w-14 items-center justify-center rounded-xl bg-linear-to-br transition-transform duration-300 group-hover:scale-110\"\n                :class=\"feature.iconBgClass\"\n              >\n                <Icon :name=\"feature.icon\" class=\"h-7 w-7 text-white\" />\n              </div>\n\n              <h3 class=\"mb-3 text-xl font-semibold lg:text-2xl\">{{ feature.title }}</h3>\n              <p class=\"mb-6 text-muted-foreground\">{{ feature.description }}</p>\n\n              <div class=\"flex flex-wrap gap-2\">\n                <UiBadge\n                  v-for=\"(tag, j) in feature.tags\"\n                  :key=\"j\"\n                  variant=\"outline\"\n                  class=\"text-xs\"\n                >\n                  {{ tag }}\n                </UiBadge>\n              </div>\n\n              <!-- Animated indicator -->\n              <div\n                class=\"mt-6 flex items-center gap-2 text-sm font-semibold text-primary opacity-0 transition-opacity group-hover:opacity-100\"\n              >\n                <span>Learn more</span>\n                <Icon name=\"heroicons:arrow-right\" class=\"animate-bounce-horizontal h-4 w-4\" />\n              </div>\n            </div>\n\n            <!-- Glow effect -->\n            <div\n              class=\"absolute -inset-px -z-10 rounded-2xl opacity-0 blur-xl transition-opacity duration-500 dark:group-hover:opacity-100\"\n              :class=\"feature.glowClass\"\n            />\n          </Motion>\n        </Motion>\n\n        <Motion :variants=\"childVariant\" class=\"mt-12 text-center lg:mt-16\">\n          <UiButton size=\"lg\" class=\"group\">\n            Start Building Today\n            <Icon\n              name=\"heroicons:rocket-launch\"\n              class=\"ml-2 size-5 transition-transform group-hover:translate-x-1\"\n            />\n          </UiButton>\n        </Motion>\n      </UiContainer>\n    </Motion>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 40 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const features = [\n    {\n      icon: \"lucide:brain\",\n      title: \"AI-Powered Insights\",\n      description: \"Leverage machine learning to uncover patterns and predictions in your data.\",\n      tags: [\"ML\", \"Automation\", \"Analytics\"],\n      gradientClass: \"from-purple-500/10 to-pink-500/10\",\n      iconBgClass: \"from-purple-500 to-pink-500\",\n      glowClass: \"bg-linear-to-br from-purple-500/50 to-pink-500/50\",\n    },\n    {\n      icon: \"lucide:rocket\",\n      title: \"Instant Deployment\",\n      description: \"Go from code to production in seconds with our streamlined pipeline.\",\n      tags: [\"CI/CD\", \"DevOps\", \"Speed\"],\n      gradientClass: \"from-blue-500/10 to-cyan-500/10\",\n      iconBgClass: \"from-blue-500 to-cyan-500\",\n      glowClass: \"bg-linear-to-br from-blue-500/50 to-cyan-500/50\",\n    },\n    {\n      icon: \"lucide:layers\",\n      title: \"Modular Architecture\",\n      description: \"Build scalable applications with our flexible component system.\",\n      tags: [\"Flexible\", \"Scalable\", \"Modern\"],\n      gradientClass: \"from-green-500/10 to-emerald-500/10\",\n      iconBgClass: \"from-green-500 to-emerald-500\",\n      glowClass: \"bg-linear-to-br from-green-500/50 to-emerald-500/50\",\n    },\n    {\n      icon: \"lucide:shield-check\",\n      title: \"Advanced Security\",\n      description: \"Enterprise-grade protection with automated threat detection.\",\n      tags: [\"Secure\", \"Compliant\", \"Protected\"],\n      gradientClass: \"from-red-500/10 to-orange-500/10\",\n      iconBgClass: \"from-red-500 to-orange-500\",\n      glowClass: \"bg-linear-to-br from-red-500/50 to-orange-500/50\",\n    },\n    {\n      icon: \"lucide:git-branch\",\n      title: \"Version Control\",\n      description: \"Track changes, collaborate seamlessly, and never lose progress.\",\n      tags: [\"Git\", \"Collaboration\", \"History\"],\n      gradientClass: \"from-indigo-500/10 to-violet-500/10\",\n      iconBgClass: \"from-indigo-500 to-violet-500\",\n      glowClass: \"bg-linear-to-br from-indigo-500/50 to-violet-500/50\",\n    },\n    {\n      icon: \"lucide:gauge\",\n      title: \"Real-time Monitoring\",\n      description: \"Keep track of performance metrics and health with live dashboards.\",\n      tags: [\"Metrics\", \"Monitoring\", \"Live\"],\n      gradientClass: \"from-amber-500/10 to-yellow-500/10\",\n      iconBgClass: \"from-amber-500 to-yellow-500\",\n      glowClass: \"bg-linear-to-br from-amber-500/50 to-yellow-500/50\",\n    },\n  ];\n</script>\n\n<style>\n  @keyframes float {\n    0%,\n    100% {\n      transform: translateY(0px);\n    }\n    50% {\n      transform: translateY(-20px);\n    }\n  }\n\n  @keyframes float-delayed {\n    0%,\n    100% {\n      transform: translateY(0px);\n    }\n    50% {\n      transform: translateY(-30px);\n    }\n  }\n\n  @keyframes pulse-slow {\n    0%,\n    100% {\n      opacity: 0.3;\n    }\n    50% {\n      opacity: 0.6;\n    }\n  }\n\n  @keyframes bounce-horizontal {\n    0%,\n    100% {\n      transform: translateX(0);\n    }\n    50% {\n      transform: translateX(4px);\n    }\n  }\n\n  .animate-float {\n    animation: float 6s ease-in-out infinite;\n  }\n\n  .animate-float-delayed {\n    animation: float-delayed 8s ease-in-out infinite;\n  }\n\n  .animate-pulse-slow {\n    animation: pulse-slow 4s ease-in-out infinite;\n  }\n\n  .animate-bounce-horizontal {\n    animation: bounce-horizontal 1s ease-in-out infinite;\n  }\n</style>\n","category":"Feature","path":"Feature/BlockFeature17.vue","components":["badge","button","container"]},{"name":"Feature 18","fileName":"BlockFeature18.vue","file":"<template>\n  <div class=\"relative overflow-hidden bg-slate-950 py-16 text-slate-50 lg:py-24\">\n    <!-- Dark gradient background with mesh -->\n    <div class=\"absolute inset-0\">\n      <div class=\"absolute inset-0 bg-linear-to-br from-slate-900 via-slate-950 to-black\" />\n      <div\n        class=\"absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,var(--tw-gradient-stops))] from-primary/20 via-transparent to-transparent\"\n      />\n    </div>\n\n    <!-- Floating orbs with GSAP animation -->\n    <div ref=\"orb1\" class=\"absolute top-1/4 left-1/4 hidden lg:block\">\n      <div\n        class=\"h-96 w-96 rounded-full bg-linear-to-r from-primary/30 to-purple-500/30 blur-3xl\"\n      />\n    </div>\n    <div ref=\"orb2\" class=\"absolute right-1/4 bottom-1/4 hidden lg:block\">\n      <div\n        class=\"h-96 w-96 rounded-full bg-linear-to-r from-pink-500/30 to-orange-500/30 blur-3xl\"\n      />\n    </div>\n\n    <Motion\n      initial=\"initial\"\n      while-in-view=\"animate\"\n      :in-view-options=\"{ once: true }\"\n      as-child\n      :variants=\"parentVariant\"\n    >\n      <UiContainer class=\"relative\">\n        <div class=\"mx-auto max-w-[800px] text-center\">\n          <Motion\n            :variants=\"childVariant\"\n            class=\"mb-4 inline-flex items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-4 py-1.5 backdrop-blur-sm\"\n          >\n            <div class=\"h-2 w-2 animate-pulse rounded-full bg-primary\" />\n            <span class=\"text-sm font-medium\">Revolutionary Technology</span>\n          </Motion>\n          <Motion as=\"h2\" :variants=\"childVariant\" class=\"mb-6 text-4xl font-bold lg:text-6xl\">\n            Build the future with\n            <span\n              class=\"bg-linear-to-r from-primary via-purple-400 to-pink-400 bg-clip-text text-transparent\"\n            >\n              cutting-edge tools\n            </span>\n          </Motion>\n          <Motion as=\"p\" :variants=\"childVariant\" class=\"text-lg text-slate-400 lg:text-xl\">\n            Experience the next generation of development with our comprehensive platform.\n          </Motion>\n        </div>\n\n        <Motion\n          as=\"div\"\n          class=\"mt-16 grid grid-cols-1 gap-6 md:grid-cols-2 lg:mt-24 lg:gap-8\"\n          :variants=\"parentVariant\"\n          initial=\"initial\"\n          while-in-view=\"animate\"\n          :in-view-options=\"{ once: true }\"\n        >\n          <Motion\n            v-for=\"(feature, i) in features\"\n            :key=\"i\"\n            class=\"group relative overflow-hidden rounded-2xl border border-slate-800 bg-slate-900/50 p-8 backdrop-blur-sm hover:border-primary/50 hover:bg-slate-900/80\"\n            :variants=\"childVariant\"\n          >\n            <!-- Gradient border effect -->\n            <div\n              class=\"absolute inset-0 -z-10 opacity-0 transition-opacity duration-500 group-hover:opacity-100\"\n            >\n              <div class=\"absolute inset-px rounded-2xl bg-slate-900\" />\n              <div class=\"absolute inset-0 bg-linear-to-r\" :class=\"feature.borderGradient\" />\n            </div>\n\n            <div class=\"relative\">\n              <!-- Icon -->\n              <div\n                class=\"mb-6 inline-flex h-16 w-16 items-center justify-center rounded-xl bg-linear-to-br shadow-lg transition-transform duration-300 group-hover:scale-110 group-hover:shadow-2xl\"\n                :class=\"feature.iconBg\"\n              >\n                <Icon :name=\"feature.icon\" class=\"h-8 w-8 text-white\" />\n              </div>\n\n              <!-- Title and description -->\n              <h3 class=\"mb-3 text-2xl font-bold\">{{ feature.title }}</h3>\n              <p class=\"mb-6 text-slate-400\">{{ feature.description }}</p>\n\n              <!-- Features list -->\n              <ul class=\"space-y-3\">\n                <li\n                  v-for=\"(item, j) in feature.items\"\n                  :key=\"j\"\n                  class=\"flex items-center gap-3 text-sm text-slate-300\"\n                >\n                  <div\n                    class=\"flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary/20\"\n                  >\n                    <Icon name=\"heroicons:check\" class=\"h-3 w-3 text-primary\" />\n                  </div>\n                  <span>{{ item }}</span>\n                </li>\n              </ul>\n\n              <!-- Stats -->\n              <div\n                v-if=\"feature.stat\"\n                class=\"mt-6 rounded-lg border border-slate-800 bg-slate-950/50 p-4\"\n              >\n                <p class=\"text-3xl font-bold\" :class=\"feature.statColor\">\n                  {{ feature.stat.value }}\n                </p>\n                <p class=\"text-sm text-slate-400\">{{ feature.stat.label }}</p>\n              </div>\n            </div>\n\n            <!-- Glow on hover -->\n            <div\n              class=\"absolute -inset-0.5 -z-20 rounded-2xl opacity-0 blur-xl transition-opacity duration-500 group-hover:opacity-70\"\n              :class=\"feature.glow\"\n            />\n          </Motion>\n        </Motion>\n\n        <Motion :variants=\"childVariant\" class=\"mt-16 text-center\">\n          <UiButton size=\"lg\" class=\"group bg-primary hover:bg-primary/90\">\n            Get Started Now\n            <Icon\n              name=\"heroicons:arrow-right\"\n              class=\"ml-2 size-5 transition-transform group-hover:translate-x-1\"\n            />\n          </UiButton>\n        </Motion>\n      </UiContainer>\n    </Motion>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import gsap from \"gsap\";\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n  import { onMounted, ref } from \"vue\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.12),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 30 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const orb1 = ref<HTMLElement | null>(null);\n  const orb2 = ref<HTMLElement | null>(null);\n\n  onMounted(() => {\n    if (orb1.value) {\n      gsap.to(orb1.value, {\n        x: 100,\n        y: -50,\n        duration: 4,\n        repeat: -1,\n        yoyo: true,\n        ease: \"sine.inOut\",\n      });\n    }\n\n    if (orb2.value) {\n      gsap.to(orb2.value, {\n        x: -180,\n        y: 160,\n        duration: 5,\n        repeat: -1,\n        yoyo: true,\n        ease: \"sine.inOut\",\n      });\n    }\n  });\n\n  const features = [\n    {\n      icon: \"lucide:code-2\",\n      title: \"Developer Experience\",\n      description:\n        \"Built with developers in mind, featuring intuitive APIs and comprehensive documentation.\",\n      items: [\"TypeScript support\", \"Auto-completion\", \"Live reload\"],\n      stat: { value: \"10x\", label: \"Faster development\", color: \"text-blue-400\" },\n      iconBg: \"from-blue-500 to-cyan-500\",\n      borderGradient: \"from-blue-500/50 to-cyan-500/50\",\n      glow: \"bg-linear-to-r from-blue-500/50 to-cyan-500/50\",\n      statColor: \"text-blue-400\",\n    },\n    {\n      icon: \"lucide:zap\",\n      title: \"Blazing Performance\",\n      description: \"Optimized for speed with edge computing and intelligent caching strategies.\",\n      items: [\"Edge runtime\", \"Global CDN\", \"Incremental builds\"],\n      stat: { value: \"99.9%\", label: \"Uptime guarantee\", color: \"text-green-400\" },\n      iconBg: \"from-green-500 to-emerald-500\",\n      borderGradient: \"from-green-500/50 to-emerald-500/50\",\n      glow: \"bg-linear-to-r from-green-500/50 to-emerald-500/50\",\n      statColor: \"text-green-400\",\n    },\n    {\n      icon: \"lucide:shield\",\n      title: \"Enterprise Security\",\n      description:\n        \"Bank-level security with automatic threat detection and compliance certifications.\",\n      items: [\"SOC 2 certified\", \"GDPR compliant\", \"Encrypted at rest\"],\n      stat: { value: \"0\", label: \"Security incidents\", color: \"text-purple-400\" },\n      iconBg: \"from-purple-500 to-pink-500\",\n      borderGradient: \"from-purple-500/50 to-pink-500/50\",\n      glow: \"bg-linear-to-r from-purple-500/50 to-pink-500/50\",\n      statColor: \"text-purple-400\",\n    },\n    {\n      icon: \"lucide:globe\",\n      title: \"Global Scale\",\n      description: \"Deploy to 200+ edge locations worldwide for lightning-fast global performance.\",\n      items: [\"Multi-region support\", \"Auto-scaling\", \"Load balancing\"],\n      stat: { value: \"200+\", label: \"Edge locations\", color: \"text-orange-400\" },\n      iconBg: \"from-orange-500 to-red-500\",\n      borderGradient: \"from-orange-500/50 to-red-500/50\",\n      glow: \"bg-linear-to-r from-orange-500/50 to-red-500/50\",\n      statColor: \"text-orange-400\",\n    },\n  ];\n</script>\n","category":"Feature","path":"Feature/BlockFeature18.vue","components":["button","container"]},{"name":"Feature 19","fileName":"BlockFeature19.vue","file":"<template>\n  <div class=\"relative overflow-hidden py-16 lg:py-24\">\n    <!-- Gradient mesh background -->\n    <div\n      class=\"absolute inset-0 bg-linear-to-br from-indigo-50 via-white to-pink-50 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950\"\n    />\n\n    <!-- Animated gradient blobs -->\n    <div class=\"absolute inset-0 -z-10 overflow-hidden\">\n      <div\n        class=\"animate-blob absolute top-0 -left-20 h-96 w-96 rounded-full bg-linear-to-r from-purple-400 to-pink-400 opacity-20 mix-blend-multiply blur-3xl filter dark:opacity-30\"\n      />\n      <div\n        class=\"animation-delay-2000 animate-blob absolute top-0 -right-20 h-96 w-96 rounded-full bg-linear-to-r from-blue-400 to-cyan-400 opacity-20 mix-blend-multiply blur-3xl filter dark:opacity-30\"\n      />\n      <div\n        class=\"animation-delay-4000 animate-blob absolute -bottom-20 left-20 h-96 w-96 rounded-full bg-linear-to-r from-green-400 to-yellow-400 opacity-20 mix-blend-multiply blur-3xl filter dark:opacity-30\"\n      />\n    </div>\n\n    <Motion\n      initial=\"initial\"\n      while-in-view=\"animate\"\n      :in-view-options=\"{ once: true }\"\n      as-child\n      :variants=\"parentVariant\"\n    >\n      <UiContainer class=\"relative\">\n        <Motion :variants=\"childVariant\">\n          <div class=\"mx-auto max-w-[900px] text-center\">\n            <div\n              class=\"mb-4 inline-flex items-center gap-2 rounded-full border bg-background/50 px-4 py-1.5 shadow-sm backdrop-blur-sm\"\n            >\n              <Icon name=\"lucide:award\" class=\"size-4 text-primary\" />\n              <span class=\"text-sm font-medium\">Award-Winning Platform</span>\n            </div>\n            <h2 class=\"mb-6 text-4xl font-extrabold tracking-tight lg:text-6xl\">\n              Experience features that\n              <br />\n              <span class=\"relative inline-block\">\n                <span\n                  class=\"bg-linear-to-r from-purple-600 via-pink-600 to-blue-600 bg-clip-text text-transparent\"\n                >\n                  redefine excellence\n                </span>\n                <svg\n                  class=\"absolute -bottom-2 left-0 w-full\"\n                  viewBox=\"0 0 300 12\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M2 10C50 2 100 2 150 6C200 10 250 10 298 6\"\n                    stroke=\"url(#gradient)\"\n                    stroke-width=\"3\"\n                    stroke-linecap=\"round\"\n                  />\n                  <defs>\n                    <linearGradient id=\"gradient\" x1=\"0\" y1=\"0\" x2=\"300\" y2=\"0\">\n                      <stop offset=\"0%\" stop-color=\"#9333EA\" />\n                      <stop offset=\"50%\" stop-color=\"#DB2777\" />\n                      <stop offset=\"100%\" stop-color=\"#2563EB\" />\n                    </linearGradient>\n                  </defs>\n                </svg>\n              </span>\n            </h2>\n            <p class=\"text-lg text-muted-foreground lg:text-xl\">\n              Discover a new way to work with intelligent automation and seamless integrations.\n            </p>\n          </div>\n        </Motion>\n\n        <!-- Feature cards in masonry-like grid -->\n        <Motion\n          as=\"div\"\n          class=\"mt-16 grid grid-cols-1 gap-6 md:grid-cols-2 lg:mt-24 lg:grid-cols-4 lg:gap-8\"\n          :variants=\"parentVariant\"\n          initial=\"initial\"\n          while-in-view=\"animate\"\n          :in-view-options=\"{ once: true }\"\n        >\n          <Motion :variants=\"childVariant\" class=\"group relative md:col-span-2\">\n            <UiCard\n              class=\"h-full overflow-hidden bg-transparent pt-0 transition-all hover:border-primary/50 hover:shadow-2xl\"\n            >\n              <div\n                class=\"relative h-48 overflow-hidden bg-linear-to-br from-purple-500 to-pink-500\"\n              >\n                <div class=\"absolute inset-0 flex items-center justify-center\">\n                  <Icon name=\"lucide:sparkles\" class=\"h-16 w-16 text-white opacity-90\" />\n                </div>\n              </div>\n              <UiCardContent>\n                <h3 class=\"mb-3 text-2xl font-bold\">AI-First Approach</h3>\n                <p class=\"mb-4 text-muted-foreground\">\n                  Harness the power of artificial intelligence to automate tasks, predict outcomes,\n                  and optimize your workflow.\n                </p>\n                <div class=\"flex flex-wrap gap-2\">\n                  <UiBadge>Machine Learning</UiBadge>\n                  <UiBadge>Automation</UiBadge>\n                  <UiBadge>Predictions</UiBadge>\n                </div>\n              </UiCardContent>\n            </UiCard>\n          </Motion>\n\n          <Motion :variants=\"childVariant\" class=\"group relative\">\n            <UiCard class=\"h-full bg-transparent transition-all hover:shadow-xl\">\n              <UiCardContent class=\"flex h-full flex-col\">\n                <div\n                  class=\"mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-linear-to-br from-blue-500 to-cyan-500\"\n                >\n                  <Icon name=\"lucide:gauge\" class=\"h-7 w-7 text-white\" />\n                </div>\n                <h3 class=\"mb-2 text-xl font-bold\">Lightning Speed</h3>\n                <p class=\"mb-4 text-sm text-muted-foreground\">\n                  Experience sub-100ms response times globally.\n                </p>\n                <div class=\"mt-auto\"></div>\n                <div class=\"rounded-lg bg-muted/50 p-4\">\n                  <p class=\"text-3xl font-bold text-blue-600\">99.9%</p>\n                  <p class=\"text-xs text-muted-foreground\">Uptime SLA</p>\n                </div>\n              </UiCardContent>\n            </UiCard>\n          </Motion>\n\n          <Motion :variants=\"childVariant\" class=\"group relative\">\n            <UiCard class=\"h-full bg-transparent transition-all hover:shadow-xl\">\n              <UiCardContent class=\"flex h-full flex-col\">\n                <div\n                  class=\"mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-linear-to-br from-green-500 to-emerald-500\"\n                >\n                  <Icon name=\"lucide:shield-check\" class=\"h-7 w-7 text-white\" />\n                </div>\n                <h3 class=\"mb-2 text-xl font-bold\">Secure by Default</h3>\n                <p class=\"mb-4 text-sm text-muted-foreground\">\n                  Enterprise-grade security built into every layer.\n                </p>\n                <div class=\"mt-auto\" />\n                <ul class=\"space-y-2 text-sm\">\n                  <li class=\"flex items-center gap-2\">\n                    <Icon name=\"heroicons:check\" class=\"h-4 w-4 text-green-600\" />\n                    <span>SOC 2 Certified</span>\n                  </li>\n                  <li class=\"flex items-center gap-2\">\n                    <Icon name=\"heroicons:check\" class=\"h-4 w-4 text-green-600\" />\n                    <span>GDPR Compliant</span>\n                  </li>\n                </ul>\n              </UiCardContent>\n            </UiCard>\n          </Motion>\n\n          <Motion :variants=\"childVariant\" class=\"group relative md:col-span-2\">\n            <UiCard class=\"h-full bg-transparent transition-all hover:shadow-xl\">\n              <UiCardContent class=\"flex h-full flex-col\">\n                <div class=\"mb-6 flex items-center gap-4\">\n                  <div\n                    class=\"flex h-14 w-14 items-center justify-center rounded-xl bg-linear-to-br from-orange-500 to-red-500\"\n                  >\n                    <Icon name=\"lucide:users\" class=\"h-7 w-7 text-white\" />\n                  </div>\n                  <div>\n                    <h3 class=\"text-2xl font-bold\">Team Collaboration</h3>\n                    <p class=\"text-sm text-muted-foreground\">Work together seamlessly</p>\n                  </div>\n                </div>\n                <div class=\"mt-auto\" />\n                <div class=\"grid grid-cols-3 gap-4\">\n                  <div class=\"rounded-lg bg-muted/50 p-4 text-center\">\n                    <p class=\"text-2xl font-bold text-orange-600\">50+</p>\n                    <p class=\"text-xs text-muted-foreground\">Integrations</p>\n                  </div>\n                  <div class=\"rounded-lg bg-muted/50 p-4 text-center\">\n                    <p class=\"text-2xl font-bold text-orange-600\">24/7</p>\n                    <p class=\"text-xs text-muted-foreground\">Support</p>\n                  </div>\n                  <div class=\"rounded-lg bg-muted/50 p-4 text-center\">\n                    <p class=\"text-2xl font-bold text-orange-600\">100%</p>\n                    <p class=\"text-xs text-muted-foreground\">Satisfaction</p>\n                  </div>\n                </div>\n              </UiCardContent>\n            </UiCard>\n          </Motion>\n\n          <Motion :variants=\"childVariant\" class=\"group relative\">\n            <UiCard class=\"h-full bg-transparent transition-all hover:shadow-xl\">\n              <UiCardContent class=\"flex h-full flex-col\">\n                <div\n                  class=\"mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-linear-to-br from-violet-500 to-purple-500\"\n                >\n                  <Icon name=\"lucide:rocket\" class=\"h-7 w-7 text-white\" />\n                </div>\n                <h3 class=\"mb-2 text-xl font-bold\">Deploy Anywhere</h3>\n                <p class=\"text-sm text-muted-foreground\">\n                  Multi-cloud support with one-click deployment.\n                </p>\n              </UiCardContent>\n            </UiCard>\n          </Motion>\n        </Motion>\n      </UiContainer>\n    </Motion>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 40 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n</script>\n\n<style>\n  @keyframes blob {\n    0%,\n    100% {\n      transform: translate(0, 0) scale(1);\n    }\n    33% {\n      transform: translate(30px, -50px) scale(1.1);\n    }\n    66% {\n      transform: translate(-20px, 20px) scale(0.9);\n    }\n  }\n\n  .animate-blob {\n    animation: blob 15s infinite;\n  }\n\n  .animation-delay-2000 {\n    animation-delay: 2s;\n  }\n\n  .animation-delay-4000 {\n    animation-delay: 4s;\n  }\n</style>\n","category":"Feature","path":"Feature/BlockFeature19.vue","components":["badge","card","cardcontent","container"]},{"name":"Feature 2","fileName":"BlockFeature2.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <Motion as=\"p\" :variants=\"childVariant\" class=\"text-center font-semibold text-primary\"\n        >Features</Motion\n      >\n      <Motion\n        as=\"h2\"\n        :variants=\"childVariant\"\n        class=\"mt-3 mb-4 text-center text-3xl font-semibold lg:mb-5 lg:text-4xl\"\n      >\n        Beautiful analytics to grow smarter\n      </Motion>\n      <Motion\n        as=\"p\"\n        :variants=\"childVariant\"\n        class=\"mx-auto max-w-[760px] text-center text-lg text-muted-foreground lg:text-xl\"\n      >\n        Powerful, self-serve product and growth analytics to help you convert, engage, and retain\n        more users. Trusted by over 4,000 startups.\n      </Motion>\n\n      <template v-for=\"(f, i) in features\" :key=\"i\">\n        <Motion :variants=\"childVariant\">\n          <section\n            class=\"mt-12 grid grid-cols-1 items-center gap-10 lg:mt-24 lg:h-[520px] lg:grid-cols-2 lg:gap-20\"\n          >\n            <div :class=\"[i % 2 == 0 ? 'lg:order-0' : 'lg:order-1']\">\n              <div\n                class=\"mb-5 flex h-12 w-12 items-center justify-center rounded-full bg-primary/20\"\n              >\n                <Icon name=\"heroicons:chat-bubble-left-right\" class=\"h-6 w-6 text-primary\" />\n              </div>\n              <h3 class=\"mb-2 text-2xl font-semibold lg:mb-4 lg:text-3xl\" v-html=\"f.title\" />\n              <p class=\"text-muted-foreground lg:text-lg\" v-html=\"f.description\" />\n\n              <div\n                as=\"div\"\n                class=\"mt-8 flex gap-3\"\n                :variants=\"{\n                  initial: { opacity: 0 },\n                  animate: {\n                    opacity: 1,\n                    transition: { delayChildren: stagger(0.3) },\n                  },\n                }\"\n              >\n                <Motion\n                  v-for=\"(l, k) in f.links\"\n                  :key=\"`link-${k}`\"\n                  :variants=\"{\n                    initial: { opacity: 0, scale: 0.9 },\n                    animate: { opacity: 1, scale: 1 },\n                  }\"\n                >\n                  <!-- @vue-expect-error -->\n                  <UiButton :size=\"l.size\" :external=\"l.external\" :variant=\"l.variant\">\n                    <Icon v-if=\"l.icon\" :name=\"l.icon\" />\n                    <span v-html=\"l.text\" />\n                  </UiButton>\n                </Motion>\n              </div>\n            </div>\n\n            <Motion\n              as=\"img\"\n              :while-hover=\"{ scale: 1.03 }\"\n              :variants=\"{\n                initial: { opacity: 0, scale: 1.1 },\n                animate: { opacity: 1, scale: 1 },\n              }\"\n              :src=\"f.imageUrl\"\n              :alt=\"f.title\"\n              class=\"h-[300px] w-full rounded-lg object-cover shadow-xs lg:h-[520px]\"\n            />\n          </section>\n        </Motion>\n      </template>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.12),\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n  const features = [\n    {\n      title: \"Share team inboxes\",\n      icon: \"heroicons:chat-bubble-left-right\",\n      description:\n        \"Whether you have a team of 2 or 200, our shared team inboxes keep everyone on the same page and in the loop.\",\n      imageUrl:\n        \"https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n      links: [\n        {\n          text: \"Demo\",\n          variant: \"outline\",\n          icon: \"lucide:play-circle\",\n          size: \"lg\",\n          url: \"#\",\n          external: false,\n        },\n        { text: \"Learn more\", variant: \"default\", size: \"lg\", url: \"#\", external: false },\n      ],\n    },\n    {\n      title: \"Deliver instant answers\",\n      icon: \"heroicons:bolt\",\n      description:\n        \"An all-in-one customer service platform that helps you balance everything your customers need to be happy.\",\n      imageUrl:\n        \"https://images.unsplash.com/photo-1542744173-8e7e53415bb0?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n      links: [\n        {\n          text: \"Demo\",\n          variant: \"outline\",\n          icon: \"lucide:play-circle\",\n          size: \"lg\",\n          url: \"#\",\n          external: false,\n        },\n        { text: \"Learn more\", variant: \"default\", size: \"lg\", url: \"#\", external: false },\n      ],\n    },\n    {\n      title: \"Manage your team with reports\",\n      icon: \"heroicons:cursor-arrow-rays\",\n      description: `Measure what matters with ${COMPANY_NAME} easy-to-use reports. You can filter, export, and drill down on the data in a couple clicks.`,\n      imageUrl:\n        \"https://images.unsplash.com/photo-1628348068343-c6a848d2b6dd?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n      links: [\n        {\n          text: \"Demo\",\n          variant: \"outline\",\n          icon: \"lucide:play-circle\",\n          size: \"lg\",\n          url: \"#\",\n          external: false,\n        },\n        { text: \"Learn more\", variant: \"default\", size: \"lg\", url: \"#\", external: false },\n      ],\n    },\n  ];\n</script>\n","category":"Feature","path":"Feature/BlockFeature2.vue","components":["button","container"]},{"name":"Feature 20","fileName":"BlockFeature20.vue","file":"<template>\n  <div\n    class=\"relative overflow-hidden bg-linear-to-br from-slate-900 via-purple-900 to-slate-900 py-16 text-white lg:py-24\"\n  >\n    <!-- Animated gradient background -->\n    <div class=\"absolute inset-0 -z-10\">\n      <div class=\"absolute inset-0 bg-[url('/grid.svg')] bg-center opacity-10\" />\n      <div\n        class=\"absolute top-0 left-0 h-full w-1/2 bg-linear-to-br from-purple-600/20 to-transparent\"\n      />\n      <div\n        class=\"absolute right-0 bottom-0 h-full w-1/2 bg-linear-to-tl from-pink-600/20 to-transparent\"\n      />\n    </div>\n\n    <!-- Floating particles -->\n    <div class=\"absolute inset-0 -z-10\">\n      <div class=\"absolute top-1/4 left-1/4 h-2 w-2 animate-ping rounded-full bg-purple-400\" />\n      <div\n        class=\"animation-delay-1000 absolute top-1/3 right-1/4 h-2 w-2 animate-ping rounded-full bg-pink-400\"\n      />\n      <div\n        class=\"animation-delay-2000 absolute bottom-1/4 left-1/3 h-2 w-2 animate-ping rounded-full bg-blue-400\"\n      />\n    </div>\n\n    <Motion\n      initial=\"initial\"\n      while-in-view=\"animate\"\n      :in-view-options=\"{ once: true }\"\n      as-child\n      :variants=\"parentVariant\"\n    >\n      <UiContainer>\n        <Motion :variants=\"childVariant\">\n          <div class=\"mx-auto max-w-[800px] text-center\">\n            <div\n              class=\"mb-6 inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-4 py-2 backdrop-blur-md\"\n            >\n              <div class=\"relative flex h-2 w-2\">\n                <span\n                  class=\"absolute inline-flex h-full w-full animate-ping rounded-full bg-purple-400 opacity-75\"\n                />\n                <span class=\"relative inline-flex h-2 w-2 rounded-full bg-purple-500\" />\n              </div>\n              <span class=\"text-sm font-medium\">Live Platform</span>\n            </div>\n            <h2 class=\"mb-6 text-4xl font-extrabold tracking-tight lg:text-6xl\">\n              The ultimate platform for\n              <span\n                class=\"bg-linear-to-r from-purple-400 via-pink-400 to-blue-400 bg-clip-text text-transparent\"\n              >\n                modern development\n              </span>\n            </h2>\n            <p class=\"text-lg text-purple-200 lg:text-xl\">\n              Experience glassmorphism design with powerful features that elevate your workflow.\n            </p>\n          </div>\n        </Motion>\n\n        <Motion\n          as=\"div\"\n          class=\"mt-16 grid grid-cols-1 gap-6 md:grid-cols-3 lg:mt-24 lg:gap-8\"\n          :variants=\"parentVariant\"\n          initial=\"initial\"\n          while-in-view=\"animate\"\n          :in-view-options=\"{ once: true }\"\n        >\n          <Motion\n            v-for=\"(feature, i) in features\"\n            :key=\"i\"\n            class=\"group relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 p-8 backdrop-blur-xl hover:border-white/20 hover:bg-white/10 hover:shadow-2xl\"\n            :variants=\"childVariant\"\n          >\n            <!-- Glass effect shimmer -->\n            <div\n              class=\"absolute inset-0 -z-10 opacity-0 transition-opacity duration-500 group-hover:opacity-100\"\n            >\n              <div class=\"absolute inset-0 bg-linear-to-br from-white/10 to-transparent\" />\n            </div>\n\n            <!-- Icon with glow -->\n            <div class=\"relative mb-6\">\n              <div\n                class=\"flex h-16 w-16 items-center justify-center rounded-2xl bg-linear-to-br shadow-lg transition-all duration-300 group-hover:scale-110 group-hover:shadow-2xl\"\n                :class=\"feature.iconBg\"\n              >\n                <Icon :name=\"feature.icon\" class=\"h-8 w-8 text-white\" />\n              </div>\n            </div>\n            <div\n              class=\"absolute inset-0 -z-10 rounded-2xl opacity-0 blur-xl transition-opacity group-hover:opacity-20\"\n              :class=\"feature.glow\"\n            />\n\n            <h3 class=\"mb-3 text-2xl font-bold\">{{ feature.title }}</h3>\n            <p class=\"mb-6 text-purple-200\">{{ feature.description }}</p>\n\n            <!-- Feature highlights -->\n            <div class=\"space-y-3\">\n              <Motion\n                v-for=\"(highlight, j) in feature.highlights\"\n                :key=\"j\"\n                :variants=\"{\n                  initial: { opacity: 0, x: -20 },\n                  animate: {\n                    opacity: 1,\n                    x: 0,\n                    transition: { type: 'spring', stiffness: 100, damping: 20 },\n                  },\n                }\"\n                class=\"flex items-center gap-3 text-sm text-purple-100\"\n              >\n                <div\n                  class=\"flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-white/10\"\n                >\n                  <Icon name=\"heroicons:check\" class=\"h-3 w-3\" />\n                </div>\n                <span>{{ highlight }}</span>\n              </Motion>\n            </div>\n\n            <!-- Metric -->\n            <div class=\"mt-6 rounded-xl border border-white/10 bg-white/5 p-4 backdrop-blur-sm\">\n              <p class=\"text-4xl font-bold\" :class=\"feature.metricColor\">{{ feature.metric }}</p>\n              <p class=\"text-sm text-purple-200\">{{ feature.metricLabel }}</p>\n            </div>\n\n            <!-- Bottom gradient line -->\n            <div\n              class=\"absolute right-0 bottom-0 left-0 h-1 opacity-0 transition-opacity duration-500 group-hover:opacity-100\"\n            >\n              <div class=\"h-full bg-linear-to-r\" :class=\"feature.gradientLine\" />\n            </div>\n          </Motion>\n        </Motion>\n\n        <!-- CTA Section -->\n        <Motion :variants=\"childVariant\" class=\"mt-16 text-center lg:mt-24\">\n          <div\n            class=\"mx-auto max-w-[600px] rounded-2xl border border-white/20 bg-white/10 p-8 backdrop-blur-xl lg:p-12\"\n          >\n            <h3 class=\"mb-4 text-2xl font-bold lg:text-3xl\">Ready to get started?</h3>\n            <p class=\"mb-6 text-purple-200\">\n              Join thousands of developers building the future with our platform.\n            </p>\n            <div class=\"flex flex-col gap-4 sm:flex-row sm:justify-center\">\n              <UiButton size=\"lg\" class=\"group\">\n                Start Free Trial\n                <Icon\n                  name=\"heroicons:arrow-right\"\n                  class=\"ml-2 size-5 transition-transform group-hover:translate-x-1\"\n                />\n              </UiButton>\n              <UiButton\n                size=\"lg\"\n                variant=\"outline\"\n                class=\"border-white/20 bg-white/5 hover:bg-white/10\"\n              >\n                View Pricing\n              </UiButton>\n            </div>\n          </div>\n        </Motion>\n      </UiContainer>\n    </Motion>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 40 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const features = [\n    {\n      icon: \"lucide:layers\",\n      title: \"Modular Design\",\n      description: \"Build with reusable components and scale effortlessly as your needs grow.\",\n      highlights: [\"Component library\", \"Design system\", \"Customizable themes\"],\n      metric: \"500+\",\n      metricLabel: \"Pre-built components\",\n      metricColor: \"text-purple-400\",\n      iconBg: \"from-purple-500 to-pink-500\",\n      glow: \"bg-purple-500\",\n      gradientLine: \"from-purple-500 via-pink-500 to-purple-500\",\n    },\n    {\n      icon: \"lucide:cpu\",\n      title: \"Edge Computing\",\n      description: \"Deploy to the edge for lightning-fast performance across the globe.\",\n      highlights: [\"Global distribution\", \"Edge functions\", \"Smart routing\"],\n      metric: \"<50ms\",\n      metricLabel: \"Average latency\",\n      metricColor: \"text-blue-400\",\n      iconBg: \"from-blue-500 to-cyan-500\",\n      glow: \"bg-blue-500\",\n      gradientLine: \"from-blue-500 via-cyan-500 to-blue-500\",\n    },\n    {\n      icon: \"lucide:sparkles\",\n      title: \"AI Integration\",\n      description: \"Leverage cutting-edge AI to automate workflows and gain insights.\",\n      highlights: [\"Natural language processing\", \"Predictive analytics\", \"Smart automation\"],\n      metric: \"10x\",\n      metricLabel: \"Productivity boost\",\n      metricColor: \"text-pink-400\",\n      iconBg: \"from-pink-500 to-orange-500\",\n      glow: \"bg-pink-500\",\n      gradientLine: \"from-pink-500 via-orange-500 to-pink-500\",\n    },\n  ];\n</script>\n\n<style scoped>\n  .animation-delay-1000 {\n    animation-delay: 1s;\n  }\n\n  .animation-delay-2000 {\n    animation-delay: 2s;\n  }\n</style>\n","category":"Feature","path":"Feature/BlockFeature20.vue","components":["button","container"]},{"name":"Feature 3","fileName":"BlockFeature3.vue","file":"<template>\n  <UiContainer class=\"py-16 lg:py-24\">\n    <Motion\n      as=\"div\"\n      class=\"grid grid-cols-1 gap-y-10 md:gap-8 md:py-10 lg:grid-cols-3\"\n      :variants=\"{\n        initial: { opacity: 0 },\n        animate: { opacity: 1, transition: { delayChildren: stagger(0.15) } },\n      }\"\n      initial=\"initial\"\n      while-in-view=\"animate\"\n    >\n      <div\n        v-for=\"(f, i) in features\"\n        :key=\"i\"\n        class=\"group flex flex-col items-center justify-center\"\n      >\n        <Motion\n          :variants=\"itemVariant\"\n          class=\"flex h-12 w-12 items-center justify-center rounded-md border\"\n        >\n          <Icon\n            :name=\"f.icon\"\n            class=\"h-5 w-5 transition-colors group-hover:text-primary lg:h-6 lg:w-6\"\n          />\n        </Motion>\n        <Motion\n          as-child\n          :variants=\"itemVariant\"\n          class=\"mt-4 text-center text-lg font-semibold text-balance lg:mt-5 lg:text-xl\"\n        >\n          <h3 v-html=\"f.title\"\n        /></Motion>\n        <Motion\n          as-child\n          class=\"mt-1 max-w-[400px] text-center text-balance text-muted-foreground lg:mt-2 lg:max-w-none\"\n          :variants=\"itemVariant\"\n        >\n          <p v-html=\"f.description\" />\n        </Motion>\n      </div>\n    </Motion>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const itemVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, x: -20 },\n    animate: {\n      opacity: 1,\n      x: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const features = [\n    {\n      icon: \"heroicons:chat-bubble-left-right\",\n      title: \"Share team inboxes\",\n      description:\n        \"Whether you have a team of 2 or 200, our shared team inboxes keep everyone on the same page and in the loop.\",\n    },\n    {\n      icon: \"heroicons:bolt\",\n      title: \"Deliver instant answers\",\n      description:\n        \"An all-in-one customer service platform that helps you balance everything your customers need to be happy.\",\n    },\n    {\n      icon: \"heroicons:cursor-arrow-rays\",\n      title: \"Manage your team with reports\",\n      description: `Measure what matters with ${COMPANY_NAME} easy-to-use reports. You can filter, export, and drill down on the data in a couple clicks.`,\n    },\n  ];\n</script>\n","category":"Feature","path":"Feature/BlockFeature3.vue","components":["container"]},{"name":"Feature 4","fileName":"BlockFeature4.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <Motion :variants=\"childVariant\" :transition=\"{ duration: 0.5 }\">\n        <p class=\"text-center font-semibold text-primary\">Features</p>\n        <h2 class=\"mt-3 mb-4 text-center text-3xl font-semibold lg:mb-5 lg:text-4xl\">\n          Beautiful analytics to grow smarter\n        </h2>\n        <p class=\"mx-auto max-w-[760px] text-center text-lg text-muted-foreground lg:text-xl\">\n          Powerful, self-serve product and growth analytics to help you convert, engage, and retain\n          more users. Trusted by over 4,000 startups.\n        </p>\n      </Motion>\n\n      <div\n        class=\"grid grid-cols-1 gap-y-10 py-10 md:grid-cols-2 lg:grid-cols-3 lg:gap-8 lg:gap-y-16 lg:py-16\"\n      >\n        <Motion\n          v-for=\"(f, i) in features\"\n          :key=\"i\"\n          class=\"group flex flex-col items-center justify-center\"\n          :variants=\"childVariant\"\n        >\n          <div class=\"flex h-12 w-12 items-center justify-center rounded-md border\">\n            <Icon\n              :name=\"f.icon\"\n              class=\"h-5 w-5 transition-colors group-hover:text-primary lg:h-6 lg:w-6\"\n            />\n          </div>\n          <h3\n            class=\"mt-4 text-center text-lg font-semibold text-balance lg:mt-5 lg:text-xl\"\n            v-html=\"f.title\"\n          />\n          <p\n            class=\"mt-1 max-w-[400px] text-center text-balance text-muted-foreground lg:mt-2\"\n            v-html=\"f.description\"\n          />\n        </Motion>\n      </div>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n  const features = [\n    {\n      icon: \"heroicons:chat-bubble-left-right\",\n      title: \"Share team inboxes\",\n      description:\n        \"Whether you have a team of 2 or 200, our shared team inboxes keep everyone on the same page and in the loop.\",\n    },\n    {\n      icon: \"heroicons:bolt\",\n      title: \"Deliver instant answers\",\n      description:\n        \"An all-in-one customer service platform that helps you balance everything your customers need to be happy.\",\n    },\n    {\n      icon: \"heroicons:cursor-arrow-rays\",\n      title: \"Manage your team with reports\",\n      description: `Measure what matters with ${COMPANY_NAME} easy-to-use reports. You can filter, export, and drill down on the data in a couple clicks.`,\n    },\n    {\n      icon: \"heroicons:users\",\n      title: \"Connect with customers\",\n      description:\n        \"Solve a problem or close a sale in real-time with chat. If no one is available, customers are seamlessly routed to email without confusion.\",\n    },\n    {\n      icon: \"heroicons:command-line\",\n      title: \"Connect the tools you already use\",\n      description:\n        \"Explore 100+ integrations that make your day-to-day workflow more efficient and familiar. Plus, our extensive developer tools.\",\n    },\n    {\n      icon: \"heroicons:heart\",\n      title: \"Our people make the difference\",\n      description:\n        \"We're an extension of your customer service team, and all of our resources are free. Chat to our friendly team 24/7 when you need help.\",\n    },\n  ];\n</script>\n","category":"Feature","path":"Feature/BlockFeature4.vue","components":["container"]},{"name":"Feature 5","fileName":"BlockFeature5.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <Motion :variants=\"childVariant\" :transition=\"{ duration: 0.5 }\">\n        <div class=\"max-w-[760px]\">\n          <Motion as=\"p\" :variants=\"childVariant\" class=\"font-semibold text-primary\"\n            >Features</Motion\n          >\n          <Motion\n            as=\"h2\"\n            :variants=\"childVariant\"\n            class=\"mt-3 mb-4 text-3xl font-semibold lg:mb-5 lg:text-4xl\"\n          >\n            Beautiful analytics to grow smarter\n          </Motion>\n          <Motion as=\"p\" :variants=\"childVariant\" class=\"text-lg text-muted-foreground lg:text-xl\">\n            Powerful, self-serve product and growth analytics to help you convert, engage, and\n            retain more users. Trusted by over 4,000 startups.\n          </Motion>\n        </div>\n      </Motion>\n\n      <div\n        class=\"grid grid-cols-1 gap-y-10 py-10 md:grid-cols-2 lg:grid-cols-3 lg:gap-8 lg:gap-y-16 lg:py-16\"\n      >\n        <Motion\n          v-for=\"(f, i) in features\"\n          :key=\"i\"\n          class=\"group flex flex-col\"\n          :variants=\"childVariant\"\n        >\n          <div class=\"flex h-12 w-12 items-center justify-center rounded-md border\">\n            <Icon\n              :name=\"f.icon\"\n              class=\"h-5 w-5 transition-colors group-hover:text-primary lg:h-6 lg:w-6\"\n            />\n          </div>\n          <h3 class=\"mt-4 text-lg font-semibold text-balance lg:mt-5 lg:text-xl\" v-html=\"f.title\" />\n          <p class=\"mt-1 text-balance text-muted-foreground lg:mt-2\" v-html=\"f.description\" />\n          <NuxtLink\n            class=\"mt-4 inline-flex items-center gap-2 font-semibold text-primary underline-offset-2 hover:underline lg:mt-5\"\n            :to=\"f.link.to\"\n            >{{ f.link.text }}\n            <Icon\n              name=\"heroicons:arrow-right\"\n              class=\"size-4 transition-transform group-hover:translate-x-1\"\n          /></NuxtLink>\n        </Motion>\n      </div>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n  const features = [\n    {\n      icon: \"lucide:message-square-dot\",\n      title: \"Share team inboxes\",\n      description:\n        \"Whether you have a team of 2 or 200, our shared team inboxes keep everyone on the same page and in the loop.\",\n      link: { text: \"Learn more\", to: \"#\" },\n    },\n    {\n      icon: \"lucide:zap\",\n      title: \"Deliver instant answers\",\n      description:\n        \"An all-in-one customer service platform that helps you balance everything your customers need to be happy.\",\n      link: { text: \"Learn more\", to: \"#\" },\n    },\n    {\n      icon: \"lucide:mouse-pointer-click\",\n      title: \"Manage your team with reports\",\n      description: `Measure what matters with ${COMPANY_NAME} easy-to-use reports. You can filter, export, and drill down on the data in a couple clicks.`,\n      link: { text: \"Learn more\", to: \"#\" },\n    },\n    {\n      icon: \"lucide:users\",\n      title: \"Connect with customers\",\n      description:\n        \"Solve a problem or close a sale in real-time with chat. If no one is available, customers are seamlessly routed to email without confusion.\",\n      link: { text: \"Learn more\", to: \"#\" },\n    },\n    {\n      icon: \"lucide:square-terminal\",\n      title: \"Connect the tools you already use\",\n      description:\n        \"Explore 100+ integrations that make your day-to-day workflow more efficient and familiar. Plus, our extensive developer tools.\",\n      link: { text: \"Learn more\", to: \"#\" },\n    },\n    {\n      icon: \"lucide:heart\",\n      title: \"Our people make the difference\",\n      description:\n        \"We're an extension of your customer service team, and all of our resources are free. Chat to our friendly team 24/7 when you need help.\",\n      link: { text: \"Learn more\", to: \"#\" },\n    },\n  ];\n</script>\n","category":"Feature","path":"Feature/BlockFeature5.vue","components":["container"]},{"name":"Feature 6","fileName":"BlockFeature6.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"relative py-16 lg:py-24\">\n      <Motion :variants=\"childVariant\" :transition=\"{ duration: 0.5 }\">\n        <div class=\"relative z-10 max-w-[760px]\">\n          <Motion as=\"p\" :variants=\"childVariant\" class=\"font-semibold text-primary\"\n            >Features</Motion\n          >\n          <Motion\n            as=\"h2\"\n            :variants=\"childVariant\"\n            class=\"mt-3 mb-4 text-3xl font-semibold lg:mb-5 lg:text-4xl\"\n          >\n            Overflowing with useful features\n          </Motion>\n          <Motion\n            as=\"p\"\n            :variants=\"childVariant\"\n            class=\"max-w-[700px] text-lg text-muted-foreground lg:text-xl\"\n          >\n            Powerful, self-serve product and growth analytics to help you convert, engage, and\n            retain more users. Trusted by over 4,000 startups.\n          </Motion>\n        </div>\n      </Motion>\n\n      <div\n        class=\"grid grid-cols-1 gap-y-12 overflow-hidden py-10 lg:grid-cols-2 lg:gap-x-10 lg:py-20\"\n      >\n        <div class=\"grid grid-cols-1 grid-rows-2 gap-y-10 lg:grid-cols-2 lg:gap-8 lg:gap-y-12\">\n          <Motion\n            v-for=\"(f, i) in features\"\n            :key=\"i\"\n            class=\"group flex flex-col lg:row-span-1\"\n            :variants=\"childVariant\"\n          >\n            <div class=\"flex h-12 w-12 items-center justify-center rounded-md border\">\n              <Icon\n                :name=\"f.icon\"\n                class=\"h-5 w-5 transition-colors group-hover:text-primary lg:h-6 lg:w-6\"\n              />\n            </div>\n            <h3 class=\"mt-4 text-lg font-semibold lg:mt-5 lg:text-xl\" v-text=\"f.title\" />\n            <p\n              class=\"mt-1 max-w-[400px] text-muted-foreground lg:mt-2 lg:max-w-none\"\n              v-text=\"f.description\"\n            />\n          </Motion>\n        </div>\n\n        <Motion\n          :variants=\"{\n            initial: { opacity: 0, x: 30 },\n            animate: { opacity: 1, x: 0, transition: { duration: 0.6 } },\n          }\"\n          class=\"group overflow-hidden rounded-lg\"\n        >\n          <img\n            src=\"https://images.unsplash.com/photo-1507908708918-778587c9e563?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n            alt=\"Share team inboxes feature\"\n            class=\"h-[300px] w-full rounded-lg object-cover shadow-xs transition-all duration-1000 group-hover:scale-110 lg:h-[520px]\"\n          />\n        </Motion>\n      </div>\n\n      <Motion\n        :variants=\"{\n          initial: { opacity: 0, scale: 0.95 },\n          animate: { opacity: 1, scale: 1 },\n        }\"\n        :transition=\"{ duration: 0.7 }\"\n        class=\"absolute hidden lg:top-[50px] lg:right-[350px] lg:block xl:right-[350px]\"\n      >\n        <div\n          class=\"h-[300px] w-[300px] scale-x-100\"\n          style=\"transform: rotateX(180deg) rotate(309deg)\"\n        >\n          <svg viewBox=\"0 0 360 342\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M342.654 174.227C343.704 172.945 345.594 172.756 346.876 173.806C348.158 174.856 348.346 176.746 347.296 178.028L342.654 174.227ZM159.589 141.42L159.868 138.433L159.869 138.434L159.589 141.42ZM184.236 248.724L182.479 246.293L182.479 246.292L184.236 248.724ZM34.9177 108.275C35.017 106.621 36.4382 105.361 38.0921 105.461C39.746 105.56 41.0062 106.981 40.9069 108.635L34.9177 108.275ZM350.512 200.044C350.567 201.7 349.269 203.087 347.613 203.142C345.957 203.197 344.57 201.899 344.515 200.243L350.512 200.044ZM346.66 174.344L346.944 171.357C348.447 171.5 349.609 172.737 349.659 174.245L346.66 174.344ZM320.295 174.307C318.67 173.981 317.619 172.399 317.945 170.775C318.272 169.15 319.854 168.098 321.478 168.425L320.295 174.307ZM344.975 176.127C347.296 178.028 347.295 178.029 347.294 178.03C347.294 178.031 347.292 178.033 347.29 178.035C347.287 178.039 347.283 178.044 347.278 178.051C347.267 178.064 347.251 178.083 347.231 178.107C347.19 178.156 347.131 178.227 347.054 178.32C346.899 178.505 346.672 178.776 346.373 179.125C345.776 179.824 344.897 180.839 343.754 182.117C341.468 184.673 338.125 188.283 333.881 192.526C325.399 201.004 313.281 212.038 298.76 222.223C269.869 242.488 230.675 259.93 191.571 245.779L193.613 240.138C229.851 253.251 266.849 237.278 295.314 217.311C309.471 207.381 321.322 196.595 329.639 188.282C333.795 184.129 337.06 180.601 339.282 178.117C340.392 176.876 341.241 175.896 341.81 175.23C342.094 174.897 342.308 174.642 342.45 174.473C342.52 174.388 342.573 174.325 342.607 174.284C342.624 174.263 342.637 174.248 342.644 174.238C342.648 174.234 342.651 174.23 342.653 174.228C342.653 174.227 342.654 174.227 342.654 174.226C342.654 174.226 342.654 174.227 344.975 176.127ZM191.571 245.779C152.934 231.798 135.393 204.746 132.163 181.185C130.558 169.476 132.484 158.514 137.294 150.563C142.156 142.526 150.052 137.516 159.868 138.433L159.31 144.407C152.19 143.742 146.326 147.224 142.428 153.668C138.478 160.198 136.646 169.707 138.107 180.37C141.011 201.554 156.908 226.855 193.613 240.138L191.571 245.779ZM159.869 138.434C169.254 139.314 178.636 144.72 186.578 152.506C194.556 160.328 201.323 170.778 205.438 182.242C213.68 205.207 211.378 232.813 185.993 251.156L182.479 246.292C205.099 229.948 207.407 205.49 199.79 184.269C195.975 173.64 189.696 163.966 182.377 156.791C175.023 149.58 166.856 145.115 159.309 144.407L159.869 138.434ZM185.993 251.155C173.06 260.503 156.569 261.895 139.593 257.576C122.621 253.258 104.888 243.182 88.9736 229.122C57.1795 201.031 32.0248 156.455 34.9177 108.275L40.9069 108.635C38.1513 154.528 62.1638 197.429 92.9463 224.626C108.321 238.209 125.227 247.73 141.073 251.762C156.915 255.792 171.417 254.288 182.479 246.293L185.993 251.155ZM344.515 200.243L343.662 174.443L349.659 174.245L350.512 200.044L344.515 200.243ZM346.66 174.344C346.377 177.33 346.377 177.33 346.376 177.33C346.376 177.33 346.376 177.33 346.376 177.33C346.375 177.33 346.374 177.33 346.373 177.33C346.37 177.33 346.366 177.329 346.361 177.329C346.351 177.328 346.336 177.327 346.316 177.325C346.276 177.321 346.217 177.315 346.139 177.308C345.985 177.293 345.758 177.271 345.468 177.243C344.888 177.187 344.054 177.106 343.037 177.005C341.005 176.804 338.243 176.524 335.322 176.214C329.566 175.602 322.953 174.842 320.295 174.307L321.478 168.425C323.797 168.892 330.071 169.621 335.957 170.248C338.859 170.556 341.606 170.834 343.629 171.034C344.64 171.134 345.47 171.215 346.046 171.271C346.334 171.299 346.559 171.321 346.712 171.335C346.788 171.343 346.847 171.348 346.886 171.352C346.905 171.354 346.92 171.355 346.93 171.356C346.935 171.356 346.938 171.357 346.941 171.357C346.942 171.357 346.943 171.357 346.943 171.357C346.944 171.357 346.944 171.357 346.944 171.357C346.944 171.357 346.944 171.357 346.66 174.344Z\"\n              fill=\"#2970FF\"\n            />\n          </svg>\n        </div>\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n  const features = [\n    {\n      icon: \"lucide:message-square-dot\",\n      title: \"Share team inboxes\",\n      description:\n        \"Whether you have a team of 2 or 200, our shared team inboxes keep everyone on the same page and in the loop.\",\n    },\n    {\n      icon: \"lucide:zap\",\n      title: \"Deliver instant answers\",\n      description:\n        \"An all-in-one customer service platform that helps you balance everything your customers need to be happy.\",\n    },\n    {\n      icon: \"lucide:chart-bar\",\n      title: \"Manage your team with reports\",\n      description: `Measure what matters with ${COMPANY_NAME}easy-to-use reports. You can filter, export, and drill down on the data in a couple clicks.`,\n    },\n    {\n      icon: \"lucide:users\",\n      title: \"Connect with customers\",\n      description:\n        \"Solve a problem or close a sale in real-time with chat. If no one is available, customers are seamlessly routed to email without confusion.\",\n    },\n  ];\n</script>\n","category":"Feature","path":"Feature/BlockFeature6.vue","components":["container"]},{"name":"Feature 7","fileName":"BlockFeature7.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"relative py-16 lg:py-24\">\n      <div class=\"max-w-[760px]\">\n        <Motion as=\"p\" :variants=\"childVariant\" class=\"font-semibold text-primary\">Features</Motion>\n        <Motion\n          as=\"h2\"\n          :variants=\"childVariant\"\n          class=\"mt-3 mb-4 text-3xl font-semibold lg:mb-5 lg:text-4xl\"\n        >\n          Overflowing with useful features\n        </Motion>\n        <Motion\n          as=\"p\"\n          :variants=\"childVariant\"\n          class=\"max-w-[800px] text-lg text-balance text-muted-foreground lg:text-xl\"\n        >\n          Powerful, self-serve product and growth analytics to help you convert, engage, and retain\n          more users. Trusted by over 4,000 startups.\n        </Motion>\n      </div>\n\n      <div\n        class=\"grid grid-cols-1 gap-y-12 overflow-hidden py-10 lg:grid-cols-2 lg:gap-x-10 lg:py-20\"\n      >\n        <Motion\n          class=\"grid grid-cols-1 gap-y-10 lg:gap-8 lg:gap-y-12\"\n          :variants=\"{\n            animate: { transition: { delayChildren: stagger(0.1) } },\n          }\"\n        >\n          <Motion\n            v-for=\"(f, i) in features\"\n            :key=\"i\"\n            class=\"group flex gap-5\"\n            :initial=\"{ opacity: 0, x: -20 }\"\n            :visible-once=\"{ opacity: 1, x: 0 }\"\n            :variants=\"{\n              initial: { opacity: 0, x: -20 },\n              animate: { opacity: 1, x: 0 },\n            }\"\n          >\n            <div class=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-md border\">\n              <Icon\n                :name=\"f.icon\"\n                class=\"h-5 w-5 transition-colors group-hover:text-primary lg:h-5 lg:w-5\"\n              />\n            </div>\n            <div class=\"grow\">\n              <h3 class=\"text-lg font-semibold lg:text-xl\" v-text=\"f.title\" />\n              <p\n                class=\"mt-1 max-w-[600px] text-muted-foreground lg:mt-2 lg:max-w-none\"\n                v-text=\"f.description\"\n              />\n              <NuxtLink\n                class=\"mt-4 inline-flex items-center gap-2 font-semibold text-primary underline-offset-2 hover:underline lg:mt-5\"\n                :to=\"f.link.url\"\n                >{{ f.link.text }} <Icon name=\"heroicons:arrow-right\" class=\"size-4\"\n              /></NuxtLink>\n            </div>\n          </Motion>\n        </Motion>\n\n        <Motion\n          :variants=\"{\n            initial: { opacity: 0, x: 30 },\n            animate: { opacity: 1, x: 0, transition: { duration: 0.6 } },\n          }\"\n          :transition=\"{ duration: 0.6, delay: 0.3 }\"\n        >\n          <img\n            src=\"https://images.unsplash.com/photo-1626908013351-800ddd734b8a?q=80&w=1972&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n            alt=\"Share team inboxes feature\"\n            class=\"h-[300px] w-full rounded-lg object-cover shadow-xs lg:h-full lg:max-h-[700px] lg:w-[590px]\"\n          />\n        </Motion>\n      </div>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const features = [\n    {\n      icon: \"lucide:message-square-dot\",\n      title: \"Share team inboxes\",\n      description:\n        \"Whether you have a team of 2 or 200, our shared team inboxes keep everyone on the same page and in the loop.\",\n      link: { text: \"Learn more\", url: \"#\" },\n    },\n    {\n      icon: \"lucide:zap\",\n      title: \"Deliver instant answers\",\n      description:\n        \"An all-in-one customer service platform that helps you balance everything your customers need to be happy.\",\n      link: { text: \"Learn more\", url: \"#\" },\n    },\n    {\n      icon: \"lucide:mouse-pointer-click\",\n      title: \"Manage your team with reports\",\n      description: `Measure what matters with ${COMPANY_NAME}easy-to-use reports. You can filter, export, and drill down on the data in a couple clicks.`,\n      link: { text: \"Learn more\", url: \"#\" },\n    },\n    {\n      icon: \"lucide:users\",\n      title: \"Connect with customers\",\n      description:\n        \"Solve a problem or close a sale in real-time with chat. If no one is available, customers are seamlessly routed to email without confusion.\",\n      link: { text: \"Learn more\", url: \"#\" },\n    },\n  ];\n</script>\n","category":"Feature","path":"Feature/BlockFeature7.vue","components":["container"]},{"name":"Feature 8","fileName":"BlockFeature8.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"relative py-16 lg:py-24\">\n      <div class=\"grid grid-cols-1 gap-y-12 lg:grid-cols-2 lg:gap-x-24\">\n        <Motion :variants=\"childVariant\" :transition=\"{ duration: 0.5 }\">\n          <p class=\"font-semibold text-primary\">New feature</p>\n          <h2 class=\"mt-3 mb-4 text-3xl font-semibold lg:mb-5 lg:text-4xl\">\n            Introducing team inboxes\n          </h2>\n          <p class=\"text-lg text-muted-foreground lg:text-xl\">\n            Powerful, self-serve product and growth analytics to help you convert, engage, and\n            retain more users. Trusted by over 4,000 startups.\n          </p>\n        </Motion>\n\n        <div class=\"grid grid-cols-1 gap-y-10 lg:gap-8 lg:gap-y-12\">\n          <Motion\n            v-for=\"(f, i) in features\"\n            :key=\"i\"\n            class=\"group flex gap-5\"\n            :variants=\"{\n              initial: { opacity: 0, x: 20 },\n              animate: { opacity: 1, x: 0 },\n            }\"\n          >\n            <div class=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-md border\">\n              <Icon\n                :name=\"f.icon\"\n                class=\"h-5 w-5 transition-colors group-hover:text-primary lg:h-5 lg:w-5\"\n              />\n            </div>\n            <div class=\"grow\">\n              <h3 class=\"text-lg font-semibold lg:text-xl\" v-text=\"f.title\" />\n              <p class=\"mt-1 text-muted-foreground lg:mt-2\" v-text=\"f.description\" />\n            </div>\n          </Motion>\n        </div>\n      </div>\n\n      <Motion\n        :variants=\"{\n          initial: { opacity: 0, y: 30 },\n          animate: { opacity: 1, y: 0 },\n        }\"\n        class=\"mx-auto mt-10 h-[350px] w-full overflow-hidden rounded-md lg:mt-20 lg:h-[520px] lg:w-[900px] lg:rounded-lg\"\n      >\n        <iframe\n          width=\"100%\"\n          height=\"100%\"\n          src=\"https://www.youtube.com/embed/hmkHPI32D5Y?si=CVzjCZbUR9hMt7zq\"\n          :title=\"`${COMPANY_NAME} new feature section seven video`\"\n          frameborder=\"0\"\n          allow=\"\n            accelerometer;\n            autoplay;\n            clipboard-write;\n            encrypted-media;\n            gyroscope;\n            picture-in-picture;\n            web-share;\n          \"\n          allowfullscreen\n        />\n      </Motion>\n\n      <Motion\n        :variants=\"{\n          initial: { opacity: 0, scale: 0.8 },\n          animate: { opacity: 1, rotate: 45, scale: 1, transition: { duration: 0.8 } },\n        }\"\n        class=\"absolute top-[25%] hidden lg:-left-20 lg:block xl:-left-16\"\n      >\n        <div class=\"size-[250px] xl:size-[300px]\">\n          <svg viewBox=\"0 0 360 342\" class=\"fill-primary\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M342.654 174.227C343.704 172.945 345.594 172.756 346.876 173.806C348.158 174.856 348.346 176.746 347.296 178.028L342.654 174.227ZM159.589 141.42L159.868 138.433L159.869 138.434L159.589 141.42ZM184.236 248.724L182.479 246.293L182.479 246.292L184.236 248.724ZM34.9177 108.275C35.017 106.621 36.4382 105.361 38.0921 105.461C39.746 105.56 41.0062 106.981 40.9069 108.635L34.9177 108.275ZM350.512 200.044C350.567 201.7 349.269 203.087 347.613 203.142C345.957 203.197 344.57 201.899 344.515 200.243L350.512 200.044ZM346.66 174.344L346.944 171.357C348.447 171.5 349.609 172.737 349.659 174.245L346.66 174.344ZM320.295 174.307C318.67 173.981 317.619 172.399 317.945 170.775C318.272 169.15 319.854 168.098 321.478 168.425L320.295 174.307ZM344.975 176.127C347.296 178.028 347.295 178.029 347.294 178.03C347.294 178.031 347.292 178.033 347.29 178.035C347.287 178.039 347.283 178.044 347.278 178.051C347.267 178.064 347.251 178.083 347.231 178.107C347.19 178.156 347.131 178.227 347.054 178.32C346.899 178.505 346.672 178.776 346.373 179.125C345.776 179.824 344.897 180.839 343.754 182.117C341.468 184.673 338.125 188.283 333.881 192.526C325.399 201.004 313.281 212.038 298.76 222.223C269.869 242.488 230.675 259.93 191.571 245.779L193.613 240.138C229.851 253.251 266.849 237.278 295.314 217.311C309.471 207.381 321.322 196.595 329.639 188.282C333.795 184.129 337.06 180.601 339.282 178.117C340.392 176.876 341.241 175.896 341.81 175.23C342.094 174.897 342.308 174.642 342.45 174.473C342.52 174.388 342.573 174.325 342.607 174.284C342.624 174.263 342.637 174.248 342.644 174.238C342.648 174.234 342.651 174.23 342.653 174.228C342.653 174.227 342.654 174.227 342.654 174.226C342.654 174.226 342.654 174.227 344.975 176.127ZM191.571 245.779C152.934 231.798 135.393 204.746 132.163 181.185C130.558 169.476 132.484 158.514 137.294 150.563C142.156 142.526 150.052 137.516 159.868 138.433L159.31 144.407C152.19 143.742 146.326 147.224 142.428 153.668C138.478 160.198 136.646 169.707 138.107 180.37C141.011 201.554 156.908 226.855 193.613 240.138L191.571 245.779ZM159.869 138.434C169.254 139.314 178.636 144.72 186.578 152.506C194.556 160.328 201.323 170.778 205.438 182.242C213.68 205.207 211.378 232.813 185.993 251.156L182.479 246.292C205.099 229.948 207.407 205.49 199.79 184.269C195.975 173.64 189.696 163.966 182.377 156.791C175.023 149.58 166.856 145.115 159.309 144.407L159.869 138.434ZM185.993 251.155C173.06 260.503 156.569 261.895 139.593 257.576C122.621 253.258 104.888 243.182 88.9736 229.122C57.1795 201.031 32.0248 156.455 34.9177 108.275L40.9069 108.635C38.1513 154.528 62.1638 197.429 92.9463 224.626C108.321 238.209 125.227 247.73 141.073 251.762C156.915 255.792 171.417 254.288 182.479 246.293L185.993 251.155ZM344.515 200.243L343.662 174.443L349.659 174.245L350.512 200.044L344.515 200.243ZM346.66 174.344C346.377 177.33 346.377 177.33 346.376 177.33C346.376 177.33 346.376 177.33 346.376 177.33C346.375 177.33 346.374 177.33 346.373 177.33C346.37 177.33 346.366 177.329 346.361 177.329C346.351 177.328 346.336 177.327 346.316 177.325C346.276 177.321 346.217 177.315 346.139 177.308C345.985 177.293 345.758 177.271 345.468 177.243C344.888 177.187 344.054 177.106 343.037 177.005C341.005 176.804 338.243 176.524 335.322 176.214C329.566 175.602 322.953 174.842 320.295 174.307L321.478 168.425C323.797 168.892 330.071 169.621 335.957 170.248C338.859 170.556 341.606 170.834 343.629 171.034C344.64 171.134 345.47 171.215 346.046 171.271C346.334 171.299 346.559 171.321 346.712 171.335C346.788 171.343 346.847 171.348 346.886 171.352C346.905 171.354 346.92 171.355 346.93 171.356C346.935 171.356 346.938 171.357 346.941 171.357C346.942 171.357 346.943 171.357 346.943 171.357C346.944 171.357 346.944 171.357 346.944 171.357C346.944 171.357 346.944 171.357 346.66 174.344Z\"\n            />\n          </svg>\n        </div>\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n  const features = [\n    {\n      icon: \"lucide:message-square-dot\",\n      title: \"Share team inboxes\",\n      description:\n        \"Whether you have a team of 2 or 200, our shared team inboxes keep everyone on the same page and in the loop.\",\n    },\n    {\n      icon: \"lucide:zap\",\n      title: \"Deliver instant answers\",\n      description:\n        \"An all-in-one customer service platform that helps you balance everything your customers need to be happy.\",\n    },\n  ];\n</script>\n","category":"Feature","path":"Feature/BlockFeature8.vue","components":["container"]},{"name":"Feature 9","fileName":"BlockFeature9.vue","file":"<template>\n  <Motion initial=\"initial\" while-in-view=\"animate\" as-child :variants=\"parentVariant\">\n    <UiContainer class=\"py-16 lg:py-24\">\n      <div class=\"mx-auto max-w-[760px]\">\n        <Motion :variants=\"childVariant\" class=\"text-center\">\n          <UiBadge variant=\"outline\" class=\"gap-2 px-3 py-1.5 text-sm font-normal\"\n            ><Icon name=\"lucide:circle-dot\" class=\"size-4 text-primary\" /> Features</UiBadge\n          >\n        </Motion>\n        <Motion\n          as=\"h2\"\n          :variants=\"childVariant\"\n          class=\"mt-3 mb-4 text-center text-3xl font-semibold lg:mt-7 lg:mb-5 lg:text-4xl\"\n        >\n          Cutting-edge features for advanced analytics\n        </Motion>\n        <Motion\n          as=\"p\"\n          :variants=\"childVariant\"\n          class=\"mx-auto max-w-[760px] text-center text-lg text-muted-foreground lg:text-xl\"\n        >\n          Powerful, self-serve product and growth analytics to help you convert, engage, and retain\n          more users. Trusted by over 4,000 startups.\n        </Motion>\n      </div>\n\n      <Motion :variants=\"childVariant\">\n        <img\n          src=\"https://images.unsplash.com/photo-1608411404720-c8f0417bcdba?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Cutting edge feature\"\n          width=\"700\"\n          height=\"600\"\n          class=\"mx-auto mt-12 h-[300px] w-full rounded-lg object-cover shadow-xs drop-shadow-md lg:mt-16 lg:h-[520px] lg:w-[770px]\"\n        />\n      </Motion>\n\n      <Motion\n        as=\"div\"\n        class=\"my-12 grid grid-cols-1 gap-y-10 lg:my-24 lg:grid-cols-3 lg:gap-8 lg:gap-y-16\"\n        :variants=\"parentVariant\"\n        initial=\"initial\"\n        while-in-view=\"animate\"\n      >\n        <Motion\n          v-for=\"(f, i) in features\"\n          :key=\"i\"\n          class=\"group flex flex-col items-center\"\n          :variants=\"childVariant\"\n        >\n          <div class=\"flex h-12 w-12 items-center justify-center rounded-md border\">\n            <Icon\n              :name=\"f.icon\"\n              class=\"h-5 w-5 transition-colors group-hover:text-primary lg:h-6 lg:w-6\"\n            />\n          </div>\n          <h3 class=\"mt-4 text-center text-lg font-semibold lg:mt-5 lg:text-xl\" v-text=\"f.title\" />\n          <p\n            class=\"mt-1 max-w-[500px] text-center text-balance text-muted-foreground lg:mt-2\"\n            v-text=\"f.description\"\n          />\n          <NuxtLink\n            class=\"mt-4 inline-flex items-center gap-2 font-semibold text-primary underline-offset-2 hover:underline lg:mt-5\"\n            :to=\"f.link.url\"\n            >{{ f.link.text }}\n            <Icon\n              name=\"heroicons:arrow-right\"\n              class=\"size-4 transition-transform group-hover:translate-x-1\"\n            />\n          </NuxtLink>\n        </Motion>\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n  const features = [\n    {\n      icon: \"heroicons:chat-bubble-left-right\",\n      title: \"Share team inboxes\",\n      description:\n        \"Whether you have a team of 2 or 200, our shared team inboxes keep everyone on the same page and in the loop.\",\n      link: { text: \"Learn more\", url: \"#\" },\n    },\n    {\n      icon: \"heroicons:bolt\",\n      title: \"Deliver instant answers\",\n      description:\n        \"An all-in-one customer service platform that helps you balance everything your customers need to be happy.\",\n      link: { text: \"Learn more\", url: \"#\" },\n    },\n    {\n      icon: \"heroicons:cursor-arrow-rays\",\n      title: \"Manage your team with reports\",\n      description: `Measure what matters with ${COMPANY_NAME} easy-to-use reports. You can filter, export, and drill down on the data in a couple clicks.`,\n      link: { text: \"Learn more\", url: \"#\" },\n    },\n  ];\n</script>\n","category":"Feature","path":"Feature/BlockFeature9.vue","components":["badge","container"]},{"name":"Footer 1","fileName":"BlockFooter1.vue","file":"<template>\n  <UiContainer as=\"footer\" class=\"py-16 lg:py-24\">\n    <section class=\"grid grid-cols-2 gap-8 lg:grid-cols-6\">\n      <template v-for=\"n in 6\" :key=\"n\">\n        <div>\n          <p class=\"mb-4 text-sm text-muted-foreground\">Product</p>\n          <ul class=\"flex flex-col gap-3\">\n            <li v-for=\"k in 6\" :key=\"k\">\n              <NuxtLink class=\"font-semibold hover:text-primary\" to=\"#\">Link item {{ k }}</NuxtLink>\n            </li>\n          </ul>\n        </div>\n      </template>\n    </section>\n\n    <section class=\"mt-12 flex flex-col justify-between gap-5 border-t pt-8 lg:mt-16 lg:flex-row\">\n      <NuxtLink to=\"#\" class=\"flex items-center gap-3\">\n        <img\n          src=\"/icon.png\"\n          fit=\"contain\"\n          alt=\"Company Logo\"\n          title=\"Company Logo\"\n          class=\"h-6 object-contain lg:h-8\"\n        />\n        <span class=\"text-lg font-semibold\">{{ COMPANY_NAME }}</span>\n      </NuxtLink>\n      <p class=\"text-muted-foreground\">\n        &copy; {{ new Date().getFullYear() }} {{ COMPANY_NAME }}. All rights reserved.\n      </p>\n    </section>\n  </UiContainer>\n</template>\n","category":"Footer","path":"Footer/BlockFooter1.vue","components":["container"]},{"name":"Footer 10","fileName":"BlockFooter10.vue","file":"<template>\n  <footer class=\"bg-slate-900 text-slate-50\">\n    <UiContainer class=\"py-16 lg:py-24\">\n      <div class=\"grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-5\">\n        <!-- Product -->\n        <div>\n          <h3 class=\"mb-4 text-sm font-semibold\">Product</h3>\n          <ul class=\"space-y-3 text-sm\">\n            <li v-for=\"item in ['Features', 'Integrations', 'Pricing', 'Changelog']\" :key=\"item\">\n              <NuxtLink class=\"text-slate-400 transition-colors hover:text-white\" to=\"#\">\n                {{ item }}\n              </NuxtLink>\n            </li>\n          </ul>\n        </div>\n\n        <!-- Resources -->\n        <div>\n          <h3 class=\"mb-4 text-sm font-semibold\">Resources</h3>\n          <ul class=\"space-y-3 text-sm\">\n            <li v-for=\"item in ['Blog', 'Newsletter', 'Events', 'Help center']\" :key=\"item\">\n              <NuxtLink class=\"text-slate-400 transition-colors hover:text-white\" to=\"#\">\n                {{ item }}\n              </NuxtLink>\n            </li>\n          </ul>\n        </div>\n\n        <!-- Company -->\n        <div>\n          <h3 class=\"mb-4 text-sm font-semibold\">Company</h3>\n          <ul class=\"space-y-3 text-sm\">\n            <li v-for=\"item in ['About us', 'Careers', 'Press', 'Contact']\" :key=\"item\">\n              <NuxtLink class=\"text-slate-400 transition-colors hover:text-white\" to=\"#\">\n                {{ item }}\n              </NuxtLink>\n            </li>\n          </ul>\n        </div>\n\n        <!-- Legal -->\n        <div>\n          <h3 class=\"mb-4 text-sm font-semibold\">Legal</h3>\n          <ul class=\"space-y-3 text-sm\">\n            <li v-for=\"item in ['Privacy', 'Terms', 'Cookie policy', 'Licenses']\" :key=\"item\">\n              <NuxtLink class=\"text-slate-400 transition-colors hover:text-white\" to=\"#\">\n                {{ item }}\n              </NuxtLink>\n            </li>\n          </ul>\n        </div>\n\n        <!-- Newsletter -->\n        <div class=\"col-span-2 md:col-span-3 lg:col-span-1\">\n          <h3 class=\"mb-4 text-sm font-semibold\">Subscribe to our newsletter</h3>\n          <p class=\"mb-4 text-sm text-slate-400\">\n            The latest news, articles, and resources, sent to your inbox weekly.\n          </p>\n          <form class=\"flex flex-col gap-2\">\n            <input\n              type=\"email\"\n              placeholder=\"Enter your email\"\n              class=\"rounded-md border-slate-700 bg-slate-800 px-4 py-2 text-sm text-white placeholder-slate-400 focus:border-primary focus:ring-2 focus:ring-primary focus:outline-none\"\n            />\n            <UiButton size=\"sm\" class=\"w-full\">Subscribe</UiButton>\n          </form>\n        </div>\n      </div>\n\n      <div\n        class=\"mt-12 flex flex-col items-center justify-between gap-4 border-t border-slate-800 pt-8 lg:mt-16 lg:flex-row\"\n      >\n        <div class=\"flex items-center gap-3\">\n          <img\n            src=\"/icon.png\"\n            fit=\"contain\"\n            alt=\"Company Logo\"\n            title=\"Company Logo\"\n            class=\"h-8 object-contain\"\n          />\n          <span class=\"text-lg font-semibold\">{{ COMPANY_NAME }}</span>\n        </div>\n        <p class=\"text-sm text-slate-400\">\n          &copy; {{ new Date().getFullYear() }} {{ COMPANY_NAME }}. All rights reserved.\n        </p>\n        <div class=\"flex items-center gap-4\">\n          <NuxtLink to=\"#\" class=\"opacity-70 transition-opacity hover:opacity-100\">\n            <Icon name=\"logos:facebook\" class=\"size-5\" />\n          </NuxtLink>\n          <NuxtLink to=\"#\" class=\"opacity-70 transition-opacity hover:opacity-100\">\n            <Icon name=\"logos:twitter\" class=\"size-5\" />\n          </NuxtLink>\n          <NuxtLink to=\"#\" class=\"opacity-70 transition-opacity hover:opacity-100\">\n            <Icon name=\"logos:linkedin-icon\" class=\"size-5\" />\n          </NuxtLink>\n          <NuxtLink to=\"#\" class=\"opacity-70 transition-opacity hover:opacity-100\">\n            <Icon name=\"ri:github-fill\" class=\"size-5\" />\n          </NuxtLink>\n        </div>\n      </div>\n    </UiContainer>\n  </footer>\n</template>\n","category":"Footer","path":"Footer/BlockFooter10.vue","components":["button","container"]},{"name":"Footer 11","fileName":"BlockFooter11.vue","file":"<template>\n  <footer class=\"border-t\">\n    <UiContainer class=\"py-12 lg:py-16\">\n      <div class=\"grid grid-cols-1 gap-8 lg:grid-cols-3\">\n        <!-- Left Section - Logo and Description -->\n        <div class=\"lg:col-span-2\">\n          <NuxtLink to=\"#\" class=\"mb-4 inline-flex items-center gap-3\">\n            <img\n              src=\"/icon.png\"\n              fit=\"contain\"\n              alt=\"Company Logo\"\n              title=\"Company Logo\"\n              class=\"h-8 object-contain\"\n            />\n            <span class=\"text-xl font-semibold\">{{ COMPANY_NAME }}</span>\n          </NuxtLink>\n          <p class=\"mb-6 max-w-md text-muted-foreground\">\n            Building exceptional digital products that help businesses grow and succeed in the\n            modern world.\n          </p>\n          <div class=\"flex flex-wrap gap-6\">\n            <NuxtLink\n              v-for=\"item in ['About', 'Features', 'Pricing', 'Blog', 'Contact', 'Careers']\"\n              :key=\"item\"\n              class=\"text-sm font-medium transition-colors hover:text-primary\"\n              to=\"#\"\n            >\n              {{ item }}\n            </NuxtLink>\n          </div>\n        </div>\n\n        <!-- Right Section - Social and Legal -->\n        <div class=\"flex flex-col justify-between\">\n          <div>\n            <p class=\"mb-3 text-sm font-semibold\">Follow us</p>\n            <div class=\"flex gap-3\">\n              <NuxtLink\n                to=\"#\"\n                class=\"flex size-9 items-center justify-center rounded-md border transition-colors hover:border-primary hover:bg-primary/5\"\n              >\n                <Icon name=\"logos:facebook\" class=\"size-4\" />\n              </NuxtLink>\n              <NuxtLink\n                to=\"#\"\n                class=\"flex size-9 items-center justify-center rounded-md border transition-colors hover:border-primary hover:bg-primary/5\"\n              >\n                <Icon name=\"logos:twitter\" class=\"size-4\" />\n              </NuxtLink>\n              <NuxtLink\n                to=\"#\"\n                class=\"flex size-9 items-center justify-center rounded-md border transition-colors hover:border-primary hover:bg-primary/5\"\n              >\n                <Icon name=\"logos:linkedin-icon\" class=\"size-4\" />\n              </NuxtLink>\n              <NuxtLink\n                to=\"#\"\n                class=\"flex size-9 items-center justify-center rounded-md border transition-colors hover:border-primary hover:bg-primary/5\"\n              >\n                <Icon name=\"ri:instagram-fill\" class=\"size-4\" />\n              </NuxtLink>\n            </div>\n          </div>\n          <div class=\"mt-6 flex flex-wrap gap-4 text-sm text-muted-foreground lg:mt-0\">\n            <NuxtLink to=\"#\" class=\"transition-colors hover:text-primary\">Privacy Policy</NuxtLink>\n            <span>•</span>\n            <NuxtLink to=\"#\" class=\"transition-colors hover:text-primary\"\n              >Terms of Service</NuxtLink\n            >\n            <span>•</span>\n            <NuxtLink to=\"#\" class=\"transition-colors hover:text-primary\">Cookies</NuxtLink>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"mt-8 border-t pt-6 lg:mt-12\">\n        <p class=\"text-center text-sm text-muted-foreground lg:text-left\">\n          &copy; {{ new Date().getFullYear() }} {{ COMPANY_NAME }}. All rights reserved.\n        </p>\n      </div>\n    </UiContainer>\n  </footer>\n</template>\n","category":"Footer","path":"Footer/BlockFooter11.vue","components":["container"]},{"name":"Footer 12","fileName":"BlockFooter12.vue","file":"<template>\n  <footer class=\"bg-linear-to-br from-primary/5 via-purple-500/5 to-pink-500/5\">\n    <UiContainer class=\"py-16 lg:py-24\">\n      <!-- Top Section -->\n      <div class=\"mb-12 grid grid-cols-1 gap-8 lg:mb-16 lg:grid-cols-2\">\n        <div>\n          <h2 class=\"mb-3 text-3xl font-bold lg:text-4xl\">Ready to get started?</h2>\n          <p class=\"text-lg text-muted-foreground\">\n            Join thousands of companies already using our platform.\n          </p>\n        </div>\n        <div class=\"flex items-center justify-start lg:justify-end\">\n          <div class=\"flex flex-col gap-3 sm:flex-row\">\n            <UiButton size=\"lg\" variant=\"outline\">Talk to Sales</UiButton>\n            <UiButton size=\"lg\">Start Free Trial</UiButton>\n          </div>\n        </div>\n      </div>\n\n      <!-- Links Section -->\n      <div\n        class=\"grid grid-cols-2 gap-8 border-t border-b py-12 md:grid-cols-4 lg:grid-cols-6 lg:py-16\"\n      >\n        <div v-for=\"section in linkSections\" :key=\"section.title\">\n          <h3 class=\"mb-4 text-sm font-semibold\">{{ section.title }}</h3>\n          <ul class=\"space-y-3\">\n            <li v-for=\"link in section.links\" :key=\"link\">\n              <NuxtLink\n                class=\"text-sm text-muted-foreground transition-colors hover:text-primary\"\n                to=\"#\"\n              >\n                {{ link }}\n              </NuxtLink>\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      <!-- Bottom Section -->\n      <div class=\"mt-12 flex flex-col items-center justify-between gap-6 lg:flex-row\">\n        <div class=\"flex items-center gap-3\">\n          <img\n            src=\"/icon.png\"\n            fit=\"contain\"\n            alt=\"Company Logo\"\n            title=\"Company Logo\"\n            class=\"h-8 object-contain\"\n          />\n          <span class=\"text-xl font-semibold\">{{ COMPANY_NAME }}</span>\n        </div>\n\n        <div class=\"flex flex-wrap items-center justify-center gap-6 text-sm text-muted-foreground\">\n          <NuxtLink to=\"#\" class=\"transition-colors hover:text-primary\">Privacy</NuxtLink>\n          <NuxtLink to=\"#\" class=\"transition-colors hover:text-primary\">Terms</NuxtLink>\n          <NuxtLink to=\"#\" class=\"transition-colors hover:text-primary\">Sitemap</NuxtLink>\n          <span>&copy; {{ new Date().getFullYear() }}</span>\n        </div>\n\n        <div class=\"flex items-center gap-3\">\n          <NuxtLink\n            v-for=\"social in ['facebook', 'twitter', 'linkedin-icon', 'github-icon']\"\n            :key=\"social\"\n            to=\"#\"\n            class=\"flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 transition-all hover:bg-primary hover:text-white\"\n          >\n            <Icon :name=\"`logos:${social}`\" class=\"size-4\" />\n          </NuxtLink>\n        </div>\n      </div>\n    </UiContainer>\n  </footer>\n</template>\n\n<script lang=\"ts\" setup>\n  const linkSections = [\n    { title: \"Product\", links: [\"Features\", \"Pricing\", \"Security\", \"Roadmap\"] },\n    { title: \"Platform\", links: [\"Developer API\", \"Partners\", \"Marketplace\", \"Status\"] },\n    { title: \"Support\", links: [\"Docs\", \"Community\", \"Contact\", \"FAQ\"] },\n    { title: \"Company\", links: [\"About\", \"Blog\", \"Careers\", \"Press\"] },\n    { title: \"Resources\", links: [\"Newsletter\", \"Events\", \"Webinars\", \"Guides\"] },\n    { title: \"Legal\", links: [\"Privacy\", \"Terms\", \"Cookies\", \"Licenses\"] },\n  ];\n</script>\n","category":"Footer","path":"Footer/BlockFooter12.vue","components":["button","container"]},{"name":"Footer 13","fileName":"BlockFooter13.vue","file":"<template>\n  <footer>\n    <UiContainer class=\"py-16 lg:py-24\">\n      <!-- Main Content -->\n      <div class=\"grid grid-cols-1 gap-12 lg:grid-cols-12\">\n        <!-- Left Section - About -->\n        <div class=\"lg:col-span-5\">\n          <NuxtLink to=\"#\" class=\"mb-5 inline-flex items-center gap-3\">\n            <img\n              src=\"/icon.png\"\n              fit=\"contain\"\n              alt=\"Company Logo\"\n              title=\"Company Logo\"\n              class=\"h-10 object-contain\"\n            />\n            <span class=\"text-2xl font-bold\">{{ COMPANY_NAME }}</span>\n          </NuxtLink>\n          <p class=\"mb-6 text-muted-foreground\">\n            We're on a mission to transform the way teams collaborate and build products together.\n            Join us in shaping the future of work.\n          </p>\n\n          <!-- App Download Buttons -->\n          <div class=\"mb-6 flex flex-col gap-3 sm:flex-row\">\n            <NuxtLink\n              to=\"#\"\n              class=\"flex items-center gap-3 rounded-lg border px-4 py-2.5 transition-colors hover:border-primary hover:bg-primary/5\"\n            >\n              <Icon name=\"logos:apple-app-store\" class=\"size-6\" />\n              <div class=\"text-left\">\n                <p class=\"text-xs text-muted-foreground\">Download on the</p>\n                <p class=\"text-sm font-semibold\">App Store</p>\n              </div>\n            </NuxtLink>\n            <NuxtLink\n              to=\"#\"\n              class=\"flex items-center gap-3 rounded-lg border px-4 py-2.5 transition-colors hover:border-primary hover:bg-primary/5\"\n            >\n              <Icon name=\"logos:google-play-icon\" class=\"size-6\" />\n              <div class=\"text-left\">\n                <p class=\"text-xs text-muted-foreground\">Get it on</p>\n                <p class=\"text-sm font-semibold\">Google Play</p>\n              </div>\n            </NuxtLink>\n          </div>\n\n          <!-- Social Links -->\n          <div>\n            <p class=\"mb-3 text-sm font-semibold\">Follow us</p>\n            <div class=\"flex gap-3\">\n              <NuxtLink\n                v-for=\"social in [\n                  'logos:facebook',\n                  'logos:twitter',\n                  'ri:instagram-fill',\n                  'logos:linkedin-icon',\n                  'logos:youtube-icon',\n                ]\"\n                :key=\"social\"\n                to=\"#\"\n                class=\"flex h-10 w-10 items-center justify-center rounded-full border transition-all hover:scale-110 hover:border-primary hover:bg-primary/5\"\n              >\n                <Icon :name=\"social\" class=\"h-5 w-5\" />\n              </NuxtLink>\n            </div>\n          </div>\n        </div>\n\n        <!-- Right Section - Links -->\n        <div class=\"grid grid-cols-2 gap-8 md:grid-cols-3 lg:col-span-7 lg:grid-cols-3\">\n          <div>\n            <h3 class=\"mb-4 text-sm font-semibold tracking-wider uppercase\">Platform</h3>\n            <ul class=\"space-y-3\">\n              <li\n                v-for=\"item in [\n                  'Overview',\n                  'Features',\n                  'Integrations',\n                  'Pricing',\n                  'Changelog',\n                  'Status',\n                ]\"\n                :key=\"item\"\n              >\n                <NuxtLink\n                  class=\"text-sm text-muted-foreground transition-colors hover:text-primary\"\n                  to=\"#\"\n                >\n                  {{ item }}\n                </NuxtLink>\n              </li>\n            </ul>\n          </div>\n\n          <div>\n            <h3 class=\"mb-4 text-sm font-semibold tracking-wider uppercase\">Resources</h3>\n            <ul class=\"space-y-3\">\n              <li\n                v-for=\"item in [\n                  'Documentation',\n                  'API Reference',\n                  'Guides',\n                  'Blog',\n                  'Community',\n                  'Support',\n                ]\"\n                :key=\"item\"\n              >\n                <NuxtLink\n                  class=\"text-sm text-muted-foreground transition-colors hover:text-primary\"\n                  to=\"#\"\n                >\n                  {{ item }}\n                </NuxtLink>\n              </li>\n            </ul>\n          </div>\n\n          <div>\n            <h3 class=\"mb-4 text-sm font-semibold tracking-wider uppercase\">Company</h3>\n            <ul class=\"space-y-3\">\n              <li\n                v-for=\"item in ['About Us', 'Careers', 'Press Kit', 'Partners', 'Contact', 'Legal']\"\n                :key=\"item\"\n              >\n                <NuxtLink\n                  class=\"text-sm text-muted-foreground transition-colors hover:text-primary\"\n                  to=\"#\"\n                >\n                  {{ item }}\n                </NuxtLink>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n\n      <!-- Bottom Bar -->\n      <div\n        class=\"mt-12 flex flex-col items-center justify-between gap-4 border-t pt-8 lg:mt-16 lg:flex-row\"\n      >\n        <p class=\"text-sm text-muted-foreground\">\n          &copy; {{ new Date().getFullYear() }} {{ COMPANY_NAME }}, Inc. All rights reserved.\n        </p>\n        <div class=\"flex flex-wrap gap-6 text-sm text-muted-foreground\">\n          <NuxtLink to=\"#\" class=\"transition-colors hover:text-primary\">Privacy Policy</NuxtLink>\n          <NuxtLink to=\"#\" class=\"transition-colors hover:text-primary\">Terms of Service</NuxtLink>\n          <NuxtLink to=\"#\" class=\"transition-colors hover:text-primary\">Cookie Policy</NuxtLink>\n        </div>\n      </div>\n    </UiContainer>\n  </footer>\n</template>\n","category":"Footer","path":"Footer/BlockFooter13.vue","components":["container"]},{"name":"Footer 14","fileName":"BlockFooter14.vue","file":"<template>\n  <footer class=\"border-t\">\n    <UiContainer class=\"py-12\">\n      <div class=\"flex flex-col items-center justify-between gap-4 lg:flex-row\">\n        <!-- Logo -->\n        <NuxtLink to=\"#\" class=\"flex items-center gap-2\">\n          <img\n            src=\"/icon.png\"\n            fit=\"contain\"\n            alt=\"Company Logo\"\n            title=\"Company Logo\"\n            class=\"h-7 object-contain\"\n          />\n          <span class=\"font-semibold\">{{ COMPANY_NAME }}</span>\n        </NuxtLink>\n\n        <!-- Navigation -->\n        <nav class=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-sm\">\n          <NuxtLink\n            v-for=\"item in ['About', 'Features', 'Pricing', 'Blog', 'Docs', 'Contact']\"\n            :key=\"item\"\n            class=\"text-muted-foreground transition-colors hover:text-primary\"\n            to=\"#\"\n          >\n            {{ item }}\n          </NuxtLink>\n        </nav>\n\n        <!-- Copyright -->\n        <p class=\"text-sm text-muted-foreground\">\n          &copy; {{ new Date().getFullYear() }} {{ COMPANY_NAME }}\n        </p>\n      </div>\n    </UiContainer>\n  </footer>\n</template>\n","category":"Footer","path":"Footer/BlockFooter14.vue","components":["container"]},{"name":"Footer 15","fileName":"BlockFooter15.vue","file":"<template>\n  <footer class=\"bg-slate-50 dark:bg-slate-950\">\n    <UiContainer class=\"py-16 lg:py-20\">\n      <div class=\"mb-12 text-center lg:mb-16\">\n        <NuxtLink to=\"#\" class=\"mb-4 inline-flex items-center gap-3\">\n          <img\n            src=\"/icon.png\"\n            fit=\"contain\"\n            alt=\"Company Logo\"\n            title=\"Company Logo\"\n            class=\"h-12 object-contain\"\n          />\n        </NuxtLink>\n        <p class=\"mx-auto mb-8 max-w-md text-muted-foreground\">\n          Building the future of digital experiences, one product at a time.\n        </p>\n\n        <!-- Main Navigation -->\n        <nav class=\"mb-8 flex flex-wrap items-center justify-center gap-x-8 gap-y-3\">\n          <NuxtLink\n            v-for=\"item in ['Home', 'Products', 'Solutions', 'Developers', 'Company', 'Support']\"\n            :key=\"item\"\n            class=\"font-medium transition-colors hover:text-primary\"\n            to=\"#\"\n          >\n            {{ item }}\n          </NuxtLink>\n        </nav>\n\n        <!-- Social Links -->\n        <div class=\"mb-8 flex items-center justify-center gap-4\">\n          <NuxtLink\n            v-for=\"social in [\n              'logos:facebook',\n              'logos:twitter',\n              'ri:instagram-fill',\n              'logos:linkedin-icon',\n              'ri:github-fill',\n              'logos:youtube-icon',\n            ]\"\n            :key=\"social\"\n            to=\"#\"\n            class=\"flex h-11 w-11 items-center justify-center rounded-full border-2 transition-all hover:scale-110 hover:border-primary hover:bg-primary/5\"\n          >\n            <Icon :name=\"social\" class=\"size-5\" />\n          </NuxtLink>\n        </div>\n\n        <!-- Legal Links -->\n        <div class=\"flex flex-wrap items-center justify-center gap-6 text-sm text-muted-foreground\">\n          <NuxtLink to=\"#\" class=\"transition-colors hover:text-primary\">Privacy Policy</NuxtLink>\n          <span>•</span>\n          <NuxtLink to=\"#\" class=\"transition-colors hover:text-primary\">Terms of Service</NuxtLink>\n          <span>•</span>\n          <NuxtLink to=\"#\" class=\"transition-colors hover:text-primary\">Cookie Settings</NuxtLink>\n        </div>\n      </div>\n\n      <!-- Copyright -->\n      <div class=\"border-t pt-8 text-center\">\n        <p class=\"text-sm text-muted-foreground\">\n          &copy; {{ new Date().getFullYear() }} {{ COMPANY_NAME }}, Inc. All rights reserved\n          worldwide.\n        </p>\n      </div>\n    </UiContainer>\n  </footer>\n</template>\n","category":"Footer","path":"Footer/BlockFooter15.vue","components":["container"]},{"name":"Footer 16","fileName":"BlockFooter16.vue","file":"<template>\n  <footer class=\"border-t bg-muted/30\">\n    <UiContainer class=\"py-12 lg:py-16\">\n      <div class=\"grid grid-cols-1 gap-8 lg:grid-cols-3\">\n        <!-- Left - Logo and tagline -->\n        <div>\n          <NuxtLink to=\"#\" class=\"mb-3 inline-flex items-center gap-3\">\n            <img\n              src=\"/icon.png\"\n              fit=\"contain\"\n              alt=\"Company Logo\"\n              title=\"Company Logo\"\n              class=\"h-8 object-contain\"\n            />\n            <span class=\"text-xl font-semibold\">{{ COMPANY_NAME }}</span>\n          </NuxtLink>\n          <p class=\"text-sm text-muted-foreground\">\n            Making the world a better place through technology.\n          </p>\n        </div>\n\n        <!-- Center - Quick Links -->\n        <div class=\"flex items-center justify-center\">\n          <nav class=\"flex flex-wrap gap-4 text-sm\">\n            <NuxtLink\n              v-for=\"item in ['About', 'Blog', 'Jobs', 'Press', 'Partners']\"\n              :key=\"item\"\n              class=\"text-muted-foreground transition-colors hover:text-primary\"\n              to=\"#\"\n            >\n              {{ item }}\n            </NuxtLink>\n          </nav>\n        </div>\n\n        <!-- Right - Newsletter -->\n        <div>\n          <p class=\"mb-2 text-sm font-semibold\">Subscribe to our newsletter</p>\n          <form class=\"flex gap-2\">\n            <input\n              type=\"email\"\n              placeholder=\"Your email\"\n              class=\"h-8 flex-1 rounded-md border bg-background px-3 py-2 text-sm focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none\"\n            />\n            <UiButton size=\"sm\" type=\"submit\">\n              <Icon name=\"heroicons:paper-airplane\" class=\"h-4 w-4\" />\n            </UiButton>\n          </form>\n        </div>\n      </div>\n\n      <UiDivider class=\"my-8\" />\n\n      <div class=\"flex flex-col items-center justify-between gap-4 lg:flex-row\">\n        <p class=\"text-sm text-muted-foreground\">\n          &copy; {{ new Date().getFullYear() }} {{ COMPANY_NAME }}. All rights reserved.\n        </p>\n\n        <div class=\"flex items-center gap-6\">\n          <NuxtLink\n            to=\"#\"\n            class=\"text-sm text-muted-foreground transition-colors hover:text-primary\"\n          >\n            Privacy\n          </NuxtLink>\n          <NuxtLink\n            to=\"#\"\n            class=\"text-sm text-muted-foreground transition-colors hover:text-primary\"\n          >\n            Terms\n          </NuxtLink>\n          <div class=\"flex items-center gap-3\">\n            <NuxtLink to=\"#\" class=\"text-muted-foreground transition-colors hover:text-primary\">\n              <Icon name=\"logos:facebook\" class=\"size-5\" />\n            </NuxtLink>\n            <NuxtLink to=\"#\" class=\"text-muted-foreground transition-colors hover:text-primary\">\n              <Icon name=\"logos:twitter\" class=\"size-5\" />\n            </NuxtLink>\n            <NuxtLink to=\"#\" class=\"text-muted-foreground transition-colors hover:text-primary\">\n              <Icon name=\"logos:linkedin-icon\" class=\"size-5\" />\n            </NuxtLink>\n          </div>\n        </div>\n      </div>\n    </UiContainer>\n  </footer>\n</template>\n","category":"Footer","path":"Footer/BlockFooter16.vue","components":["button","container","divider"]},{"name":"Footer 2","fileName":"BlockFooter2.vue","file":"<template>\n  <UiContainer as=\"footer\" class=\"py-16 lg:py-24\">\n    <section class=\"grid grid-cols-2 gap-8 lg:grid-cols-6\">\n      <div class=\"col-span-full pb-10 lg:col-span-2\">\n        <NuxtLink to=\"#\" class=\"flex items-center gap-3\">\n          <img\n            src=\"/icon.png\"\n            fit=\"contain\"\n            alt=\"Company Logo\"\n            title=\"Company Logo\"\n            class=\"h-7 object-contain lg:h-10\"\n          />\n          <span class=\"text-xl font-semibold\">{{ COMPANY_NAME }}</span>\n        </NuxtLink>\n        <p class=\"mt-5 text-muted-foreground\">\n          Design amazing digital experiences that create more happy in the world.\n        </p>\n      </div>\n      <template v-for=\"n in 4\" :key=\"n\">\n        <div>\n          <p class=\"mb-4 text-sm text-muted-foreground\">Product</p>\n          <ul class=\"flex flex-col gap-3\">\n            <li v-for=\"k in 6\" :key=\"k\">\n              <NuxtLink class=\"font-semibold hover:text-primary\" to=\"#\">Link item {{ k }}</NuxtLink>\n            </li>\n          </ul>\n        </div>\n      </template>\n    </section>\n\n    <section class=\"mt-12 flex flex-col justify-between gap-5 border-t pt-8 lg:mt-16 lg:flex-row\">\n      <p class=\"text-muted-foreground\">\n        &copy; {{ new Date().getFullYear() }} {{ COMPANY_NAME }}. All rights reserved.\n      </p>\n      <div class=\"flex items-center gap-2\">\n        <Icon name=\"logos:facebook\" class=\"h-7 w-7\" />\n        <Icon name=\"logos:twitter\" class=\"h-7 w-7\" />\n        <Icon name=\"lucide:instagram\" class=\"h-7 w-7\" />\n      </div>\n    </section>\n  </UiContainer>\n</template>\n","category":"Footer","path":"Footer/BlockFooter2.vue","components":["container"]},{"name":"Footer 3","fileName":"BlockFooter3.vue","file":"<template>\n  <UiContainer as=\"footer\" class=\"py-16 lg:py-24\">\n    <section class=\"grid grid-cols-2 gap-8 lg:grid-cols-6\">\n      <div class=\"col-span-full pb-10 lg:col-span-2\">\n        <NuxtLink to=\"#\" class=\"flex items-center gap-3\">\n          <img\n            src=\"/icon.png\"\n            fit=\"contain\"\n            alt=\"Company Logo\"\n            title=\"Company Logo\"\n            class=\"h-7 object-contain lg:h-10\"\n          />\n          <span class=\"text-xl font-semibold\">{{ COMPANY_NAME }}</span>\n        </NuxtLink>\n        <p class=\"mt-5 text-muted-foreground\">\n          Design amazing digital experiences that create more happy in the world.\n        </p>\n      </div>\n      <template v-for=\"n in 2\" :key=\"n\">\n        <div>\n          <p class=\"mb-4 text-sm text-muted-foreground\">Product</p>\n          <ul class=\"flex flex-col gap-3\">\n            <li v-for=\"k in 6\" :key=\"k\">\n              <NuxtLink class=\"font-semibold hover:text-primary\" to=\"#\">Link item {{ k }}</NuxtLink>\n            </li>\n          </ul>\n        </div>\n      </template>\n      <div class=\"col-span-full lg:col-span-2\">\n        <form class=\"flex flex-col gap-3 lg:flex-row lg:items-end\">\n          <div class=\"w-full lg:w-[70%]\">\n            <UiVeeInput\n              label=\"Stay up to date\"\n              required\n              placeholder=\"Enter your email\"\n              aria-label=\"Enter your email\"\n            />\n          </div>\n          <div>\n            <UiButton class=\"w-full whitespace-nowrap lg:w-auto\" type=\"submit\">Subscribe</UiButton>\n          </div>\n        </form>\n      </div>\n    </section>\n\n    <section class=\"mt-12 flex flex-col justify-between gap-5 border-t pt-8 lg:mt-16 lg:flex-row\">\n      <p class=\"text-muted-foreground\">\n        &copy; {{ new Date().getFullYear() }} {{ COMPANY_NAME }}. All rights reserved.\n      </p>\n      <div class=\"flex items-center gap-2\">\n        <Icon name=\"logos:facebook\" class=\"h-7 w-7\" />\n        <Icon name=\"logos:twitter\" class=\"h-7 w-7\" />\n        <Icon name=\"lucide:instagram\" class=\"h-7 w-7\" />\n      </div>\n    </section>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup></script>\n","category":"Footer","path":"Footer/BlockFooter3.vue","components":["button","container","veeinput"]},{"name":"Footer 4","fileName":"BlockFooter4.vue","file":"<template>\n  <UiContainer as=\"footer\" class=\"py-16 lg:py-24\">\n    <div class=\"flex flex-col justify-between gap-5 border-b pb-10 lg:flex-row lg:pb-16\">\n      <div>\n        <p class=\"mb-3 text-lg font-semibold lg:text-xl\">Join our newsletter</p>\n        <p class=\"text-muted-foreground\">We'll send you a nice letter once per week. No spam.</p>\n      </div>\n      <form class=\"flex flex-col gap-3 lg:flex-row lg:items-end\">\n        <div class=\"w-full lg:w-[70%]\">\n          <UiVeeInput required placeholder=\"Enter your email\" aria-label=\"Enter your email\" />\n        </div>\n        <div>\n          <UiButton class=\"w-full whitespace-nowrap lg:w-auto\" type=\"submit\">Subscribe</UiButton>\n        </div>\n      </form>\n    </div>\n    <section class=\"mt-10 grid grid-cols-2 gap-8 lg:mt-16 lg:grid-cols-6\">\n      <template v-for=\"n in 6\" :key=\"n\">\n        <div>\n          <p class=\"mb-4 text-sm text-muted-foreground\">Product</p>\n          <ul class=\"flex flex-col gap-3\">\n            <li v-for=\"k in 6\" :key=\"k\">\n              <NuxtLink class=\"font-semibold hover:text-primary\" to=\"#\">Link item {{ k }}</NuxtLink>\n            </li>\n          </ul>\n        </div>\n      </template>\n    </section>\n\n    <section class=\"mt-12 flex flex-col justify-between gap-5 border-t pt-8 lg:mt-16 lg:flex-row\">\n      <NuxtLink to=\"#\" class=\"flex items-center gap-3\">\n        <img\n          src=\"/icon.png\"\n          fit=\"contain\"\n          alt=\"Company Logo\"\n          title=\"Company Logo\"\n          class=\"h-6 object-contain lg:h-8\"\n        />\n        <span class=\"text-lg font-semibold\">{{ COMPANY_NAME }}</span>\n      </NuxtLink>\n      <p class=\"text-muted-foreground\">\n        &copy; {{ new Date().getFullYear() }} {{ COMPANY_NAME }}. All rights reserved.\n      </p>\n    </section>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup></script>\n","category":"Footer","path":"Footer/BlockFooter4.vue","components":["button","container","veeinput"]},{"name":"Footer 5","fileName":"BlockFooter5.vue","file":"<template>\n  <UiContainer as=\"footer\" class=\"py-16 lg:py-24\">\n    <div class=\"flex flex-col justify-between gap-5 border-b pb-10 lg:flex-row lg:pb-16\">\n      <div>\n        <NuxtLink to=\"#\" class=\"flex items-center gap-3\">\n          <img\n            src=\"/icon.png\"\n            fit=\"contain\"\n            alt=\"Company Logo\"\n            title=\"Company Logo\"\n            class=\"h-6 object-contain lg:h-8\"\n          />\n          <span class=\"text-lg font-semibold\">{{ COMPANY_NAME }}</span>\n        </NuxtLink>\n        <ul class=\"mt-5 flex flex-wrap gap-5 lg:pl-2\">\n          <li v-for=\"k in ['Home', 'About us', 'Contact', 'Projects']\" :key=\"k\">\n            <NuxtLink class=\"hover:text-primary\" to=\"#\">{{ k }}</NuxtLink>\n          </li>\n        </ul>\n      </div>\n      <form class=\"flex flex-col gap-3 lg:flex-row lg:items-end\">\n        <div class=\"w-full lg:w-[70%]\">\n          <UiVeeInput required placeholder=\"Enter your email\" aria-label=\"Enter your email\" />\n        </div>\n        <div>\n          <UiButton class=\"w-full whitespace-nowrap lg:w-auto\" type=\"submit\">Subscribe</UiButton>\n        </div>\n      </form>\n    </div>\n    <section class=\"flex flex-col justify-between gap-5 pt-8 lg:flex-row\">\n      <p class=\"text-muted-foreground\">\n        &copy; {{ new Date().getFullYear() }} {{ COMPANY_NAME }}. All rights reserved.\n      </p>\n      <div class=\"flex items-center gap-2\">\n        <Icon name=\"logos:facebook\" class=\"h-7 w-7\" />\n        <Icon name=\"logos:twitter\" class=\"h-7 w-7\" />\n        <Icon name=\"lucide:instagram\" class=\"h-7 w-7\" />\n      </div>\n    </section>\n  </UiContainer>\n</template>\n","category":"Footer","path":"Footer/BlockFooter5.vue","components":["button","container","veeinput"]},{"name":"Footer 6","fileName":"BlockFooter6.vue","file":"<template>\n  <UiContainer as=\"footer\" class=\"pb-10 lg:pb-16\">\n    <UiContainer class=\"py-16 text-center lg:py-24\">\n      <img\n        src=\"/icon.png\"\n        fit=\"contain\"\n        alt=\"Company Logo\"\n        title=\"Company Logo\"\n        class=\"mx-auto mb-5 h-10 object-contain lg:h-14\"\n      />\n      <h2 class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:mb-6 lg:text-5xl\">\n        Let's get started on something great\n      </h2>\n\n      <p class=\"text-lg text-muted-foreground lg:text-xl\">\n        We are here to help you with your project\n      </p>\n\n      <div class=\"mt-5 flex w-full flex-col-reverse justify-center gap-3 md:w-auto md:flex-row\">\n        <UiButton size=\"lg\" variant=\"outline\">View Demo</UiButton>\n        <UiButton size=\"lg\">Get started</UiButton>\n      </div>\n    </UiContainer>\n    <section class=\"flex flex-col justify-between gap-5 border-t pt-8 lg:flex-row\">\n      <p class=\"text-muted-foreground\">\n        &copy; {{ new Date().getFullYear() }} {{ COMPANY_NAME }}. All rights reserved.\n      </p>\n      <div class=\"flex items-center gap-2\">\n        <Icon name=\"logos:facebook\" class=\"h-7 w-7\" />\n        <Icon name=\"logos:twitter\" class=\"h-7 w-7\" />\n        <Icon name=\"lucide:instagram\" class=\"h-7 w-7\" />\n      </div>\n    </section>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup></script>\n","category":"Footer","path":"Footer/BlockFooter6.vue","components":["button","container"]},{"name":"Footer 7","fileName":"BlockFooter7.vue","file":"<template>\n  <UiContainer\n    as=\"footer\"\n    class=\"flex flex-col items-center justify-between gap-7 py-12 lg:flex-row\"\n  >\n    <NuxtLink to=\"#\" class=\"flex items-center gap-3\">\n      <img\n        src=\"/icon.png\"\n        fit=\"contain\"\n        alt=\"Company Logo\"\n        title=\"Company Logo\"\n        class=\"h-10 object-contain lg:h-8\"\n      />\n      <span class=\"text-xl font-semibold lg:text-lg\">{{ COMPANY_NAME }}</span>\n    </NuxtLink>\n\n    <p class=\"text-muted-foreground\">\n      &copy; {{ new Date().getFullYear() }} {{ COMPANY_NAME }}. All rights reserved.\n    </p>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup></script>\n","category":"Footer","path":"Footer/BlockFooter7.vue","components":["container"]},{"name":"Footer 8","fileName":"BlockFooter8.vue","file":"<template>\n  <UiContainer\n    as=\"footer\"\n    class=\"flex flex-col items-center justify-between gap-7 py-12 lg:flex-row\"\n  >\n    <NuxtLink to=\"#\" class=\"flex items-center gap-3\">\n      <img\n        src=\"/icon.png\"\n        fit=\"contain\"\n        alt=\"Company Logo\"\n        title=\"Company Logo\"\n        class=\"h-10 object-contain lg:h-8\"\n      />\n      <span class=\"text-xl font-semibold lg:text-lg\">{{ COMPANY_NAME }}</span>\n    </NuxtLink>\n    <ul class=\"flex flex-wrap gap-5\">\n      <li v-for=\"k in ['Home', 'About us', 'Contact', 'Projects']\" :key=\"k\">\n        <NuxtLink class=\"hover:text-primary\" to=\"#\">{{ k }}</NuxtLink>\n      </li>\n    </ul>\n\n    <p class=\"text-muted-foreground\">&copy; {{ new Date().getFullYear() }} {{ COMPANY_NAME }}.</p>\n  </UiContainer>\n</template>\n","category":"Footer","path":"Footer/BlockFooter8.vue","components":["container"]},{"name":"Footer 9","fileName":"BlockFooter9.vue","file":"<template>\n  <footer class=\"border-t bg-muted/50\">\n    <UiContainer class=\"py-16 lg:py-24\">\n      <div class=\"grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-4\">\n        <!-- Company Info -->\n        <div class=\"lg:col-span-1\">\n          <NuxtLink to=\"#\" class=\"mb-5 flex items-center gap-3\">\n            <img\n              src=\"/icon.png\"\n              fit=\"contain\"\n              alt=\"Company Logo\"\n              title=\"Company Logo\"\n              class=\"h-8 object-contain\"\n            />\n            <span class=\"text-xl font-semibold\">{{ COMPANY_NAME }}</span>\n          </NuxtLink>\n          <p class=\"mb-5 text-muted-foreground\">\n            Making the world a better place through constructing elegant hierarchies.\n          </p>\n          <div class=\"flex items-center gap-4\">\n            <NuxtLink\n              to=\"#\"\n              class=\"flex h-10 w-10 items-center justify-center rounded-full bg-radial via-transparent to-black/40 dark:to-white/20\"\n            >\n              <Icon name=\"logos:facebook\" class=\"size-5\" />\n            </NuxtLink>\n            <NuxtLink\n              to=\"#\"\n              class=\"flex h-10 w-10 items-center justify-center rounded-full bg-radial via-transparent to-black/40 dark:to-white/20\"\n            >\n              <Icon name=\"logos:twitter\" class=\"size-5\" />\n            </NuxtLink>\n            <NuxtLink\n              to=\"#\"\n              class=\"flex h-10 w-10 items-center justify-center rounded-full bg-radial via-transparent to-black/40 dark:to-white/20\"\n            >\n              <Icon name=\"logos:linkedin-icon\" class=\"size-5\" />\n            </NuxtLink>\n            <NuxtLink\n              to=\"#\"\n              class=\"flex h-10 w-10 items-center justify-center rounded-full bg-radial via-transparent to-black/40 dark:to-white/20\"\n            >\n              <Icon name=\"ri:github-fill\" class=\"size-5\" />\n            </NuxtLink>\n          </div>\n        </div>\n\n        <!-- Solutions -->\n        <div>\n          <h3 class=\"mb-4 text-sm font-semibold tracking-wider uppercase\">Solutions</h3>\n          <ul class=\"space-y-3\">\n            <li v-for=\"item in ['Marketing', 'Analytics', 'Commerce', 'Insights']\" :key=\"item\">\n              <NuxtLink class=\"text-muted-foreground transition-colors hover:text-primary\" to=\"#\">\n                {{ item }}\n              </NuxtLink>\n            </li>\n          </ul>\n        </div>\n\n        <!-- Support -->\n        <div>\n          <h3 class=\"mb-4 text-sm font-semibold tracking-wider uppercase\">Support</h3>\n          <ul class=\"space-y-3\">\n            <li v-for=\"item in ['Pricing', 'Documentation', 'Guides', 'API Status']\" :key=\"item\">\n              <NuxtLink class=\"text-muted-foreground transition-colors hover:text-primary\" to=\"#\">\n                {{ item }}\n              </NuxtLink>\n            </li>\n          </ul>\n        </div>\n\n        <!-- Company -->\n        <div>\n          <h3 class=\"mb-4 text-sm font-semibold tracking-wider uppercase\">Company</h3>\n          <ul class=\"space-y-3\">\n            <li v-for=\"item in ['About', 'Blog', 'Jobs', 'Press']\" :key=\"item\">\n              <NuxtLink class=\"text-muted-foreground transition-colors hover:text-primary\" to=\"#\">\n                {{ item }}\n              </NuxtLink>\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      <div class=\"mt-12 border-t pt-8 lg:mt-16\">\n        <p class=\"text-center text-sm text-muted-foreground\">\n          &copy; {{ new Date().getFullYear() }} {{ COMPANY_NAME }}, Inc. All rights reserved.\n        </p>\n      </div>\n    </UiContainer>\n  </footer>\n</template>\n","category":"Footer","path":"Footer/BlockFooter9.vue","components":["container"]},{"name":"Forgot Password","fileName":"BlockForgotPassword.vue","file":"<template>\n  <div class=\"relative flex h-screen items-center justify-center\">\n    <div\n      class=\"absolute inset-0 z-1 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] mask-[radial-gradient(circle,transparent_25%,var(--color-border)_100%)] bg-size-[100px_100px]\"\n    />\n    <div class=\"relative z-2 w-full max-w-[340px] px-5\">\n      <div\n        class=\"mx-auto mb-6 flex size-14 items-center justify-center rounded-lg border bg-background\"\n      >\n        <Icon class=\"size-6\" name=\"lucide:key-round\" />\n      </div>\n\n      <div class=\"flex flex-col items-center text-center\">\n        <h1 class=\"text-2xl font-bold tracking-tight lg:text-3xl\">{{ title }}</h1>\n        <p class=\"mt-1 text-muted-foreground\">{{ description }}</p>\n      </div>\n\n      <form class=\"mt-10\" @submit=\"submit\">\n        <fieldset :disabled=\"isSubmitting\" class=\"grid gap-5\">\n          <UiVeeInput label=\"Email\" type=\"email\" name=\"email\" placeholder=\"john@example.com\" />\n          <UiButton class=\"w-full\" type=\"submit\" text=\"Send instructions\" />\n        </fieldset>\n      </form>\n      <p class=\"mt-8 text-center text-sm\">\n        <NuxtLink class=\"font-semibold text-primary underline-offset-2 hover:underline\" to=\"#\"\n          >Back to Log in</NuxtLink\n        >\n      </p>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  const title = \"Forgot Password\";\n  const description = \"No worries, we'll send you reset instructions.\";\n\n  useSeoMeta({ title, description });\n\n  const LoginSchema = object({\n    email: string().email().required().label(\"Email\"),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof LoginSchema>>({\n    validationSchema: LoginSchema,\n  });\n\n  const submit = handleSubmit(async (values) => {\n    console.log(values);\n    useSonner(\"Check your email\", {\n      description: \"We've sent you an email with instructions to reset your password.\",\n    });\n  });\n</script>\n","category":"ForgotPassword","path":"ForgotPassword/BlockForgotPassword.vue","components":["button","veeinput"]},{"name":"Forgot Password 2","fileName":"BlockForgotPassword2.vue","file":"<template>\n  <div class=\"relative flex min-h-screen items-center justify-center bg-muted/30 p-4\">\n    <UiCard class=\"w-full max-w-md shadow-none\">\n      <div class=\"p-6 lg:p-8\">\n        <div class=\"mb-6 flex justify-center\">\n          <div class=\"flex size-16 items-center justify-center rounded-full bg-primary/10\">\n            <Icon class=\"size-8 text-primary\" name=\"lucide:key-round\" />\n          </div>\n        </div>\n\n        <div class=\"mb-8 text-center\">\n          <h1 class=\"mb-2 text-2xl font-bold tracking-tight\">{{ title }}</h1>\n          <p class=\"text-sm text-muted-foreground\">{{ description }}</p>\n        </div>\n\n        <form @submit=\"submit\">\n          <fieldset :disabled=\"isSubmitting\" class=\"grid gap-5\">\n            <UiVeeInput\n              label=\"Email address\"\n              type=\"email\"\n              name=\"email\"\n              placeholder=\"john@example.com\"\n              hint=\"We'll send you a link to reset your password\"\n            />\n            <UiButton class=\"w-full\" size=\"lg\" type=\"submit\"> Send Reset Link </UiButton>\n          </fieldset>\n        </form>\n\n        <UiDivider class=\"my-6\" label=\"or\" />\n\n        <div class=\"text-center\">\n          <p class=\"text-sm text-muted-foreground\">\n            Remember your password?\n            <NuxtLink class=\"font-semibold text-primary underline-offset-2 hover:underline\" to=\"#\">\n              Sign in\n            </NuxtLink>\n          </p>\n        </div>\n      </div>\n    </UiCard>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  const title = \"Forgot your password?\";\n  const description = \"Enter your email and we'll send you a link to reset your password.\";\n\n  useSeoMeta({ title, description });\n\n  const ForgotPasswordSchema = object({\n    email: string().email().required().label(\"Email address\"),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof ForgotPasswordSchema>>({\n    validationSchema: ForgotPasswordSchema,\n  });\n\n  const submit = handleSubmit(async (values) => {\n    console.log(values);\n    useSonner.success(\"Email sent\", {\n      description: \"Check your inbox for password reset instructions.\",\n    });\n  });\n</script>\n","category":"ForgotPassword","path":"ForgotPassword/BlockForgotPassword2.vue","components":["button","card","divider","veeinput"]},{"name":"Forgot Password 3","fileName":"BlockForgotPassword3.vue","file":"<template>\n  <div class=\"grid min-h-screen lg:grid-cols-2\">\n    <!-- Left Side - Form -->\n    <div class=\"flex items-center justify-center p-8\">\n      <div class=\"w-full max-w-md\">\n        <div class=\"mb-8\">\n          <h1 class=\"mb-2 text-3xl font-bold tracking-tight\">{{ title }}</h1>\n          <p class=\"text-muted-foreground\">{{ description }}</p>\n        </div>\n\n        <form @submit=\"submit\">\n          <fieldset :disabled=\"isSubmitting\" class=\"grid gap-5\">\n            <UiVeeInput\n              label=\"Email address\"\n              type=\"email\"\n              name=\"email\"\n              placeholder=\"john@example.com\"\n            />\n\n            <UiButton class=\"w-full\" size=\"lg\" type=\"submit\">\n              <Icon class=\"mr-2\" name=\"lucide:send\" />\n              Send Reset Instructions\n            </UiButton>\n          </fieldset>\n        </form>\n\n        <div class=\"mt-8 text-center\">\n          <p class=\"text-sm text-muted-foreground\">\n            Remember your password?\n            <NuxtLink class=\"font-semibold text-primary underline-offset-2 hover:underline\" to=\"#\">\n              Sign in\n            </NuxtLink>\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <!-- Right Side - Visual -->\n    <div class=\"hidden items-center justify-center bg-muted/50 p-8 lg:flex\">\n      <div class=\"max-w-md text-center\">\n        <div class=\"mb-6 flex justify-center\">\n          <div class=\"flex size-24 items-center justify-center rounded-2xl bg-primary/10\">\n            <Icon class=\"size-12 text-primary\" name=\"lucide:lock\" />\n          </div>\n        </div>\n        <h2 class=\"mb-4 text-2xl font-bold\">Secure Password Recovery</h2>\n        <p class=\"text-muted-foreground\">\n          We'll send you a secure link to reset your password. The link will expire in 24 hours for\n          your security.\n        </p>\n\n        <div class=\"mt-8 grid gap-4\">\n          <div class=\"flex items-start gap-3 text-left\">\n            <div class=\"flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/10\">\n              <Icon class=\"size-5 text-primary\" name=\"lucide:shield-check\" />\n            </div>\n            <div>\n              <p class=\"font-medium\">Secure & Encrypted</p>\n              <p class=\"text-sm text-muted-foreground\">\n                All reset links are encrypted and time-limited\n              </p>\n            </div>\n          </div>\n\n          <div class=\"flex items-start gap-3 text-left\">\n            <div class=\"flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/10\">\n              <Icon class=\"size-5 text-primary\" name=\"lucide:clock\" />\n            </div>\n            <div>\n              <p class=\"font-medium\">Quick Process</p>\n              <p class=\"text-sm text-muted-foreground\">\n                Reset your password in less than 2 minutes\n              </p>\n            </div>\n          </div>\n\n          <div class=\"flex items-start gap-3 text-left\">\n            <div class=\"flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/10\">\n              <Icon class=\"size-5 text-primary\" name=\"lucide:mail-check\" />\n            </div>\n            <div>\n              <p class=\"font-medium\">Email Confirmation</p>\n              <p class=\"text-sm text-muted-foreground\">Check your inbox for the reset link</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  const title = \"Forgot your password?\";\n  const description = \"No worries, we'll send you reset instructions.\";\n\n  useSeoMeta({ title, description });\n\n  const ForgotPasswordSchema = object({\n    email: string().email().required().label(\"Email address\"),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof ForgotPasswordSchema>>({\n    validationSchema: ForgotPasswordSchema,\n  });\n\n  const submit = handleSubmit(async (values) => {\n    console.log(values);\n    useSonner.success(\"Email sent\", {\n      description: \"Check your inbox for password reset instructions.\",\n    });\n  });\n</script>\n","category":"ForgotPassword","path":"ForgotPassword/BlockForgotPassword3.vue","components":["button","veeinput"]},{"name":"Forgot Password Success","fileName":"BlockForgotPasswordSuccess.vue","file":"<template>\n  <div class=\"relative flex h-screen items-center justify-center\">\n    <div\n      class=\"absolute inset-0 z-1 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] mask-[radial-gradient(circle_at_center,white,transparent_90%)] bg-size-[100px_100px]\"\n    />\n    <div class=\"relative z-2 w-full max-w-[340px] px-5\">\n      <div\n        class=\"mx-auto mb-6 flex size-14 items-center justify-center rounded-lg border bg-background\"\n      >\n        <Icon class=\"size-6\" name=\"lucide:mail\" />\n      </div>\n\n      <div class=\"flex flex-col items-center text-center\">\n        <h1 class=\"text-2xl font-bold tracking-tight lg:text-3xl\">{{ title }}</h1>\n        <p class=\"mt-1 text-muted-foreground\">{{ description }}</p>\n      </div>\n\n      <div class=\"mt-10\">\n        <UiButton to=\"#\" class=\"w-full\" type=\"submit\">\n          <Icon class=\"size-5\" name=\"lucide:arrow-left\" />\n          <span>Resend instructions</span>\n        </UiButton>\n      </div>\n      <p class=\"mt-8 text-center text-sm\">\n        <NuxtLink class=\"font-semibold text-primary underline-offset-2 hover:underline\" to=\"#\"\n          >Back to Log in</NuxtLink\n        >\n      </p>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  const title = \"Check your inbox\";\n  const description = \"We've sent you an email with instructions to reset your password.\";\n\n  useSeoMeta({ title, description });\n</script>\n","category":"ForgotPassword","path":"ForgotPassword/BlockForgotPasswordSuccess.vue","components":["button"]},{"name":"Two Step Verification","fileName":"BlockTwoStepVerification.vue","file":"<template>\n  <div class=\"relative flex min-h-screen items-center justify-center p-4\">\n    <!-- Grid Background -->\n    <div\n      class=\"absolute inset-0 z-1 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] mask-[radial-gradient(circle_at_center,white,transparent_90%)] bg-size-[100px_100px]\"\n    />\n\n    <div class=\"relative z-2 w-full max-w-md\">\n      <div class=\"mb-8 text-center\">\n        <div class=\"mb-4 flex justify-center\">\n          <div class=\"flex size-16 items-center justify-center rounded-2xl bg-primary/10\">\n            <Icon class=\"size-8 text-primary\" name=\"lucide:smartphone\" />\n          </div>\n        </div>\n        <h1 class=\"mb-2 text-3xl font-bold tracking-tight\">{{ title }}</h1>\n        <p class=\"text-sm text-muted-foreground\">{{ description }}</p>\n      </div>\n\n      <form class=\"space-y-6\" @submit=\"submit\">\n        <fieldset :disabled=\"isSubmitting\" class=\"grid gap-6\">\n          <UiCard>\n            <UiCardContent>\n              <div class=\"mb-4 flex items-center gap-3\">\n                <div class=\"flex size-10 items-center justify-center rounded-lg bg-primary/10\">\n                  <Icon class=\"size-5 text-primary\" name=\"lucide:mail\" />\n                </div>\n                <div class=\"flex-1\">\n                  <p class=\"text-sm font-medium\">Email Verification</p>\n                  <p class=\"text-xs text-muted-foreground\">We'll send you a 6-digit code</p>\n                </div>\n                <label\n                  for=\"emailMethod\"\n                  class=\"cursor-pointer\"\n                  title=\"Click to send verification code via Email\"\n                >\n                  <Icon\n                    :class=\"[\n                      'size-5 transition-all',\n                      selectedMethod === 'email' ? 'text-primary' : 'text-muted-foreground/40',\n                    ]\"\n                    name=\"lucide:circle-check-big\"\n                  />\n                  <span class=\"sr-only\"> Select Email verification method </span>\n                </label>\n              </div>\n              <input\n                id=\"emailMethod\"\n                v-model=\"selectedMethod\"\n                type=\"radio\"\n                name=\"method\"\n                value=\"email\"\n                class=\"sr-only\"\n                hidden\n              />\n              <AnimatePresence>\n                <Motion\n                  v-if=\"selectedMethod === 'email'\"\n                  :initial=\"{ opacity: 0, height: 0 }\"\n                  :animate=\"{ opacity: 1, height: 'auto' }\"\n                  :exit=\"{ opacity: 0, height: 0 }\"\n                >\n                  <UiVeeInput\n                    label=\"Email address\"\n                    type=\"email\"\n                    name=\"email\"\n                    placeholder=\"john@example.com\"\n                  />\n                </Motion>\n              </AnimatePresence>\n            </UiCardContent>\n          </UiCard>\n\n          <UiCard>\n            <UiCardContent>\n              <div class=\"mb-4 flex items-center gap-3\">\n                <div class=\"flex size-10 items-center justify-center rounded-lg bg-primary/10\">\n                  <Icon class=\"size-5 text-primary\" name=\"lucide:message-square\" />\n                </div>\n                <div class=\"flex-1\">\n                  <p class=\"text-sm font-medium\">SMS Verification</p>\n                  <p class=\"text-xs text-muted-foreground\">We'll text you a 6-digit code</p>\n                </div>\n                <label\n                  for=\"smsMethod\"\n                  class=\"cursor-pointer\"\n                  title=\"Click to send verification code via SMS\"\n                >\n                  <Icon\n                    :class=\"[\n                      'size-5 transition-all',\n                      selectedMethod === 'sms' ? 'text-primary' : 'text-muted-foreground/40',\n                    ]\"\n                    name=\"lucide:circle-check-big\"\n                  />\n                  <span class=\"sr-only\"> Select SMS verification method </span>\n                </label>\n              </div>\n              <input\n                id=\"smsMethod\"\n                v-model=\"selectedMethod\"\n                type=\"radio\"\n                name=\"method\"\n                value=\"sms\"\n                class=\"sr-only\"\n                hidden\n              />\n              <AnimatePresence>\n                <Motion\n                  v-if=\"selectedMethod === 'sms'\"\n                  :initial=\"{ opacity: 0, height: 0 }\"\n                  :animate=\"{ opacity: 1, height: 'auto' }\"\n                  :exit=\"{ opacity: 0, height: 0 }\"\n                >\n                  <UiVeeInput\n                    label=\"Phone number\"\n                    type=\"tel\"\n                    name=\"phone\"\n                    placeholder=\"+1 (555) 000-0000\"\n                  />\n                </Motion>\n              </AnimatePresence>\n            </UiCardContent>\n          </UiCard>\n\n          <UiButton class=\"w-full\" size=\"lg\" type=\"submit\">\n            Continue\n            <Icon class=\"ml-2\" name=\"lucide:arrow-right\" />\n          </UiButton>\n        </fieldset>\n      </form>\n\n      <div class=\"mt-6 text-center\">\n        <NuxtLink\n          class=\"inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground\"\n          to=\"#\"\n        >\n          <Icon name=\"lucide:arrow-left\" />\n          Back to Log in\n        </NuxtLink>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  const title = \"Verify your identity\";\n  const description = \"Choose how you want to receive your verification code.\";\n\n  useSeoMeta({ title, description });\n\n  const selectedMethod = ref(\"email\");\n\n  const TwoStepSchema = object({\n    method: string().required().label(\"Verification method\"),\n    email: string().when(\"method\", {\n      is: \"email\",\n      then: (schema) => schema.email().required().label(\"Email address\"),\n      otherwise: (schema) => schema.notRequired(),\n    }),\n    phone: string().when(\"method\", {\n      is: \"sms\",\n      then: (schema) => schema.required().label(\"Phone number\"),\n      otherwise: (schema) => schema.notRequired(),\n    }),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof TwoStepSchema>>({\n    validationSchema: TwoStepSchema,\n    initialValues: {\n      method: \"email\",\n    },\n  });\n\n  const submit = handleSubmit(async (values) => {\n    console.log(values);\n    useSonner.success(\"Code sent\", {\n      description: `Verification code sent to your ${values.method === \"email\" ? \"email\" : \"phone\"}.`,\n    });\n  });\n</script>\n","category":"ForgotPassword","path":"ForgotPassword/BlockTwoStepVerification.vue","components":["button","card","cardcontent","veeinput"]},{"name":"App Header 1","fileName":"BlockAppHeader1.vue","file":"<template>\n  <div>\n    <slot name=\"image\">\n      <img\n        v-if=\"props.image\"\n        :src=\"props.image\"\n        class=\"h-[180px] w-full object-cover md:h-[250px]\"\n      />\n    </slot>\n    <UiContainer class=\"p-4 md:px-8 md:py-6\">\n      <div class=\"hidden md:block\">\n        <slot name=\"crumbs\">\n          <UiBreadcrumbs v-if=\"props.crumbs\" :items=\"props.crumbs\" class=\"mb-5\" />\n        </slot>\n      </div>\n      <slot name=\"back-link\">\n        <NuxtLink\n          class=\"mb-5 flex items-center gap-3 text-sm underline-offset-2 hover:underline md:hidden\"\n          to=\"#\"\n          ><Icon name=\"lucide:arrow-left\" class=\"size-4\" /> Back</NuxtLink\n        >\n      </slot>\n      <div class=\"flex flex-col gap-5 md:flex-row md:items-center md:justify-between\">\n        <div class=\"flex items-center gap-5\">\n          <slot name=\"avatar\">\n            <UiAvatar v-if=\"props.avatar\" :src=\"props.avatar\" class=\"size-8 md:size-10\" />\n          </slot>\n          <div class=\"flex flex-col gap-1\">\n            <slot name=\"title\">\n              <h1\n                v-if=\"props.title\"\n                class=\"leading-none font-bold lg:text-lg\"\n                v-html=\"props.title\"\n              />\n            </slot>\n            <slot name=\"description\">\n              <p\n                v-if=\"props.description\"\n                class=\"text-sm leading-none text-muted-foreground\"\n                v-html=\"props.description\"\n              />\n            </slot>\n          </div>\n        </div>\n\n        <div class=\"grid grid-cols-2 gap-3 md:flex md:flex-wrap md:items-center\">\n          <slot>\n            <UiButton size=\"sm\" variant=\"outline\">Download</UiButton>\n            <UiButton size=\"sm\">Create new</UiButton>\n          </slot>\n        </div>\n      </div>\n      <UiDivider class=\"my-8\" />\n    </UiContainer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import type { BreadcrumbItem } from \"@/components/Ui/Breadcrumbs.vue\";\n\n  const props = withDefaults(\n    defineProps<{\n      title?: string;\n      description?: string;\n      crumbs?: BreadcrumbItem[];\n      avatar?: string;\n      image?: string;\n    }>(),\n    {\n      image:\n        \"https://images.unsplash.com/photo-1580610447943-1bfbef5efe07?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n      title: \"John Doe\",\n      description: \"alamage@gojujano.va\",\n      crumbs: () =>\n        [\n          {\n            icon: \"lucide:home\",\n          },\n          {\n            label: \"Settings\",\n            link: \"#\",\n          },\n          {\n            label: \"Profile\",\n            link: \"#\",\n          },\n          {\n            label: \"John Doe\",\n            link: \"#\",\n          },\n        ] as BreadcrumbItem[],\n      avatar: \"https://randomuser.me/api/portraits/med/men/2.jpg\",\n    }\n  );\n</script>\n","category":"Header","path":"App/Header/BlockAppHeader1.vue","components":["avatar","breadcrumbs","button","container","divider"]},{"name":"App Header 10","fileName":"BlockAppHeader10.vue","file":"<template>\n  <div>\n    <div class=\"border-b bg-linear-to-r from-primary/10 via-primary/5 to-background\">\n      <UiContainer class=\"px-4 py-8 md:px-6\">\n        <div class=\"flex flex-col gap-6 md:flex-row md:items-end md:justify-between\">\n          <div class=\"flex items-start gap-4\">\n            <slot name=\"icon\">\n              <div\n                v-if=\"props.icon\"\n                class=\"flex size-16 items-center justify-center rounded-xl border shadow-sm\"\n              >\n                <Icon :name=\"props.icon\" class=\"size-8 text-primary\" />\n              </div>\n            </slot>\n            <div class=\"flex flex-col gap-0.5\">\n              <slot name=\"title\">\n                <h1 v-if=\"props.title\" class=\"text-lg font-bold\" v-html=\"props.title\" />\n              </slot>\n              <slot name=\"description\">\n                <p\n                  v-if=\"props.description\"\n                  class=\"text-[15px] text-muted-foreground\"\n                  v-html=\"props.description\"\n                />\n              </slot>\n              <slot name=\"chips\">\n                <div class=\"mt-3 flex flex-wrap gap-2\">\n                  <template v-for=\"chip in props.chips\" :key=\"chip\">\n                    <UiBadge variant=\"outline\">{{ chip }}</UiBadge>\n                  </template>\n                </div>\n              </slot>\n            </div>\n          </div>\n          <div class=\"flex flex-wrap gap-2\">\n            <slot>\n              <UiButton variant=\"outline\" size=\"sm\">\n                <Icon name=\"lucide:bookmark\" class=\"size-4\" />\n              </UiButton>\n              <UiButton variant=\"outline\" size=\"sm\">\n                <Icon name=\"lucide:external-link\" class=\"size-4\" />\n                Visit site\n              </UiButton>\n              <UiButton size=\"sm\">\n                <Icon name=\"lucide:settings\" class=\"size-4\" />\n                Configure\n              </UiButton>\n            </slot>\n          </div>\n        </div>\n      </UiContainer>\n    </div>\n    <UiContainer class=\"mt-4 px-4 md:px-6\">\n      <slot name=\"tabs\">\n        <UiTabs :default-value=\"props.tabs[0]\">\n          <UiScrollArea\n            type=\"auto\"\n            orientation=\"horizontal\"\n            class=\"**:data-[slot=scroll-area-scrollbar]:h-1.5\"\n          >\n            <UiTabsList\n              :pill=\"false\"\n              class=\"relative flex w-full justify-start gap-1 rounded-none border-b\"\n            >\n              <UiTabsTrigger v-for=\"tab in props.tabs\" :key=\"tab\" :pill=\"false\" :value=\"tab\">\n                {{ tab }}\n              </UiTabsTrigger>\n              <UiTabsIndicator />\n            </UiTabsList>\n          </UiScrollArea>\n        </UiTabs>\n      </slot>\n    </UiContainer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  const props = withDefaults(\n    defineProps<{\n      title?: string;\n      description?: string;\n      icon?: string;\n      chips?: string[];\n      tabs?: string[];\n    }>(),\n    {\n      title: \"E-Commerce Platform\",\n      description: \"Production environment • Version 2.4.1 • Deployed 3 days ago\",\n      icon: \"lucide:store\",\n      chips: () => [\"Next.js\", \"PostgreSQL\", \"Vercel\"],\n      tabs: () => [\"Overview\", \"Deployment\", \"Monitoring\", \"Settings\", \"Logs\"],\n    }\n  );\n</script>\n","category":"Header","path":"App/Header/BlockAppHeader10.vue","components":["badge","button","container","scrollarea","tabs","tabsindicator","tabslist","tabstrigger"]},{"name":"App Header 2","fileName":"BlockAppHeader2.vue","file":"<template>\n  <UiContainer\n    class=\"flex flex-col flex-wrap justify-between gap-5 px-4 py-5 md:flex-row md:items-center md:px-6\"\n  >\n    <div class=\"flex items-center gap-5\">\n      <slot name=\"avatar\">\n        <UiAvatar v-if=\"props.avatar\" :src=\"props.avatar\" class=\"size-8 md:size-10\" />\n      </slot>\n      <div class=\"flex flex-col gap-1 *:leading-none\">\n        <slot name=\"title\">\n          <p v-if=\"props.title\" class=\"font-semibold\" v-html=\"props.title\" />\n        </slot>\n        <slot name=\"description\">\n          <p\n            v-if=\"props.description\"\n            class=\"text-sm text-muted-foreground\"\n            v-html=\"props.description\"\n          />\n        </slot>\n      </div>\n    </div>\n    <div class=\"grid grid-cols-2 gap-3 md:flex md:flex-wrap md:items-center\">\n      <slot>\n        <UiButton variant=\"outline\" size=\"sm\">Download</UiButton>\n        <UiButton size=\"sm\">Add new</UiButton>\n      </slot>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const props = withDefaults(\n    defineProps<{\n      title?: string;\n      description?: string;\n      avatar?: string;\n    }>(),\n    {\n      title: \"Team Members\",\n      description: \"Manage your team members here\",\n      avatar: \"https://randomuser.me/api/portraits/med/men/2.jpg\",\n    }\n  );\n</script>\n","category":"Header","path":"App/Header/BlockAppHeader2.vue","components":["avatar","button","container"]},{"name":"App Header 3","fileName":"BlockAppHeader3.vue","file":"<template>\n  <UiContainer>\n    <div\n      class=\"flex flex-col flex-wrap justify-between gap-5 px-4 py-5 md:flex-row md:items-center md:px-6\"\n    >\n      <div class=\"flex items-center gap-5\">\n        <div class=\"flex flex-col gap-1 *:leading-none\">\n          <slot name=\"title\">\n            <p v-if=\"props.title\" class=\"font-semibold\" v-html=\"props.title\" />\n          </slot>\n          <slot name=\"description\">\n            <p\n              v-if=\"props.description\"\n              class=\"text-sm text-muted-foreground\"\n              v-html=\"props.description\"\n            />\n          </slot>\n        </div>\n      </div>\n      <div class=\"grid grid-cols-2 gap-3 md:flex md:flex-wrap md:items-center\">\n        <slot>\n          <UiButton variant=\"outline\" size=\"sm\">Download</UiButton>\n          <UiButton size=\"sm\">Add new</UiButton>\n        </slot>\n      </div>\n    </div>\n    <UiDivider class=\"my-5\" />\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const props = withDefaults(\n    defineProps<{\n      title?: string;\n      description?: string;\n    }>(),\n    {\n      title: \"Team Members\",\n      description: \"Manage your team members here\",\n    }\n  );\n</script>\n","category":"Header","path":"App/Header/BlockAppHeader3.vue","components":["button","container","divider"]},{"name":"App Header 4","fileName":"BlockAppHeader4.vue","file":"<template>\n  <UiContainer class=\"px-4 py-5 md:px-6\">\n    <div class=\"flex flex-col gap-5\">\n      <div class=\"flex flex-wrap items-start justify-between gap-3\">\n        <div class=\"flex items-start gap-3\">\n          <slot name=\"icon\">\n            <div\n              v-if=\"props.icon\"\n              class=\"flex size-14 items-center justify-center rounded-lg bg-primary/10 text-primary\"\n            >\n              <Icon :name=\"props.icon\" class=\"size-6\" />\n            </div>\n          </slot>\n          <div class=\"flex flex-col gap-1\">\n            <slot name=\"title\">\n              <h1 v-if=\"props.title\" class=\"text-lg font-bold\" v-html=\"props.title\" />\n            </slot>\n            <slot name=\"badge\">\n              <UiBadge v-if=\"props.badge\" variant=\"outline\" class=\"w-fit\">\n                {{ props.badge }}\n              </UiBadge>\n            </slot>\n          </div>\n        </div>\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <slot>\n            <UiButton variant=\"outline\" size=\"sm\">\n              <Icon name=\"lucide:share-2\" class=\"size-4\" />\n              Share\n            </UiButton>\n            <UiButton variant=\"outline\" size=\"sm\">\n              <Icon name=\"lucide:settings\" class=\"size-4\" />\n              Settings\n            </UiButton>\n            <UiButton size=\"sm\">\n              <Icon name=\"lucide:plus\" class=\"size-4\" />\n              Create\n            </UiButton>\n          </slot>\n        </div>\n      </div>\n      <slot name=\"description\">\n        <p\n          v-if=\"props.description\"\n          class=\"text-sm text-muted-foreground\"\n          v-html=\"props.description\"\n        />\n      </slot>\n    </div>\n    <UiDivider class=\"my-5\" />\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const props = withDefaults(\n    defineProps<{\n      title?: string;\n      description?: string;\n      icon?: string;\n      badge?: string;\n    }>(),\n    {\n      title: \"Projects Dashboard\",\n      description:\n        \"Monitor and manage all your projects from one central location. Track progress, assign tasks, and collaborate with your team.\",\n      icon: \"lucide:layout-dashboard\",\n      badge: \"12 Active\",\n    }\n  );\n</script>\n","category":"Header","path":"App/Header/BlockAppHeader4.vue","components":["badge","button","container","divider"]},{"name":"App Header 5","fileName":"BlockAppHeader5.vue","file":"<template>\n  <UiContainer class=\"px-4 py-5 md:px-6\">\n    <div class=\"flex flex-col gap-5\">\n      <div class=\"flex flex-col gap-3\">\n        <div class=\"flex items-center gap-2\">\n          <slot name=\"crumbs\">\n            <UiBreadcrumbs v-if=\"props.crumbs\" :items=\"props.crumbs\" />\n          </slot>\n        </div>\n        <div class=\"flex w-full flex-col justify-between gap-3 md:flex-row md:items-start\">\n          <div class=\"flex flex-col gap-2\">\n            <slot name=\"title\">\n              <h1 v-if=\"props.title\" class=\"text-2xl font-bold\" v-html=\"props.title\" />\n            </slot>\n            <slot name=\"description\">\n              <p\n                v-if=\"props.description\"\n                class=\"text-sm text-muted-foreground\"\n                v-html=\"props.description\"\n              />\n            </slot>\n          </div>\n          <div class=\"flex flex-wrap gap-2\">\n            <slot>\n              <UiButton variant=\"outline\" size=\"sm\">\n                <Icon name=\"lucide:download\" class=\"size-4\" />\n                Export\n              </UiButton>\n              <UiDropdownMenu>\n                <UiDropdownMenuTrigger as-child>\n                  <UiButton variant=\"outline\" size=\"sm\">\n                    <Icon name=\"lucide:more-horizontal\" class=\"size-4\" />\n                  </UiButton>\n                </UiDropdownMenuTrigger>\n                <UiDropdownMenuContent align=\"end\">\n                  <UiDropdownMenuItem icon=\"lucide:pen\" title=\"Edit\" />\n                  <UiDropdownMenuItem icon=\"lucide:copy\" title=\"Duplicate\" />\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem\n                    class=\"text-destructive\"\n                    variant=\"destructive\"\n                    title=\"Delete\"\n                    icon=\"lucide:trash-2\"\n                  />\n                </UiDropdownMenuContent>\n              </UiDropdownMenu>\n            </slot>\n          </div>\n        </div>\n\n        <slot name=\"tabs\">\n          <UiTabs :default-value=\"props.tabs[0]\">\n            <UiScrollArea orientation=\"horizontal\">\n              <UiTabsList :pill=\"false\" class=\"relative flex gap-1\">\n                <UiTabsTrigger v-for=\"tab in props.tabs\" :key=\"tab\" :pill=\"false\" :value=\"tab\">\n                  {{ tab }}\n                </UiTabsTrigger>\n                <UiTabsIndicator />\n              </UiTabsList>\n            </UiScrollArea>\n          </UiTabs>\n        </slot>\n      </div>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  import type { BreadcrumbItem } from \"@/components/Ui/Breadcrumbs.vue\";\n\n  const props = withDefaults(\n    defineProps<{\n      title?: string;\n      description?: string;\n      crumbs?: BreadcrumbItem[];\n      tabs?: string[];\n    }>(),\n    {\n      title: \"Analytics Dashboard\",\n      description: \"View detailed analytics and insights for your application\",\n      crumbs: () =>\n        [\n          {\n            icon: \"lucide:home\",\n          },\n          {\n            label: \"Dashboards\",\n            link: \"#\",\n          },\n          {\n            label: \"Analytics\",\n            link: \"#\",\n          },\n        ] as BreadcrumbItem[],\n      tabs: () => [\"Overview\", \"Reports\", \"Insights\", \"Settings\", \"Activity\"],\n    }\n  );\n</script>\n","category":"Header","path":"App/Header/BlockAppHeader5.vue","components":["breadcrumbs","button","container","dropdownmenu","dropdownmenucontent","dropdownmenuitem","dropdownmenuseparator","dropdownmenutrigger","scrollarea","tabs","tabsindicator","tabslist","tabstrigger"]},{"name":"App Header 6","fileName":"BlockAppHeader6.vue","file":"<template>\n  <UiContainer class=\"px-4 py-5 md:px-6\">\n    <div class=\"flex flex-col gap-5\">\n      <div class=\"flex flex-col gap-5 md:flex-row md:items-center md:justify-between\">\n        <div class=\"flex items-center gap-4\">\n          <slot name=\"avatar\">\n            <UiAvatar v-if=\"props.avatar\" :src=\"props.avatar\" size=\"lg\" />\n          </slot>\n          <div class=\"flex flex-col gap-2\">\n            <slot name=\"title\">\n              <h1 v-if=\"props.title\" class=\"text-xl leading-none font-bold\" v-html=\"props.title\" />\n            </slot>\n            <slot name=\"stats\">\n              <div class=\"flex flex-wrap items-center gap-3 text-xs text-muted-foreground\">\n                <div class=\"flex items-center gap-1.5\">\n                  <Icon name=\"lucide:calendar\" class=\"size-3.5\" />\n                  <span>{{ props.joined }}</span>\n                </div>\n                <UiSeparator orientation=\"vertical\" class=\"h-3\" />\n                <div class=\"flex items-center gap-1.5\">\n                  <Icon name=\"lucide:mail\" class=\"size-3.5\" />\n                  <span>{{ props.email }}</span>\n                </div>\n                <UiSeparator orientation=\"vertical\" class=\"h-3\" />\n                <div class=\"flex items-center gap-1.5\">\n                  <Icon name=\"lucide:map-pin\" class=\"size-3.5\" />\n                  <span>{{ props.location }}</span>\n                </div>\n              </div>\n            </slot>\n          </div>\n        </div>\n        <div class=\"flex flex-wrap gap-2\">\n          <slot>\n            <UiButton variant=\"outline\" size=\"sm\" class=\"w-full sm:w-auto\">\n              <Icon name=\"lucide:mail\" class=\"size-4\" />\n              Message\n            </UiButton>\n            <UiButton size=\"sm\" class=\"w-full sm:w-auto\">\n              <Icon name=\"lucide:user-plus\" class=\"size-4\" />\n              Follow\n            </UiButton>\n          </slot>\n        </div>\n      </div>\n      <slot name=\"tabs\">\n        <UiTabs :default-value=\"props.tabs[1]\">\n          <TabsList class=\"flex gap-1 border-b\">\n            <TabsTrigger\n              v-for=\"tab in props.tabs\"\n              :key=\"tab\"\n              :value=\"tab\"\n              class=\"rounded-md rounded-b-none px-2 py-1.5 text-sm font-medium hover:bg-muted/50 data-[state=active]:bg-muted\"\n              size=\"sm\"\n            >\n              {{ tab }}\n            </TabsTrigger>\n          </TabsList>\n        </UiTabs>\n      </slot>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const props = withDefaults(\n    defineProps<{\n      title?: string;\n      avatar?: string;\n      joined?: string;\n      email?: string;\n      location?: string;\n      tabs?: string[];\n    }>(),\n    {\n      title: \"Sarah Johnson\",\n      avatar: \"https://randomuser.me/api/portraits/med/women/32.jpg\",\n      joined: \"Joined Mar 2024\",\n      email: \"sarah.j@company.com\",\n      location: \"San Francisco, CA\",\n      tabs: () => [\"Activity\", \"Profile\", \"Projects\", \"Settings\"],\n    }\n  );\n</script>\n","category":"Header","path":"App/Header/BlockAppHeader6.vue","components":["avatar","button","container","separator","tabs"]},{"name":"App Header 7","fileName":"BlockAppHeader7.vue","file":"<template>\n  <UiContainer class=\"px-4 py-5 md:px-6\">\n    <div class=\"flex flex-col gap-5\">\n      <div class=\"flex flex-wrap items-start justify-between gap-4\">\n        <div class=\"flex flex-col gap-3\">\n          <div class=\"flex items-center gap-2\">\n            <slot name=\"title\">\n              <h1 v-if=\"props.title\" class=\"text-2xl font-bold\" v-html=\"props.title\" />\n            </slot>\n            <slot name=\"status\">\n              <UiBadge v-if=\"props.status\" :variant=\"props.statusVariant\">\n                <div class=\"size-2 rounded-full bg-primary-foreground\" />\n                {{ props.status }}\n              </UiBadge>\n            </slot>\n          </div>\n          <slot name=\"description\">\n            <p\n              v-if=\"props.description\"\n              class=\"text-sm text-muted-foreground\"\n              v-html=\"props.description\"\n            />\n          </slot>\n          <slot name=\"meta\">\n            <div class=\"flex flex-wrap items-center gap-3 text-xs\">\n              <div class=\"flex items-center gap-1.5\">\n                <UiAvatar :src=\"props.ownerAvatar\" size=\"xs\" />\n                <span class=\"text-muted-foreground\">{{ props.owner }}</span>\n              </div>\n              <UiSeparator orientation=\"vertical\" class=\"h-3\" />\n              <div class=\"flex items-center gap-1.5 text-muted-foreground\">\n                <Icon name=\"lucide:users\" class=\"size-3.5\" />\n                <span>{{ props.members }} members</span>\n              </div>\n              <UiSeparator orientation=\"vertical\" class=\"h-3\" />\n              <div class=\"flex items-center gap-1.5 text-muted-foreground\">\n                <Icon name=\"lucide:calendar\" class=\"size-3.5\" />\n                <span>Due {{ props.dueDate }}</span>\n              </div>\n            </div>\n          </slot>\n        </div>\n        <div class=\"flex flex-wrap gap-2\">\n          <slot>\n            <UiButton variant=\"outline\" size=\"sm\">\n              <Icon name=\"lucide:star\" class=\"size-4\" />\n            </UiButton>\n            <UiButton variant=\"outline\" size=\"sm\">\n              <Icon name=\"lucide:share-2\" class=\"size-4\" />\n              Share\n            </UiButton>\n            <UiButton size=\"sm\">\n              <Icon name=\"lucide:settings\" class=\"size-4\" />\n              Manage\n            </UiButton>\n          </slot>\n        </div>\n      </div>\n      <UiDivider />\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const props = withDefaults(\n    defineProps<{\n      title?: string;\n      description?: string;\n      status?: string;\n      statusVariant?: \"default\" | \"secondary\" | \"destructive\" | \"success\" | \"outline\";\n      owner?: string;\n      ownerAvatar?: string;\n      members?: number;\n      dueDate?: string;\n    }>(),\n    {\n      title: \"Website Redesign Project\",\n      description:\n        \"Complete overhaul of the company website with modern design principles and improved user experience.\",\n      status: \"In Progress\",\n      statusVariant: \"default\",\n      owner: \"John Smith\",\n      ownerAvatar: \"https://randomuser.me/api/portraits/med/men/45.jpg\",\n      members: 8,\n      dueDate: \"Dec 15, 2027\",\n    }\n  );\n</script>\n","category":"Header","path":"App/Header/BlockAppHeader7.vue","components":["avatar","badge","button","container","divider","separator"]},{"name":"App Header 8","fileName":"BlockAppHeader8.vue","file":"<template>\n  <div class=\"border-b bg-muted/30\">\n    <UiContainer class=\"px-4 py-5 md:px-6\">\n      <div class=\"flex flex-col gap-5 md:flex-row md:items-center md:justify-between\">\n        <div class=\"flex items-start gap-4\">\n          <slot name=\"back\">\n            <UiButton variant=\"ghost\" size=\"sm\" title=\"Go back\">\n              <Icon name=\"lucide:arrow-left\" class=\"size-4\" />\n              <span class=\"sr-only\">Back</span>\n            </UiButton>\n          </slot>\n          <div class=\"flex flex-col gap-1\">\n            <slot name=\"title\">\n              <h1 v-if=\"props.title\" class=\"text-lg leading-none font-bold\" v-html=\"props.title\" />\n            </slot>\n            <slot name=\"subtitle\">\n              <p\n                v-if=\"props.subtitle\"\n                class=\"text-xs text-muted-foreground\"\n                v-html=\"props.subtitle\"\n              />\n            </slot>\n          </div>\n        </div>\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <slot>\n            <UiDropdownMenu>\n              <UiDropdownMenuTrigger as-child>\n                <UiButton variant=\"ghost\" size=\"sm\" title=\"More options\">\n                  <Icon name=\"lucide:more-horizontal\" class=\"size-4\" />\n                  <span class=\"sr-only\"> More options </span>\n                </UiButton>\n              </UiDropdownMenuTrigger>\n              <UiDropdownMenuContent>\n                <UiDropdownMenuItem title=\"Delete\" icon=\"lucide:trash-2\" variant=\"destructive\" />\n                <UiDropdownMenuItem title=\"Duplicate\" icon=\"lucide:copy\" />\n                <UiDropdownMenuItem title=\"Share\" icon=\"lucide:share-2\" />\n                <UiDropdownMenuItem title=\"Move\" icon=\"lucide:folder\" />\n                <UiDropdownMenuItem title=\"Copy Link\" icon=\"lucide:link\" />\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n            <UiSeparator orientation=\"vertical\" class=\"mx-1 h-6\" />\n            <UiButton variant=\"outline\" size=\"sm\">Cancel</UiButton>\n            <UiButton size=\"sm\">Save changes</UiButton>\n          </slot>\n        </div>\n      </div>\n    </UiContainer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  const props = withDefaults(\n    defineProps<{\n      title?: string;\n      subtitle?: string;\n    }>(),\n    {\n      title: \"Edit User Profile\",\n      subtitle: \"Last saved 2 minutes ago\",\n    }\n  );\n</script>\n","category":"Header","path":"App/Header/BlockAppHeader8.vue","components":["button","container","dropdownmenu","dropdownmenucontent","dropdownmenuitem","dropdownmenutrigger","separator"]},{"name":"App Header 9","fileName":"BlockAppHeader9.vue","file":"<template>\n  <UiContainer class=\"px-4 py-5 md:px-6\">\n    <div class=\"flex flex-col gap-5\">\n      <div class=\"flex flex-wrap items-center justify-between gap-4\">\n        <slot name=\"title\">\n          <h1 v-if=\"props.title\" class=\"text-xl font-bold\" v-html=\"props.title\" />\n        </slot>\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <slot name=\"actions\">\n            <UiButton variant=\"ghost\" size=\"sm\">\n              <Icon name=\"lucide:filter\" class=\"size-4\" />\n              Filter\n            </UiButton>\n            <UiButton variant=\"ghost\" size=\"sm\">\n              <Icon name=\"lucide:download\" class=\"size-4\" />\n              Export\n            </UiButton>\n            <UiButton size=\"sm\">\n              <Icon name=\"lucide:plus\" class=\"size-4\" />\n              Add item\n            </UiButton>\n          </slot>\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-5 md:flex-row md:items-center md:justify-between\">\n        <slot name=\"stats\">\n          <div class=\"grid grid-cols-3 place-items-center md:flex md:flex-wrap md:gap-5\">\n            <div class=\"flex flex-col gap-1\">\n              <span class=\"text-xs font-medium text-muted-foreground\">Total items</span>\n              <span class=\"text-2xl font-bold\">{{ props.totalItems }}</span>\n            </div>\n            <UiSeparator orientation=\"vertical\" class=\"hidden h-12 md:block\" />\n            <div class=\"flex flex-col gap-1\">\n              <span class=\"text-xs font-medium text-muted-foreground\">Active</span>\n              <span class=\"text-2xl font-bold text-primary\">{{ props.activeItems }}</span>\n            </div>\n            <UiSeparator orientation=\"vertical\" class=\"hidden h-12 md:block\" />\n            <div class=\"flex flex-col gap-1\">\n              <span class=\"text-xs font-medium text-muted-foreground\">Completed</span>\n              <span class=\"text-2xl font-bold text-muted-foreground\">{{\n                props.completedItems\n              }}</span>\n            </div>\n          </div>\n        </slot>\n        <slot name=\"search\">\n          <div class=\"relative w-full md:w-64\">\n            <UiVeeInput icon=\"lucide:search\" :placeholder=\"props.searchPlaceholder\" />\n          </div>\n        </slot>\n      </div>\n      <UiSeparator />\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const props = withDefaults(\n    defineProps<{\n      title?: string;\n      totalItems?: number;\n      activeItems?: number;\n      completedItems?: number;\n      searchPlaceholder?: string;\n    }>(),\n    {\n      title: \"Tasks\",\n      totalItems: 156,\n      activeItems: 42,\n      completedItems: 114,\n      searchPlaceholder: \"Search tasks...\",\n    }\n  );\n</script>\n","category":"Header","path":"App/Header/BlockAppHeader9.vue","components":["button","container","separator","veeinput"]},{"name":"Contact Header 1","fileName":"BlockContactHeader1.vue","file":"<template>\n  <!-- \n    Centered contact form with simple layout\n    Features: Centered header, inline form with validation, staggered animations\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"pb-16\">\n      <UiContainer class=\"py-16 text-center\">\n        <slot name=\"headline\">\n          <Motion\n            v-if=\"headline\"\n            as=\"p\"\n            :variants=\"childVariant\"\n            class=\"font-semibold text-primary\"\n          >\n            {{ headline }}\n          </Motion>\n        </slot>\n        <slot name=\"title\">\n          <Motion\n            as=\"h2\"\n            :variants=\"childVariant\"\n            class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:mb-6 lg:text-5xl\"\n          >\n            {{ title }}\n          </Motion>\n        </slot>\n        <slot name=\"description\">\n          <Motion\n            as=\"p\"\n            :variants=\"childVariant\"\n            class=\"mx-auto max-w-[800px] text-lg text-muted-foreground lg:text-xl\"\n          >\n            {{ description }}\n          </Motion>\n        </slot>\n      </UiContainer>\n      <Motion :variants=\"childVariant\" as=\"form\" class=\"mx-auto max-w-[480px]\" @submit=\"submit\">\n        <fieldset :disabled=\"isSubmitting\" class=\"grid gap-6\">\n          <Motion :variants=\"childVariant\" class=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n            <div><UiVeeInput label=\"First name\" placeholder=\"First name\" name=\"firstName\" /></div>\n            <div><UiVeeInput label=\"Last name\" placeholder=\"Last name\" name=\"lastName\" /></div>\n          </Motion>\n          <Motion :variants=\"childVariant\">\n            <UiVeeInput label=\"Email\" placeholder=\"me@example.com\" type=\"email\" name=\"email\" />\n          </Motion>\n          <Motion :variants=\"childVariant\">\n            <UiVeeInput label=\"Phone\" type=\"tel\" name=\"phone\" />\n          </Motion>\n          <Motion :variants=\"childVariant\">\n            <UiVeeTextarea\n              :rows=\"4\"\n              label=\"Message\"\n              placeholder=\"Leave us a message...\"\n              name=\"message\"\n            />\n          </Motion>\n          <Motion :variants=\"childVariant\">\n            <UiButton class=\"w-full\" type=\"submit\">\n              Send message\n              <Icon name=\"lucide:send\" class=\"ml-2 h-4 w-4\" />\n            </UiButton>\n          </Motion>\n        </fieldset>\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const schema = object({\n    firstName: string().required().label(\"First name\"),\n    lastName: string().required().label(\"Last name\"),\n    email: string().email().required().label(\"Email\"),\n    phone: string().required().label(\"Phone\"),\n    message: string().required().label(\"Message\"),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof schema>>({\n    validationSchema: schema,\n  });\n\n  const submit = handleSubmit(async (values) => {\n    console.log(values);\n\n    useSonner.success(\"Message sent\", {\n      description: \"We'll get back to you as soon as possible.\",\n    });\n  });\n\n  const headline = \"Contact us\";\n  const title = \"Get in touch\";\n  const description = \"We'd love to hear from you. Please fill out this form.\";\n</script>\n","category":"Header","path":"Contact/Header/BlockContactHeader1.vue","components":["button","container","veeinput","veetextarea"]},{"name":"Contact Header 2","fileName":"BlockContactHeader2.vue","file":"<template>\n  <!-- \n    Contact form with Google Maps integration\n    Features: Two-column layout, form with map embed, animated entrance\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer\n      class=\"grid grid-cols-1 items-center overflow-x-hidden py-10 lg:min-h-[800px] lg:grid-cols-2 lg:gap-20\"\n    >\n      <Motion :variants=\"childVariant\" class=\"mx-auto\">\n        <h1 class=\"mb-4 text-4xl font-semibold lg:mb-6 lg:text-5xl\">Contact us</h1>\n        <p class=\"mb-12 text-lg text-muted-foreground lg:text-xl\">\n          Our friendly team would love to hear from you.\n        </p>\n        <form class=\"max-w-[480px]\" @submit=\"submit\">\n          <fieldset :disabled=\"isSubmitting\" class=\"grid gap-6\">\n            <Motion :variants=\"childVariant\" class=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n              <div><UiVeeInput label=\"First name\" placeholder=\"First name\" name=\"firstName\" /></div>\n              <div><UiVeeInput label=\"Last name\" placeholder=\"Last name\" name=\"lastName\" /></div>\n            </Motion>\n            <Motion :variants=\"childVariant\">\n              <UiVeeInput label=\"Email\" placeholder=\"me@example.com\" type=\"email\" name=\"email\" />\n            </Motion>\n            <Motion :variants=\"childVariant\">\n              <UiVeeInput label=\"Phone\" type=\"tel\" name=\"phone\" />\n            </Motion>\n            <Motion :variants=\"childVariant\">\n              <UiVeeTextarea\n                :rows=\"5\"\n                label=\"Message\"\n                placeholder=\"Leave us a message...\"\n                name=\"message\"\n              />\n            </Motion>\n            <Motion :variants=\"childVariant\">\n              <UiButton class=\"w-full\" type=\"submit\">\n                Send message\n                <Icon name=\"lucide:send\" class=\"ml-2 h-4 w-4\" />\n              </UiButton>\n            </Motion>\n          </fieldset>\n        </form>\n      </Motion>\n      <Motion\n        :variants=\"{\n          initial: { opacity: 0, x: 30 },\n          animate: {\n            opacity: 1,\n            x: 0,\n            transition: {\n              type: 'spring',\n              stiffness: 200,\n              damping: 25,\n            },\n          },\n        }\"\n        class=\"mt-10 h-[300px] w-full overflow-hidden rounded-lg shadow-lg lg:mt-0 lg:h-full lg:rounded-xl\"\n      >\n        <iframe\n          src=\"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d60706.4783868638!2d-76.84185590241378!3d18.01801356612945!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8edb3e4e09940847%3A0xbcee137f153b407f!2sMegaMart%20Kingston!5e0!3m2!1sen!2sjm!4v1705346784307!5m2!1sen!2sjm\"\n          width=\"800\"\n          height=\"800\"\n          class=\"h-full w-full\"\n          style=\"border: 0\"\n          allowfullscreen=\"true\"\n          loading=\"lazy\"\n          referrerpolicy=\"no-referrer-when-downgrade\"\n        />\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const schema = object({\n    firstName: string().required().label(\"First name\"),\n    lastName: string().required().label(\"Last name\"),\n    email: string().email().required().label(\"Email\"),\n    phone: string().required().label(\"Phone\"),\n    message: string().required().label(\"Message\"),\n  });\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof schema>>({\n    validationSchema: schema,\n  });\n\n  const submit = handleSubmit(async (values) => {\n    console.log(values);\n\n    useSonner.success(\"Message sent\", {\n      description: \"We'll get back to you as soon as possible.\",\n    });\n  });\n</script>\n","category":"Header","path":"Contact/Header/BlockContactHeader2.vue","components":["button","container","veeinput","veetextarea"]},{"name":"Contact Header 3","fileName":"BlockContactHeader3.vue","file":"<template>\n  <!-- \n    Contact form with image showcase\n    Features: Two-column layout, form with decorative image, animated elements\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer\n      class=\"grid grid-cols-1 items-center overflow-x-hidden py-10 lg:min-h-[800px] lg:grid-cols-2 lg:gap-5\"\n    >\n      <Motion :variants=\"childVariant\" class=\"mx-auto\">\n        <h1 class=\"mb-4 text-4xl font-semibold lg:mb-6 lg:text-5xl\">Contact us</h1>\n        <p class=\"mb-12 text-lg text-muted-foreground lg:text-xl\">\n          Our friendly team would love to hear from you.\n        </p>\n        <form class=\"max-w-[480px]\" @submit=\"submit\">\n          <fieldset :disabled=\"isSubmitting\" class=\"grid gap-6\">\n            <Motion :variants=\"childVariant\" class=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n              <div><UiVeeInput label=\"First name\" placeholder=\"First name\" name=\"firstName\" /></div>\n              <div><UiVeeInput label=\"Last name\" placeholder=\"Last name\" name=\"lastName\" /></div>\n            </Motion>\n            <Motion :variants=\"childVariant\">\n              <UiVeeInput label=\"Email\" placeholder=\"me@example.com\" type=\"email\" name=\"email\" />\n            </Motion>\n            <Motion :variants=\"childVariant\">\n              <UiVeeInput label=\"Phone\" type=\"tel\" name=\"phone\" />\n            </Motion>\n            <Motion :variants=\"childVariant\">\n              <UiVeeTextarea\n                :rows=\"5\"\n                label=\"Message\"\n                placeholder=\"Leave us a message...\"\n                name=\"message\"\n              />\n            </Motion>\n            <Motion :variants=\"childVariant\">\n              <UiButton class=\"w-full\" type=\"submit\">\n                Send message\n                <Icon name=\"lucide:send\" class=\"ml-2 h-4 w-4\" />\n              </UiButton>\n            </Motion>\n          </fieldset>\n        </form>\n      </Motion>\n      <Motion\n        :variants=\"{\n          initial: { opacity: 0, x: 30 },\n          animate: {\n            opacity: 1,\n            x: 0,\n            transition: {\n              type: 'spring',\n              stiffness: 200,\n              damping: 25,\n            },\n          },\n        }\"\n        class=\"mt-10 h-[300px] w-full overflow-hidden rounded-lg shadow-lg lg:mt-0 lg:h-full lg:rounded-xl\"\n      >\n        <img\n          src=\"https://images.unsplash.com/photo-1587560699334-bea93391dcef?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Contact us image\"\n          width=\"800\"\n          height=\"800\"\n          class=\"h-full w-full object-cover transition-transform duration-500 hover:scale-105\"\n        />\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const schema = object({\n    firstName: string().required().label(\"First name\"),\n    lastName: string().required().label(\"Last name\"),\n    email: string().email().required().label(\"Email\"),\n    phone: string().required().label(\"Phone\"),\n    message: string().required().label(\"Message\"),\n  });\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof schema>>({\n    validationSchema: schema,\n  });\n\n  const submit = handleSubmit(async (values) => {\n    console.log(values);\n    useSonner.success(\"Message Sent\", {\n      description: \"We'll get back to you as soon as possible.\",\n    });\n  });\n</script>\n","category":"Header","path":"Contact/Header/BlockContactHeader3.vue","components":["button","container","veeinput","veetextarea"]},{"name":"Contact Header 4","fileName":"BlockContactHeader4.vue","file":"<template>\n  <!-- \n    Contact information cards with icons\n    Features: Three-column info cards, icon badges, staggered animations\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"pb-10\">\n      <UiContainer class=\"py-16 text-center\">\n        <slot name=\"headline\">\n          <Motion\n            v-if=\"headline\"\n            as=\"p\"\n            :variants=\"childVariant\"\n            class=\"font-semibold text-primary\"\n          >\n            {{ headline }}\n          </Motion>\n        </slot>\n        <slot name=\"title\">\n          <Motion\n            as=\"h2\"\n            :variants=\"childVariant\"\n            class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:mb-6 lg:text-5xl\"\n          >\n            {{ title }}\n          </Motion>\n        </slot>\n        <slot name=\"description\">\n          <Motion\n            as=\"p\"\n            :variants=\"childVariant\"\n            class=\"mx-auto max-w-[800px] text-lg text-muted-foreground lg:text-xl\"\n          >\n            {{ description }}\n          </Motion>\n        </slot>\n      </UiContainer>\n      <section class=\"grid grid-cols-1 gap-8 lg:grid-cols-3\">\n        <template v-for=\"c in contactInfo\" :key=\"c.title\">\n          <Motion\n            :variants=\"childVariant\"\n            class=\"group flex flex-col items-center gap-2 rounded-lg border border-border bg-card p-6 transition-shadow hover:shadow-lg\"\n          >\n            <div\n              class=\"flex h-12 w-12 items-center justify-center rounded-full bg-primary/20 transition-colors group-hover:bg-primary/30\"\n            >\n              <Icon :name=\"c.icon\" class=\"h-6 w-6 text-primary\" />\n            </div>\n            <h3 class=\"mt-4 text-lg font-medium lg:text-xl\">{{ c.title }}</h3>\n            <p class=\"text-center text-muted-foreground\">\n              {{ c.description }}\n            </p>\n            <a\n              :href=\"c.link\"\n              target=\"_blank\"\n              class=\"text-center font-medium text-primary hover:underline\"\n            >\n              {{ c.value }}\n            </a>\n          </Motion>\n        </template>\n      </section>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const contactInfo = [\n    {\n      title: \"Email\",\n      description: \"Our friendly team is here to help.\",\n      value: \"admin@marketplace.com\",\n      icon: \"heroicons:envelope\",\n      link: \"mailto:admin@marketplace.com\",\n    },\n    {\n      title: \"Office\",\n      description: \"Come say hello at our office HQ.\",\n      value: \"100 West Road, Cityvale, SomeCountry\",\n      icon: \"heroicons:map-pin\",\n      link: \"#\",\n    },\n    {\n      title: \"Phone\",\n      description: \"Mon-Fri from 8am to 5pm.\",\n      value: \"1-800-123-4567\",\n      icon: \"heroicons:phone\",\n      link: \"tel:1-800-123-4567\",\n    },\n  ];\n\n  const headline = \"Contact us\";\n  const title = \"We'd love to hear from you\";\n  const description = \"Our friendly team is always here to chat.\";\n</script>\n","category":"Header","path":"Contact/Header/BlockContactHeader4.vue","components":["container"]},{"name":"Contact Header 5","fileName":"BlockContactHeader5.vue","file":"<template>\n  <!-- \n    Multiple locations with map showcase\n    Features: Large map embed, location cards below, staggered animations\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"pb-10\">\n      <UiContainer class=\"py-16 text-center\">\n        <slot name=\"headline\">\n          <Motion\n            v-if=\"headline\"\n            as=\"p\"\n            :variants=\"childVariant\"\n            class=\"font-semibold text-primary\"\n          >\n            {{ headline }}\n          </Motion>\n        </slot>\n        <slot name=\"title\">\n          <Motion\n            as=\"h2\"\n            :variants=\"childVariant\"\n            class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:mb-6 lg:text-5xl\"\n          >\n            {{ title }}\n          </Motion>\n        </slot>\n        <slot name=\"description\">\n          <Motion\n            as=\"p\"\n            :variants=\"childVariant\"\n            class=\"mx-auto max-w-[800px] text-lg text-muted-foreground lg:text-xl\"\n          >\n            {{ description }}\n          </Motion>\n        </slot>\n      </UiContainer>\n      <Motion\n        :variants=\"childVariant\"\n        class=\"h-[300px] w-full overflow-hidden rounded-lg shadow-lg lg:h-[450px] lg:rounded-xl\"\n      >\n        <iframe\n          src=\"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d60706.4783868638!2d-76.84185590241378!3d18.01801356612945!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8edb3e4e09940847%3A0xbcee137f153b407f!2sMegaMart%20Kingston!5e0!3m2!1sen!2sjm!4v1705346784307!5m2!1sen!2sjm\"\n          width=\"800\"\n          height=\"800\"\n          class=\"h-full w-full\"\n          style=\"border: 0\"\n          allowfullscreen=\"true\"\n          loading=\"lazy\"\n          referrerpolicy=\"no-referrer-when-downgrade\"\n        />\n      </Motion>\n      <section class=\"mt-16 grid grid-cols-1 gap-8 lg:grid-cols-3\">\n        <template v-for=\"c in contactInfo\" :key=\"c.title\">\n          <Motion\n            :variants=\"childVariant\"\n            class=\"group flex flex-col items-center gap-2 rounded-lg border border-border bg-card p-6 transition-shadow hover:shadow-lg\"\n          >\n            <div\n              class=\"flex h-12 w-12 items-center justify-center rounded-full bg-primary/20 transition-colors group-hover:bg-primary/30\"\n            >\n              <Icon :name=\"c.icon\" class=\"h-6 w-6 text-primary\" />\n            </div>\n            <h3 class=\"mt-4 text-lg font-medium lg:text-xl\">{{ c.title }}</h3>\n            <p class=\"text-center text-muted-foreground\">\n              {{ c.description }}\n            </p>\n            <a\n              :href=\"c.link\"\n              target=\"_blank\"\n              class=\"text-center font-medium text-pretty text-primary hover:underline\"\n            >\n              {{ c.value }}\n            </a>\n          </Motion>\n        </template>\n      </section>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const contactInfo = [\n    {\n      title: \"Head Office\",\n      description: \"Mon-Sat 9am to 5pm.\",\n      value: \"100 West Road, Cityvale, SomeCountry\",\n      icon: \"heroicons:map-pin\",\n      link: \"#\",\n    },\n    {\n      title: \"Retail store\",\n      description: \"Mon-Sat 9am to 5pm.\",\n      value: \"13 Coast Road, Cityvale, SomeCountry\",\n      icon: \"heroicons:map-pin\",\n      link: \"#\",\n    },\n    {\n      title: \"Showroom\",\n      description: \"Mon-Sat 9am to 5pm.\",\n      value: \"Lot 16 Flame Road, Cityvale, SomeCountry\",\n      icon: \"heroicons:map-pin\",\n      link: \"#\",\n    },\n  ];\n\n  const headline = \"Contact us\";\n  const title = \"Our Locations\";\n  const description = \"Come visit our friendly team at one of our offices.\";\n</script>\n","category":"Header","path":"Contact/Header/BlockContactHeader5.vue","components":["container"]},{"name":"Contact Header 6","fileName":"BlockContactHeader6.vue","file":"<template>\n  <!-- \n    Contact form with team support cards\n    Features: Form with support team info, avatar cards, badge indicators\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"py-16\">\n      <div class=\"mx-auto max-w-[900px]\">\n        <div class=\"text-center\">\n          <Motion as=\"p\" :variants=\"childVariant\" class=\"font-semibold text-primary\"\n            >Contact support</Motion\n          >\n          <Motion\n            as=\"h2\"\n            :variants=\"childVariant\"\n            class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:mb-6 lg:text-5xl\"\n          >\n            Get help from our team\n          </Motion>\n          <Motion\n            as=\"p\"\n            :variants=\"childVariant\"\n            class=\"mx-auto mb-12 max-w-[600px] text-lg text-muted-foreground lg:text-xl\"\n          >\n            Our dedicated support team is here to assist you with any questions or concerns.\n          </Motion>\n        </div>\n\n        <div class=\"grid gap-5 lg:grid-cols-[1fr_300px] lg:gap-10 xl:grid-cols-[1fr_380px]\">\n          <Motion :variants=\"childVariant\" as=\"form\" @submit=\"submit\">\n            <fieldset :disabled=\"isSubmitting\" class=\"grid gap-6\">\n              <div class=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n                <UiVeeInput label=\"First name\" placeholder=\"First name\" name=\"firstName\" />\n                <UiVeeInput label=\"Last name\" placeholder=\"Last name\" name=\"lastName\" />\n              </div>\n              <UiVeeInput label=\"Email\" placeholder=\"me@example.com\" type=\"email\" name=\"email\" />\n              <UiVeeInput label=\"Subject\" placeholder=\"How can we help?\" name=\"subject\" />\n              <UiVeeTextarea\n                :rows=\"5\"\n                label=\"Message\"\n                placeholder=\"Tell us more...\"\n                name=\"message\"\n              />\n              <UiButton class=\"w-full\" type=\"submit\">\n                Send message\n                <Icon name=\"lucide:send\" class=\"ml-2 h-4 w-4\" />\n              </UiButton>\n            </fieldset>\n          </Motion>\n\n          <Motion :variants=\"childVariant\" class=\"space-y-4\">\n            <UiCard class=\"py-4\">\n              <UiCardContent>\n                <h3 class=\"mb-4 text-lg font-semibold\">Support Team</h3>\n                <div class=\"space-y-4\">\n                  <div v-for=\"member in team\" :key=\"member.name\" class=\"flex items-start gap-3\">\n                    <UiAvatar class=\"h-10 w-10\">\n                      <UiAvatarImage :src=\"member.avatar\" :alt=\"member.name\" />\n                      <UiAvatarFallback>{{ member.initials }}</UiAvatarFallback>\n                    </UiAvatar>\n                    <div class=\"flex min-w-0 flex-1 flex-col\">\n                      <div class=\"flex items-center gap-1\">\n                        <p class=\"font-medium\">{{ member.name }}</p>\n                        <UiBadge variant=\"outline\" class=\"text-xs md:hidden xl:block\">{{\n                          member.role\n                        }}</UiBadge>\n                      </div>\n                      <p class=\"text-sm text-muted-foreground\">{{ member.specialty }}</p>\n                    </div>\n                  </div>\n                </div>\n              </UiCardContent>\n            </UiCard>\n\n            <UiCard class=\"py-4\">\n              <UiCardContent>\n                <h3 class=\"mb-3 text-lg font-semibold\">Quick Info</h3>\n                <div class=\"space-y-3 text-sm\">\n                  <div class=\"flex items-center gap-2\">\n                    <Icon name=\"heroicons:clock\" class=\"h-5 w-5 text-muted-foreground\" />\n                    <span class=\"text-muted-foreground\">Response time: ~2 hours</span>\n                  </div>\n                  <div class=\"flex items-center gap-2\">\n                    <Icon name=\"heroicons:envelope\" class=\"h-5 w-5 text-muted-foreground\" />\n                    <span class=\"text-muted-foreground\">support@company.com</span>\n                  </div>\n                  <div class=\"flex items-center gap-2\">\n                    <Icon\n                      name=\"heroicons:chat-bubble-left-right\"\n                      class=\"h-5 w-5 text-muted-foreground\"\n                    />\n                    <span class=\"text-muted-foreground\">24/7 Live chat available</span>\n                  </div>\n                </div>\n              </UiCardContent>\n            </UiCard>\n          </Motion>\n        </div>\n      </div>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const schema = object({\n    firstName: string().required().label(\"First name\"),\n    lastName: string().required().label(\"Last name\"),\n    email: string().email().required().label(\"Email\"),\n    subject: string().required().label(\"Subject\"),\n    message: string().required().label(\"Message\"),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof schema>>({\n    validationSchema: schema,\n  });\n\n  const submit = handleSubmit(async (values) => {\n    console.log(values);\n    useSonner.success(\"Message sent\", {\n      description: \"We'll get back to you as soon as possible.\",\n    });\n  });\n\n  const team = [\n    {\n      name: \"Sarah Johnson\",\n      role: \"Lead Support\",\n      specialty: \"Technical issues\",\n      avatar: \"https://i.pravatar.cc/150?img=1\",\n      initials: \"SJ\",\n    },\n    {\n      name: \"Mike Chen\",\n      role: \"Support Agent\",\n      specialty: \"Account & billing\",\n      avatar: \"https://i.pravatar.cc/150?img=13\",\n      initials: \"MC\",\n    },\n    {\n      name: \"Emily Davis\",\n      role: \"Support Agent\",\n      specialty: \"General inquiries\",\n      avatar: \"https://i.pravatar.cc/150?img=5\",\n      initials: \"ED\",\n    },\n  ];\n</script>\n","category":"Header","path":"Contact/Header/BlockContactHeader6.vue","components":["avatar","avatarfallback","avatarimage","badge","button","card","cardcontent","container","veeinput","veetextarea"]},{"name":"Contact Header 7","fileName":"BlockContactHeader7.vue","file":"<template>\n  <!-- \n    FAQ-focused contact section\n    Features: Accordion FAQ with contact form, two-column layout, animated elements\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"py-16\">\n      <div class=\"mx-auto max-w-[1100px]\">\n        <div class=\"text-center\">\n          <Motion as=\"p\" :variants=\"childVariant\" class=\"font-semibold text-primary\"\n            >Support</Motion\n          >\n          <Motion\n            as=\"h2\"\n            :variants=\"childVariant\"\n            class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:mb-6 lg:text-5xl\"\n          >\n            How can we help?\n          </Motion>\n          <Motion\n            as=\"p\"\n            :variants=\"childVariant\"\n            class=\"mx-auto mb-12 max-w-[700px] text-lg text-muted-foreground lg:text-xl\"\n          >\n            Check out our frequently asked questions or reach out to us directly.\n          </Motion>\n        </div>\n\n        <div class=\"grid gap-10 lg:grid-cols-2\">\n          <Motion :variants=\"childVariant\" class=\"space-y-4\">\n            <h3 class=\"text-xl font-semibold\">Frequently Asked Questions</h3>\n            <UiAccordion type=\"single\" collapsible>\n              <UiAccordionItem v-for=\"(faq, idx) in faqs\" :key=\"idx\" :value=\"`item-${idx}`\">\n                <UiAccordionTrigger>{{ faq.question }}</UiAccordionTrigger>\n                <UiAccordionContent>{{ faq.answer }}</UiAccordionContent>\n              </UiAccordionItem>\n            </UiAccordion>\n          </Motion>\n\n          <Motion :variants=\"childVariant\">\n            <UiCard class=\"\">\n              <UiCardContent>\n                <h3 class=\"mb-5 text-xl font-semibold\">Still have questions?</h3>\n                <form @submit=\"submit\">\n                  <fieldset :disabled=\"isSubmitting\" class=\"grid gap-5\">\n                    <UiVeeInput label=\"Name\" placeholder=\"Your name\" name=\"name\" />\n                    <UiVeeInput\n                      label=\"Email\"\n                      placeholder=\"me@example.com\"\n                      type=\"email\"\n                      name=\"email\"\n                    />\n                    <UiVeeTextarea\n                      :rows=\"4\"\n                      label=\"Question\"\n                      placeholder=\"Ask us anything...\"\n                      name=\"question\"\n                    />\n                    <UiButton class=\"w-full\" type=\"submit\">\n                      Submit question\n                      <Icon name=\"lucide:arrow-right\" class=\"ml-2 h-4 w-4\" />\n                    </UiButton>\n                  </fieldset>\n                </form>\n              </UiCardContent>\n            </UiCard>\n          </Motion>\n        </div>\n      </div>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const schema = object({\n    name: string().required().label(\"Name\"),\n    email: string().email().required().label(\"Email\"),\n    question: string().required().label(\"Question\"),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof schema>>({\n    validationSchema: schema,\n  });\n\n  const submit = handleSubmit(async (values) => {\n    console.log(values);\n    useSonner.success(\"Question submitted\", {\n      description: \"We'll respond to your email shortly.\",\n    });\n  });\n\n  const faqs = [\n    {\n      question: \"What are your business hours?\",\n      answer:\n        \"We're available Monday through Friday, 9 AM to 6 PM EST. Our support team responds to emails within 24 hours.\",\n    },\n    {\n      question: \"How do I track my order?\",\n      answer:\n        \"Once your order ships, you'll receive a tracking number via email. You can also check your order status in your account dashboard.\",\n    },\n    {\n      question: \"What's your return policy?\",\n      answer:\n        \"We offer a 30-day return policy for most items. Products must be in original condition with tags attached. Contact us to initiate a return.\",\n    },\n    {\n      question: \"Do you offer international shipping?\",\n      answer:\n        \"Yes, we ship to over 50 countries worldwide. Shipping costs and delivery times vary by location.\",\n    },\n    {\n      question: \"How can I change my account information?\",\n      answer:\n        \"You can update your account details by logging in and navigating to Settings. For email changes, contact our support team for verification.\",\n    },\n  ];\n</script>\n","category":"Header","path":"Contact/Header/BlockContactHeader7.vue","components":["accordion","accordioncontent","accordionitem","accordiontrigger","button","card","cardcontent","container","veeinput","veetextarea"]},{"name":"Contact Header 8","fileName":"BlockContactHeader8.vue","file":"<template>\n  <!-- \n    Gradient hero contact section\n    Features: Full-width gradient background, centered form, social links, animated blobs\n  -->\n  <div\n    class=\"relative overflow-hidden bg-linear-to-br from-primary/10 via-background to-primary/5 py-20\"\n  >\n    <!-- Animated background blobs -->\n    <div class=\"absolute inset-0 overflow-hidden\">\n      <Motion\n        :variants=\"{\n          initial: { scale: 0.8, opacity: 0.3 },\n          animate: {\n            scale: [0.8, 1, 0.8],\n            opacity: [0.3, 0.5, 0.3],\n            transition: {\n              duration: 8,\n              repeat: Infinity,\n              ease: 'easeInOut',\n            },\n          },\n        }\"\n        initial=\"initial\"\n        animate=\"animate\"\n        class=\"absolute -top-20 -right-20 h-96 w-96 rounded-full bg-primary/20 blur-3xl\"\n      />\n      <Motion\n        :variants=\"{\n          initial: { scale: 0.8, opacity: 0.3 },\n          animate: {\n            scale: [0.8, 1.2, 0.8],\n            opacity: [0.3, 0.4, 0.3],\n            transition: {\n              duration: 10,\n              repeat: Infinity,\n              ease: 'easeInOut',\n              delay: 2,\n            },\n          },\n        }\"\n        initial=\"initial\"\n        animate=\"animate\"\n        class=\"absolute -bottom-32 -left-32 h-96 w-96 rounded-full bg-primary/15 blur-3xl\"\n      />\n    </div>\n\n    <Motion\n      initial=\"initial\"\n      while-in-view=\"animate\"\n      :in-view-options=\"{ once: true }\"\n      as-child\n      :variants=\"{\n        initial: { opacity: 0 },\n        animate: {\n          opacity: 1,\n          transition: {\n            when: 'beforeChildren',\n            delayChildren: stagger(0.1),\n          },\n        },\n      }\"\n    >\n      <UiContainer class=\"relative z-10\">\n        <div class=\"mx-auto max-w-[600px] text-center\">\n          <Motion\n            as=\"h2\"\n            :variants=\"childVariant\"\n            class=\"mb-4 text-4xl font-bold lg:mb-6 lg:text-5xl\"\n          >\n            Let's start a conversation\n          </Motion>\n          <Motion\n            as=\"p\"\n            :variants=\"childVariant\"\n            class=\"mb-10 text-lg text-muted-foreground lg:text-xl\"\n          >\n            We're always happy to hear from you. Send us a message and we'll respond as soon as\n            possible.\n          </Motion>\n\n          <Motion :variants=\"childVariant\" as-child>\n            <UiCard class=\"shadow-xs\">\n              <UiCardContent class=\"flex flex-col gap-6\">\n                <form @submit=\"submit\">\n                  <fieldset :disabled=\"isSubmitting\" class=\"grid gap-5\">\n                    <div class=\"grid grid-cols-1 gap-5 md:grid-cols-2\">\n                      <UiVeeInput label=\"First name\" placeholder=\"John\" name=\"firstName\" />\n                      <UiVeeInput label=\"Last name\" placeholder=\"Doe\" name=\"lastName\" />\n                    </div>\n                    <UiVeeInput\n                      label=\"Email\"\n                      placeholder=\"john@example.com\"\n                      type=\"email\"\n                      name=\"email\"\n                    />\n                    <UiVeeInput label=\"Phone (optional)\" type=\"tel\" name=\"phone\" />\n                    <UiVeeTextarea\n                      :rows=\"4\"\n                      label=\"Message\"\n                      placeholder=\"Your message...\"\n                      name=\"message\"\n                    />\n                    <UiButton class=\"w-full\" size=\"lg\" type=\"submit\">\n                      Send message\n                      <Icon name=\"lucide:send\" class=\"ml-2 h-4 w-4\" />\n                    </UiButton>\n                  </fieldset>\n                </form>\n\n                <UiDivider label=\"Or connect with us on\" />\n\n                <div class=\"flex items-center justify-center gap-4\">\n                  <UiButton variant=\"outline\" size=\"icon-sm\" as-child>\n                    <a href=\"#\" target=\"_blank\" aria-label=\"Twitter\">\n                      <Icon name=\"logos:twitter\" class=\"h-4 w-4\" />\n                    </a>\n                  </UiButton>\n                  <UiButton variant=\"outline\" size=\"icon-sm\" as-child>\n                    <a href=\"#\" target=\"_blank\" aria-label=\"LinkedIn\">\n                      <Icon name=\"logos:linkedin-icon\" class=\"h-4 w-4\" />\n                    </a>\n                  </UiButton>\n                  <UiButton variant=\"outline\" size=\"icon-sm\" as-child>\n                    <a href=\"#\" target=\"_blank\" aria-label=\"Facebook\">\n                      <Icon name=\"logos:facebook\" class=\"h-4 w-4\" />\n                    </a>\n                  </UiButton>\n                  <UiButton variant=\"outline\" size=\"icon-sm\" as-child>\n                    <a href=\"#\" target=\"_blank\" aria-label=\"Instagram\">\n                      <Icon name=\"skill-icons:instagram\" class=\"h-4 w-4\" />\n                    </a>\n                  </UiButton>\n                </div>\n              </UiCardContent>\n            </UiCard>\n          </Motion>\n        </div>\n      </UiContainer>\n    </Motion>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const schema = object({\n    firstName: string().required().label(\"First name\"),\n    lastName: string().required().label(\"Last name\"),\n    email: string().email().required().label(\"Email\"),\n    phone: string().label(\"Phone\"),\n    message: string().required().label(\"Message\"),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof schema>>({\n    validationSchema: schema,\n  });\n\n  const submit = handleSubmit(async (values) => {\n    console.log(values);\n    useSonner.success(\"Message sent\", {\n      description: \"We'll get back to you soon!\",\n    });\n  });\n</script>\n","category":"Header","path":"Contact/Header/BlockContactHeader8.vue","components":["button","card","cardcontent","container","divider","veeinput","veetextarea"]},{"name":"Contact Header 9","fileName":"BlockContactHeader9.vue","file":"<template>\n  <!-- \n    Department selection contact form\n    Features: Department chips, priority badge, estimated response time\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"py-16\">\n      <div class=\"mx-auto max-w-[700px]\">\n        <div class=\"text-center\">\n          <Motion as=\"p\" :variants=\"childVariant\" class=\"font-semibold text-primary\"\n            >Contact us</Motion\n          >\n          <Motion\n            as=\"h2\"\n            :variants=\"childVariant\"\n            class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:mb-6 lg:text-5xl\"\n          >\n            We're here to help\n          </Motion>\n          <Motion\n            as=\"p\"\n            :variants=\"childVariant\"\n            class=\"mb-10 text-lg text-muted-foreground lg:text-xl\"\n          >\n            Choose a department and we'll route your message to the right team.\n          </Motion>\n        </div>\n\n        <Motion :variants=\"childVariant\" as-child>\n          <UiCard class=\"p-8\">\n            <form @submit=\"submit\">\n              <fieldset :disabled=\"isSubmitting\" class=\"grid gap-6\">\n                <div>\n                  <label class=\"mb-3 block text-sm font-medium\">Select Department</label>\n                  <div class=\"flex flex-wrap gap-2\">\n                    <UiBadge\n                      v-for=\"dept in departments\"\n                      :key=\"dept.value\"\n                      :variant=\"selectedDepartment === dept.value ? 'default' : 'outline'\"\n                      class=\"cursor-pointer\"\n                      type=\"button\"\n                      @click=\"selectedDepartment = dept.value\"\n                    >\n                      <Icon :name=\"dept.icon\" class=\"mr-1.5 h-4 w-4\" />\n                      {{ dept.label }}\n                    </UiBadge>\n                  </div>\n                  <p\n                    v-if=\"selectedDepartment\"\n                    class=\"mt-2 flex items-center gap-1.5 text-sm text-muted-foreground\"\n                  >\n                    <Icon name=\"heroicons:clock\" class=\"h-4 w-4\" />\n                    Typical response time: {{ getResponseTime(selectedDepartment) }}\n                  </p>\n                </div>\n\n                <div class=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n                  <UiVeeInput label=\"First name\" placeholder=\"First name\" name=\"firstName\" />\n                  <UiVeeInput label=\"Last name\" placeholder=\"Last name\" name=\"lastName\" />\n                </div>\n\n                <UiVeeInput label=\"Email\" placeholder=\"me@example.com\" type=\"email\" name=\"email\" />\n                <UiVeeInput label=\"Subject\" placeholder=\"Brief description\" name=\"subject\" />\n\n                <UiVeeTextarea\n                  :rows=\"5\"\n                  label=\"Message\"\n                  placeholder=\"Tell us more...\"\n                  name=\"message\"\n                />\n                <UiVeeCheckbox id=\"urgent\" name=\"isUrgent\" label=\"This is a very urgent matter\" />\n\n                <UiButton class=\"w-full\" type=\"submit\">\n                  Send to\n                  {{\n                    selectedDepartment\n                      ? departments.find((d) => d.value === selectedDepartment)?.label\n                      : \"support\"\n                  }}\n                  <Icon name=\"lucide:send\" class=\"ml-2 h-4 w-4\" />\n                </UiButton>\n              </fieldset>\n            </form>\n          </UiCard>\n        </Motion>\n      </div>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n  import { ref } from \"vue\";\n  import { bool, object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const selectedDepartment = ref(\"sales\");\n  const isUrgent = ref(false);\n\n  const departments = [\n    { label: \"Sales\", value: \"sales\", icon: \"lucide:shopping-cart\", responseTime: \"1-2 hours\" },\n    { label: \"Support\", value: \"support\", icon: \"lucide:headphones\", responseTime: \"2-4 hours\" },\n    { label: \"Billing\", value: \"billing\", icon: \"lucide:credit-card\", responseTime: \"1-3 hours\" },\n    { label: \"Technical\", value: \"technical\", icon: \"lucide:code\", responseTime: \"3-6 hours\" },\n    { label: \"General\", value: \"general\", icon: \"lucide:mail\", responseTime: \"4-8 hours\" },\n  ];\n\n  const getResponseTime = (dept: string) => {\n    return departments.find((d) => d.value === dept)?.responseTime || \"4-8 hours\";\n  };\n\n  const schema = object({\n    firstName: string().required().label(\"First name\"),\n    lastName: string().required().label(\"Last name\"),\n    email: string().email().required().label(\"Email\"),\n    subject: string().required().label(\"Subject\"),\n    message: string().required().label(\"Message\"),\n    isUrgent: bool().label(\"Is Urgent\"),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof schema>>({\n    validationSchema: schema,\n  });\n\n  const submit = handleSubmit(async (values) => {\n    console.log({ ...values, department: selectedDepartment.value, urgent: isUrgent.value });\n    useSonner.success(\"Message sent\", {\n      description: `Your ${isUrgent.value ? \"urgent \" : \"\"}message has been sent to ${selectedDepartment.value}.`,\n    });\n  });\n</script>\n","category":"Header","path":"Contact/Header/BlockContactHeader9.vue","components":["badge","button","card","container","veecheckbox","veeinput","veetextarea"]},{"name":"Header Section 1","fileName":"BlockHeaderSection1.vue","file":"<template>\n  <UiContainer class=\"py-16 text-center lg:py-24\">\n    <slot name=\"headline\">\n      <p v-if=\"headline\" class=\"font-semibold text-primary\">{{ headline }}</p>\n    </slot>\n    <slot name=\"title\">\n      <h2 class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:mb-6 lg:text-5xl\">{{ title }}</h2>\n    </slot>\n    <slot name=\"description\">\n      <p class=\"mx-auto max-w-[800px] text-lg text-muted-foreground lg:text-xl\">\n        {{ description }}\n      </p>\n    </slot>\n    <div class=\"mt-5 flex w-full flex-col-reverse justify-center gap-3 lg:w-auto lg:flex-row\">\n      <slot />\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  withDefaults(\n    defineProps<{\n      headline?: string;\n      description?: string;\n      title?: string;\n    }>(),\n    {\n      headline: \"About us\",\n      description:\n        \"Learn more about our creative agency from the inside out. We take pride in offering the best services to our clients and partners.\",\n      title: \"We are a creative agency\",\n    }\n  );\n</script>\n","category":"HeaderSection","path":"HeaderSection/BlockHeaderSection1.vue","components":["container"]},{"name":"Header Section 10","fileName":"BlockHeaderSection10.vue","file":"<template>\n  <UiContainer class=\"py-16 lg:py-24\">\n    <slot name=\"headline\">\n      <p class=\"font-semibold text-primary\">{{ headline }}</p>\n    </slot>\n    <slot name=\"title\">\n      <h2 class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:mb-6 lg:text-5xl\">{{ title }}</h2>\n    </slot>\n    <slot name=\"description\">\n      <p class=\"max-w-[800px] text-lg text-muted-foreground lg:text-xl\">\n        {{ description }}\n      </p>\n    </slot>\n    <div class=\"mt-5 flex w-full flex-col-reverse gap-3 md:w-auto md:flex-row\">\n      <slot>\n        <div class=\"md:w-[380px]\">\n          <form class=\"mt-5 flex flex-col gap-3 lg:flex-row lg:items-center\">\n            <div class=\"w-full\">\n              <UiVeeInput\n                icon=\"lucide:search\"\n                required\n                placeholder=\"Enter your email\"\n                aria-label=\"Enter your email\"\n              />\n            </div>\n          </form>\n        </div>\n      </slot>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  withDefaults(\n    defineProps<{\n      headline?: string;\n      description?: string;\n      title?: string;\n    }>(),\n    {\n      headline: \"About us\",\n      description:\n        \"Learn more about our creative agency from the inside out. We take pride in offering the best services to our clients and partners.\",\n      title: \"We are a creative agency\",\n    }\n  );\n</script>\n","category":"HeaderSection","path":"HeaderSection/BlockHeaderSection10.vue","components":["container","veeinput"]},{"name":"Header Section 11","fileName":"BlockHeaderSection11.vue","file":"<template>\n  <UiContainer class=\"py-16 lg:py-24\">\n    <div class=\"flex flex-col justify-between gap-5 md:flex-row md:items-end\">\n      <div class=\"basis-1/2\">\n        <slot name=\"headline\">\n          <p class=\"font-semibold text-primary\">{{ headline }}</p>\n        </slot>\n        <slot name=\"title\">\n          <h2 class=\"mt-2 text-4xl font-bold text-balance md:mt-3 md:text-5xl\">\n            {{ title }}\n          </h2>\n        </slot>\n      </div>\n      <slot name=\"description\">\n        <p\n          class=\"max-w-[700px] basis-1/2 text-lg text-balance text-muted-foreground md:text-right lg:text-xl\"\n        >\n          {{ description }}\n        </p>\n      </slot>\n    </div>\n    <div class=\"mt-5 flex w-full flex-col-reverse gap-3 lg:w-auto lg:flex-row\">\n      <slot />\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  withDefaults(\n    defineProps<{\n      headline?: string;\n      description?: string;\n      title?: string;\n    }>(),\n    {\n      headline: \"About us\",\n      description:\n        \"Learn more about our creative agency from the inside out. We take pride in offering the best services to our clients and partners.\",\n      title: \"We are a creative agency\",\n    }\n  );\n</script>\n","category":"HeaderSection","path":"HeaderSection/BlockHeaderSection11.vue","components":["container"]},{"name":"Header Section 12","fileName":"BlockHeaderSection12.vue","file":"<template>\n  <UiContainer class=\"py-16 lg:py-24\">\n    <div class=\"flex flex-col justify-between gap-5 md:flex-row md:items-end\">\n      <div class=\"basis-1/2\">\n        <slot name=\"headline\">\n          <p class=\"font-semibold text-primary\">{{ headline }}</p>\n        </slot>\n        <slot name=\"title\">\n          <h2 class=\"mt-2 text-4xl font-bold text-balance md:mt-3 md:text-5xl\">\n            {{ title }}\n          </h2>\n        </slot>\n      </div>\n      <slot name=\"description\">\n        <p\n          class=\"max-w-[700px] basis-1/2 text-lg text-balance text-muted-foreground md:text-right lg:text-xl\"\n        >\n          {{ description }}\n        </p>\n      </slot>\n    </div>\n    <div class=\"mt-8 flex w-full flex-col-reverse gap-3 sm:w-auto sm:flex-row\">\n      <UiButton variant=\"outline\">Contact sales</UiButton>\n      <UiButton>Get started</UiButton>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  withDefaults(\n    defineProps<{\n      headline?: string;\n      description?: string;\n      title?: string;\n    }>(),\n    {\n      headline: \"About us\",\n      description:\n        \"Learn more about our creative agency from the inside out. We take pride in offering the best services to our clients and partners.\",\n      title: \"We are a creative agency\",\n    }\n  );\n</script>\n","category":"HeaderSection","path":"HeaderSection/BlockHeaderSection12.vue","components":["button","container"]},{"name":"Header Section 13","fileName":"BlockHeaderSection13.vue","file":"<template>\n  <UiContainer class=\"py-16 lg:py-24\">\n    <div class=\"flex flex-col justify-between gap-5 md:flex-row md:items-end\">\n      <div class=\"basis-1/2\">\n        <slot name=\"headline\">\n          <p class=\"font-semibold text-primary\">{{ headline }}</p>\n        </slot>\n        <slot name=\"title\">\n          <h2 class=\"mt-2 text-4xl font-bold text-balance md:mt-3 md:text-5xl\">\n            {{ title }}\n          </h2>\n        </slot>\n      </div>\n      <slot name=\"description\">\n        <p\n          class=\"max-w-[700px] basis-1/2 text-lg text-balance text-muted-foreground md:text-right lg:text-xl\"\n        >\n          {{ description }}\n        </p>\n      </slot>\n    </div>\n    <div class=\"mt-8 flex w-full flex-col-reverse gap-3 sm:w-auto sm:flex-row\">\n      <UiTabs class=\"w-full md:w-[450px]\" default-value=\"monthly\">\n        <UiTabsList class=\"grid h-auto w-full grid-cols-2\">\n          <UiTabsTrigger class=\"h-10\" value=\"monthly\">Monthly billing</UiTabsTrigger>\n          <UiTabsTrigger class=\"h-10\" value=\"annual\"\n            >Annual Billing\n            <UiBadge class=\"ml-2 hidden lg:block\" variant=\"outline\"\n              >Save 20%</UiBadge\n            ></UiTabsTrigger\n          >\n        </UiTabsList>\n      </UiTabs>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  withDefaults(\n    defineProps<{\n      headline?: string;\n      description?: string;\n      title?: string;\n    }>(),\n    {\n      headline: \"Our Pricing\",\n      description: \"Choose the plan that works for you. All plans include a 14-day free trial.\",\n      title: \"Simple Pricing\",\n    }\n  );\n</script>\n","category":"HeaderSection","path":"HeaderSection/BlockHeaderSection13.vue","components":["badge","container","tabs","tabslist","tabstrigger"]},{"name":"Header Section 14","fileName":"BlockHeaderSection14.vue","file":"<template>\n  <UiContainer class=\"py-16 lg:py-24\">\n    <div class=\"flex flex-col justify-between gap-5 md:flex-row md:items-end\">\n      <div class=\"basis-1/2\">\n        <slot name=\"headline\">\n          <p class=\"font-semibold text-primary\">{{ headline }}</p>\n        </slot>\n        <slot name=\"title\">\n          <h2 class=\"mt-2 text-4xl font-bold text-balance md:mt-3 md:text-5xl\">\n            {{ title }}\n          </h2>\n        </slot>\n      </div>\n      <slot name=\"description\">\n        <p\n          class=\"max-w-[700px] basis-1/2 text-lg text-balance text-muted-foreground md:text-right lg:text-xl\"\n        >\n          {{ description }}\n        </p>\n      </slot>\n    </div>\n    <div class=\"mt-8 flex w-full flex-col-reverse gap-3 sm:w-auto sm:flex-row\">\n      <div class=\"md:w-[480px]\">\n        <form class=\"flex flex-col gap-3 lg:flex-row lg:items-center\">\n          <div class=\"w-full lg:w-[335px]\">\n            <UiVeeInput required placeholder=\"Enter your email\" aria-label=\"Enter your email\" />\n          </div>\n          <p class=\"my-2 text-sm text-muted-foreground lg:hidden\">\n            We care about your data in our privacy policy.\n          </p>\n          <div>\n            <UiButton class=\"w-full whitespace-nowrap lg:w-auto\" type=\"submit\"\n              >Get started</UiButton\n            >\n          </div>\n        </form>\n        <p class=\"mt-3 hidden text-left text-sm text-muted-foreground lg:block\">\n          We care about your data in our privacy policy.\n        </p>\n      </div>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  withDefaults(\n    defineProps<{\n      headline?: string;\n      description?: string;\n      title?: string;\n    }>(),\n    {\n      headline: \"The Company\",\n      description:\n        \"We are a team of professionals who are dedicated to providing the best services to our clients.\",\n      title: \"About Us\",\n    }\n  );\n</script>\n","category":"HeaderSection","path":"HeaderSection/BlockHeaderSection14.vue","components":["button","container","veeinput"]},{"name":"Header Section 15","fileName":"BlockHeaderSection15.vue","file":"<template>\n  <UiContainer class=\"py-16 lg:py-24\">\n    <div class=\"flex flex-col justify-between gap-5 md:flex-row md:items-end\">\n      <div class=\"basis-1/2\">\n        <slot name=\"headline\">\n          <p class=\"font-semibold text-primary\">{{ headline }}</p>\n        </slot>\n        <slot name=\"title\">\n          <h2 class=\"mt-2 text-4xl font-bold text-balance md:mt-3 md:text-5xl\">\n            {{ title }}\n          </h2>\n        </slot>\n      </div>\n      <slot name=\"description\">\n        <p\n          class=\"max-w-[700px] basis-1/2 text-lg text-balance text-muted-foreground md:text-right lg:text-xl\"\n        >\n          {{ description }}\n        </p>\n      </slot>\n    </div>\n    <div class=\"mt-8 flex w-full flex-col-reverse gap-3 sm:w-auto sm:flex-row\">\n      <div class=\"w-full md:w-[380px]\">\n        <form class=\"flex flex-col gap-3 lg:flex-row lg:items-center\">\n          <div class=\"w-full\">\n            <UiVeeInput\n              icon=\"lucide:search\"\n              required\n              placeholder=\"Search...\"\n              aria-label=\"Search...\"\n            />\n          </div>\n        </form>\n      </div>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  withDefaults(\n    defineProps<{\n      headline?: string;\n      description?: string;\n      title?: string;\n    }>(),\n    {\n      headline: \"The Company\",\n      description:\n        \"We are a team of professionals who are dedicated to providing the best services to our clients.\",\n      title: \"About Us\",\n    }\n  );\n</script>\n","category":"HeaderSection","path":"HeaderSection/BlockHeaderSection15.vue","components":["container","veeinput"]},{"name":"Header Section 2","fileName":"BlockHeaderSection2.vue","file":"<template>\n  <UiContainer class=\"py-16 text-center lg:py-24\">\n    <slot name=\"headline\">\n      <p class=\"font-semibold text-primary\">{{ headline }}</p>\n    </slot>\n    <slot name=\"title\">\n      <h2 class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:mb-6 lg:text-5xl\">{{ title }}</h2>\n    </slot>\n    <slot name=\"description\">\n      <p class=\"mx-auto max-w-[800px] text-lg text-muted-foreground lg:text-xl\">\n        {{ description }}\n      </p>\n    </slot>\n    <div class=\"mt-5 flex w-full flex-col-reverse justify-center gap-3 md:w-auto md:flex-row\">\n      <slot>\n        <UiButton variant=\"outline\">Contact sales</UiButton>\n        <UiButton>Get started</UiButton>\n      </slot>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  withDefaults(\n    defineProps<{\n      headline?: string;\n      description?: string;\n      title?: string;\n    }>(),\n    {\n      headline: \"About us\",\n      description:\n        \"Learn more about our creative agency from the inside out. We take pride in offering the best services to our clients and partners.\",\n      title: \"We are a creative agency\",\n    }\n  );\n</script>\n","category":"HeaderSection","path":"HeaderSection/BlockHeaderSection2.vue","components":["button","container"]},{"name":"Header Section 3","fileName":"BlockHeaderSection3.vue","file":"<template>\n  <UiContainer class=\"py-16 text-center lg:py-24\">\n    <slot name=\"headline\">\n      <p class=\"font-semibold text-primary\">{{ headline }}</p>\n    </slot>\n    <slot name=\"title\">\n      <h2 class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:mb-6 lg:text-5xl\">{{ title }}</h2>\n    </slot>\n    <slot name=\"description\">\n      <p class=\"mx-auto max-w-[800px] text-lg text-muted-foreground lg:text-xl\">\n        {{ description }}\n      </p>\n    </slot>\n    <div class=\"mt-5 flex w-full flex-col-reverse justify-center gap-3 md:w-auto md:flex-row\">\n      <UiTabs class=\"mx-auto mt-5 w-full md:w-[450px] lg:mt-7\" default-value=\"monthly\">\n        <UiTabsList class=\"grid h-auto w-full grid-cols-2\">\n          <UiTabsTrigger class=\"h-10\" value=\"monthly\">Monthly billing</UiTabsTrigger>\n          <UiTabsTrigger class=\"h-10\" value=\"annual\"\n            >Annual Billing\n            <UiBadge class=\"ml-2 hidden lg:block\" variant=\"outline\"\n              >Save 20%</UiBadge\n            ></UiTabsTrigger\n          >\n        </UiTabsList>\n      </UiTabs>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  withDefaults(\n    defineProps<{\n      headline?: string;\n      description?: string;\n      title?: string;\n    }>(),\n    {\n      headline: \"Pricing\",\n      description:\n        \"We offer simple and transparent pricing. The price you see is the price you pay. No hidden fees. Cancel at any time.\",\n      title: \"Simple, transparent pricing\",\n    }\n  );\n</script>\n","category":"HeaderSection","path":"HeaderSection/BlockHeaderSection3.vue","components":["badge","container","tabs","tabslist","tabstrigger"]},{"name":"Header Section 4","fileName":"BlockHeaderSection4.vue","file":"<template>\n  <UiContainer class=\"py-16 text-center lg:py-24\">\n    <slot name=\"headline\">\n      <p class=\"font-semibold text-primary\">{{ headline }}</p>\n    </slot>\n    <slot name=\"title\">\n      <h2 class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:mb-6 lg:text-5xl\">{{ title }}</h2>\n    </slot>\n    <slot name=\"description\">\n      <p class=\"mx-auto max-w-[800px] text-lg text-muted-foreground lg:text-xl\">\n        {{ description }}\n      </p>\n    </slot>\n    <div class=\"mt-5 flex w-full flex-col-reverse justify-center gap-3 md:w-auto md:flex-row\">\n      <slot>\n        <div class=\"md:w-[480px]\">\n          <form class=\"mt-8 flex flex-col gap-3 lg:mt-12 lg:flex-row lg:items-center\">\n            <div class=\"w-full lg:w-[335px]\">\n              <UiVeeInput required placeholder=\"Enter your email\" aria-label=\"Enter your email\" />\n            </div>\n            <p class=\"my-2 text-left text-sm text-muted-foreground md:hidden\">\n              We care about your data in our privacy policy.\n            </p>\n            <div>\n              <UiButton class=\"w-full whitespace-nowrap lg:w-auto\" type=\"submit\"\n                >Get started</UiButton\n              >\n            </div>\n          </form>\n          <p class=\"mt-3 hidden text-left text-sm text-muted-foreground md:block\">\n            We care about your data in our privacy policy.\n          </p>\n        </div>\n      </slot>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  withDefaults(\n    defineProps<{\n      headline?: string;\n      description?: string;\n      title?: string;\n    }>(),\n    {\n      headline: \"About us\",\n      description:\n        \"Learn more about our creative agency from the inside out. We take pride in offering the best services to our clients and partners.\",\n      title: \"We are a creative agency\",\n    }\n  );\n</script>\n","category":"HeaderSection","path":"HeaderSection/BlockHeaderSection4.vue","components":["button","container","veeinput"]},{"name":"Header Section 5","fileName":"BlockHeaderSection5.vue","file":"<template>\n  <UiContainer class=\"py-16 text-center lg:py-24\">\n    <slot name=\"headline\">\n      <p class=\"font-semibold text-primary\">{{ headline }}</p>\n    </slot>\n    <slot name=\"title\">\n      <h2 class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:mb-6 lg:text-5xl\">{{ title }}</h2>\n    </slot>\n    <slot name=\"description\">\n      <p class=\"mx-auto max-w-[800px] text-lg text-muted-foreground lg:text-xl\">\n        {{ description }}\n      </p>\n    </slot>\n    <div class=\"mt-5 flex w-full flex-col-reverse justify-center gap-3 md:w-auto md:flex-row\">\n      <slot>\n        <div class=\"lg:w-[380px]\">\n          <form class=\"mt-8 flex flex-col gap-3 lg:mt-12 lg:flex-row lg:items-center\">\n            <div class=\"w-full\">\n              <UiVeeInput\n                icon=\"lucide:search\"\n                required\n                placeholder=\"Search...\"\n                aria-label=\"Search...\"\n              />\n            </div>\n          </form>\n        </div>\n      </slot>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  withDefaults(\n    defineProps<{\n      headline?: string;\n      description?: string;\n      title?: string;\n    }>(),\n    {\n      headline: \"Resources\",\n      description:\n        \"We have a lot of resources for you. Check them out and let us know if you need help.\",\n      title: \"We are a creative agency\",\n    }\n  );\n</script>\n","category":"HeaderSection","path":"HeaderSection/BlockHeaderSection5.vue","components":["container","veeinput"]},{"name":"Header Section 6","fileName":"BlockHeaderSection6.vue","file":"<template>\n  <UiContainer class=\"py-16 lg:py-24\">\n    <slot name=\"headline\">\n      <p class=\"font-semibold text-primary\">{{ headline }}</p>\n    </slot>\n    <slot name=\"title\">\n      <h2 class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:mb-6 lg:text-5xl\">{{ title }}</h2>\n    </slot>\n    <slot name=\"description\">\n      <p class=\"max-w-[800px] text-lg text-muted-foreground lg:text-xl\">\n        {{ description }}\n      </p>\n    </slot>\n    <div class=\"mt-5 flex w-full flex-col-reverse gap-3 lg:w-auto lg:flex-row\">\n      <slot />\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  withDefaults(\n    defineProps<{\n      headline?: string;\n      description?: string;\n      title?: string;\n    }>(),\n    {\n      headline: \"About us\",\n      description:\n        \"Learn more about our creative agency from the inside out. We take pride in offering the best services to our clients and partners.\",\n      title: \"We are a creative agency\",\n    }\n  );\n</script>\n","category":"HeaderSection","path":"HeaderSection/BlockHeaderSection6.vue","components":["container"]},{"name":"Header Section 7","fileName":"BlockHeaderSection7.vue","file":"<template>\n  <UiContainer class=\"py-16 lg:py-24\">\n    <slot name=\"headline\">\n      <p class=\"font-semibold text-primary\">{{ headline }}</p>\n    </slot>\n    <slot name=\"title\">\n      <h2 class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:mb-6 lg:text-5xl\">{{ title }}</h2>\n    </slot>\n    <slot name=\"description\">\n      <p class=\"max-w-[800px] text-lg text-muted-foreground lg:text-xl\">\n        {{ description }}\n      </p>\n    </slot>\n    <div class=\"mt-5 flex w-full flex-col-reverse gap-3 md:w-auto md:flex-row\">\n      <slot>\n        <UiButton size=\"lg\" class=\"mt-2 md:mt-5\" variant=\"outline\">Contact sales</UiButton>\n        <UiButton size=\"lg\" class=\"mt-2 md:mt-5\">Get started</UiButton>\n      </slot>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  withDefaults(\n    defineProps<{\n      headline?: string;\n      description?: string;\n      title?: string;\n    }>(),\n    {\n      headline: \"About us\",\n      description:\n        \"Learn more about our creative agency from the inside out. We take pride in offering the best services to our clients and partners.\",\n      title: \"We are a creative agency\",\n    }\n  );\n</script>\n","category":"HeaderSection","path":"HeaderSection/BlockHeaderSection7.vue","components":["button","container"]},{"name":"Header Section 8","fileName":"BlockHeaderSection8.vue","file":"<template>\n  <UiContainer class=\"py-16 lg:py-24\">\n    <slot name=\"headline\">\n      <p class=\"font-semibold text-primary\">{{ headline }}</p>\n    </slot>\n    <slot name=\"title\">\n      <h2 class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:mb-6 lg:text-5xl\">{{ title }}</h2>\n    </slot>\n    <slot name=\"description\">\n      <p class=\"max-w-[800px] text-lg text-muted-foreground lg:text-xl\">\n        {{ description }}\n      </p>\n    </slot>\n    <div class=\"mt-5 flex w-full flex-col-reverse gap-3 md:w-auto md:flex-row\">\n      <slot>\n        <UiTabs class=\"mt-5 w-full md:mt-7 md:w-[450px]\" default-value=\"monthly\">\n          <UiTabsList class=\"grid h-auto w-full grid-cols-2\">\n            <UiTabsTrigger class=\"h-10\" value=\"monthly\">Monthly billing</UiTabsTrigger>\n            <UiTabsTrigger class=\"h-10\" value=\"annual\"\n              >Annual Billing\n              <UiBadge class=\"ml-2 hidden lg:block\" variant=\"outline\"\n                >Save 20%</UiBadge\n              ></UiTabsTrigger\n            >\n          </UiTabsList>\n        </UiTabs>\n      </slot>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  withDefaults(\n    defineProps<{\n      headline?: string;\n      description?: string;\n      title?: string;\n    }>(),\n    {\n      headline: \"Pricing\",\n      description: \"Simple pricing that scales with you. Choose a plan that works for you.\",\n      title: \"Simple pricing that scales with you\",\n    }\n  );\n</script>\n","category":"HeaderSection","path":"HeaderSection/BlockHeaderSection8.vue","components":["badge","container","tabs","tabslist","tabstrigger"]},{"name":"Header Section 9","fileName":"BlockHeaderSection9.vue","file":"<template>\n  <UiContainer class=\"py-16 lg:py-24\">\n    <slot name=\"headline\">\n      <p class=\"font-semibold text-primary\">{{ headline }}</p>\n    </slot>\n    <slot name=\"title\">\n      <h2 class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:mb-6 lg:text-5xl\">{{ title }}</h2>\n    </slot>\n    <slot name=\"description\">\n      <p class=\"max-w-[800px] text-lg text-muted-foreground lg:text-xl\">\n        {{ description }}\n      </p>\n    </slot>\n    <div class=\"mt-5 flex w-full flex-col-reverse gap-3 md:w-auto md:flex-row\">\n      <slot>\n        <div class=\"md:w-[480px]\">\n          <form class=\"mt-5 flex flex-col gap-3 lg:flex-row lg:items-center\">\n            <div class=\"w-full lg:w-[335px]\">\n              <UiVeeInput required placeholder=\"Enter your email\" aria-label=\"Enter your email\" />\n            </div>\n            <p class=\"my-2 text-sm text-muted-foreground lg:hidden\">\n              We care about your data in our privacy policy.\n            </p>\n            <div>\n              <UiButton class=\"w-full whitespace-nowrap lg:w-auto\" type=\"submit\"\n                >Get started</UiButton\n              >\n            </div>\n          </form>\n          <p class=\"mt-3 hidden text-left text-sm text-muted-foreground lg:block\">\n            We care about your data in our privacy policy.\n          </p>\n        </div>\n      </slot>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  withDefaults(\n    defineProps<{\n      headline?: string;\n      description?: string;\n      title?: string;\n    }>(),\n    {\n      headline: \"About us\",\n      description:\n        \"Learn more about our creative agency from the inside out. We take pride in offering the best services to our clients and partners.\",\n      title: \"We are a creative agency\",\n    }\n  );\n</script>\n","category":"HeaderSection","path":"HeaderSection/BlockHeaderSection9.vue","components":["button","container","veeinput"]},{"name":"Hero 1","fileName":"BlockHero1.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :variants=\"parentVariant\"\n    class=\"@container relative mx-auto flex w-full max-w-[1536px] flex-col gap-y-5 overflow-x-hidden px-5 py-10 sm:px-10 md:flex-row md:gap-10 md:px-0 md:py-0 lg:h-dvh\"\n  >\n    <div\n      class=\"flex h-full items-center justify-center md:w-2/3 @3xl:pl-10 @5xl:pl-16 @7xl:w-1/2 @7xl:pl-20\"\n    >\n      <div class=\"text-center md:text-left\">\n        <Motion as-child :variants=\"childVariant\">\n          <UiBadge\n            to=\"#\"\n            variant=\"outline\"\n            class=\"px-3 py-1.5 text-xs font-normal md:py-2 md:text-sm\"\n            >We're hiring! Join our remote team <Icon class=\"ml-3 size-4\" name=\"lucide:arrow-right\"\n          /></UiBadge>\n        </Motion>\n        <Motion\n          as=\"h1\"\n          :variants=\"childVariant\"\n          class=\"mt-7 mb-4 text-4xl font-bold md:text-5xl lg:mt-5 lg:mb-6 xl:text-6xl\"\n        >\n          People who care about your growth\n        </Motion>\n        <Motion as=\"p\" :variants=\"childVariant\" class=\"text-lg text-muted-foreground lg:text-xl\">\n          Powerful, self-serve product and growth analytics to help you convert, engage, and retain\n          more.\n        </Motion>\n        <form class=\"mt-8 flex flex-col gap-3 lg:mt-12 lg:flex-row lg:items-center\">\n          <Motion :variants=\"childVariant\" class=\"w-full lg:w-[50%]\">\n            <UiVeeInput\n              icon=\"lucide:mail\"\n              required\n              placeholder=\"Enter your email\"\n              aria-label=\"Enter your email\"\n            />\n          </Motion>\n          <Motion\n            as=\"p\"\n            :variants=\"childVariant\"\n            class=\"my-2 text-left text-sm text-muted-foreground md:hidden\"\n          >\n            We care about your data in our privacy policy.\n          </Motion>\n          <Motion :variants=\"childVariant\">\n            <UiButton class=\"w-full whitespace-nowrap lg:w-auto\" type=\"submit\"\n              >Get started</UiButton\n            >\n          </Motion>\n        </form>\n        <Motion\n          as=\"p\"\n          :variants=\"childVariant\"\n          class=\"mt-3 hidden text-sm text-muted-foreground md:block\"\n        >\n          We care about your data in our privacy policy.\n        </Motion>\n      </div>\n    </div>\n    <Motion\n      :variants=\"{\n        initial: { opacity: 0, x: isDesktop ? 50 : 0, y: isTablet || isMobile ? 30 : 0 },\n        animate: {\n          opacity: 1,\n          x: 0,\n          y: 0,\n          transition: {\n            type: 'keyframes',\n            duration: 0.6,\n            delay: isDesktop ? -0.1 : 0,\n          },\n        },\n      }\"\n      class=\"h-[350px] md:h-full md:w-1/3 xl:w-1/2\"\n    >\n      <img\n        class=\"h-full w-full object-cover\"\n        src=\"https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n        alt=\"Hero section one styles\"\n        loading=\"eager\"\n        width=\"700\"\n        height=\"800\"\n        :title=\"`${COMPANY_NAME} hero section one header`\"\n      />\n    </Motion>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { breakpointsTailwind } from \"@vueuse/core\";\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const bp = useBreakpoints(breakpointsTailwind);\n\n  const isTablet = bp.between(\"md\", \"lg\");\n  const isDesktop = bp.greater(\"lg\");\n  const isMobile = bp.smallerOrEqual(\"md\");\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n</script>\n","category":"Hero","path":"Hero/BlockHero1.vue","components":["badge","button","veeinput"]},{"name":"Hero 10","fileName":"BlockHero10.vue","file":"<template>\n  <div class=\"relative min-h-screen overflow-hidden bg-muted/30\">\n    <Motion\n      initial=\"initial\"\n      while-in-view=\"animate\"\n      :in-view-options=\"{ once: true }\"\n      as-child\n      :variants=\"parentVariant\"\n    >\n      <UiContainer class=\"grid min-h-screen items-center gap-8 py-16 lg:grid-cols-2 lg:gap-16\">\n        <Motion as-child :variants=\"contentVariant\">\n          <div>\n            <h1 class=\"mb-6 text-5xl font-bold lg:text-6xl xl:text-7xl\">\n              Ship products faster than ever\n            </h1>\n            <p class=\"mb-8 text-xl text-muted-foreground\">\n              Join 10,000+ teams building the future with our platform. From startups to\n              enterprises, we've got you covered.\n            </p>\n            <form class=\"mb-8 flex flex-col gap-3 sm:flex-row\">\n              <UiVeeInput\n                class=\"flex-1\"\n                placeholder=\"Enter your email\"\n                aria-label=\"Enter your email\"\n                required\n              />\n              <UiButton size=\"lg\" type=\"submit\">Get Early Access</UiButton>\n            </form>\n            <div class=\"flex flex-wrap items-center gap-6\">\n              <div class=\"flex items-center gap-2\">\n                <Icon class=\"size-5 text-primary\" name=\"lucide:shield-check\" />\n                <span class=\"text-sm text-muted-foreground\">SOC 2 Certified</span>\n              </div>\n              <div class=\"flex items-center gap-2\">\n                <Icon class=\"size-5 text-primary\" name=\"lucide:lock\" />\n                <span class=\"text-sm text-muted-foreground\">256-bit Encryption</span>\n              </div>\n              <div class=\"flex items-center gap-2\">\n                <Icon class=\"size-5 text-primary\" name=\"lucide:award\" />\n                <span class=\"text-sm text-muted-foreground\">GDPR Compliant</span>\n              </div>\n            </div>\n          </div>\n        </Motion>\n\n        <Motion as-child :variants=\"imageVariant\">\n          <div class=\"relative\">\n            <div\n              class=\"absolute -inset-4 rounded-2xl bg-linear-to-r from-primary/20 to-primary/10 blur-2xl\"\n            />\n            <div class=\"relative overflow-hidden rounded-2xl border bg-background shadow-2xl\">\n              <img\n                src=\"https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2015&auto=format&fit=crop\"\n                alt=\"Product showcase\"\n                class=\"h-full w-full object-cover\"\n                loading=\"eager\"\n                width=\"800\"\n                height=\"600\"\n                :title=\"`${COMPANY_NAME} product showcase`\"\n              />\n            </div>\n          </div>\n        </Motion>\n      </UiContainer>\n    </Motion>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import type { MotionProps } from \"motion-v\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n      },\n    },\n  };\n\n  const contentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, x: -50 },\n    animate: {\n      opacity: 1,\n      x: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const imageVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, scale: 0.9 },\n    animate: {\n      opacity: 1,\n      scale: 1,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n        delay: 0.2,\n      },\n    },\n  };\n</script>\n","category":"Hero","path":"Hero/BlockHero10.vue","components":["button","container","veeinput"]},{"name":"Hero 11","fileName":"BlockHero11.vue","file":"<template>\n  <div\n    class=\"relative min-h-screen overflow-hidden bg-background text-foreground [--color-primary:#7c3aed] [--primary:#7c3aed] [--radius:8px] [--ring:#7c3aed]\"\n  >\n    <!-- Subtle radial gradient background -->\n    <div\n      class=\"pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_80%_55%_at_50%_-5%,color-mix(in_srgb,#7c3aed_14%,transparent),transparent_72%)]\"\n    />\n\n    <Motion\n      initial=\"initial\"\n      while-in-view=\"animate\"\n      :in-view-options=\"{ once: true }\"\n      as-child\n      :variants=\"parentVariant\"\n    >\n      <UiContainer\n        class=\"relative z-10 flex min-h-screen flex-col items-center justify-center py-20 text-center\"\n      >\n        <!-- Badge / pill label -->\n        <Motion as-child :variants=\"childVariant\">\n          <UiBadge\n            variant=\"outline\"\n            class=\"mb-6 inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-medium\"\n          >\n            <span class=\"relative flex size-2\">\n              <span\n                class=\"absolute inline-flex size-full animate-ping rounded-full bg-[#7c3aed] opacity-75\"\n              />\n              <span class=\"relative inline-flex size-2 rounded-full bg-[#7c3aed]\" />\n            </span>\n            Now in public beta\n          </UiBadge>\n        </Motion>\n\n        <!-- Headline -->\n        <Motion as-child :variants=\"childVariant\">\n          <h1\n            class=\"mx-auto mb-5 max-w-4xl text-4xl leading-tight font-bold tracking-tight lg:text-5xl xl:text-6xl xl:leading-[1.1]\"\n          >\n            Ship products your users will\n            <span\n              class=\"bg-gradient-to-r from-[#7c3aed] via-[#a855f7] to-[#ec4899] bg-clip-text text-transparent\"\n              >absolutely love</span\n            >\n          </h1>\n        </Motion>\n\n        <!-- Supporting paragraph -->\n        <Motion as-child :variants=\"childVariant\">\n          <p class=\"mx-auto max-w-2xl text-lg text-muted-foreground lg:text-xl\">\n            The all-in-one platform for modern product teams. Design, build, and iterate faster than\n            ever — from first idea to production in days, not months.\n          </p>\n        </Motion>\n\n        <!-- CTA buttons -->\n        <Motion as-child :variants=\"childVariant\">\n          <div class=\"mt-10 flex flex-col items-center gap-3 sm:flex-row sm:justify-center\">\n            <UiButton size=\"lg\" class=\"min-w-36\">\n              <Icon name=\"heroicons:rocket-launch\" />\n              Get Started Free\n            </UiButton>\n            <UiButton size=\"lg\" variant=\"outline\" class=\"min-w-36\">\n              <Icon name=\"heroicons:play-circle\" />\n              See a Demo\n            </UiButton>\n          </div>\n        </Motion>\n\n        <!-- Dashboard mockup placeholder -->\n        <Motion as-child :variants=\"mockupVariant\">\n          <div\n            class=\"mx-auto mt-16 w-full max-w-5xl overflow-hidden rounded-2xl border border-border/60 bg-card shadow-2xl ring-1 ring-black/5 dark:ring-white/5\"\n          >\n            <!-- Browser chrome bar -->\n            <div class=\"flex items-center gap-2 border-b border-border/60 bg-muted/50 px-4 py-3\">\n              <span class=\"size-3 rounded-full bg-red-400/80\" />\n              <span class=\"size-3 rounded-full bg-yellow-400/80\" />\n              <span class=\"size-3 rounded-full bg-green-400/80\" />\n              <div class=\"ml-4 h-5 max-w-xs flex-1 rounded-md bg-muted\" />\n            </div>\n\n            <!-- Mockup body: sidebar + main -->\n            <div class=\"grid grid-cols-4 divide-x divide-border/40\">\n              <!-- Sidebar skeleton -->\n              <div class=\"col-span-1 hidden flex-col gap-2 bg-muted/20 p-4 sm:flex\">\n                <div class=\"mb-3 h-7 w-24 rounded-md bg-[#7c3aed]/20\" />\n                <div class=\"h-4 w-full rounded bg-[#7c3aed]/25\" />\n                <div class=\"h-4 w-4/5 rounded bg-muted\" />\n                <div class=\"h-4 w-full rounded bg-muted\" />\n                <div class=\"h-4 w-3/5 rounded bg-muted\" />\n                <div class=\"mt-4 h-px w-full bg-border/60\" />\n                <div class=\"mt-2 h-4 w-full rounded bg-muted/60\" />\n                <div class=\"h-4 w-4/5 rounded bg-muted/60\" />\n                <div class=\"h-4 w-full rounded bg-muted/60\" />\n              </div>\n\n              <!-- Main content skeleton -->\n              <div class=\"col-span-4 flex flex-col gap-4 p-5 sm:col-span-3\">\n                <!-- KPI cards row -->\n                <div class=\"grid grid-cols-3 gap-3\">\n                  <div class=\"rounded-xl border border-border/60 bg-background p-3 shadow-sm\">\n                    <div class=\"mb-2 h-3 w-14 rounded bg-muted\" />\n                    <div class=\"h-6 w-20 rounded bg-[#7c3aed]/20\" />\n                    <div class=\"mt-2 h-2 w-10 rounded bg-green-400/50\" />\n                  </div>\n                  <div class=\"rounded-xl border border-border/60 bg-background p-3 shadow-sm\">\n                    <div class=\"mb-2 h-3 w-14 rounded bg-muted\" />\n                    <div class=\"h-6 w-20 rounded bg-violet-400/20\" />\n                    <div class=\"mt-2 h-2 w-10 rounded bg-violet-400/50\" />\n                  </div>\n                  <div class=\"rounded-xl border border-border/60 bg-background p-3 shadow-sm\">\n                    <div class=\"mb-2 h-3 w-14 rounded bg-muted\" />\n                    <div class=\"h-6 w-20 rounded bg-pink-400/20\" />\n                    <div class=\"mt-2 h-2 w-10 rounded bg-pink-400/50\" />\n                  </div>\n                </div>\n\n                <!-- Bar chart placeholder -->\n                <div class=\"rounded-xl border border-border/60 bg-background p-4 shadow-sm\">\n                  <div class=\"mb-4 flex items-center justify-between\">\n                    <div class=\"h-4 w-28 rounded bg-muted\" />\n                    <div class=\"h-4 w-16 rounded bg-muted/60\" />\n                  </div>\n                  <div class=\"flex h-28 items-end gap-1.5\">\n                    <div class=\"flex-1 rounded-t-sm bg-[#7c3aed]/25\" style=\"height: 45%\" />\n                    <div class=\"flex-1 rounded-t-sm bg-[#7c3aed]/35\" style=\"height: 65%\" />\n                    <div class=\"flex-1 rounded-t-sm bg-[#7c3aed]/40\" style=\"height: 50%\" />\n                    <div class=\"flex-1 rounded-t-sm bg-[#7c3aed]/50\" style=\"height: 80%\" />\n                    <div class=\"flex-1 rounded-t-sm bg-[#7c3aed]/60\" style=\"height: 60%\" />\n                    <div class=\"flex-1 rounded-t-sm bg-[#7c3aed]/70\" style=\"height: 90%\" />\n                    <div class=\"flex-1 rounded-t-sm bg-[#7c3aed]\" style=\"height: 75%\" />\n                    <div class=\"flex-1 rounded-t-sm bg-[#7c3aed]/80\" style=\"height: 85%\" />\n                    <div class=\"flex-1 rounded-t-sm bg-[#7c3aed]/60\" style=\"height: 55%\" />\n                    <div class=\"flex-1 rounded-t-sm bg-[#7c3aed]/45\" style=\"height: 70%\" />\n                    <div class=\"flex-1 rounded-t-sm bg-[#7c3aed]/55\" style=\"height: 95%\" />\n                    <div class=\"flex-1 rounded-t-sm bg-[#7c3aed]/35\" style=\"height: 65%\" />\n                  </div>\n                </div>\n\n                <!-- List rows placeholder -->\n                <div class=\"rounded-xl border border-border/60 bg-background p-4 shadow-sm\">\n                  <div class=\"mb-3 h-4 w-24 rounded bg-muted\" />\n                  <div class=\"flex flex-col gap-2.5\">\n                    <div class=\"flex items-center gap-3\">\n                      <div class=\"size-6 rounded-full bg-[#7c3aed]/20\" />\n                      <div class=\"h-3 flex-1 rounded bg-muted\" />\n                      <div class=\"h-3 w-12 rounded bg-green-400/40\" />\n                    </div>\n                    <div class=\"flex items-center gap-3\">\n                      <div class=\"size-6 rounded-full bg-violet-400/20\" />\n                      <div class=\"h-3 flex-1 rounded bg-muted\" />\n                      <div class=\"h-3 w-12 rounded bg-muted/60\" />\n                    </div>\n                    <div class=\"flex items-center gap-3\">\n                      <div class=\"size-6 rounded-full bg-pink-400/20\" />\n                      <div class=\"h-3 flex-1 rounded bg-muted\" />\n                      <div class=\"h-3 w-12 rounded bg-yellow-400/40\" />\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </Motion>\n      </UiContainer>\n    </Motion>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.12),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 24 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 22,\n      },\n    },\n  };\n\n  const mockupVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 48, scale: 0.97 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      scale: 1,\n      transition: {\n        type: \"spring\",\n        stiffness: 180,\n        damping: 24,\n        delay: 0.55,\n      },\n    },\n  };\n</script>\n","category":"Hero","path":"Hero/BlockHero11.vue","components":["badge","button","container"]},{"name":"Hero 2","fileName":"BlockHero2.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :variants=\"parentVariant\"\n    class=\"@container relative mx-auto flex w-full max-w-[1536px] flex-col gap-y-5 overflow-x-hidden px-5 py-10 sm:px-10 md:flex-row md:gap-10 md:px-0 md:py-0 lg:h-dvh\"\n  >\n    <div\n      class=\"flex h-full items-center justify-center md:w-2/3 @3xl:pl-10 @5xl:pl-16 @7xl:w-1/2 @7xl:pl-20\"\n    >\n      <div class=\"text-center md:text-left\">\n        <Motion as-child :variants=\"childVariant\">\n          <UiBadge\n            to=\"#\"\n            variant=\"secondary\"\n            class=\"px-3 py-1.5 text-xs font-normal md:text-sm lg:py-2\"\n            >We're hiring! Join our remote team <Icon class=\"ml-3 size-4\" name=\"lucide:arrow-right\"\n          /></UiBadge>\n        </Motion>\n        <Motion\n          as=\"h1\"\n          :variants=\"childVariant\"\n          class=\"mt-7 mb-4 text-4xl font-bold md:text-5xl lg:mt-5 lg:mb-6 xl:text-6xl\"\n        >\n          People who care about your growth\n        </Motion>\n        <Motion as=\"p\" :variants=\"childVariant\" class=\"text-lg text-muted-foreground lg:text-xl\">\n          Powerful, self-serve product and growth analytics to help you convert, engage, and retain\n          more.\n        </Motion>\n        <div class=\"mt-8 grid grid-cols-1 gap-3 md:flex lg:mt-12\">\n          <Motion :variants=\"childVariant\" class=\"w-full *:w-full md:w-auto\">\n            <UiButton size=\"lg\" variant=\"outline\">\n              <Icon name=\"lucide:play-circle\" /> Demo\n            </UiButton>\n          </Motion>\n          <Motion :variants=\"childVariant\" class=\"w-full *:w-full md:w-auto\">\n            <UiButton size=\"lg\">Sign up</UiButton>\n          </Motion>\n        </div>\n        <Motion as=\"p\" :variants=\"childVariant\" class=\"mt-5 text-sm text-muted-foreground\">\n          We care about your data in our privacy policy.\n        </Motion>\n      </div>\n    </div>\n    <Motion\n      :variants=\"{\n        initial: { opacity: 0 },\n        animate: {\n          opacity: 1,\n          transition: {\n            type: 'keyframes',\n            duration: 0.6,\n            delay: isDesktop ? -0.1 : 0,\n          },\n        },\n      }\"\n      class=\"h-[350px] md:h-full md:w-1/3 xl:w-1/2\"\n    >\n      <img\n        class=\"h-full w-full rounded-lg object-cover md:rounded-none lg:[clip-path:polygon(15%_0,100%_0,100%_100%,0_100%)]\"\n        src=\"https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n        alt=\"Hero section two styles\"\n        loading=\"eager\"\n        width=\"700\"\n        height=\"800\"\n        :title=\"`${COMPANY_NAME} hero section two header`\"\n      />\n    </Motion>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { breakpointsTailwind } from \"@vueuse/core\";\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const bp = useBreakpoints(breakpointsTailwind);\n\n  const isDesktop = bp.greater(\"lg\");\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n</script>\n","category":"Hero","path":"Hero/BlockHero2.vue","components":["badge","button"]},{"name":"Hero 3","fileName":"BlockHero3.vue","file":"<template>\n  <Motion\n    while-in-view=\"animate\"\n    initial=\"initial\"\n    :in-view-options=\"{ once: true }\"\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: { when: 'beforeChildren', delayChildren: stagger(0.1) },\n      },\n    }\"\n    class=\"mx-auto flex max-w-[1536px] flex-col gap-y-5 overflow-hidden px-5 py-10 md:flex-row md:gap-10 md:px-0 md:py-0 lg:h-screen\"\n  >\n    <div class=\"flex h-full items-center justify-center md:w-2/3 md:pl-10 lg:pl-16 xl:w-1/2\">\n      <div>\n        <Motion\n          as=\"h1\"\n          :variants=\"textVariants\"\n          class=\"mb-4 text-4xl font-bold md:text-5xl lg:mt-5 lg:mb-6 xl:text-6xl\"\n        >\n          People who care about your growth\n        </Motion>\n        <Motion as=\"p\" :variants=\"textVariants\" class=\"text-lg text-muted-foreground lg:text-xl\">\n          Powerful, self-serve product and growth analytics to help you convert, engage, and retain\n          more.\n        </Motion>\n        <form class=\"mt-8 flex flex-col gap-3 lg:mt-12 lg:flex-row lg:items-center\">\n          <Motion :variants=\"textVariants\" class=\"w-full lg:w-[50%]\">\n            <UiVeeInput required placeholder=\"Enter your email\" aria-label=\"Enter your email\" />\n          </Motion>\n          <Motion\n            as=\"p\"\n            :variants=\"textVariants\"\n            class=\"my-2 text-sm text-muted-foreground lg:hidden\"\n          >\n            We care about your data in our privacy policy.\n          </Motion>\n          <Motion :variants=\"textVariants\" class=\"w-full lg:w-auto\">\n            <UiButton class=\"w-full whitespace-nowrap lg:w-auto\" type=\"submit\"\n              >Get started</UiButton\n            >\n          </Motion>\n        </form>\n        <Motion\n          as=\"p\"\n          :variants=\"textVariants\"\n          class=\"mt-3 hidden text-sm text-muted-foreground lg:block\"\n        >\n          We care about your data in our privacy policy.\n        </Motion>\n\n        <div class=\"mt-10 flex items-center gap-7\">\n          <Motion :variants=\"textVariants\" class=\"flex items-center *:-mr-2 [&_img]:size-10\">\n            <UiAnimatedTooltip :items=\"people\" />\n          </Motion>\n\n          <div class=\"flex flex-col gap-1\">\n            <div>\n              <template v-for=\"s in 5\" :key=\"s\">\n                <Motion :variants=\"textVariants\" as-child>\n                  <Icon\n                    name=\"material-symbols:kid-star\"\n                    class=\"inline size-5 fill-yellow-400 text-yellow-400\"\n                  />\n                </Motion>\n              </template>\n            </div>\n            <Motion as=\"p\" :variants=\"textVariants\" class=\"text-sm text-muted-foreground\"\n              >from 1,000+ customers</Motion\n            >\n          </div>\n        </div>\n      </div>\n    </div>\n    <Motion\n      :variants=\"{\n        initial: { opacity: 0, x: 10 },\n        animate: {\n          opacity: 1,\n          x: 0,\n          transition: { type: 'keyframes', duration: 0.6, delay: 0.3 },\n        },\n      }\"\n      class=\"h-[350px] md:h-full md:w-1/3 xl:w-1/2\"\n    >\n      <img\n        class=\"h-full w-full rounded-tl-[60px] object-cover lg:rounded-tl-[160px]\"\n        src=\"https://images.unsplash.com/photo-1597773150796-e5c14ebecbf5?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n        alt=\"Hero section three styles\"\n        loading=\"eager\"\n        width=\"700\"\n        height=\"800\"\n        :title=\"`${COMPANY_NAME} hero section three header`\"\n      />\n    </Motion>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const people = [\n    {\n      title: \"Alice Johnson\",\n      description: \"Product Manager at TechCorp\",\n      image: \"https://i.pravatar.cc/150?img=11\",\n    },\n    {\n      title: \"Bob Smith\",\n      description: \"Lead Developer at DevSolutions\",\n      image: \"https://i.pravatar.cc/150?img=12\",\n    },\n    {\n      title: \"Catherine Lee\",\n      description: \"UX Designer at CreativeStudio\",\n      image: \"https://i.pravatar.cc/150?img=13\",\n    },\n    {\n      title: \"David Brown\",\n      description: \"Marketing Head at MarketMinds\",\n      image: \"https://i.pravatar.cc/150?img=14\",\n    },\n    {\n      title: \"Eva Green\",\n      description: \"Data Scientist at DataWorks\",\n      image: \"https://i.pravatar.cc/150?img=15\",\n    },\n  ];\n\n  const textVariants: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 10 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: { type: \"spring\", damping: 20 },\n    },\n  };\n</script>\n","category":"Hero","path":"Hero/BlockHero3.vue","components":["animatedtooltip","button","veeinput"]},{"name":"Hero 4","fileName":"BlockHero4.vue","file":"<template>\n  <Motion\n    as-child\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: { when: 'beforeChildren', delayChildren: stagger(0.1) },\n      },\n    }\"\n  >\n    <UiContainer\n      class=\"relative flex flex-col gap-y-5 py-10 lg:h-screen lg:flex-row lg:gap-10 lg:py-0\"\n    >\n      <div\n        class=\"absolute inset-0 h-full w-full bg-transparent bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] mask-[radial-gradient(#000,transparent_80%)] bg-size-[80px_80px]\"\n      />\n\n      <div class=\"relative z-10 flex h-full items-center justify-center lg:w-[768px]\">\n        <div>\n          <Motion\n            as=\"h1\"\n            :variants=\"textVariants\"\n            class=\"mb-4 text-4xl font-bold md:text-5xl lg:mt-5 lg:mb-6 xl:text-6xl\"\n          >\n            Customer service software for customer-first teams\n          </Motion>\n          <Motion\n            as=\"p\"\n            :variants=\"textVariants\"\n            class=\"max-w-[560px] text-lg text-muted-foreground lg:text-xl\"\n          >\n            The best customer service software for customer-first teams. Industry-leading email and\n            live chat support.\n          </Motion>\n          <Motion :variants=\"textVariants\" class=\"mt-8 grid grid-cols-1 gap-3 md:flex lg:mt-10\">\n            <UiButton size=\"lg\" variant=\"outline\">\n              <Icon name=\"lucide:play-circle\" /> Demo\n            </UiButton>\n            <UiButton size=\"lg\">Sign up</UiButton>\n          </Motion>\n          <Motion as=\"p\" :variants=\"textVariants\" class=\"mt-5 text-sm text-muted-foreground\">\n            We care about your data in our privacy policy.\n          </Motion>\n        </div>\n      </div>\n      <Motion\n        :variants=\"imageVariant\"\n        class=\"absolute inset-y-0 right-5 hidden h-full lg:block lg:w-[500px] xl:-right-20 xl:w-[800px]\"\n      >\n        <img\n          class=\"h-full w-full object-cover shadow xl:rounded-tr-[150px] xl:rounded-bl-[150px]\"\n          src=\"https://images.unsplash.com/photo-1597773150796-e5c14ebecbf5?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Hero section one styles\"\n          loading=\"eager\"\n          width=\"700\"\n          height=\"800\"\n          :title=\"`${COMPANY_NAME} hero section one header`\"\n        />\n      </Motion>\n\n      <Motion :variants=\"imageVariant\" class=\"z-10 h-[300px] lg:hidden\">\n        <img\n          class=\"h-full w-full rounded-tr-[40px] rounded-bl-[40px] object-cover\"\n          src=\"https://images.unsplash.com/photo-1597773150796-e5c14ebecbf5?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Hero section four styles\"\n          loading=\"eager\"\n          width=\"700\"\n          height=\"300\"\n          :title=\"`${COMPANY_NAME} hero section four header`\"\n        />\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const textVariants: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 15 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: { type: \"spring\", damping: 20 },\n    },\n  };\n\n  const imageVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, filter: \"blur(20px)\" },\n    animate: {\n      opacity: 1,\n      filter: \"blur(0px)\",\n      transition: { type: \"spring\", stiffness: 50, damping: 20, delay: 0.2 },\n    },\n  };\n</script>\n","category":"Hero","path":"Hero/BlockHero4.vue","components":["button","container"]},{"name":"Hero 5","fileName":"BlockHero5.vue","file":"<template>\n  <Motion\n    as-child\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: { when: 'beforeChildren', delayChildren: stagger(0.1) },\n      },\n    }\"\n  >\n    <UiContainer\n      class=\"relative flex flex-col gap-y-5 py-10 lg:h-screen lg:flex-row lg:gap-10 lg:py-0\"\n    >\n      <div\n        class=\"absolute inset-0 h-full w-full bg-transparent bg-[radial-gradient(circle,var(--color-border)_3px,transparent_1px)] mask-[radial-gradient(circle,#000,transparent_80%)] bg-size-[30px_30px]\"\n      />\n\n      <div class=\"relative z-10 flex h-full items-center justify-center md:w-[550px] lg:w-[768px]\">\n        <div>\n          <Motion\n            as=\"h1\"\n            :variants=\"textVariants\"\n            class=\"mb-4 text-4xl font-bold md:text-5xl lg:mt-5 lg:mb-6 xl:text-6xl\"\n          >\n            Customer service software for customer-first teams\n          </Motion>\n          <Motion\n            as=\"p\"\n            :variants=\"textVariants\"\n            class=\"max-w-[560px] text-lg text-muted-foreground lg:text-xl\"\n          >\n            The best customer service software for customer-first teams. Industry-leading email and\n            live chat support.\n          </Motion>\n          <form\n            class=\"mt-8 flex flex-col gap-3 md:w-[80%] lg:mt-12 lg:w-full lg:flex-row lg:items-center\"\n          >\n            <Motion :variants=\"textVariants\" class=\"w-full lg:w-[40%]\">\n              <UiVeeInput required placeholder=\"Enter your email\" aria-label=\"Enter your email\" />\n            </Motion>\n            <Motion\n              as=\"p\"\n              :variants=\"textVariants\"\n              class=\"my-2 text-sm text-muted-foreground lg:hidden\"\n            >\n              We care about your data in our privacy policy.\n            </Motion>\n            <Motion :variants=\"textVariants\" class=\"w-full lg:w-auto\">\n              <UiButton class=\"w-full whitespace-nowrap lg:w-auto\" type=\"submit\"\n                >Get started</UiButton\n              >\n            </Motion>\n          </form>\n          <Motion\n            as=\"p\"\n            :variants=\"textVariants\"\n            class=\"mt-3 hidden text-sm text-muted-foreground lg:block\"\n          >\n            We care about your data in our privacy policy.\n          </Motion>\n\n          <div class=\"mt-10 flex flex-col gap-5 md:flex-row md:items-center\">\n            <Motion :variants=\"textVariants\" class=\"flex items-center *:-mr-2 [&_img]:size-10\">\n              <UiAnimatedTooltip :items=\"people\" />\n            </Motion>\n\n            <div class=\"flex flex-col gap-1\">\n              <div>\n                <template v-for=\"s in 5\" :key=\"s\">\n                  <Motion :variants=\"textVariants\" as-child>\n                    <Icon\n                      name=\"material-symbols:kid-star\"\n                      class=\"inline size-5 fill-yellow-400 text-yellow-400\"\n                    />\n                  </Motion>\n                </template>\n              </div>\n              <Motion as=\"p\" :variants=\"textVariants\" class=\"text-sm text-muted-foreground\"\n                >from 1,000+ customers</Motion\n              >\n            </div>\n          </div>\n        </div>\n      </div>\n      <Motion\n        :variants=\"imageVariant\"\n        class=\"absolute inset-y-0 right-5 hidden h-full lg:block lg:w-[500px] xl:-right-20 xl:w-[800px]\"\n      >\n        <img\n          class=\"h-full w-full rounded-lg object-cover shadow\"\n          src=\"https://images.unsplash.com/photo-1579548122080-c35fd6820ecb?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Hero section one styles\"\n          loading=\"eager\"\n          width=\"700\"\n          height=\"800\"\n          :title=\"`${COMPANY_NAME} hero section one header`\"\n        />\n      </Motion>\n\n      <Motion :variants=\"imageVariant\" class=\"h-[300px] md:h-[500px] lg:hidden\">\n        <img\n          class=\"h-full w-full rounded-tr-[70px] rounded-bl-[70px] object-cover\"\n          src=\"https://images.unsplash.com/photo-1579548122080-c35fd6820ecb?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Hero section four styles\"\n          loading=\"eager\"\n          width=\"700\"\n          height=\"300\"\n          :title=\"`${COMPANY_NAME} hero section four header`\"\n        />\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const people = [\n    {\n      title: \"Alice Johnson\",\n      description: \"Product Manager at TechCorp\",\n      image: \"https://i.pravatar.cc/150?img=11\",\n    },\n    {\n      title: \"Bob Smith\",\n      description: \"Lead Developer at DevSolutions\",\n      image: \"https://i.pravatar.cc/150?img=12\",\n    },\n    {\n      title: \"Catherine Lee\",\n      description: \"UX Designer at CreativeStudio\",\n      image: \"https://i.pravatar.cc/150?img=13\",\n    },\n    {\n      title: \"David Brown\",\n      description: \"Marketing Head at MarketMinds\",\n      image: \"https://i.pravatar.cc/150?img=14\",\n    },\n    {\n      title: \"Eva Green\",\n      description: \"Data Scientist at DataWorks\",\n      image: \"https://i.pravatar.cc/150?img=15\",\n    },\n  ];\n\n  const textVariants: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 15 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: { type: \"spring\", damping: 20 },\n    },\n  };\n\n  const imageVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, filter: \"blur(20px)\" },\n    animate: {\n      opacity: 1,\n      filter: \"blur(0px)\",\n      transition: { type: \"spring\", stiffness: 50, damping: 20, delay: 0.2 },\n    },\n  };\n</script>\n","category":"Hero","path":"Hero/BlockHero5.vue","components":["animatedtooltip","button","container","veeinput"]},{"name":"Hero 6","fileName":"BlockHero6.vue","file":"<template>\n  <Motion\n    as-child\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: { when: 'beforeChildren', delayChildren: stagger(0.1) },\n      },\n    }\"\n  >\n    <UiContainer\n      class=\"relative flex flex-col gap-y-5 overflow-hidden py-10 md:flex-row md:justify-between lg:h-[720px] lg:gap-10\"\n    >\n      <div class=\"flex h-full items-center justify-center text-center md:w-1/2 md:text-left\">\n        <div>\n          <Motion\n            as=\"h1\"\n            :variants=\"textVariants\"\n            class=\"mb-4 text-4xl font-bold md:text-5xl lg:mt-5 lg:mb-6 xl:text-6xl\"\n          >\n            Super simplified <br />\n            customer service\n          </Motion>\n          <Motion as=\"p\" :variants=\"textVariants\" class=\"text-lg text-muted-foreground lg:text-xl\">\n            Powerful, self-serve product and growth analytics to help you convert, engage, and\n            retain more.\n          </Motion>\n          <div class=\"mt-10 flex flex-col items-center gap-5 md:flex-row\">\n            <Motion :variants=\"textVariants\" class=\"flex items-center *:-mr-2 [&_img]:size-10\">\n              <UiAnimatedTooltip :items=\"people\" />\n            </Motion>\n\n            <div class=\"flex flex-col gap-1\">\n              <div>\n                <template v-for=\"s in 5\" :key=\"s\">\n                  <Motion :variants=\"textVariants\" as-child>\n                    <Icon\n                      name=\"material-symbols:kid-star\"\n                      class=\"inline size-5 fill-yellow-400 text-yellow-400\"\n                    />\n                  </Motion>\n                </template>\n              </div>\n              <Motion as=\"p\" :variants=\"textVariants\" class=\"text-sm text-muted-foreground\"\n                >from 1,000+ customers</Motion\n              >\n            </div>\n          </div>\n        </div>\n      </div>\n      <Motion\n        :variants=\"{\n          initial: { opacity: 0, x: 50 },\n          animate: {\n            opacity: 1,\n            x: 0,\n            transition: {\n              type: 'spring',\n              stiffness: 50,\n              damping: 20,\n              when: 'beforeChildren',\n              delayChildren: stagger(0.1),\n            },\n          },\n        }\"\n        class=\"flex shrink-0 items-center justify-center md:w-1/2 lg:h-full\"\n      >\n        <div\n          class=\"w-full rounded-md bg-muted/50 px-4 py-10 ring-1 ring-muted/30 md:px-10 lg:w-[440px] lg:px-10 dark:bg-muted/5\"\n        >\n          <Motion\n            as=\"img\"\n            :variants=\"textVariants\"\n            src=\"/icon.png\"\n            fit=\"contain\"\n            alt=\"Company Logo\"\n            title=\"Company Logo\"\n            class=\"mx-auto h-11 object-contain\"\n          />\n          <Motion\n            as=\"h2\"\n            :variants=\"textVariants\"\n            class=\"text-center text-2xl font-semibold lg:mt-6 lg:text-3xl\"\n            >Create an account</Motion\n          >\n          <Motion as=\"p\" :variants=\"textVariants\" class=\"mt-3 text-center text-muted-foreground\"\n            >Get started with {{ COMPANY_NAME }}</Motion\n          >\n\n          <form class=\"mt-8\" @submit=\"submit\">\n            <fieldset :disabled=\"isSubmitting\" class=\"grid gap-5\">\n              <Motion :variants=\"textVariants\">\n                <UiVeeInput\n                  required\n                  name=\"email\"\n                  label=\"Email\"\n                  placeholder=\"Enter your email\"\n                  type=\"email\"\n                />\n              </Motion>\n              <Motion :variants=\"textVariants\">\n                <UiVeeInput\n                  required\n                  name=\"password\"\n                  label=\"Password\"\n                  type=\"password\"\n                  placeholder=\"Create a password\"\n                />\n              </Motion>\n              <Motion :variants=\"textVariants\" class=\"flex flex-col gap-6\">\n                <UiButton type=\"submit\">Get started</UiButton>\n                <UiButton variant=\"outline\" type=\"button\">\n                  <Icon name=\"logos:google-icon\" />\n                  Sign up with Google</UiButton\n                >\n              </Motion>\n            </fieldset>\n          </form>\n          <Motion\n            as=\"p\"\n            :variants=\"textVariants\"\n            class=\"mt-8 text-center text-sm text-muted-foreground\"\n          >\n            Already have an account?\n            <NuxtLink to=\"#\" class=\"font-semibold text-primary underline-offset-2 hover:underline\"\n              >Log in</NuxtLink\n            >\n          </Motion>\n        </div>\n      </Motion>\n      <Motion\n        :variants=\"imageVariant\"\n        class=\"absolute bottom-5 hidden lg:right-[410px] lg:block xl:right-[550px]\"\n      >\n        <svg class=\"h-[350px] w-[350px]\" viewBox=\"0 0 360 342\" fill=\"none\">\n          <path\n            d=\"M342.654 174.227C343.704 172.945 345.594 172.756 346.876 173.806C348.158 174.856 348.346 176.746 347.296 178.028L342.654 174.227ZM159.589 141.42L159.868 138.433L159.869 138.434L159.589 141.42ZM184.236 248.724L182.479 246.293L182.479 246.292L184.236 248.724ZM34.9177 108.275C35.017 106.621 36.4382 105.361 38.0921 105.461C39.746 105.56 41.0062 106.981 40.9069 108.635L34.9177 108.275ZM350.512 200.044C350.567 201.7 349.269 203.087 347.613 203.142C345.957 203.197 344.57 201.899 344.515 200.243L350.512 200.044ZM346.66 174.344L346.944 171.357C348.447 171.5 349.609 172.737 349.659 174.245L346.66 174.344ZM320.295 174.307C318.67 173.981 317.619 172.399 317.945 170.775C318.272 169.15 319.854 168.098 321.478 168.425L320.295 174.307ZM344.975 176.127C347.296 178.028 347.295 178.029 347.294 178.03C347.294 178.031 347.292 178.033 347.29 178.035C347.287 178.039 347.283 178.044 347.278 178.051C347.267 178.064 347.251 178.083 347.231 178.107C347.19 178.156 347.131 178.227 347.054 178.32C346.899 178.505 346.672 178.776 346.373 179.125C345.776 179.824 344.897 180.839 343.754 182.117C341.468 184.673 338.125 188.283 333.881 192.526C325.399 201.004 313.281 212.038 298.76 222.223C269.869 242.488 230.675 259.93 191.571 245.779L193.613 240.138C229.851 253.251 266.849 237.278 295.314 217.311C309.471 207.381 321.322 196.595 329.639 188.282C333.795 184.129 337.06 180.601 339.282 178.117C340.392 176.876 341.241 175.896 341.81 175.23C342.094 174.897 342.308 174.642 342.45 174.473C342.52 174.388 342.573 174.325 342.607 174.284C342.624 174.263 342.637 174.248 342.644 174.238C342.648 174.234 342.651 174.23 342.653 174.228C342.653 174.227 342.654 174.227 342.654 174.226C342.654 174.226 342.654 174.227 344.975 176.127ZM191.571 245.779C152.934 231.798 135.393 204.746 132.163 181.185C130.558 169.476 132.484 158.514 137.294 150.563C142.156 142.526 150.052 137.516 159.868 138.433L159.31 144.407C152.19 143.742 146.326 147.224 142.428 153.668C138.478 160.198 136.646 169.707 138.107 180.37C141.011 201.554 156.908 226.855 193.613 240.138L191.571 245.779ZM159.869 138.434C169.254 139.314 178.636 144.72 186.578 152.506C194.556 160.328 201.323 170.778 205.438 182.242C213.68 205.207 211.378 232.813 185.993 251.156L182.479 246.292C205.099 229.948 207.407 205.49 199.79 184.269C195.975 173.64 189.696 163.966 182.377 156.791C175.023 149.58 166.856 145.115 159.309 144.407L159.869 138.434ZM185.993 251.155C173.06 260.503 156.569 261.895 139.593 257.576C122.621 253.258 104.888 243.182 88.9736 229.122C57.1795 201.031 32.0248 156.455 34.9177 108.275L40.9069 108.635C38.1513 154.528 62.1638 197.429 92.9463 224.626C108.321 238.209 125.227 247.73 141.073 251.762C156.915 255.792 171.417 254.288 182.479 246.293L185.993 251.155ZM344.515 200.243L343.662 174.443L349.659 174.245L350.512 200.044L344.515 200.243ZM346.66 174.344C346.377 177.33 346.377 177.33 346.376 177.33C346.376 177.33 346.376 177.33 346.376 177.33C346.375 177.33 346.374 177.33 346.373 177.33C346.37 177.33 346.366 177.329 346.361 177.329C346.351 177.328 346.336 177.327 346.316 177.325C346.276 177.321 346.217 177.315 346.139 177.308C345.985 177.293 345.758 177.271 345.468 177.243C344.888 177.187 344.054 177.106 343.037 177.005C341.005 176.804 338.243 176.524 335.322 176.214C329.566 175.602 322.953 174.842 320.295 174.307L321.478 168.425C323.797 168.892 330.071 169.621 335.957 170.248C338.859 170.556 341.606 170.834 343.629 171.034C344.64 171.134 345.47 171.215 346.046 171.271C346.334 171.299 346.559 171.321 346.712 171.335C346.788 171.343 346.847 171.348 346.886 171.352C346.905 171.354 346.92 171.355 346.93 171.356C346.935 171.356 346.938 171.357 346.941 171.357C346.942 171.357 346.943 171.357 346.943 171.357C346.944 171.357 346.944 171.357 346.944 171.357C346.944 171.357 346.944 171.357 346.66 174.344Z\"\n            class=\"fill-primary\"\n          />\n        </svg>\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  const textVariants: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 15 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        damping: 20,\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n      },\n    },\n  };\n\n  const imageVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, filter: \"blur(20px)\" },\n    animate: {\n      opacity: 1,\n      filter: \"blur(0px)\",\n      transition: {\n        type: \"spring\",\n        stiffness: 50,\n        damping: 20,\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.05),\n      },\n    },\n  };\n\n  const people = [\n    {\n      title: \"Alice Johnson\",\n      description: \"Product Manager at TechCorp\",\n      image: \"https://i.pravatar.cc/150?img=11\",\n    },\n    {\n      title: \"Bob Smith\",\n      description: \"Lead Developer at DevSolutions\",\n      image: \"https://i.pravatar.cc/150?img=12\",\n    },\n    {\n      title: \"Catherine Lee\",\n      description: \"UX Designer at CreativeStudio\",\n      image: \"https://i.pravatar.cc/150?img=13\",\n    },\n    {\n      title: \"David Brown\",\n      description: \"Marketing Head at MarketMinds\",\n      image: \"https://i.pravatar.cc/150?img=14\",\n    },\n    {\n      title: \"Eva Green\",\n      description: \"Data Scientist at DataWorks\",\n      image: \"https://i.pravatar.cc/150?img=15\",\n    },\n  ];\n\n  const schema = object({\n    email: string().email().required().label(\"Email\"),\n    password: string().required().label(\"Password\").min(8),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof schema>>({\n    validationSchema: schema,\n  });\n\n  const submit = handleSubmit(async (_) => {\n    useSonner.success(\"Account created successfully\");\n  });\n</script>\n","category":"Hero","path":"Hero/BlockHero6.vue","components":["animatedtooltip","button","container","veeinput"]},{"name":"Hero 7","fileName":"BlockHero7.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"parentVariant\"\n  >\n    <UiContainer class=\"relative flex flex-col items-center py-10 text-center lg:py-20\">\n      <Motion :variants=\"childVariant\">\n        <UiBadge to=\"#\" variant=\"outline\" class=\"px-3 py-1.5 text-sm font-normal lg:py-2\"\n          >New feature! Check out our new dashboard\n          <Icon class=\"ml-3 size-4\" name=\"lucide:arrow-right\"\n        /></UiBadge>\n      </Motion>\n\n      <Motion as-child :variants=\"childVariant\">\n        <h1\n          class=\"mt-7 mb-4 text-4xl font-bold lg:mt-5 lg:mb-6 lg:text-center lg:text-5xl xl:text-6xl\"\n        >\n          High-performing remote teams.<br />The future of work.\n        </h1>\n      </Motion>\n      <Motion as-child :variants=\"childVariant\">\n        <p class=\"mx-auto max-w-[760px] text-lg text-muted-foreground lg:text-center lg:text-xl\">\n          Powerful, self-serve team engagement tools and analytics. Supercharge your managers & keep\n          employees engaged from anywhere.\n        </p>\n      </Motion>\n\n      <Motion as-child :variants=\"childVariant\">\n        <div\n          class=\"mt-8 grid w-full grid-cols-1 items-center gap-3 sm:flex sm:justify-center lg:mt-10\"\n        >\n          <UiButton size=\"lg\" variant=\"outline\"> <Icon name=\"lucide:play-circle\" /> Demo </UiButton>\n          <UiButton size=\"lg\">Sign up</UiButton>\n        </div>\n      </Motion>\n\n      <Motion as-child :variants=\"childVariant\">\n        <div\n          class=\"mx-auto mt-10 h-[350px] w-full overflow-hidden rounded-md lg:mt-10 lg:h-[520px] lg:w-[900px] lg:rounded-lg\"\n        >\n          <iframe\n            width=\"100%\"\n            height=\"100%\"\n            src=\"https://www.youtube.com/embed/7RaKVu72ncY?si=QoEOhOEe4FE4H9Es\"\n            :title=\"`${COMPANY_NAME} hero section seven video`\"\n            frameborder=\"0\"\n            allow=\"\n              accelerometer;\n              autoplay;\n              clipboard-write;\n              encrypted-media;\n              gyroscope;\n              picture-in-picture;\n              web-share;\n            \"\n            allowfullscreen\n          />\n        </div>\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n</script>\n","category":"Hero","path":"Hero/BlockHero7.vue","components":["badge","button","container"]},{"name":"Hero 8","fileName":"BlockHero8.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"parentVariant\"\n  >\n    <UiContainer class=\"relative py-16 text-center lg:py-24\">\n      <Motion as-child :variants=\"childVariant\">\n        <UiBadge variant=\"secondary\" class=\"px-3 py-1.5 text-sm font-normal lg:py-2\">\n          <Icon class=\"mr-2 size-4\" name=\"lucide:sparkles\" />\n          Introducing our new AI features\n        </UiBadge>\n      </Motion>\n\n      <Motion as-child :variants=\"childVariant\">\n        <h1\n          class=\"mx-auto mt-7 mb-4 max-w-4xl text-4xl font-bold lg:mt-5 lg:mb-6 lg:text-5xl xl:text-6xl\"\n        >\n          Build your dream product with our amazing tools\n        </h1>\n      </Motion>\n\n      <Motion as-child :variants=\"childVariant\">\n        <p class=\"mx-auto max-w-2xl text-lg text-muted-foreground lg:text-xl\">\n          The most powerful platform for teams to build, ship, and scale their products. Join\n          thousands of companies already using our tools.\n        </p>\n      </Motion>\n\n      <Motion as-child :variants=\"childVariant\">\n        <div class=\"mt-8 flex flex-col items-center gap-3 sm:flex-row sm:justify-center lg:mt-10\">\n          <UiButton size=\"lg\">\n            <Icon name=\"lucide:rocket\" />\n            Get Started Free\n          </UiButton>\n          <UiButton size=\"lg\" variant=\"outline\">\n            <Icon name=\"lucide:book-open\" />\n            View Documentation\n          </UiButton>\n        </div>\n      </Motion>\n\n      <Motion as-child :variants=\"childVariant\">\n        <div class=\"mt-10 flex flex-wrap items-center justify-center gap-8 lg:mt-16\">\n          <div class=\"flex items-center gap-2 text-sm text-muted-foreground\">\n            <Icon class=\"size-5 text-green-600\" name=\"lucide:check-circle-2\" />\n            <span>No credit card required</span>\n          </div>\n          <div class=\"flex items-center gap-2 text-sm text-muted-foreground\">\n            <Icon class=\"size-5 text-green-600\" name=\"lucide:check-circle-2\" />\n            <span>14-day free trial</span>\n          </div>\n          <div class=\"flex items-center gap-2 text-sm text-muted-foreground\">\n            <Icon class=\"size-5 text-green-600\" name=\"lucide:check-circle-2\" />\n            <span>Cancel anytime</span>\n          </div>\n        </div>\n      </Motion>\n\n      <Motion as-child :variants=\"imageVariant\">\n        <div\n          class=\"mx-auto mt-12 max-w-5xl overflow-hidden rounded-xl border bg-muted/30 shadow-2xl lg:mt-16\"\n        >\n          <img\n            src=\"https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop\"\n            alt=\"Dashboard preview\"\n            class=\"h-full w-full object-cover\"\n            loading=\"eager\"\n            width=\"1200\"\n            height=\"675\"\n            :title=\"`${COMPANY_NAME} dashboard preview`\"\n          />\n        </div>\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const imageVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 40 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n        delay: 0.2,\n      },\n    },\n  };\n</script>\n","category":"Hero","path":"Hero/BlockHero8.vue","components":["badge","button","container"]},{"name":"Hero 9","fileName":"BlockHero9.vue","file":"<template>\n  <div class=\"relative min-h-screen overflow-hidden\">\n    <!-- Animated Background -->\n    <div class=\"absolute inset-0\">\n      <div class=\"absolute inset-0 bg-linear-to-br from-primary/10 via-background to-background\" />\n      <div\n        class=\"absolute inset-0 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] bg-size-[80px_80px]\"\n      />\n    </div>\n\n    <Motion\n      initial=\"initial\"\n      while-in-view=\"animate\"\n      :in-view-options=\"{ once: true }\"\n      as-child\n      :variants=\"parentVariant\"\n    >\n      <UiContainer\n        class=\"relative z-10 flex min-h-screen flex-col items-center justify-center py-16 text-center\"\n      >\n        <Motion as-child :variants=\"childVariant\">\n          <div\n            class=\"inline-flex items-center gap-2 rounded-full border bg-muted/50 px-4 py-2 text-sm\"\n          >\n            <span class=\"relative flex size-2\">\n              <span\n                class=\"absolute inline-flex size-full animate-ping rounded-full bg-primary opacity-75\"\n              />\n              <span class=\"relative inline-flex size-2 rounded-full bg-primary\" />\n            </span>\n            <span>Now in public beta</span>\n          </div>\n        </Motion>\n\n        <Motion as-child :variants=\"childVariant\">\n          <h1 class=\"mx-auto mt-8 mb-6 max-w-4xl text-5xl font-bold lg:text-6xl xl:text-7xl\">\n            The modern way to build software\n          </h1>\n        </Motion>\n\n        <Motion as-child :variants=\"childVariant\">\n          <p class=\"mx-auto max-w-2xl text-xl text-muted-foreground\">\n            Ship faster, collaborate better, and build products your customers love. Everything you\n            need in one powerful platform.\n          </p>\n        </Motion>\n\n        <Motion as-child :variants=\"childVariant\">\n          <div class=\"mt-10 flex flex-col gap-4 sm:flex-row\">\n            <UiButton size=\"lg\" class=\"text-base\">\n              Start Building Now\n              <Icon class=\"ml-2\" name=\"lucide:arrow-right\" />\n            </UiButton>\n            <UiButton size=\"lg\" variant=\"outline\" class=\"text-base\">\n              <Icon name=\"lucide:github\" />\n              View on GitHub\n            </UiButton>\n          </div>\n        </Motion>\n\n        <Motion as-child :variants=\"statsVariant\">\n          <div class=\"mt-16 grid grid-cols-3 gap-8 lg:gap-16\">\n            <div class=\"flex flex-col items-center\">\n              <p class=\"text-3xl font-bold lg:text-4xl\">50K+</p>\n              <p class=\"mt-1 text-sm text-muted-foreground\">Active Users</p>\n            </div>\n            <div class=\"flex flex-col items-center\">\n              <p class=\"text-3xl font-bold lg:text-4xl\">99.9%</p>\n              <p class=\"mt-1 text-sm text-muted-foreground\">Uptime</p>\n            </div>\n            <div class=\"flex flex-col items-center\">\n              <p class=\"text-3xl font-bold lg:text-4xl\">24/7</p>\n              <p class=\"mt-1 text-sm text-muted-foreground\">Support</p>\n            </div>\n          </div>\n        </Motion>\n      </UiContainer>\n    </Motion>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.15),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 30 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const statsVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n        delay: 0.5,\n      },\n    },\n  };\n</script>\n","category":"Hero","path":"Hero/BlockHero9.vue","components":["button","container"]},{"name":"Login Centered","fileName":"BlockLoginCentered.vue","file":"<template>\n  <div class=\"flex h-screen items-center justify-center px-5\">\n    <div class=\"w-full max-w-[480px]\">\n      <div class=\"text-center\">\n        <svg\n          class=\"mx-auto mb-6 h-10 fill-primary\"\n          viewBox=\"0 0 53 44\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M23.2997 0L52.0461 28.6301V44H38.6311V34.1553L17.7522 13.3607L13.415 13.3607L13.415 44H0L0 0L23.2997 0ZM38.6311 15.2694V0L52.0461 0V15.2694L38.6311 15.2694Z\"\n            class=\"ccustom\"\n          />\n        </svg>\n        <h1 class=\"text-2xl font-bold tracking-tight lg:text-3xl\">Sign in to your account</h1>\n        <p class=\"mt-2 text-muted-foreground\">\n          Or\n          <NuxtLink class=\"font-semibold text-primary underline-offset-2 hover:underline\" to=\"#\"\n            >start your free trial</NuxtLink\n          >\n        </p>\n      </div>\n\n      <div class=\"mt-10\">\n        <div class=\"grid gap-3\">\n          <UiButton variant=\"outline\" type=\"button\" @click=\"signInWithGoogle()\">\n            <Icon class=\"size-5\" name=\"logos:google-icon\" />\n            <span class=\"ml-2\">Sign in with Google</span>\n          </UiButton>\n          <UiButton variant=\"outline\" type=\"button\" @click=\"signInWithGithub()\">\n            <Icon class=\"size-5\" name=\"mdi:github\" />\n            <span class=\"ml-2\">Sign in with Github</span>\n          </UiButton>\n        </div>\n\n        <UiDivider class=\"my-6\" label=\"Or continue with\" />\n\n        <form @submit=\"submit\">\n          <fieldset :disabled=\"isSubmitting\" class=\"grid gap-5\">\n            <UiVeeInput\n              label=\"Email address\"\n              type=\"email\"\n              name=\"email\"\n              placeholder=\"you@example.com\"\n            />\n            <UiVeeInput label=\"Password\" type=\"password\" name=\"password\" />\n            <div class=\"flex items-center justify-between\">\n              <UiVeeCheckbox label=\"Remember me\" name=\"remember\" />\n              <NuxtLink\n                class=\"text-sm font-medium text-primary underline-offset-2 hover:underline\"\n                to=\"#\"\n                >Forgot password?</NuxtLink\n              >\n            </div>\n            <UiButton class=\"w-full\" type=\"submit\" text=\"Sign in\" />\n          </fieldset>\n        </form>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { boolean, object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  useSeoMeta({\n    title: \"Sign in to your account\",\n    description: \"Sign in to your account or start your free trial.\",\n  });\n\n  const LoginSchema = object({\n    email: string().email().required().label(\"Email address\"),\n    password: string().required().label(\"Password\").min(8),\n    remember: boolean().label(\"Remember me\"),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof LoginSchema>>({\n    validationSchema: LoginSchema,\n  });\n\n  const submit = handleSubmit(async (_) => {\n    useSonner(\"Logged in successfully!\", {\n      description: \"You have successfully logged in.\",\n    });\n  });\n\n  const signInWithGoogle = () => {\n    useSonner(\"Continue with Google\", {\n      description: \"Redirecting to Google...\",\n    });\n  };\n\n  const signInWithGithub = () => {\n    useSonner(\"Continue with Github\", {\n      description: \"Redirecting to Github...\",\n    });\n  };\n</script>\n","category":"Login","path":"Login/BlockLoginCentered.vue","components":["button","divider","veecheckbox","veeinput"]},{"name":"Login Compact","fileName":"BlockLoginCompact.vue","file":"<template>\n  <div class=\"flex h-screen items-center justify-center px-5\">\n    <div class=\"w-full max-w-[360px]\">\n      <div class=\"rounded-lg border bg-card p-6 shadow-sm\">\n        <div class=\"mb-6\">\n          <h1 class=\"text-xl font-bold tracking-tight\">Welcome back</h1>\n          <p class=\"mt-1 text-sm text-muted-foreground\">Sign in to continue</p>\n        </div>\n\n        <form @submit=\"submit\">\n          <fieldset :disabled=\"isSubmitting\" class=\"grid gap-4\">\n            <UiVeeInput type=\"email\" name=\"email\" placeholder=\"Email address\" />\n            <UiVeeInput type=\"password\" name=\"password\" placeholder=\"Password\" />\n            <UiButton class=\"w-full\" type=\"submit\" text=\"Sign in\" />\n          </fieldset>\n        </form>\n\n        <div class=\"mt-4 flex items-center justify-between text-sm\">\n          <NuxtLink class=\"text-muted-foreground underline-offset-2 hover:underline\" to=\"#\"\n            >Forgot password?</NuxtLink\n          >\n          <NuxtLink class=\"font-medium text-primary underline-offset-2 hover:underline\" to=\"#\"\n            >Sign up</NuxtLink\n          >\n        </div>\n      </div>\n\n      <p class=\"mt-6 text-center text-xs text-muted-foreground\">\n        By continuing, you agree to our\n        <NuxtLink class=\"underline underline-offset-2 hover:text-foreground\" to=\"#\"\n          >Terms of Service</NuxtLink\n        >\n        and\n        <NuxtLink class=\"underline underline-offset-2 hover:text-foreground\" to=\"#\"\n          >Privacy Policy</NuxtLink\n        >\n      </p>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  useSeoMeta({\n    title: \"Welcome back - Sign in\",\n    description: \"Sign in to continue to your account.\",\n  });\n\n  const LoginSchema = object({\n    email: string().email().required().label(\"Email address\"),\n    password: string().required().label(\"Password\").min(8),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof LoginSchema>>({\n    validationSchema: LoginSchema,\n  });\n\n  const submit = handleSubmit(async (_) => {\n    useSonner(\"Logged in successfully!\", {\n      description: \"You have successfully logged in.\",\n    });\n  });\n</script>\n","category":"Login","path":"Login/BlockLoginCompact.vue","components":["button","veeinput"]},{"name":"Login Minimal","fileName":"BlockLoginMinimal.vue","file":"<template>\n  <div class=\"flex h-screen items-center justify-center bg-muted/50 px-5\">\n    <div class=\"w-full max-w-[420px] rounded-lg border bg-card p-8 shadow-sm\">\n      <div class=\"mb-8 text-center\">\n        <div\n          class=\"mx-auto mb-4 flex size-12 items-center justify-center rounded-full bg-primary/10\"\n        >\n          <Icon name=\"lucide:user-circle\" class=\"size-6 text-primary\" />\n        </div>\n        <h1 class=\"text-2xl font-bold tracking-tight\">Account Login</h1>\n        <p class=\"mt-1 text-sm text-muted-foreground\">Access your dashboard</p>\n      </div>\n\n      <form @submit=\"submit\">\n        <fieldset :disabled=\"isSubmitting\" class=\"grid gap-4\">\n          <UiVeeInput\n            label=\"Email Address\"\n            type=\"email\"\n            name=\"email\"\n            placeholder=\"you@example.com\"\n          />\n          <UiVeeInput label=\"Password\" type=\"password\" name=\"password\" placeholder=\"••••••••\" />\n          <div class=\"text-right\">\n            <NuxtLink\n              class=\"text-sm font-medium text-primary underline-offset-2 hover:underline\"\n              to=\"#\"\n              >Forgot password?</NuxtLink\n            >\n          </div>\n          <UiButton class=\"w-full\" type=\"submit\" text=\"Sign in\" />\n        </fieldset>\n      </form>\n\n      <div class=\"mt-6 text-center\">\n        <p class=\"text-sm text-muted-foreground\">\n          New user?\n          <NuxtLink class=\"font-semibold text-primary underline-offset-2 hover:underline\" to=\"#\"\n            >Create an account</NuxtLink\n          >\n        </p>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  useSeoMeta({\n    title: \"Account Login\",\n    description: \"Access your dashboard by logging in to your account.\",\n  });\n\n  const LoginSchema = object({\n    email: string().email().required().label(\"Email Address\"),\n    password: string().required().label(\"Password\").min(8),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof LoginSchema>>({\n    validationSchema: LoginSchema,\n  });\n\n  const submit = handleSubmit(async (_) => {\n    useSonner(\"Logged in successfully!\", {\n      description: \"You have successfully logged in.\",\n    });\n  });\n</script>\n","category":"Login","path":"Login/BlockLoginMinimal.vue","components":["button","veeinput"]},{"name":"Login Simple","fileName":"BlockLoginSimple.vue","file":"<template>\n  <div class=\"flex h-screen items-center justify-center\">\n    <div class=\"w-full max-w-[330px] px-5\">\n      <h1 class=\"text-2xl font-bold tracking-tight lg:text-3xl\">Log in</h1>\n      <p class=\"mt-1 text-muted-foreground\">Enter your email & password to log in.</p>\n\n      <form class=\"mt-10\" @submit=\"submit\">\n        <fieldset :disabled=\"isSubmitting\" class=\"grid gap-5\">\n          <div>\n            <UiVeeInput label=\"Email\" type=\"email\" name=\"email\" placeholder=\"john@example.com\" />\n          </div>\n          <div>\n            <UiVeeInput label=\"Password\" type=\"password\" name=\"password\" />\n          </div>\n          <div>\n            <UiButton class=\"w-full\" type=\"submit\" text=\"Log in\" />\n          </div>\n        </fieldset>\n      </form>\n      <p class=\"mt-8 text-sm\">\n        <NuxtLink class=\"font-semibold text-primary underline-offset-2 hover:underline\" to=\"#\"\n          >Forgot password?</NuxtLink\n        >\n      </p>\n      <p class=\"mt-4 text-sm text-muted-foreground\">\n        Don't have an account?\n        <NuxtLink class=\"font-semibold text-primary underline-offset-2 hover:underline\" to=\"#\"\n          >Create account</NuxtLink\n        >\n      </p>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  useSeoMeta({\n    title: \"Log in\",\n    description: \"Enter your email & password to log in.\",\n  });\n\n  const LoginSchema = object({\n    email: string().email().required().label(\"Email\"),\n    password: string().required().label(\"Password\").min(8),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof LoginSchema>>({\n    validationSchema: LoginSchema,\n  });\n\n  const submit = handleSubmit(async (_) => {\n    useSonner(\"Logged in successfully!\", {\n      description: \"You have successfully logged in.\",\n    });\n  });\n</script>\n","category":"Login","path":"Login/BlockLoginSimple.vue","components":["button","veeinput"]},{"name":"Login Simple Card","fileName":"BlockLoginSimpleCard.vue","file":"<template>\n  <div class=\"flex h-screen items-center justify-center\">\n    <div\n      class=\"w-full max-w-[380px] border border-border/60 bg-card px-8 py-5 shadow-xs min-[480px]:rounded-lg dark:border-border\"\n    >\n      <h1 class=\"text-2xl font-bold tracking-tight lg:text-3xl\">Log in</h1>\n      <p class=\"mt-1 text-muted-foreground\">Enter your email & password to log in.</p>\n\n      <form class=\"mt-10\" @submit=\"submit\">\n        <fieldset :disabled=\"isSubmitting\" class=\"grid gap-5\">\n          <div>\n            <UiVeeInput label=\"Email\" type=\"email\" name=\"email\" placeholder=\"john@example.com\" />\n          </div>\n          <div>\n            <UiVeeInput label=\"Password\" type=\"password\" name=\"password\" />\n          </div>\n          <div>\n            <UiButton class=\"w-full\" type=\"submit\" text=\"Log in\" />\n          </div>\n        </fieldset>\n      </form>\n      <p class=\"mt-8 text-sm\">\n        <NuxtLink class=\"font-semibold text-primary underline-offset-2 hover:underline\" to=\"#\"\n          >Forgot password?</NuxtLink\n        >\n      </p>\n      <p class=\"mt-4 text-sm text-muted-foreground\">\n        Don't have an account?\n        <NuxtLink class=\"font-semibold text-primary underline-offset-2 hover:underline\" to=\"#\"\n          >Create account</NuxtLink\n        >\n      </p>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  useSeoMeta({\n    title: \"Log in\",\n    description: \"Enter your email & password to log in.\",\n  });\n\n  const LoginSchema = object({\n    email: string()\n      .email()\n      .required()\n      .label(\"Email\")\n      .matches(/[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}/gim, {\n        message: \"Invalid email address\",\n      }),\n    password: string().required().label(\"Password\").min(8),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof LoginSchema>>({\n    validationSchema: LoginSchema,\n  });\n\n  const submit = handleSubmit(async (_) => {\n    useSonner(\"Logged in successfully!\", {\n      description: \"You have successfully logged in.\",\n    });\n  });\n</script>\n","category":"Login","path":"Login/BlockLoginSimpleCard.vue","components":["button","veeinput"]},{"name":"Login Simple Remember","fileName":"BlockLoginSimpleRemember.vue","file":"<template>\n  <div class=\"flex h-screen items-center justify-center\">\n    <div class=\"w-full max-w-[360px] px-5\">\n      <svg\n        class=\"my-6 h-8 fill-primary\"\n        viewBox=\"0 0 53 44\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M23.2997 0L52.0461 28.6301V44H38.6311V34.1553L17.7522 13.3607L13.415 13.3607L13.415 44H0L0 0L23.2997 0ZM38.6311 15.2694V0L52.0461 0V15.2694L38.6311 15.2694Z\"\n          class=\"ccustom\"\n        />\n      </svg>\n\n      <h1 class=\"text-2xl font-bold tracking-tight lg:text-3xl\">Log in</h1>\n      <p class=\"mt-1 text-muted-foreground\">Enter your email & password to log in.</p>\n\n      <form class=\"mt-10\" @submit=\"submit\">\n        <fieldset :disabled=\"isSubmitting\" class=\"grid gap-5\">\n          <UiVeeInput label=\"Email\" type=\"email\" name=\"email\" placeholder=\"john@example.com\" />\n          <UiVeeInput label=\"Password\" type=\"password\" name=\"password\" />\n          <div class=\"flex items-start justify-between\">\n            <UiVeeCheckbox label=\"Remember me\" name=\"remember\" />\n            <NuxtLink class=\"text-sm font-medium text-primary underline underline-offset-2\" to=\"#\"\n              >Forgot password?</NuxtLink\n            >\n          </div>\n          <UiButton class=\"w-full\" type=\"submit\" text=\"Log in\" />\n        </fieldset>\n      </form>\n\n      <p class=\"mt-6 text-sm text-muted-foreground\">\n        Don't have an account?\n        <NuxtLink class=\"font-semibold text-primary underline-offset-2 hover:underline\" to=\"#\"\n          >Create account</NuxtLink\n        >\n      </p>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { boolean, object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  useSeoMeta({\n    title: \"Log in\",\n    description: \"Enter your email & password to log in.\",\n  });\n\n  const LoginSchema = object({\n    email: string().email().required().label(\"Email\"),\n    password: string().required().label(\"Password\").min(8),\n    remember: boolean()\n      .label(\"Remember me\")\n      .test(\"remember\", \"Must be checked\", (value) => value === true),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof LoginSchema>>({\n    validationSchema: LoginSchema,\n  });\n\n  const submit = handleSubmit(async (_) => {\n    useSonner(\"Logged in successfully!\", {\n      description: \"You have successfully logged in.\",\n    });\n  });\n</script>\n","category":"Login","path":"Login/BlockLoginSimpleRemember.vue","components":["button","veecheckbox","veeinput"]},{"name":"Login Simple Social","fileName":"BlockLoginSimpleSocial.vue","file":"<template>\n  <div class=\"flex h-screen items-center justify-center\">\n    <div class=\"w-full max-w-[330px] px-5\">\n      <h1 class=\"text-2xl font-bold tracking-tight lg:text-3xl\">Log in</h1>\n      <p class=\"mt-1 text-muted-foreground\">Enter your email & password to log in.</p>\n\n      <form class=\"mt-10\" @submit=\"submit\">\n        <fieldset :disabled=\"isSubmitting\" class=\"grid gap-5\">\n          <div>\n            <UiVeeInput label=\"Email\" type=\"email\" name=\"email\" placeholder=\"john@example.com\" />\n          </div>\n          <div>\n            <UiVeeInput label=\"Password\" type=\"password\" name=\"password\" />\n          </div>\n          <div>\n            <UiButton class=\"w-full\" type=\"submit\" text=\"Log in\" />\n          </div>\n          <UiDivider label=\"OR\" />\n          <UiButton variant=\"outline\" type=\"button\" @click=\"signInWithGoogle()\">\n            <Icon class=\"size-4\" name=\"logos:google-icon\" />\n            <span class=\"ml-2\">Continue with Google</span>\n          </UiButton>\n          <UiButton variant=\"outline\" type=\"button\" @click=\"signInWithFacebook()\">\n            <Icon class=\"size-4\" name=\"logos:facebook\" />\n            <span class=\"ml-2\">Continue with Facebook</span>\n          </UiButton>\n        </fieldset>\n      </form>\n      <p class=\"mt-8 text-sm\">\n        <NuxtLink class=\"font-semibold text-primary underline-offset-2 hover:underline\" to=\"#\"\n          >Forgot password?</NuxtLink\n        >\n      </p>\n      <p class=\"mt-4 text-sm text-muted-foreground\">\n        Don't have an account?\n        <NuxtLink class=\"font-semibold text-primary underline-offset-2 hover:underline\" to=\"#\"\n          >Create account</NuxtLink\n        >\n      </p>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  useSeoMeta({\n    title: \"Log in\",\n    description: \"Enter your email & password to log in or continue with Google or Facebook.\",\n  });\n\n  const LoginSchema = object({\n    email: string().email().required().label(\"Email\"),\n    password: string().required().label(\"Password\").min(8),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof LoginSchema>>({\n    validationSchema: LoginSchema,\n  });\n\n  const submit = handleSubmit(async (_) => {\n    useSonner(\"Logged in successfully!\", {\n      description: \"You have successfully logged in.\",\n    });\n  });\n\n  const signInWithGoogle = () => {\n    useSonner(\"Logged in successfully!\", {\n      description: \"You have successfully logged in with Google.\",\n    });\n  };\n\n  const signInWithFacebook = () => {\n    useSonner(\"Logged in successfully!\", {\n      description: \"You have successfully logged in with Facebook.\",\n    });\n  };\n</script>\n","category":"Login","path":"Login/BlockLoginSimpleSocial.vue","components":["button","divider","veeinput"]},{"name":"Login Simple Social 2","fileName":"BlockLoginSimpleSocial2.vue","file":"<template>\n  <div class=\"flex h-screen items-center justify-center\">\n    <div class=\"w-full max-w-[330px] px-5\">\n      <svg\n        class=\"mx-auto my-6 h-8 fill-primary\"\n        viewBox=\"0 0 53 44\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M23.2997 0L52.0461 28.6301V44H38.6311V34.1553L17.7522 13.3607L13.415 13.3607L13.415 44H0L0 0L23.2997 0ZM38.6311 15.2694V0L52.0461 0V15.2694L38.6311 15.2694Z\"\n          class=\"ccustom\"\n        />\n      </svg>\n\n      <div class=\"flex flex-col items-center\">\n        <h1 class=\"text-2xl font-bold tracking-tight lg:text-3xl\">Log in</h1>\n        <p class=\"mt-1 text-muted-foreground\">Enter your email & password to log in.</p>\n      </div>\n\n      <form class=\"mt-10\" @submit=\"submit\">\n        <fieldset :disabled=\"isSubmitting\" class=\"grid gap-4\">\n          <UiVeeInput label=\"Email\" type=\"email\" name=\"email\" placeholder=\"john@example.com\" />\n          <UiButton class=\"w-full\" type=\"submit\" text=\"Log in\" />\n\n          <UiDivider label=\"OR\" />\n          <UiButton variant=\"outline\" type=\"button\" @click=\"signInWithGoogle()\">\n            <Icon class=\"size-4\" name=\"logos:google-icon\" />\n            <span class=\"ml-2\">Continue with Google</span>\n          </UiButton>\n          <UiButton variant=\"outline\" type=\"button\" @click=\"signInWithFacebook()\">\n            <Icon class=\"size-4\" name=\"logos:facebook\" />\n            <span class=\"ml-2\">Continue with Facebook</span>\n          </UiButton>\n          <UiButton variant=\"outline\" type=\"button\" @click=\"signInWithGithub()\">\n            <Icon class=\"size-4\" name=\"mdi:github\" />\n            <span class=\"ml-2\">Continue with Github</span>\n          </UiButton>\n        </fieldset>\n      </form>\n      <p class=\"mt-8 text-center text-sm text-muted-foreground\">\n        Don't have an account?\n        <NuxtLink class=\"font-semibold text-primary underline-offset-2 hover:underline\" to=\"#\"\n          >Create account</NuxtLink\n        >\n      </p>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  useSeoMeta({\n    title: \"Log in\",\n    description: \"Log in with your email or continue with Google, Facebook, or Github.\",\n  });\n\n  const LoginSchema = object({\n    email: string().email().required().label(\"Email\"),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof LoginSchema>>({\n    validationSchema: LoginSchema,\n  });\n\n  const submit = handleSubmit(async (_) => {\n    useSonner(\"Logged in successfully!\", {\n      description: \"You have successfully logged in.\",\n    });\n  });\n\n  const signInWithGoogle = () => {\n    useSonner(\"Logged in successfully!\", {\n      description: \"You have successfully logged in with Google.\",\n    });\n  };\n\n  const signInWithFacebook = () => {\n    useSonner(\"Logged in successfully!\", {\n      description: \"You have successfully logged in with Facebook.\",\n    });\n  };\n\n  const signInWithGithub = () => {\n    useSonner(\"Logged in successfully!\", {\n      description: \"You have successfully logged in with Github.\",\n    });\n  };\n</script>\n","category":"Login","path":"Login/BlockLoginSimpleSocial2.vue","components":["button","divider","veeinput"]},{"name":"Login Simple Social Image","fileName":"BlockLoginSimpleSocialImage.vue","file":"<template>\n  <div class=\"flex h-screen items-center justify-between\">\n    <div class=\"w-full md:w-1/2\">\n      <div class=\"mx-auto w-full max-w-[330px] px-5\">\n        <h1 class=\"text-2xl font-bold tracking-tight lg:text-3xl\">Log in</h1>\n        <p class=\"mt-1 text-muted-foreground\">Enter your email & password to log in.</p>\n\n        <form class=\"mt-10\" @submit=\"submit\">\n          <fieldset :disabled=\"isSubmitting\" class=\"grid gap-5\">\n            <div>\n              <UiVeeInput label=\"Email\" type=\"email\" name=\"email\" placeholder=\"john@example.com\" />\n            </div>\n            <div>\n              <UiVeeInput label=\"Password\" type=\"password\" name=\"password\" />\n            </div>\n            <div>\n              <UiButton class=\"w-full\" type=\"submit\" text=\"Log in\" />\n            </div>\n            <UiDivider label=\"OR\" />\n            <UiButton variant=\"outline\" type=\"button\" @click=\"signInWithGoogle()\">\n              <Icon class=\"size-4\" name=\"logos:google-icon\" />\n              <span class=\"ml-2\">Continue with Google</span>\n            </UiButton>\n          </fieldset>\n        </form>\n        <p class=\"mt-8 text-sm\">\n          <NuxtLink class=\"font-semibold text-primary underline-offset-2 hover:underline\" to=\"#\"\n            >Forgot password?</NuxtLink\n          >\n        </p>\n        <p class=\"mt-4 text-sm text-muted-foreground\">\n          Don't have an account?\n          <NuxtLink class=\"font-semibold text-primary underline-offset-2 hover:underline\" to=\"#\"\n            >Create account</NuxtLink\n          >\n        </p>\n      </div>\n    </div>\n    <div class=\"hidden h-screen md:block md:w-1/2 lg:w-1/2\">\n      <img\n        src=\"https://images.unsplash.com/photo-1512551980832-13df02babc9e?q=60&w=2864&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n        alt=\"Login form image\"\n        class=\"size-full object-cover\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  useSeoMeta({\n    title: \"Log in\",\n    description: \"Enter your email & password to log in.\",\n  });\n\n  const LoginSchema = object({\n    email: string().email().required().label(\"Email\"),\n    password: string().required().label(\"Password\").min(8),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof LoginSchema>>({\n    validationSchema: LoginSchema,\n  });\n\n  const submit = handleSubmit(async (_) => {\n    useSonner(\"Logged in successfully!\", {\n      description: \"You have successfully logged in.\",\n    });\n  });\n\n  const signInWithGoogle = () => {\n    useSonner(\"Logged in successfully!\", {\n      description: \"You have successfully logged in with Google.\",\n    });\n  };\n</script>\n","category":"Login","path":"Login/BlockLoginSimpleSocialImage.vue","components":["button","divider","veeinput"]},{"name":"Login Two Column","fileName":"BlockLoginTwoColumn.vue","file":"<template>\n  <div class=\"grid h-screen lg:grid-cols-2\">\n    <div class=\"flex items-center justify-center px-5\">\n      <div class=\"w-full max-w-[400px]\">\n        <h1 class=\"text-2xl font-bold tracking-tight lg:text-3xl\">Welcome back</h1>\n        <p class=\"mt-1 text-muted-foreground\">Log in to your account to continue.</p>\n\n        <form class=\"mt-8\" @submit=\"submit\">\n          <fieldset :disabled=\"isSubmitting\" class=\"grid gap-5\">\n            <UiVeeInput label=\"Email\" type=\"email\" name=\"email\" placeholder=\"john@example.com\" />\n            <UiVeeInput label=\"Password\" type=\"password\" name=\"password\" />\n            <div class=\"flex items-center justify-between\">\n              <UiVeeCheckbox label=\"Remember me\" name=\"remember\" />\n              <NuxtLink\n                class=\"text-sm font-medium text-primary underline-offset-2 hover:underline\"\n                to=\"#\"\n                >Forgot password?</NuxtLink\n              >\n            </div>\n            <UiButton class=\"w-full\" type=\"submit\" text=\"Log in\" />\n          </fieldset>\n        </form>\n\n        <UiDivider class=\"my-6\" label=\"OR\" />\n\n        <div class=\"grid gap-3\">\n          <UiButton variant=\"outline\" type=\"button\" @click=\"signInWithGoogle()\">\n            <Icon class=\"size-4\" name=\"logos:google-icon\" />\n            <span class=\"ml-2\">Continue with Google</span>\n          </UiButton>\n          <UiButton variant=\"outline\" type=\"button\" @click=\"signInWithGithub()\">\n            <Icon class=\"size-4\" name=\"mdi:github\" />\n            <span class=\"ml-2\">Continue with Github</span>\n          </UiButton>\n        </div>\n\n        <p class=\"mt-6 text-sm text-muted-foreground\">\n          Don't have an account?\n          <NuxtLink class=\"font-semibold text-primary underline-offset-2 hover:underline\" to=\"#\"\n            >Create account</NuxtLink\n          >\n        </p>\n      </div>\n    </div>\n    <div class=\"hidden bg-muted lg:block\">\n      <div class=\"flex h-full flex-col items-center justify-center p-8\">\n        <div class=\"max-w-md text-center\">\n          <Icon name=\"lucide:lock-keyhole\" class=\"mx-auto mb-6 size-16 text-primary\" />\n          <h2 class=\"mb-4 text-2xl font-bold\">Secure & Private</h2>\n          <p class=\"text-muted-foreground\">\n            Your data is encrypted and secure. We never share your information with third parties.\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { boolean, object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  useSeoMeta({\n    title: \"Welcome back - Log in\",\n    description: \"Log in to your account to continue.\",\n  });\n\n  const LoginSchema = object({\n    email: string().email().required().label(\"Email\"),\n    password: string().required().label(\"Password\").min(8),\n    remember: boolean().label(\"Remember me\"),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof LoginSchema>>({\n    validationSchema: LoginSchema,\n  });\n\n  const submit = handleSubmit(async (_) => {\n    useSonner(\"Logged in successfully!\", {\n      description: \"You have successfully logged in.\",\n    });\n  });\n\n  const signInWithGoogle = () => {\n    useSonner(\"Continue with Google\", {\n      description: \"Redirecting to Google...\",\n    });\n  };\n\n  const signInWithGithub = () => {\n    useSonner(\"Continue with Github\", {\n      description: \"Redirecting to Github...\",\n    });\n  };\n</script>\n","category":"Login","path":"Login/BlockLoginTwoColumn.vue","components":["button","divider","veecheckbox","veeinput"]},{"name":"Metric 1","fileName":"BlockMetric1.vue","file":"<template>\n  <UiContainer class=\"py-10 lg:py-20\">\n    <h3 class=\"mb-4 text-center text-3xl font-semibold lg:mb-5 lg:text-4xl\">\n      Great products, faster than ever\n    </h3>\n    <p class=\"mb-10 text-center text-lg text-muted-foreground lg:mb-16 lg:text-xl\">\n      Everything you need to build modern UI and great products.\n    </p>\n\n    <div\n      class=\"grid grid-cols-1 place-items-center gap-y-14 rounded-lg bg-muted py-10 text-center lg:grid-cols-3 lg:px-8 lg:py-16 dark:bg-muted/30\"\n    >\n      <template v-for=\"(s, i) in stats\" :key=\"i\">\n        <div>\n          <h4 class=\"mb-2 text-5xl font-bold text-primary lg:mb-3 lg:text-6xl\">\n            {{ s.value }}\n          </h4>\n          <p class=\"text-lg font-medium\">\n            {{ s.text }}\n          </p>\n        </div>\n      </template>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const stats = [\n    { text: \"Projects completed\", value: \"230+\" },\n    { text: \"Return on investment\", value: \"600%\" },\n    { text: \"Global downloads\", value: \"10K\" },\n  ];\n</script>\n","category":"Metric","path":"Metric/BlockMetric1.vue","components":["container"]},{"name":"Metric 10","fileName":"BlockMetric10.vue","file":"<template>\n  <UiContainer class=\"py-10 lg:py-20\">\n    <div class=\"grid grid-cols-1 gap-8 lg:grid-cols-3\">\n      <template v-for=\"(s, i) in stats\" :key=\"i\">\n        <div\n          class=\"group relative overflow-hidden rounded-lg border bg-card p-6 transition-shadow hover:shadow-md\"\n        >\n          <div class=\"mb-4 flex items-start justify-between\">\n            <div class=\"rounded-full bg-linear-to-b from-primary/50 via-transparent p-3\">\n              <Icon :name=\"s.icon\" class=\"size-6 text-primary\" />\n            </div>\n            <UiBadge :variant=\"s.badgeVariant\">{{ s.badge }}</UiBadge>\n          </div>\n          <h4 class=\"mb-2 text-3xl font-bold lg:text-4xl\">\n            {{ s.value }}\n          </h4>\n          <p class=\"mb-3 text-base font-medium\">\n            {{ s.text }}\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            {{ s.description }}\n          </p>\n        </div>\n      </template>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const stats = [\n    {\n      text: \"Total Revenue\",\n      value: \"$2.4M\",\n      icon: \"lucide:dollar-sign\",\n      badge: \"+12.5%\",\n      badgeVariant: \"default\" as const,\n      description: \"Revenue growth compared to last quarter\",\n    },\n    {\n      text: \"New Customers\",\n      value: \"1,840\",\n      icon: \"lucide:user-plus\",\n      badge: \"+18.2%\",\n      badgeVariant: \"default\" as const,\n      description: \"New customer acquisition this month\",\n    },\n    {\n      text: \"Conversion Rate\",\n      value: \"3.2%\",\n      icon: \"lucide:trending-up\",\n      badge: \"+2.1%\",\n      badgeVariant: \"default\" as const,\n      description: \"Average conversion across all channels\",\n    },\n  ];\n</script>\n","category":"Metric","path":"Metric/BlockMetric10.vue","components":["badge","container"]},{"name":"Metric 2","fileName":"BlockMetric2.vue","file":"<template>\n  <UiContainer class=\"py-10 lg:py-20\">\n    <div\n      class=\"grid grid-cols-1 place-items-center gap-y-14 border-y py-10 text-center md:grid-cols-2 lg:grid-cols-2 lg:px-8 lg:py-16 xl:grid-cols-4\"\n    >\n      <template v-for=\"(s, i) in stats\" :key=\"i\">\n        <div>\n          <h4 class=\"mb-2 text-5xl font-bold lg:mb-3 lg:text-6xl\">\n            {{ s.value }}\n          </h4>\n          <p class=\"text-lg font-medium\">\n            {{ s.text }}\n          </p>\n        </div>\n      </template>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const stats = [\n    { text: \"Projects completed\", value: \"230+\" },\n    { text: \"Return on investment\", value: \"600%\" },\n    { text: \"Global downloads\", value: \"10K\" },\n    { text: \"5-star reviews\", value: \"200+\" },\n  ];\n</script>\n","category":"Metric","path":"Metric/BlockMetric2.vue","components":["container"]},{"name":"Metric 3","fileName":"BlockMetric3.vue","file":"<template>\n  <UiContainer class=\"py-10 lg:py-20\">\n    <div class=\"flex items-center justify-between\">\n      <div>\n        <h3 class=\"mb-4 text-center text-3xl font-semibold md:text-left lg:mb-5 lg:text-4xl\">\n          Build something great\n        </h3>\n        <p class=\"mb-10 text-center text-lg text-muted-foreground md:text-left lg:mb-16 lg:text-xl\">\n          Everything you need to build modern UI and great products.\n        </p>\n      </div>\n      <div class=\"hidden items-center gap-3 md:flex\">\n        <UiButton variant=\"outline\" size=\"lg\">Demo</UiButton>\n        <UiButton size=\"lg\">Get Started</UiButton>\n      </div>\n    </div>\n    <div\n      class=\"grid grid-cols-1 place-items-center gap-y-14 border-y py-10 text-center md:grid-cols-2 lg:grid-cols-2 lg:px-8 lg:py-16 lg:text-left xl:grid-cols-4\"\n    >\n      <template v-for=\"(s, i) in stats\" :key=\"i\">\n        <div>\n          <h4 class=\"mb-2 text-5xl font-bold text-primary lg:mb-3 lg:text-6xl\">\n            {{ s.value }}\n          </h4>\n          <p class=\"text-lg font-medium\">\n            {{ s.text }}\n          </p>\n          <p class=\"mt-2 line-clamp-2 hidden text-muted-foreground lg:block\">\n            Lorem ipsum, dolor sit amet consectetur adipisicing e\n          </p>\n        </div>\n      </template>\n    </div>\n    <div class=\"mt-10 grid items-center gap-3 md:hidden\">\n      <UiButton size=\"lg\">Get Started</UiButton>\n      <UiButton variant=\"outline\" size=\"lg\">Demo</UiButton>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const stats = [\n    { text: \"Projects completed\", value: \"230+\" },\n    { text: \"Return on investment\", value: \"600%\" },\n    { text: \"Global downloads\", value: \"10K\" },\n    { text: \"5-star reviews\", value: \"200+\" },\n  ];\n</script>\n","category":"Metric","path":"Metric/BlockMetric3.vue","components":["button","container"]},{"name":"Metric 4","fileName":"BlockMetric4.vue","file":"<template>\n  <UiContainer class=\"py-10 lg:py-20\">\n    <p class=\"mb-3 text-center font-semibold text-primary lg:text-left\">Launch faster</p>\n    <h3 class=\"mb-4 text-center text-3xl font-semibold lg:mb-5 lg:text-left lg:text-4xl\">\n      Build something great\n    </h3>\n    <p\n      class=\"mb-10 max-w-[760px] text-center text-lg text-muted-foreground lg:mb-16 lg:text-left lg:text-xl\"\n    >\n      Everything you need to build modern UI and great products. We've done all the heavy lifting so\n      you don't have to — the perfect starting point for any project.\n    </p>\n    <div class=\"grid grid-cols-1 lg:grid-cols-2 lg:py-16\">\n      <div\n        class=\"grid grid-cols-1 place-items-center gap-5 gap-y-10 py-10 text-center md:grid-cols-2 lg:text-left\"\n      >\n        <template v-for=\"(s, i) in stats\" :key=\"i\">\n          <div>\n            <h4 class=\"mb-2 text-5xl font-bold text-primary lg:mb-3 lg:text-6xl\">\n              {{ s.value }}\n            </h4>\n            <p class=\"text-lg font-medium\">\n              {{ s.text }}\n            </p>\n            <p class=\"mt-2 line-clamp-2 hidden text-muted-foreground lg:block\">\n              Lorem ipsum, dolor sit amet consectetur adipisicing e\n            </p>\n          </div>\n        </template>\n      </div>\n\n      <img\n        src=\"https://images.unsplash.com/photo-1599422314077-f4dfdaa4cd09?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n        alt=\"Share team inboxes feature\"\n        class=\"h-[300px] w-full rounded-lg object-cover shadow-xs lg:h-[520px]\"\n      />\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const stats = [\n    { text: \"Projects completed\", value: \"230+\" },\n    { text: \"Return on investment\", value: \"600%\" },\n    { text: \"Global downloads\", value: \"10K\" },\n    { text: \"5-star reviews\", value: \"200+\" },\n  ];\n</script>\n","category":"Metric","path":"Metric/BlockMetric4.vue","components":["container"]},{"name":"Metric 5","fileName":"BlockMetric5.vue","file":"<template>\n  <UiContainer class=\"py-10 lg:py-20\">\n    <div class=\"grid grid-cols-1 place-items-center gap-8 md:grid-cols-2 lg:grid-cols-4 lg:gap-12\">\n      <template v-for=\"(s, i) in stats\" :key=\"i\">\n        <div class=\"flex items-start gap-3\">\n          <div\n            class=\"inline-flex size-12 items-center justify-center rounded-full bg-linear-to-b from-primary/50 via-transparent\"\n          >\n            <Icon :name=\"s.icon\" class=\"size-5 text-primary\" />\n          </div>\n          <div class=\"flex flex-col\">\n            <h4 class=\"text-4xl font-bold lg:text-5xl\">\n              {{ s.value }}\n            </h4>\n            <p class=\"text-sm font-medium text-muted-foreground\">\n              {{ s.text }}\n            </p>\n          </div>\n        </div>\n      </template>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const stats = [\n    { text: \"Active users\", value: \"50K+\", icon: \"lucide:users\" },\n    { text: \"Uptime\", value: \"99.9%\", icon: \"lucide:activity\" },\n    { text: \"Countries\", value: \"150+\", icon: \"lucide:globe\" },\n    { text: \"Support rating\", value: \"4.9\", icon: \"lucide:star\" },\n  ];\n</script>\n","category":"Metric","path":"Metric/BlockMetric5.vue","components":["container"]},{"name":"Metric 6","fileName":"BlockMetric6.vue","file":"<template>\n  <UiContainer class=\"py-10 lg:py-20\">\n    <div class=\"mx-auto max-w-5xl\">\n      <div class=\"text-center\">\n        <h3 class=\"mb-4 text-3xl font-semibold lg:text-4xl\">Trusted by teams worldwide</h3>\n        <p class=\"mb-12 text-lg text-muted-foreground lg:mb-16\">\n          Join thousands of companies using our platform to build better products.\n        </p>\n      </div>\n\n      <div class=\"grid grid-cols-1 gap-8 md:grid-cols-3\">\n        <template v-for=\"(s, i) in stats\" :key=\"i\">\n          <div class=\"rounded-lg border bg-card p-6 text-center shadow-sm\">\n            <div\n              class=\"mx-auto mb-4 flex size-12 items-center justify-center rounded-full bg-linear-to-b from-primary/50 via-primary/10\"\n            >\n              <Icon :name=\"s.icon\" class=\"size-6 text-primary\" />\n            </div>\n            <h4 class=\"mb-2 text-4xl font-bold lg:text-5xl\">\n              {{ s.value }}\n            </h4>\n            <p class=\"text-base font-medium text-muted-foreground\">\n              {{ s.text }}\n            </p>\n          </div>\n        </template>\n      </div>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const stats = [\n    { text: \"Customer satisfaction\", value: \"98%\", icon: \"lucide:heart\" },\n    { text: \"Projects delivered\", value: \"1,200+\", icon: \"lucide:rocket\" },\n    { text: \"Team members\", value: \"50+\", icon: \"lucide:users\" },\n  ];\n</script>\n","category":"Metric","path":"Metric/BlockMetric6.vue","components":["container"]},{"name":"Metric 7","fileName":"BlockMetric7.vue","file":"<template>\n  <div class=\"bg-muted/30 py-10 lg:py-20\">\n    <UiContainer>\n      <div class=\"grid grid-cols-1 gap-10 lg:grid-cols-2 lg:gap-16\">\n        <div class=\"flex flex-col justify-center\">\n          <p class=\"mb-3 font-semibold text-primary\">By the numbers</p>\n          <h3 class=\"mb-4 text-3xl font-semibold lg:text-4xl\">Making an impact that matters</h3>\n          <p class=\"text-lg text-muted-foreground\">\n            Our platform helps teams around the world ship better products faster. Here's how we're\n            making a difference.\n          </p>\n        </div>\n\n        <div class=\"grid grid-cols-2 gap-8\">\n          <template v-for=\"(s, i) in stats\" :key=\"i\">\n            <div>\n              <h4 class=\"mb-2 text-4xl font-bold text-primary lg:text-5xl\">\n                {{ s.value }}\n              </h4>\n              <p class=\"text-sm font-medium text-muted-foreground\">\n                {{ s.text }}\n              </p>\n            </div>\n          </template>\n        </div>\n      </div>\n    </UiContainer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  const stats = [\n    { text: \"Daily active users\", value: \"25K+\" },\n    { text: \"API calls per day\", value: \"2M+\" },\n    { text: \"Average response time\", value: \"45ms\" },\n    { text: \"Customer retention\", value: \"94%\" },\n  ];\n</script>\n","category":"Metric","path":"Metric/BlockMetric7.vue","components":["container"]},{"name":"Metric 8","fileName":"BlockMetric8.vue","file":"<template>\n  <UiContainer class=\"py-10 lg:py-20\">\n    <div class=\"rounded-lg border bg-card p-8 shadow-sm lg:p-12\">\n      <div class=\"mb-10 text-center lg:mb-12\">\n        <h3 class=\"mb-3 text-3xl font-semibold lg:text-4xl\">Why choose us?</h3>\n        <p class=\"text-lg text-muted-foreground\">Numbers that speak for themselves</p>\n      </div>\n\n      <div class=\"grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4\">\n        <template v-for=\"(s, i) in stats\" :key=\"i\">\n          <div class=\"text-center\">\n            <div class=\"mb-4\">\n              <Icon :name=\"s.icon\" class=\"mx-auto size-7 text-primary\" />\n            </div>\n            <h4 class=\"mb-2 text-3xl font-bold lg:text-4xl\">\n              {{ s.value }}\n            </h4>\n            <p class=\"text-sm font-medium\">\n              {{ s.text }}\n            </p>\n            <p class=\"mt-2 text-sm text-muted-foreground\">\n              {{ s.description }}\n            </p>\n          </div>\n        </template>\n      </div>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const stats = [\n    {\n      text: \"Success Rate\",\n      value: \"99%\",\n      icon: \"lucide:trending-up\",\n      description: \"Project completion\",\n    },\n    {\n      text: \"Response Time\",\n      value: \"<1hr\",\n      icon: \"lucide:clock\",\n      description: \"Average support\",\n    },\n    {\n      text: \"Team Size\",\n      value: \"100+\",\n      icon: \"lucide:users\",\n      description: \"Expert members\",\n    },\n    {\n      text: \"Experience\",\n      value: \"10yr\",\n      icon: \"lucide:award\",\n      description: \"In the industry\",\n    },\n  ];\n</script>\n","category":"Metric","path":"Metric/BlockMetric8.vue","components":["container"]},{"name":"Metric 9","fileName":"BlockMetric9.vue","file":"<template>\n  <UiContainer class=\"py-10 lg:py-20\">\n    <div class=\"relative overflow-hidden rounded-lg bg-primary px-8 py-12 lg:px-16 lg:py-20\">\n      <div class=\"relative z-10\">\n        <div class=\"mb-10 text-center lg:mb-16\">\n          <h3 class=\"mb-3 text-3xl font-semibold text-primary-foreground lg:text-4xl\">\n            Powering innovation worldwide\n          </h3>\n          <p class=\"text-lg text-primary-foreground/80\">\n            Trusted by leading companies and startups\n          </p>\n        </div>\n\n        <div\n          class=\"grid grid-cols-2 gap-8 text-center text-primary-foreground md:grid-cols-4 lg:gap-12\"\n        >\n          <template v-for=\"(s, i) in stats\" :key=\"i\">\n            <div>\n              <h4 class=\"mb-2 text-4xl font-bold lg:text-5xl\">\n                {{ s.value }}\n              </h4>\n              <p class=\"text-sm font-medium text-primary-foreground/80\">\n                {{ s.text }}\n              </p>\n            </div>\n          </template>\n        </div>\n      </div>\n\n      <div\n        class=\"absolute inset-0 bg-[linear-gradient(to_right,#ffffff10_1px,transparent_1px),linear-gradient(to_bottom,#ffffff10_1px,transparent_1px)] bg-size-[34px_34px]\"\n      ></div>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const stats = [\n    { text: \"Enterprise clients\", value: \"500+\" },\n    { text: \"Countries served\", value: \"120\" },\n    { text: \"Uptime SLA\", value: \"99.99%\" },\n    { text: \"Monthly transactions\", value: \"5M+\" },\n  ];\n</script>\n","category":"Metric","path":"Metric/BlockMetric9.vue","components":["container"]},{"name":"Navigation 1","fileName":"BlockNavigation1.vue","file":"<template>\n  <header class=\"z-20 border-b bg-background/90 backdrop-blur\">\n    <UiContainer class=\"flex h-16 items-center justify-between lg:h-20\">\n      <div class=\"flex items-center gap-10\">\n        <NuxtLink to=\"#\" class=\"flex items-center gap-3\">\n          <img\n            src=\"/icon.png\"\n            fit=\"contain\"\n            alt=\"Company Logo\"\n            title=\"Company Logo\"\n            class=\"h-6 rounded object-contain lg:h-8\"\n          />\n          <span class=\"font-semibold lg:text-lg\">UI Thing</span>\n        </NuxtLink>\n        <UiNavigationMenu as=\"nav\" class=\"hidden items-center justify-start gap-8 lg:flex\">\n          <UiNavigationMenuList class=\"gap-2\">\n            <UiNavigationMenuItem>\n              <UiNavigationMenuLink as-child>\n                <UiButton to=\"#\" variant=\"ghost\" size=\"sm\"> Home</UiButton>\n              </UiNavigationMenuLink>\n            </UiNavigationMenuItem>\n            <template v-for=\"(data, link, i) in links\" :key=\"i\">\n              <UiNavigationMenuItem>\n                <UiNavigationMenuTrigger class=\"h-9 px-3 text-sm capitalize\" :title=\"link\" />\n                <UiNavigationMenuContent>\n                  <div\n                    class=\"grid grid-cols-1 gap-5 p-4 lg:w-[750px] lg:grid-cols-2 xl:w-[1000px] xl:grid-cols-3\"\n                  >\n                    <div v-for=\"(item, cat, index) in data\" :key=\"`${cat}-${index}`\">\n                      <p class=\"mb-5 text-sm font-semibold text-primary capitalize\">{{ cat }}</p>\n                      <ul class=\"flex w-full flex-col gap-2\">\n                        <li v-for=\"(child, k) in item\" :key=\"k\">\n                          <UiNavigationMenuLink class=\"data-active:bg-muted/80\" as-child>\n                            <NuxtLink\n                              :to=\"child.href\"\n                              class=\"flex flex-row gap-4 rounded-md p-3 transition hover:bg-muted/80 focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none\"\n                            >\n                              <Icon\n                                :name=\"child.icon\"\n                                class=\"mt-px h-5 w-5 shrink-0 text-primary\"\n                              />\n                              <div class=\"flex flex-col gap-1.5 leading-none\">\n                                <p class=\"text-sm font-semibold\">{{ child.name }}</p>\n                                <p\n                                  class=\"text-sm text-muted-foreground\"\n                                  v-html=\"child.description\"\n                                />\n                              </div>\n                            </NuxtLink>\n                          </UiNavigationMenuLink>\n                        </li>\n                      </ul>\n                    </div>\n                  </div>\n                </UiNavigationMenuContent>\n              </UiNavigationMenuItem>\n            </template>\n            <UiNavigationMenuItem>\n              <UiNavigationMenuLink as-child>\n                <UiButton to=\"#\" variant=\"ghost\" size=\"sm\">Pricing</UiButton>\n              </UiNavigationMenuLink>\n            </UiNavigationMenuItem>\n          </UiNavigationMenuList>\n        </UiNavigationMenu>\n      </div>\n      <div class=\"lg:hidden\">\n        <UiSheet>\n          <UiSheetTrigger as-child>\n            <UiButton variant=\"ghost\" size=\"icon-sm\">\n              <Icon name=\"lucide:menu\" class=\"h-5 w-5\" />\n            </UiButton>\n            <UiSheetContent class=\"w-[90%] p-0\">\n              <template #content>\n                <UiSheetTitle class=\"sr-only\" title=\"Mobile menu\" />\n                <UiSheetDescription class=\"sr-only\" description=\"Mobile menu\" />\n                <UiSheetX class=\"z-20\" />\n\n                <UiScrollArea class=\"h-full p-5\">\n                  <div class=\"flex flex-col gap-2\">\n                    <UiButton variant=\"ghost\" class=\"justify-start text-base\" to=\"#\">Home</UiButton>\n                    <template v-for=\"(data, link, i) in links\" :key=\"i\">\n                      <UiCollapsible>\n                        <UiCollapsibleTrigger as-child>\n                          <UiButton\n                            variant=\"ghost\"\n                            class=\"w-full justify-start text-base capitalize *:data-[state=open]:-rotate-180\"\n                            to=\"#\"\n                            >{{ link }}\n                            <Icon name=\"lucide:chevron-down\" class=\"ml-auto size-4 transition\"\n                          /></UiButton>\n                        </UiCollapsibleTrigger>\n                        <UiCollapsibleContent\n                          class=\"data-[state=closed]:animate-none data-[state=open]:p-3 data-[state=open]:pt-0\"\n                        >\n                          <div\n                            v-for=\"(item, cat, index) in data\"\n                            :key=\"`${cat}-${index}`\"\n                            class=\"mt-5\"\n                          >\n                            <p class=\"mb-5 text-sm font-semibold text-primary capitalize\">\n                              {{ cat }}\n                            </p>\n                            <ul class=\"flex w-full flex-col gap-2\">\n                              <li v-for=\"(child, k) in item\" :key=\"k\">\n                                <UiNavigationMenuLink class=\"data-active:bg-muted/80\" as-child>\n                                  <NuxtLink\n                                    :to=\"child.href\"\n                                    class=\"flex flex-row gap-4 rounded-md p-3 transition hover:bg-muted/80 focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none\"\n                                  >\n                                    <Icon\n                                      :name=\"child.icon\"\n                                      class=\"mt-px h-5 w-5 shrink-0 text-primary\"\n                                    />\n                                    <div class=\"flex flex-col gap-1.5 leading-none\">\n                                      <p class=\"text-sm font-semibold\">{{ child.name }}</p>\n                                    </div>\n                                  </NuxtLink>\n                                </UiNavigationMenuLink>\n                              </li>\n                            </ul>\n                          </div>\n                        </UiCollapsibleContent>\n                      </UiCollapsible>\n                    </template>\n                    <UiButton variant=\"ghost\" class=\"justify-start text-base\" to=\"#\"\n                      >Pricing</UiButton\n                    >\n\n                    <UiGradientDivider class=\"my-5\" />\n\n                    <ul class=\"grid grid-cols-2 gap-x-3 gap-y-5 px-4\">\n                      <li v-for=\"(m, j) in miniLinks\" :key=\"j\">\n                        <NuxtLink class=\"py-2\" :to=\"m.href\">{{ m.name }}</NuxtLink>\n                      </li>\n                    </ul>\n                    <UiGradientDivider class=\"my-5\" />\n                    <UiButton to=\"#\">Sign up</UiButton>\n                    <UiButton variant=\"outline\" to=\"#\">Log in</UiButton>\n                  </div>\n                </UiScrollArea>\n              </template>\n            </UiSheetContent>\n          </UiSheetTrigger>\n        </UiSheet>\n      </div>\n      <div class=\"hidden items-center gap-3 lg:flex\">\n        <UiButton to=\"#\" variant=\"ghost\" size=\"sm\">Log in</UiButton>\n        <UiButton to=\"#\" size=\"sm\">Sign up</UiButton>\n      </div>\n    </UiContainer>\n  </header>\n</template>\n\n<script lang=\"ts\" setup>\n  const miniLinks = [\n    { name: \"About us\", href: \"#\" },\n    { name: \"Press\", href: \"#\" },\n    { name: \"Careers\", href: \"#\" },\n    { name: \"Legal\", href: \"#\" },\n    { name: \"Support\", href: \"#\" },\n    { name: \"Contact\", href: \"#\" },\n    { name: \"Sitemap\", href: \"#\" },\n    { name: \"Cookie settings\", href: \"#\" },\n  ];\n  const links = {\n    products: {\n      resources: [\n        {\n          name: \"Blog\",\n          description: \"The latest industry news, updates and info.\",\n          icon: \"lucide:book\",\n          href: \"#\",\n        },\n        {\n          name: \"Customer stories\",\n          description: \"See how our customers use our platform to grow their business.\",\n          icon: \"lucide:sparkle\",\n          href: \"#\",\n        },\n        {\n          name: \"Video tutorials\",\n          description: \"All the information you need to know about our platform.\",\n          icon: \"lucide:play-circle\",\n          href: \"#\",\n        },\n        {\n          name: \"Help center\",\n          description: \"Get all your questions answered in our help center.\",\n          icon: \"lucide:life-buoy\",\n          href: \"#\",\n        },\n      ],\n      company: [\n        {\n          name: \"About us\",\n          description: \"Learn more about our company and our team.\",\n          icon: \"lucide:flag\",\n          href: \"#\",\n        },\n        {\n          name: \"Careers\",\n          description: \"Join our team and help us build the future.\",\n          icon: \"lucide:briefcase\",\n          href: \"#\",\n        },\n        {\n          name: \"Contact us\",\n          description: \"Get in touch with our team.\",\n          icon: \"lucide:mail\",\n          href: \"#\",\n        },\n      ],\n      \"use cases\": [\n        {\n          name: \"Marketing\",\n          description: \"Learn more about our company and our team.\",\n          icon: \"lucide:flag\",\n          href: \"#\",\n        },\n        {\n          name: \"Sales\",\n          description: \"Join our team and help us build the future.\",\n          icon: \"lucide:circle-dollar-sign\",\n          href: \"#\",\n        },\n        {\n          name: \"Customer support\",\n          description: \"Get in touch with our team.\",\n          icon: \"lucide:mail\",\n          href: \"#\",\n        },\n        {\n          name: \"Engage\",\n          description: \"Get in touch with our team.\",\n          icon: \"lucide:messages-square\",\n          href: \"#\",\n        },\n      ],\n    },\n    resources: {\n      resources: [\n        {\n          name: \"Blog\",\n          description: \"The latest industry news, updates and info.\",\n          icon: \"lucide:book\",\n          href: \"#\",\n        },\n        {\n          name: \"Customer stories\",\n          description: \"See how our customers use our platform to grow their business.\",\n          icon: \"lucide:sparkle\",\n          href: \"#\",\n        },\n        {\n          name: \"Video tutorials\",\n          description: \"All the information you need to know about our platform.\",\n          icon: \"lucide:play-circle\",\n          href: \"#\",\n        },\n        {\n          name: \"Help center\",\n          description: \"Get all your questions answered in our help center.\",\n          icon: \"lucide:life-buoy\",\n          href: \"#\",\n        },\n      ],\n      company: [\n        {\n          name: \"About us\",\n          description: \"Learn more about our company and our team.\",\n          icon: \"lucide:flag\",\n          href: \"#\",\n        },\n        {\n          name: \"Careers\",\n          description: \"Join our team and help us build the future.\",\n          icon: \"lucide:briefcase\",\n          href: \"#\",\n        },\n        {\n          name: \"Contact us\",\n          description: \"Get in touch with our team.\",\n          icon: \"lucide:mail\",\n          href: \"#\",\n        },\n      ],\n      \"use cases\": [\n        {\n          name: \"Marketing\",\n          description: \"Learn more about our company and our team.\",\n          icon: \"lucide:flag\",\n          href: \"#\",\n        },\n        {\n          name: \"Sales\",\n          description: \"Join our team and help us build the future.\",\n          icon: \"lucide:circle-dollar-sign\",\n          href: \"#\",\n        },\n        {\n          name: \"Customer support\",\n          description: \"Get in touch with our team.\",\n          icon: \"lucide:mail\",\n          href: \"#\",\n        },\n        {\n          name: \"Engage\",\n          description: \"Get in touch with our team.\",\n          icon: \"lucide:messages-square\",\n          href: \"#\",\n        },\n      ],\n    },\n  };\n</script>\n","category":"Navigation","path":"Navigation/BlockNavigation1.vue","components":["button","collapsible","collapsiblecontent","collapsibletrigger","container","gradientdivider","navigationmenu","navigationmenucontent","navigationmenuitem","navigationmenulink","navigationmenulist","navigationmenutrigger","scrollarea","sheet","sheetcontent","sheetdescription","sheettitle","sheettrigger","sheetx"]},{"name":"Navigation 2","fileName":"BlockNavigation2.vue","file":"<template>\n  <header class=\"z-20 border-b bg-background/90 backdrop-blur\">\n    <UiContainer class=\"flex h-16 items-center justify-between lg:h-20\">\n      <div class=\"flex items-center gap-10\">\n        <NuxtLink to=\"#\" class=\"flex items-center gap-3\">\n          <img\n            src=\"/icon.png\"\n            fit=\"contain\"\n            alt=\"Company Logo\"\n            title=\"Company Logo\"\n            class=\"h-6 rounded object-contain lg:h-8\"\n          />\n          <span class=\"font-semibold lg:text-lg\">UI Thing</span>\n        </NuxtLink>\n        <UiNavigationMenu as=\"nav\" class=\"hidden items-center justify-start gap-8 lg:flex\">\n          <UiNavigationMenuList class=\"gap-2\">\n            <UiNavigationMenuItem>\n              <UiNavigationMenuLink as-child>\n                <UiButton to=\"#\" variant=\"ghost\" size=\"sm\"> Home</UiButton>\n              </UiNavigationMenuLink>\n            </UiNavigationMenuItem>\n            <template v-for=\"(data, link, i) in links\" :key=\"i\">\n              <UiNavigationMenuItem>\n                <UiNavigationMenuTrigger class=\"h-9 px-3 text-sm capitalize\" :title=\"link\" />\n                <UiNavigationMenuContent>\n                  <div class=\"lg:w-[750px] xl:w-[1000px]\">\n                    <template v-for=\"(item, cat, index) in data\" :key=\"`${cat}-${index}`\">\n                      <ul class=\"grid w-full grid-cols-2 flex-col gap-2 xl:grid-cols-3\">\n                        <li v-for=\"(child, k) in item\" :key=\"k\">\n                          <UiNavigationMenuLink class=\"data-active:bg-muted/80\" as-child>\n                            <NuxtLink\n                              :to=\"child.href\"\n                              class=\"flex flex-row gap-4 rounded-md p-3 transition hover:bg-muted/80 focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none dark:hover:bg-muted/20\"\n                            >\n                              <div\n                                class=\"inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n                              >\n                                <Icon\n                                  :name=\"child.icon\"\n                                  class=\"mt-px h-5 w-5 shrink-0 text-muted-foreground\"\n                                />\n                              </div>\n                              <div class=\"flex flex-col gap-1.5 leading-none\">\n                                <p class=\"text-sm font-semibold\">{{ child.name }}</p>\n                                <p\n                                  class=\"text-sm text-muted-foreground\"\n                                  v-html=\"child.description\"\n                                />\n                              </div>\n                            </NuxtLink>\n                          </UiNavigationMenuLink>\n                        </li>\n                      </ul>\n                    </template>\n                    <div\n                      class=\"col-span-full flex items-center justify-center bg-muted/20 py-5 dark:bg-muted/5\"\n                    >\n                      <NuxtLink class=\"font-semibold text-primary hover:underline\" to=\"#\"\n                        >Looking for a new career? Get in touch!</NuxtLink\n                      >\n                    </div>\n                  </div>\n                </UiNavigationMenuContent>\n              </UiNavigationMenuItem>\n            </template>\n            <UiNavigationMenuItem>\n              <UiNavigationMenuLink as-child>\n                <UiButton to=\"#\" variant=\"ghost\" size=\"sm\">Pricing</UiButton>\n              </UiNavigationMenuLink>\n            </UiNavigationMenuItem>\n          </UiNavigationMenuList>\n        </UiNavigationMenu>\n      </div>\n      <div class=\"lg:hidden\">\n        <UiSheet>\n          <UiSheetTrigger as-child>\n            <UiButton variant=\"ghost\" size=\"icon-sm\">\n              <Icon name=\"lucide:menu\" class=\"h-5 w-5\" />\n            </UiButton>\n            <UiSheetContent class=\"w-[90%] p-0\">\n              <template #content>\n                <UiSheetTitle class=\"sr-only\" title=\"Mobile menu\" />\n                <UiSheetDescription class=\"sr-only\" description=\"Mobile menu\" />\n                <UiSheetX class=\"z-20\" />\n\n                <UiScrollArea class=\"h-full p-5\">\n                  <div class=\"flex flex-col gap-2\">\n                    <UiButton variant=\"ghost\" class=\"justify-start text-base\" to=\"#\">Home</UiButton>\n                    <template v-for=\"(data, link, i) in links\" :key=\"i\">\n                      <UiCollapsible>\n                        <UiCollapsibleTrigger as-child>\n                          <UiButton\n                            variant=\"ghost\"\n                            class=\"w-full justify-start text-base capitalize *:data-[state=open]:-rotate-180\"\n                            to=\"#\"\n                            >{{ link }}\n                            <Icon name=\"lucide:chevron-down\" class=\"ml-auto size-4 transition\"\n                          /></UiButton>\n                        </UiCollapsibleTrigger>\n                        <UiCollapsibleContent\n                          class=\"data-[state=closed]:animate-none data-[state=open]:p-3 data-[state=open]:pt-0\"\n                        >\n                          <div\n                            v-for=\"(item, cat, index) in data\"\n                            :key=\"`${cat}-${index}`\"\n                            class=\"mt-5\"\n                          >\n                            <ul class=\"flex w-full flex-col gap-2\">\n                              <li v-for=\"(child, k) in item\" :key=\"k\">\n                                <NuxtLink\n                                  :to=\"child.href\"\n                                  class=\"flex flex-row gap-4 rounded-md py-3 transition hover:bg-muted/80 focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none\"\n                                >\n                                  <div\n                                    class=\"inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n                                  >\n                                    <Icon\n                                      :name=\"child.icon\"\n                                      class=\"mt-px h-5 w-5 shrink-0 text-muted-foreground\"\n                                    />\n                                  </div>\n                                  <div class=\"flex flex-col gap-1.5 leading-none\">\n                                    <p class=\"text-sm font-semibold\">{{ child.name }}</p>\n                                    <p\n                                      class=\"text-sm text-muted-foreground\"\n                                      v-html=\"child.description\"\n                                    />\n                                  </div>\n                                </NuxtLink>\n                              </li>\n                            </ul>\n                          </div>\n                        </UiCollapsibleContent>\n                      </UiCollapsible>\n                    </template>\n                    <UiButton variant=\"ghost\" class=\"justify-start text-base\" to=\"#\"\n                      >Pricing</UiButton\n                    >\n\n                    <UiGradientDivider class=\"my-5\" />\n\n                    <ul class=\"grid grid-cols-2 gap-x-3 gap-y-5 px-4\">\n                      <li v-for=\"(m, j) in miniLinks\" :key=\"j\">\n                        <NuxtLink class=\"py-2\" :to=\"m.href\">{{ m.name }}</NuxtLink>\n                      </li>\n                    </ul>\n                    <UiGradientDivider class=\"my-5\" />\n                    <UiButton to=\"#\">Sign up</UiButton>\n                    <UiButton variant=\"outline\" to=\"#\">Log in</UiButton>\n                  </div>\n                </UiScrollArea>\n              </template>\n            </UiSheetContent>\n          </UiSheetTrigger>\n        </UiSheet>\n      </div>\n      <div class=\"hidden items-center gap-3 lg:flex\">\n        <UiButton to=\"#\" variant=\"ghost\" size=\"sm\">Log in</UiButton>\n        <UiButton to=\"#\" size=\"sm\">Sign up</UiButton>\n      </div>\n    </UiContainer>\n  </header>\n</template>\n\n<script lang=\"ts\" setup>\n  const miniLinks = [\n    { name: \"About us\", href: \"#\" },\n    { name: \"Press\", href: \"#\" },\n    { name: \"Careers\", href: \"#\" },\n    { name: \"Legal\", href: \"#\" },\n    { name: \"Support\", href: \"#\" },\n    { name: \"Contact\", href: \"#\" },\n    { name: \"Sitemap\", href: \"#\" },\n    { name: \"Cookie settings\", href: \"#\" },\n  ];\n  const links = {\n    products: {\n      items: [\n        {\n          name: \"Blog\",\n          description: \"The latest industry news, updates and info.\",\n          icon: \"lucide:book\",\n          href: \"#\",\n        },\n        {\n          name: \"About us\",\n          description: \"The latest industry news, updates and info.\",\n          icon: \"lucide:info\",\n          href: \"#\",\n        },\n        {\n          name: \"Video tutorials\",\n          description: \"All the information you need to know about our platform.\",\n          icon: \"lucide:play-circle\",\n          href: \"#\",\n        },\n        {\n          name: \"Customer stories\",\n          description: \"See how our customers use our platform to grow their business.\",\n          icon: \"lucide:sparkle\",\n          href: \"#\",\n        },\n        {\n          name: \"Help center\",\n          description: \"Get all your questions answered in our help center.\",\n          icon: \"lucide:life-buoy\",\n          href: \"#\",\n        },\n      ],\n    },\n    resources: {\n      items: [\n        {\n          name: \"About us\",\n          description: \"The latest industry news, updates and info.\",\n          icon: \"lucide:info\",\n          href: \"#\",\n        },\n        {\n          name: \"Customer stories\",\n          description: \"See how our customers use our platform to grow their business.\",\n          icon: \"lucide:sparkle\",\n          href: \"#\",\n        },\n        {\n          name: \"Video tutorials\",\n          description: \"All the information you need to know about our platform.\",\n          icon: \"lucide:play-circle\",\n          href: \"#\",\n        },\n        {\n          name: \"Help center\",\n          description: \"Get all your questions answered in our help center.\",\n          icon: \"lucide:life-buoy\",\n          href: \"#\",\n        },\n        {\n          name: \"Blog\",\n          description: \"The latest industry news, updates and info.\",\n          icon: \"lucide:book\",\n          href: \"#\",\n        },\n      ],\n    },\n  };\n</script>\n","category":"Navigation","path":"Navigation/BlockNavigation2.vue","components":["button","collapsible","collapsiblecontent","collapsibletrigger","container","gradientdivider","navigationmenu","navigationmenucontent","navigationmenuitem","navigationmenulink","navigationmenulist","navigationmenutrigger","scrollarea","sheet","sheetcontent","sheetdescription","sheettitle","sheettrigger","sheetx"]},{"name":"Navigation 3","fileName":"BlockNavigation3.vue","file":"<template>\n  <header class=\"z-20 border-b bg-background/90 backdrop-blur\">\n    <UiContainer class=\"flex h-16 items-center justify-between lg:h-20\">\n      <div class=\"flex items-center gap-10\">\n        <NuxtLink to=\"#\" class=\"flex items-center gap-3\">\n          <img\n            src=\"/icon.png\"\n            fit=\"contain\"\n            alt=\"Company Logo\"\n            title=\"Company Logo\"\n            class=\"h-6 rounded object-contain lg:h-8\"\n          />\n          <span class=\"font-semibold lg:text-lg\">UI Thing</span>\n        </NuxtLink>\n        <UiNavigationMenu as=\"nav\" class=\"hidden items-center justify-start gap-8 lg:flex\">\n          <UiNavigationMenuList class=\"gap-2\">\n            <UiNavigationMenuItem>\n              <UiNavigationMenuLink as-child>\n                <UiButton to=\"#\" variant=\"ghost\" size=\"sm\"> Home</UiButton>\n              </UiNavigationMenuLink>\n            </UiNavigationMenuItem>\n            <UiNavigationMenuItem>\n              <UiNavigationMenuTrigger class=\"h-9 px-3 text-sm capitalize\" title=\"Blogs\" />\n              <UiNavigationMenuContent class=\"p-0\">\n                <div class=\"bg-background lg:w-[750px] xl:w-[1000px]\">\n                  <ul class=\"grid w-full grid-cols-3 flex-col gap-5 p-4 xl:grid-cols-3\">\n                    <li v-for=\"b in 9\" :key=\"b\">\n                      <UiNavigationMenuLink as-child>\n                        <NuxtLink\n                          to=\"#\"\n                          class=\"group flex gap-4 rounded-md p-3 transition hover:bg-muted/80 focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none dark:hover:bg-muted/20\"\n                        >\n                          <div class=\"h-[80px] overflow-hidden rounded-lg shadow-xs\">\n                            <img\n                              loading=\"lazy\"\n                              :src=\"`http://unsplash.it/400/90?random=${b}&gravity=center.webp`\"\n                              alt=\"Random blog image\"\n                              width=\"400\"\n                              height=\"90\"\n                              class=\"h-full object-cover transition group-hover:scale-110 hover:scale-110\"\n                            />\n                          </div>\n                          <div class=\"flex flex-col gap-1.5 leading-none\">\n                            <p class=\"text-sm font-semibold\">Auto layout explained</p>\n                            <p class=\"line-clamp-2 text-sm overflow-ellipsis text-muted-foreground\">\n                              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam\n                              voluptatum, voluptate, quibusdam, quia voluptas quod exercitationem\n                              quos quas voluptatibus quidem\n                            </p>\n                          </div>\n                        </NuxtLink>\n                      </UiNavigationMenuLink>\n                    </li>\n                  </ul>\n                  <div\n                    class=\"col-span-full flex items-center justify-center bg-muted/20 py-5 dark:bg-muted/5\"\n                  >\n                    <NuxtLink\n                      class=\"group flex items-center gap-2 font-semibold text-primary hover:underline\"\n                      to=\"#\"\n                      >View all blog posts\n                      <Icon\n                        name=\"lucide:arrow-right\"\n                        class=\"size-4 transition group-hover:translate-x-1\"\n                    /></NuxtLink>\n                  </div>\n                </div>\n              </UiNavigationMenuContent>\n            </UiNavigationMenuItem>\n\n            <UiNavigationMenuItem>\n              <UiNavigationMenuLink as-child>\n                <UiButton to=\"#\" variant=\"ghost\" size=\"sm\">Pricing</UiButton>\n              </UiNavigationMenuLink>\n            </UiNavigationMenuItem>\n          </UiNavigationMenuList>\n        </UiNavigationMenu>\n      </div>\n      <div class=\"lg:hidden\">\n        <UiSheet>\n          <UiSheetTrigger as-child>\n            <UiButton variant=\"ghost\" size=\"icon-sm\">\n              <Icon name=\"lucide:menu\" class=\"h-5 w-5\" />\n            </UiButton>\n            <UiSheetContent class=\"w-[90%] p-0\">\n              <template #content>\n                <UiSheetTitle class=\"sr-only\" title=\"Mobile menu\" />\n                <UiSheetDescription class=\"sr-only\" description=\"Mobile menu\" />\n                <UiSheetX class=\"z-20\" />\n\n                <UiScrollArea class=\"h-full p-5\">\n                  <div class=\"flex flex-col gap-2\">\n                    <UiButton variant=\"ghost\" class=\"justify-start text-base\" to=\"#\">Home</UiButton>\n\n                    <UiCollapsible>\n                      <UiCollapsibleTrigger as-child>\n                        <UiButton\n                          variant=\"ghost\"\n                          class=\"w-full justify-start text-base capitalize *:data-[state=open]:-rotate-180\"\n                          to=\"#\"\n                          >Blogs <Icon name=\"lucide:chevron-down\" class=\"ml-auto size-4 transition\"\n                        /></UiButton>\n                      </UiCollapsibleTrigger>\n                      <UiCollapsibleContent\n                        class=\"data-[state=closed]:animate-none data-[state=open]:p-3 data-[state=open]:pt-0\"\n                      >\n                        <div class=\"mt-5\">\n                          <ul class=\"flex w-full flex-col gap-5\">\n                            <li v-for=\"b in 3\" :key=\"b\">\n                              <NuxtLink\n                                to=\"#\"\n                                class=\"flex flex-col gap-5 rounded-md transition hover:bg-muted/80 focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none dark:hover:bg-muted/20\"\n                              >\n                                <div class=\"h-[200px] w-full overflow-hidden rounded-lg shadow-xs\">\n                                  <img\n                                    :src=\"`http://unsplash.it/400/210?random=${b}&gravity=center.webp`\"\n                                    alt=\"Random blog image\"\n                                    width=\"400\"\n                                    loading=\"lazy\"\n                                    height=\"200\"\n                                    class=\"h-full w-full object-cover transition group-hover:scale-110 hover:scale-110\"\n                                  />\n                                </div>\n                                <div class=\"flex flex-col gap-1.5 leading-none\">\n                                  <p class=\"line-clamp-1 font-semibold overflow-ellipsis\">\n                                    Auto layout explained\n                                  </p>\n                                  <p\n                                    class=\"line-clamp-2 text-sm overflow-ellipsis text-muted-foreground\"\n                                  >\n                                    Lorem ipsum dolor sit amet consectetur adipisicing elit.\n                                    Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod\n                                    exercitationem quos quas voluptatibus quidem\n                                  </p>\n                                </div>\n                              </NuxtLink>\n                            </li>\n                          </ul>\n                        </div>\n                      </UiCollapsibleContent>\n                    </UiCollapsible>\n\n                    <UiButton variant=\"ghost\" class=\"justify-start text-base\" to=\"#\"\n                      >Pricing</UiButton\n                    >\n\n                    <UiGradientDivider class=\"my-5\" />\n\n                    <ul class=\"grid grid-cols-2 gap-x-3 gap-y-5 px-4\">\n                      <li v-for=\"(m, j) in miniLinks\" :key=\"j\">\n                        <NuxtLink class=\"py-2\" :to=\"m.href\">{{ m.name }}</NuxtLink>\n                      </li>\n                    </ul>\n                    <UiGradientDivider class=\"my-5\" />\n                    <UiButton to=\"#\">Sign up</UiButton>\n                    <UiButton variant=\"outline\" to=\"#\">Log in</UiButton>\n                  </div>\n                </UiScrollArea>\n              </template>\n            </UiSheetContent>\n          </UiSheetTrigger>\n        </UiSheet>\n      </div>\n      <div class=\"hidden items-center gap-3 lg:flex\">\n        <UiButton to=\"#\" variant=\"ghost\" size=\"sm\">Log in</UiButton>\n        <UiButton to=\"#\" size=\"sm\">Sign up</UiButton>\n      </div>\n    </UiContainer>\n  </header>\n</template>\n\n<script lang=\"ts\" setup>\n  const miniLinks = [\n    { name: \"About us\", href: \"#\" },\n    { name: \"Press\", href: \"#\" },\n    { name: \"Careers\", href: \"#\" },\n    { name: \"Legal\", href: \"#\" },\n    { name: \"Support\", href: \"#\" },\n    { name: \"Contact\", href: \"#\" },\n    { name: \"Sitemap\", href: \"#\" },\n    { name: \"Cookie settings\", href: \"#\" },\n  ];\n</script>\n","category":"Navigation","path":"Navigation/BlockNavigation3.vue","components":["button","collapsible","collapsiblecontent","collapsibletrigger","container","gradientdivider","navigationmenu","navigationmenucontent","navigationmenuitem","navigationmenulink","navigationmenulist","navigationmenutrigger","scrollarea","sheet","sheetcontent","sheetdescription","sheettitle","sheettrigger","sheetx"]},{"name":"Navigation 4","fileName":"BlockNavigation4.vue","file":"<template>\n  <header class=\"z-20 border-b bg-background/90 backdrop-blur\">\n    <UiContainer class=\"flex h-16 items-center justify-between lg:h-20\">\n      <div class=\"flex items-center gap-10\">\n        <NuxtLink to=\"#\" class=\"flex items-center gap-3\">\n          <img\n            src=\"/icon.png\"\n            fit=\"contain\"\n            alt=\"Company Logo\"\n            title=\"Company Logo\"\n            class=\"h-6 rounded object-contain lg:h-8\"\n          />\n          <span class=\"font-semibold lg:text-lg\">UI Thing</span>\n        </NuxtLink>\n        <UiNavigationMenu as=\"nav\" class=\"hidden items-center justify-start gap-8 lg:flex\">\n          <UiNavigationMenuList class=\"gap-2\">\n            <UiNavigationMenuItem>\n              <UiNavigationMenuLink as-child>\n                <UiButton to=\"#\" variant=\"ghost\" size=\"sm\"> Home</UiButton>\n              </UiNavigationMenuLink>\n            </UiNavigationMenuItem>\n            <template v-for=\"l in links\" :key=\"l.title\">\n              <UiNavigationMenuItem>\n                <UiNavigationMenuTrigger class=\"h-9 px-3 text-sm capitalize\" :title=\"l.title\" />\n                <UiNavigationMenuContent class=\"p-0\">\n                  <div class=\"w-[360px] bg-background shadow\">\n                    <ul class=\"flex flex-col gap-3 p-3\">\n                      <li v-for=\"(item, k) in l.items\" :key=\"k\">\n                        <UiNavigationMenuLink as-child>\n                          <NuxtLink\n                            to=\"#\"\n                            class=\"group flex flex-row gap-4 rounded-md p-3 transition hover:bg-muted/80 focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none dark:hover:bg-muted/20\"\n                          >\n                            <Icon :name=\"item.icon\" class=\"mt-px h-5 w-5 shrink-0 text-primary\" />\n                            <div class=\"flex flex-col gap-1.5 leading-none\">\n                              <p class=\"text-sm font-semibold\">{{ item.name }}</p>\n                              <p class=\"text-sm text-muted-foreground\" v-html=\"item.description\" />\n                            </div>\n                          </NuxtLink>\n                        </UiNavigationMenuLink>\n                      </li>\n                    </ul>\n                    <div\n                      class=\"col-span-full flex items-center justify-center bg-muted/20 py-5 dark:bg-muted/5\"\n                    >\n                      <NuxtLink\n                        class=\"flex items-center gap-2 text-sm font-semibold text-primary hover:underline\"\n                        to=\"#\"\n                        >Learn more <Icon class=\"shrink-0\" name=\"lucide:arrow-right\"\n                      /></NuxtLink>\n                    </div>\n                  </div>\n                </UiNavigationMenuContent>\n              </UiNavigationMenuItem>\n            </template>\n\n            <UiNavigationMenuItem>\n              <UiNavigationMenuLink as-child>\n                <UiButton to=\"#\" variant=\"ghost\" size=\"sm\">Pricing</UiButton>\n              </UiNavigationMenuLink>\n            </UiNavigationMenuItem>\n          </UiNavigationMenuList>\n        </UiNavigationMenu>\n      </div>\n      <div class=\"lg:hidden\">\n        <UiSheet>\n          <UiSheetTrigger as-child>\n            <UiButton variant=\"ghost\" size=\"icon-sm\">\n              <Icon name=\"lucide:menu\" class=\"h-5 w-5\" />\n            </UiButton>\n            <UiSheetContent class=\"w-[90%] p-0\">\n              <template #content>\n                <UiSheetTitle class=\"sr-only\" title=\"Mobile menu\" />\n                <UiSheetDescription class=\"sr-only\" description=\"Mobile menu\" />\n                <UiSheetX class=\"z-20\" />\n\n                <UiScrollArea class=\"h-full p-5\">\n                  <div class=\"flex flex-col gap-2\">\n                    <UiButton variant=\"ghost\" class=\"justify-start text-base\" to=\"#\">Home</UiButton>\n\n                    <template v-for=\"l in links\" :key=\"l.title\">\n                      <UiCollapsible>\n                        <UiCollapsibleTrigger as-child>\n                          <UiButton\n                            variant=\"ghost\"\n                            class=\"w-full justify-start text-base capitalize *:data-[state=open]:-rotate-180\"\n                            to=\"#\"\n                            >{{ l.title }}\n                            <Icon name=\"lucide:chevron-down\" class=\"ml-auto size-4 transition\"\n                          /></UiButton>\n                        </UiCollapsibleTrigger>\n                        <UiCollapsibleContent\n                          class=\"data-[state=closed]:animate-none data-[state=open]:p-3 data-[state=open]:pt-0\"\n                        >\n                          <div class=\"mt-5\">\n                            <ul class=\"flex w-full flex-col gap-5\">\n                              <li v-for=\"item in l.items\" :key=\"item.name\">\n                                <NuxtLink\n                                  :to=\"item.href\"\n                                  class=\"flex gap-4 rounded-md p-3 transition hover:bg-muted/80 focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none\"\n                                >\n                                  <Icon\n                                    :name=\"item.icon\"\n                                    class=\"mt-px h-5 w-5 shrink-0 text-primary\"\n                                  />\n                                  <div class=\"flex flex-col gap-1.5 leading-none\">\n                                    <p class=\"text-sm font-semibold\">{{ item.name }}</p>\n                                  </div>\n                                </NuxtLink>\n                              </li>\n                            </ul>\n                          </div>\n                        </UiCollapsibleContent>\n                      </UiCollapsible>\n                    </template>\n                    <UiButton variant=\"ghost\" class=\"justify-start text-base\" to=\"#\"\n                      >Pricing</UiButton\n                    >\n\n                    <UiGradientDivider class=\"my-5\" />\n\n                    <ul class=\"grid grid-cols-2 gap-x-3 gap-y-5 px-4\">\n                      <li v-for=\"(m, j) in miniLinks\" :key=\"j\">\n                        <NuxtLink class=\"py-2\" :to=\"m.href\">{{ m.name }}</NuxtLink>\n                      </li>\n                    </ul>\n                    <UiGradientDivider class=\"my-5\" />\n                    <UiButton to=\"#\">Sign up</UiButton>\n                    <UiButton variant=\"outline\" to=\"#\">Log in</UiButton>\n                  </div>\n                </UiScrollArea>\n              </template>\n            </UiSheetContent>\n          </UiSheetTrigger>\n        </UiSheet>\n      </div>\n      <div class=\"hidden items-center gap-3 lg:flex\">\n        <UiButton to=\"#\" variant=\"ghost\" size=\"sm\">Log in</UiButton>\n        <UiButton to=\"#\" size=\"sm\">Sign up</UiButton>\n      </div>\n    </UiContainer>\n  </header>\n</template>\n\n<script lang=\"ts\" setup>\n  const miniLinks = [\n    { name: \"About us\", href: \"#\" },\n    { name: \"Press\", href: \"#\" },\n    { name: \"Careers\", href: \"#\" },\n    { name: \"Legal\", href: \"#\" },\n    { name: \"Support\", href: \"#\" },\n    { name: \"Contact\", href: \"#\" },\n    { name: \"Sitemap\", href: \"#\" },\n    { name: \"Cookie settings\", href: \"#\" },\n  ];\n  const links = [\n    {\n      title: \"products\",\n\n      items: [\n        {\n          name: \"Blog\",\n          description: \"The latest industry news, updates and info.\",\n          icon: \"lucide:book\",\n          href: \"#\",\n        },\n        {\n          name: \"About us\",\n          description: \"The latest industry news, updates and info.\",\n          icon: \"lucide:info\",\n          href: \"#\",\n        },\n        {\n          name: \"Video tutorials\",\n          description: \"All the information you need to know about our platform.\",\n          icon: \"lucide:play-circle\",\n          href: \"#\",\n        },\n        {\n          name: \"Customer stories\",\n          description: \"See how our customers use our platform to grow their business.\",\n          icon: \"lucide:sparkle\",\n          href: \"#\",\n        },\n        {\n          name: \"Help center\",\n          description: \"Get all your questions answered in our help center.\",\n          icon: \"lucide:life-buoy\",\n          href: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"resources\",\n      items: [\n        {\n          name: \"About us\",\n          description: \"The latest industry news, updates and info.\",\n          icon: \"lucide:info\",\n          href: \"#\",\n        },\n        {\n          name: \"Customer stories\",\n          description: \"See how our customers use our platform to grow their business.\",\n          icon: \"lucide:sparkle\",\n          href: \"#\",\n        },\n        {\n          name: \"Video tutorials\",\n          description: \"All the information you need to know about our platform.\",\n          icon: \"lucide:play-circle\",\n          href: \"#\",\n        },\n        {\n          name: \"Help center\",\n          description: \"Get all your questions answered in our help center.\",\n          icon: \"lucide:life-buoy\",\n          href: \"#\",\n        },\n        {\n          name: \"Blog\",\n          description: \"The latest industry news, updates and info.\",\n          icon: \"lucide:book\",\n          href: \"#\",\n        },\n      ],\n    },\n  ];\n</script>\n","category":"Navigation","path":"Navigation/BlockNavigation4.vue","components":["button","collapsible","collapsiblecontent","collapsibletrigger","container","gradientdivider","navigationmenu","navigationmenucontent","navigationmenuitem","navigationmenulink","navigationmenulist","navigationmenutrigger","scrollarea","sheet","sheetcontent","sheetdescription","sheettitle","sheettrigger","sheetx"]},{"name":"Newsletter 1","fileName":"BlockNewsletter1.vue","file":"<template>\n  <UiContainer class=\"flex flex-col gap-y-16 py-10 lg:h-[720px] lg:flex-row lg:gap-10\">\n    <div class=\"flex h-full items-center justify-center lg:w-2/3 xl:w-1/2\">\n      <div>\n        <h1 class=\"mt-7 mb-4 text-4xl font-semibold lg:mt-5 lg:mb-6 lg:text-5xl xl:text-6xl\">\n          Be the first to know when we launch\n        </h1>\n        <p class=\"text-lg text-muted-foreground lg:text-xl\">\n          We're still building. Subscribe for updates and 20% off when we launch. No spam, we\n          promise!\n        </p>\n        <form\n          class=\"mt-8 flex w-full flex-col gap-3 sm:w-[500px] lg:mt-12 lg:w-full lg:flex-row lg:items-center\"\n        >\n          <div class=\"w-full lg:w-[60%]\">\n            <UiVeeInput required placeholder=\"Enter your email\" aria-label=\"Enter your email\" />\n          </div>\n          <p class=\"my-2 text-sm text-muted-foreground lg:hidden\">\n            We care about your data in our privacy policy.\n          </p>\n          <div>\n            <UiButton class=\"w-full whitespace-nowrap lg:w-auto\" type=\"submit\">Subscribe</UiButton>\n          </div>\n        </form>\n        <p class=\"mt-3 hidden text-sm text-muted-foreground lg:block\">\n          We care about your data in our privacy policy.\n        </p>\n      </div>\n    </div>\n    <div class=\"h-[350px] lg:h-full lg:w-1/3 xl:w-1/2\">\n      <img\n        class=\"h-full w-full object-cover\"\n        src=\"https://images.unsplash.com/photo-1599422314077-f4dfdaa4cd09?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n        alt=\"Hero section one styles\"\n        loading=\"eager\"\n        width=\"700\"\n        height=\"800\"\n        :title=\"`${COMPANY_NAME} newsletter image`\"\n      />\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup></script>\n","category":"Newsletter","path":"Newsletter/BlockNewsletter1.vue","components":["button","container","veeinput"]},{"name":"Newsletter 2","fileName":"BlockNewsletter2.vue","file":"<template>\n  <UiContainer class=\"flex flex-col justify-between gap-10 py-16 lg:flex-row lg:py-24\">\n    <div>\n      <h3 class=\"mb-4 text-3xl font-semibold md:mb-5 md:text-4xl\">Sign up for our newsletter</h3>\n      <p class=\"text-lg text-muted-foreground md:text-xl\">\n        Be the first to know about releases and industry news and insights.\n      </p>\n    </div>\n    <div>\n      <form class=\"flex w-full flex-col gap-3 sm:w-[500px] lg:flex-row lg:items-center\">\n        <div class=\"w-full lg:w-[300px] xl:w-[400px]\">\n          <UiVeeInput required placeholder=\"Enter your email\" aria-label=\"Enter your email\" />\n        </div>\n        <p class=\"my-2 text-sm text-muted-foreground lg:hidden\">\n          We care about your data in our privacy policy.\n        </p>\n        <div>\n          <UiButton class=\"w-full whitespace-nowrap lg:w-auto\" type=\"submit\">Subscribe</UiButton>\n        </div>\n      </form>\n      <p class=\"mt-3 hidden text-sm text-muted-foreground lg:block\">\n        We care about your data in our privacy policy.\n      </p>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup></script>\n","category":"Newsletter","path":"Newsletter/BlockNewsletter2.vue","components":["button","container","veeinput"]},{"name":"Newsletter 3","fileName":"BlockNewsletter3.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"containerVariant\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <div class=\"mx-auto max-w-2xl text-center\">\n        <Motion as-child :variants=\"childVariant\">\n          <UiBadge variant=\"secondary\" class=\"mb-4\">Newsletter</UiBadge>\n        </Motion>\n        <Motion as-child :variants=\"childVariant\">\n          <h2 class=\"mb-4 text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl\">\n            Stay in the loop\n          </h2>\n        </Motion>\n        <Motion as-child :variants=\"childVariant\">\n          <p class=\"mb-8 text-lg text-muted-foreground lg:text-xl\">\n            Join our newsletter to get the latest updates, exclusive content, and special offers\n            delivered straight to your inbox.\n          </p>\n        </Motion>\n        <Motion as-child :variants=\"childVariant\">\n          <form class=\"mx-auto flex max-w-md flex-col gap-3 sm:flex-row\">\n            <UiVeeInput\n              class=\"flex-1\"\n              type=\"email\"\n              required\n              placeholder=\"Enter your email\"\n              aria-label=\"Enter your email\"\n            />\n            <UiButton type=\"submit\" class=\"whitespace-nowrap\">Subscribe Now</UiButton>\n          </form>\n        </Motion>\n        <Motion as-child :variants=\"childVariant\">\n          <p class=\"mt-4 text-sm text-muted-foreground\">\n            We respect your privacy. Unsubscribe at any time.\n          </p>\n        </Motion>\n      </div>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const containerVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n</script>\n","category":"Newsletter","path":"Newsletter/BlockNewsletter3.vue","components":["badge","button","container","veeinput"]},{"name":"Newsletter 4","fileName":"BlockNewsletter4.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"containerVariant\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <UiCard class=\"overflow-hidden py-0\">\n        <div class=\"grid gap-8 lg:grid-cols-2\">\n          <Motion as-child :variants=\"contentVariant\">\n            <div class=\"flex flex-col justify-center p-8 lg:p-12\">\n              <h2 class=\"mb-4 text-3xl font-bold tracking-tight lg:text-4xl\">\n                Join 10,000+ Subscribers\n              </h2>\n              <p class=\"mb-6 text-lg text-muted-foreground\">\n                Get weekly insights, tips, and exclusive content delivered to your inbox. No spam,\n                ever.\n              </p>\n              <form class=\"flex flex-col gap-3 sm:flex-row\">\n                <UiVeeInput\n                  class=\"flex-1\"\n                  type=\"email\"\n                  required\n                  placeholder=\"Your email address\"\n                  aria-label=\"Your email address\"\n                />\n                <UiButton type=\"submit\" class=\"whitespace-nowrap\">Get Started</UiButton>\n              </form>\n              <div class=\"mt-6 flex items-center gap-6 text-sm text-muted-foreground\">\n                <div class=\"flex items-center gap-2\">\n                  <Icon name=\"lucide:check-circle\" class=\"size-5 text-primary\" />\n                  <span>Free forever</span>\n                </div>\n                <div class=\"flex items-center gap-2\">\n                  <Icon name=\"lucide:shield-check\" class=\"size-5 text-primary\" />\n                  <span>Secure</span>\n                </div>\n              </div>\n            </div>\n          </Motion>\n          <Motion as-child :variants=\"imageVariant\">\n            <div class=\"relative h-64 bg-linear-to-br from-primary/20 to-primary/5 lg:h-auto\">\n              <div class=\"absolute inset-0 flex items-center justify-center p-8\">\n                <div class=\"grid grid-cols-2 gap-4\">\n                  <div v-for=\"i in 4\" :key=\"i\" class=\"h-24 w-24 rounded-lg bg-card shadow-lg\"></div>\n                </div>\n              </div>\n            </div>\n          </Motion>\n        </div>\n      </UiCard>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const containerVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.15),\n      },\n    },\n  };\n\n  const contentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, x: -50 },\n    animate: {\n      opacity: 1,\n      x: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const imageVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, x: 50 },\n    animate: {\n      opacity: 1,\n      x: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n        delay: 0.2,\n      },\n    },\n  };\n</script>\n","category":"Newsletter","path":"Newsletter/BlockNewsletter4.vue","components":["button","card","container","veeinput"]},{"name":"Newsletter 5","fileName":"BlockNewsletter5.vue","file":"<template>\n  <div class=\"relative overflow-hidden bg-muted/50 py-16 lg:py-24\">\n    <div\n      class=\"absolute inset-0 -z-10 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-size-[24px_24px]\"\n    ></div>\n    <Motion\n      initial=\"initial\"\n      while-in-view=\"animate\"\n      :in-view-options=\"{ once: true }\"\n      as-child\n      :variants=\"containerVariant\"\n    >\n      <UiContainer>\n        <div class=\"mx-auto max-w-2xl\">\n          <Motion as-child :variants=\"childVariant\">\n            <div class=\"mb-8 text-center\">\n              <h2 class=\"mb-4 text-3xl font-bold tracking-tight lg:text-4xl\">\n                Subscribe to our newsletter\n              </h2>\n              <p class=\"text-lg text-muted-foreground\">\n                Get the latest news, articles, and resources delivered to your inbox weekly.\n              </p>\n            </div>\n          </Motion>\n          <Motion as-child :variants=\"childVariant\">\n            <UiCard class=\"p-6 lg:p-8\">\n              <form class=\"space-y-4\">\n                <div class=\"grid gap-4 sm:grid-cols-2\">\n                  <div>\n                    <label for=\"firstName\" class=\"mb-2 block text-sm font-medium\">\n                      First name\n                    </label>\n                    <UiVeeInput\n                      id=\"firstName\"\n                      type=\"text\"\n                      required\n                      placeholder=\"John\"\n                      aria-label=\"First name\"\n                    />\n                  </div>\n                  <div>\n                    <label for=\"lastName\" class=\"mb-2 block text-sm font-medium\">Last name</label>\n                    <UiVeeInput\n                      id=\"lastName\"\n                      type=\"text\"\n                      required\n                      placeholder=\"Doe\"\n                      aria-label=\"Last name\"\n                    />\n                  </div>\n                </div>\n                <div>\n                  <label for=\"email\" class=\"mb-2 block text-sm font-medium\">Email address</label>\n                  <UiVeeInput\n                    id=\"email\"\n                    type=\"email\"\n                    required\n                    placeholder=\"you@example.com\"\n                    aria-label=\"Email address\"\n                  />\n                </div>\n                <div class=\"flex items-start gap-2\">\n                  <UiCheckbox id=\"terms\" required />\n                  <label for=\"terms\" class=\"text-sm text-muted-foreground\">\n                    I agree to receive marketing emails and accept the privacy policy\n                  </label>\n                </div>\n                <UiButton type=\"submit\" class=\"w-full\">Subscribe to Newsletter</UiButton>\n              </form>\n            </UiCard>\n          </Motion>\n        </div>\n      </UiContainer>\n    </Motion>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const containerVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n</script>\n","category":"Newsletter","path":"Newsletter/BlockNewsletter5.vue","components":["button","card","checkbox","container","veeinput"]},{"name":"Newsletter 6","fileName":"BlockNewsletter6.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"containerVariant\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <div class=\"grid gap-8 lg:grid-cols-[1fr_550px]\">\n        <Motion as-child :variants=\"childVariant\">\n          <div>\n            <h2 class=\"mb-4 text-3xl font-bold tracking-tight lg:text-4xl\">\n              Get our latest updates\n            </h2>\n            <p class=\"text-muted-foreground\">\n              Join thousands of professionals who stay ahead with our weekly newsletter.\n            </p>\n          </div>\n        </Motion>\n        <Motion as-child :variants=\"childVariant\">\n          <div>\n            <form class=\"space-y-4\">\n              <div class=\"flex flex-col gap-3 sm:flex-row\">\n                <UiVeeInput\n                  class=\"flex-1\"\n                  type=\"email\"\n                  required\n                  placeholder=\"Enter your email\"\n                  aria-label=\"Enter your email\"\n                />\n                <UiButton type=\"submit\" class=\"whitespace-nowrap\">Subscribe</UiButton>\n              </div>\n              <div class=\"grid gap-4 sm:grid-cols-3\">\n                <div class=\"flex items-start gap-3\">\n                  <div class=\"mt-1 rounded-lg bg-primary/10 p-2\">\n                    <Icon name=\"lucide:mail\" class=\"size-4 text-primary\" />\n                  </div>\n                  <div>\n                    <p class=\"font-medium\">Weekly digest</p>\n                    <p class=\"text-sm text-muted-foreground\">Curated content every Monday</p>\n                  </div>\n                </div>\n                <div class=\"flex items-start gap-3\">\n                  <div class=\"mt-1 rounded-lg bg-primary/10 p-2\">\n                    <Icon name=\"lucide:bell\" class=\"size-4 text-primary\" />\n                  </div>\n                  <div>\n                    <p class=\"font-medium\">Instant updates</p>\n                    <p class=\"text-sm text-muted-foreground\">Breaking news alerts</p>\n                  </div>\n                </div>\n                <div class=\"flex items-start gap-3\">\n                  <div class=\"mt-1 rounded-lg bg-primary/10 p-2\">\n                    <Icon name=\"lucide:gift\" class=\"size-4 text-primary\" />\n                  </div>\n                  <div>\n                    <p class=\"font-medium\">Exclusive offers</p>\n                    <p class=\"text-sm text-muted-foreground\">Subscriber-only deals</p>\n                  </div>\n                </div>\n              </div>\n            </form>\n          </div>\n        </Motion>\n      </div>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const containerVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.15),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n</script>\n","category":"Newsletter","path":"Newsletter/BlockNewsletter6.vue","components":["button","container","veeinput"]},{"name":"Newsletter 7","fileName":"BlockNewsletter7.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"containerVariant\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <UiCard class=\"relative overflow-hidden border-2\">\n        <div class=\"absolute top-0 right-0 h-40 w-40 rounded-bl-full bg-primary/10\"></div>\n        <div class=\"relative p-8 lg:p-12\">\n          <div class=\"mx-auto max-w-xl text-center\">\n            <Motion as-child :variants=\"childVariant\">\n              <div class=\"mb-6\">\n                <div\n                  class=\"mx-auto mb-4 flex size-16 items-center justify-center rounded-full bg-primary/10\"\n                >\n                  <Icon name=\"lucide:sparkles\" class=\"size-8 text-primary\" />\n                </div>\n                <h2 class=\"mb-4 text-3xl font-bold tracking-tight lg:text-4xl\">\n                  Don't miss out on our updates\n                </h2>\n                <p class=\"text-lg text-muted-foreground\">\n                  Join our community and be the first to know about new features, updates, and\n                  special offers.\n                </p>\n              </div>\n            </Motion>\n            <Motion as-child :variants=\"childVariant\">\n              <form class=\"mb-6\">\n                <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center\">\n                  <UiVeeInput\n                    class=\"flex-1\"\n                    type=\"email\"\n                    required\n                    placeholder=\"Enter your email address\"\n                    aria-label=\"Enter your email address\"\n                  />\n                  <UiButton type=\"submit\" size=\"lg\" class=\"whitespace-nowrap\">\n                    Join Now\n                    <Icon name=\"lucide:arrow-right\" class=\"ml-2 size-4\" />\n                  </UiButton>\n                </div>\n              </form>\n            </Motion>\n            <Motion as-child :variants=\"childVariant\">\n              <div class=\"flex flex-wrap items-center justify-center gap-6 text-sm\">\n                <div class=\"flex items-center gap-2 text-muted-foreground\">\n                  <Icon name=\"lucide:users\" class=\"size-4\" />\n                  <span>15K+ subscribers</span>\n                </div>\n                <div class=\"flex items-center gap-2 text-muted-foreground\">\n                  <Icon name=\"lucide:star\" class=\"size-4\" />\n                  <span>4.9 rating</span>\n                </div>\n                <div class=\"flex items-center gap-2 text-muted-foreground\">\n                  <Icon name=\"lucide:lock\" class=\"size-4\" />\n                  <span>100% secure</span>\n                </div>\n              </div>\n            </Motion>\n          </div>\n        </div>\n      </UiCard>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const containerVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n</script>\n","category":"Newsletter","path":"Newsletter/BlockNewsletter7.vue","components":["button","card","container","veeinput"]},{"name":"OTP Verification","fileName":"BlockOTPVerification.vue","file":"<template>\n  <div class=\"relative flex h-screen items-center justify-center\">\n    <div\n      class=\"absolute inset-0 z-1 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] mask-[radial-gradient(circle,transparent_25%,var(--color-border)_100%)] bg-size-[100px_100px]\"\n    />\n    <div class=\"relative z-2 w-full max-w-[400px] px-5\">\n      <div\n        class=\"mx-auto mb-6 flex size-14 items-center justify-center rounded-lg border bg-background\"\n      >\n        <Icon class=\"size-6\" name=\"lucide:shield-check\" />\n      </div>\n\n      <div class=\"flex flex-col items-center justify-center text-center\">\n        <h1 class=\"text-2xl font-bold tracking-tight lg:text-3xl\">{{ title }}</h1>\n        <p class=\"mt-1 text-muted-foreground\">{{ description }}</p>\n        <div\n          class=\"mt-4 w-full rounded-md bg-linear-to-b from-muted p-2 text-center text-sm font-medium shadow-xs ring-1 ring-muted\"\n        >\n          john@example.com\n        </div>\n      </div>\n\n      <form class=\"mt-10\" @submit=\"submit\">\n        <fieldset :disabled=\"isSubmitting\" class=\"grid gap-6\">\n          <UiVeePinInput\n            aria-label=\"Verification Code\"\n            name=\"code\"\n            :input-count=\"6\"\n            type=\"text\"\n            otp\n            placeholder=\"0\"\n            class=\"justify-center **:data-[slot=pin-input-input]:size-12 [&_p:first-of-type]:text-center\"\n            hint=\"Enter the 6-digit code that we sent to your email\"\n          />\n          <UiButton class=\"w-full\" type=\"submit\" text=\"Verify Code\" />\n        </fieldset>\n      </form>\n\n      <div class=\"mt-6 text-center\">\n        <p class=\"text-sm text-muted-foreground\">\n          Didn't receive the code?\n          <button\n            type=\"button\"\n            class=\"font-semibold text-primary underline-offset-2 hover:underline\"\n            @click=\"resendCode\"\n          >\n            Resend\n          </button>\n        </p>\n      </div>\n\n      <p class=\"mt-8 text-center text-sm\">\n        <NuxtLink class=\"font-semibold text-primary underline-offset-2 hover:underline\" to=\"#\"\n          >Back to Log in</NuxtLink\n        >\n      </p>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { array, object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  const title = \"Verify Your Email\";\n  const description = \"We've sent a verification code to your email.\";\n\n  useSeoMeta({ title, description });\n\n  const OTPSchema = object({\n    code: array()\n      .of(string().required())\n      .min(6, \"Please enter all 6 digits\")\n      .required()\n      .label(\"Verification Code\"),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof OTPSchema>>({\n    validationSchema: OTPSchema,\n  });\n\n  const submit = handleSubmit(async (values) => {\n    console.log(values);\n    useSonner(\"Code verified\", {\n      description: \"Your email has been verified successfully.\",\n    });\n  });\n\n  const resendCode = () => {\n    useSonner(\"Code resent\", {\n      description: \"A new verification code has been sent to your email.\",\n    });\n  };\n</script>\n","category":"OTP","path":"OTP/BlockOTPVerification.vue","components":["button","veepininput"]},{"name":"OTP Verification 2","fileName":"BlockOTPVerification2.vue","file":"<template>\n  <div class=\"relative flex min-h-screen items-center justify-center bg-muted/30 p-4\">\n    <UiCard class=\"w-full max-w-lg\">\n      <div class=\"p-6 lg:p-8\">\n        <div class=\"mb-8 text-center\">\n          <div class=\"mb-4 flex justify-center\">\n            <div class=\"flex size-16 items-center justify-center rounded-full bg-primary/10\">\n              <Icon class=\"size-8 text-primary\" name=\"lucide:lock-keyhole\" />\n            </div>\n          </div>\n          <h1 class=\"mb-2 text-2xl font-bold tracking-tight\">{{ title }}</h1>\n          <p class=\"text-sm text-muted-foreground\">\n            We sent a verification code to <strong>john@example.com</strong>\n          </p>\n        </div>\n\n        <form @submit=\"submit\">\n          <fieldset :disabled=\"isSubmitting\" class=\"grid gap-6\">\n            <div>\n              <label class=\"mb-2 block text-center text-sm font-medium\">\n                Enter verification code\n              </label>\n              <UiVeePinInput\n                class=\"justify-center **:data-[slot=pin-input-input]:size-12\"\n                name=\"code\"\n                :length=\"6\"\n                type=\"text\"\n                placeholder=\"0\"\n              />\n              <p class=\"mt-2 text-center text-xs text-muted-foreground\">\n                Enter the 6-digit code we sent you\n              </p>\n            </div>\n\n            <UiButton class=\"w-full\" size=\"lg\" type=\"submit\"> Verify Code </UiButton>\n          </fieldset>\n        </form>\n\n        <UiDivider class=\"my-6\" />\n\n        <div class=\"text-center\">\n          <p class=\"text-sm text-muted-foreground\">\n            Didn't receive the code?\n            <button\n              type=\"button\"\n              class=\"font-semibold text-primary underline-offset-2 hover:underline\"\n            >\n              Resend code\n            </button>\n          </p>\n        </div>\n\n        <div class=\"mt-4 text-center\">\n          <NuxtLink\n            class=\"inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground\"\n            to=\"#\"\n          >\n            <Icon name=\"lucide:arrow-left\" />\n            Back to Log in\n          </NuxtLink>\n        </div>\n      </div>\n    </UiCard>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { array, object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  const title = \"Verify your email\";\n  const description = \"Enter the verification code sent to your email.\";\n\n  useSeoMeta({ title, description });\n\n  const OTPSchema = object({\n    code: array().of(string()).min(6).required().label(\"Verification code\"),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof OTPSchema>>({\n    validationSchema: OTPSchema,\n  });\n\n  const submit = handleSubmit(async (values) => {\n    console.log(values);\n    useSonner.success(\"Code verified\", {\n      description: \"You can now reset your password.\",\n    });\n  });\n</script>\n","category":"OTP","path":"OTP/BlockOTPVerification2.vue","components":["button","card","divider","veepininput"]},{"name":"Blog Page 1","fileName":"BlockBlogPage1.vue","file":"<template>\n  <!-- \n    Blog page with category tabs and featured post\n    Features: Animated header, featured hero image, category filter tabs, responsive grid\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <!-- Header section with staggered animations -->\n      <Motion as=\"p\" :variants=\"childVariant\" class=\"mb-3 font-semibold text-primary\">\n        Our blog\n      </Motion>\n      <Motion\n        as=\"h1\"\n        :variants=\"childVariant\"\n        class=\"mb-4 text-4xl font-semibold lg:mb-6 lg:text-5xl\"\n      >\n        Resources and insights\n      </Motion>\n      <Motion as=\"p\" :variants=\"childVariant\" class=\"text-lg text-muted-foreground lg:text-xl\">\n        The latest industry news, interviews, technologies, and resources.\n      </Motion>\n\n      <!-- Featured blog image - Desktop -->\n      <Motion\n        :variants=\"{\n          initial: { opacity: 0, y: 30, scale: 0.95 },\n          animate: {\n            opacity: 1,\n            y: 0,\n            scale: 1,\n            transition: {\n              type: 'spring',\n              stiffness: 200,\n              damping: 25,\n            },\n          },\n        }\"\n        title=\"Blog page on image\"\n        class=\"mt-10 hidden h-60 w-full items-end overflow-hidden rounded-lg bg-[url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover drop-shadow lg:mt-20 lg:flex lg:h-[720px]\"\n      >\n        <div\n          class=\"w-full border-t border-white/10 bg-black/40 p-6 text-white backdrop-blur-2xl md:p-10\"\n        >\n          <NuxtLink to=\"#\">\n            <h2\n              class=\"mb-2 text-xl font-semibold transition-colors hover:text-primary/80 md:text-2xl\"\n            >\n              Improve your design skills: Develop an \"eye\" for design\n            </h2>\n          </NuxtLink>\n          <p class=\"text-sm md:text-base\">\n            Tools and trends change, but good design is timeless. Learn how to quickly develop an\n            \"eye\" for design.\n          </p>\n          <p class=\"mt-5 text-sm\">Written by</p>\n          <NuxtLink to=\"#\">\n            <div class=\"mt-2 flex items-center gap-3 transition-opacity hover:opacity-80\">\n              <UiAvatar\n                class=\"ring-1 ring-white/20\"\n                src=\"https://api.dicebear.com/7.x/lorelei/svg?flip=false\"\n              />\n              <span>Jane Doe</span>\n            </div>\n          </NuxtLink>\n          <div class=\"mt-5 flex flex-wrap items-center gap-2\">\n            <template v-for=\"t in ['Design', 'Research', 'Presentation']\" :key=\"t\">\n              <UiBadge class=\"border-white px-3 py-1 text-sm text-white\" variant=\"outline\">{{\n                t\n              }}</UiBadge>\n            </template>\n          </div>\n        </div>\n      </Motion>\n\n      <!-- Featured blog - Mobile -->\n      <Motion :variants=\"childVariant\" class=\"mt-16 mb-10 lg:hidden\">\n        <NuxtLink :to=\"link\" class=\"block\">\n          <img\n            src=\"https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n            :alt=\"alt\"\n            class=\"mb-5 h-[240px] w-full rounded-lg object-cover shadow transition-transform duration-300 hover:scale-[1.02]\"\n          />\n        </NuxtLink>\n        <p v-if=\"headline\" class=\"mb-2 text-sm font-semibold text-primary\">{{ headline }}</p>\n        <NuxtLink :to=\"link\">\n          <p class=\"mb-2 text-xl font-semibold transition-colors hover:text-primary lg:text-2xl\">\n            {{ title }}\n          </p>\n        </NuxtLink>\n        <p v-if=\"description\" class=\"mb-5 line-clamp-2 text-ellipsis text-muted-foreground\">\n          {{ description }}\n        </p>\n        <div class=\"flex items-center\">\n          <UiAvatar\n            v-if=\"userImage\"\n            :src=\"userImage\"\n            :alt=\"userName\"\n            class=\"mr-3 rounded-full bg-background shadow ring-1 ring-ring/30\"\n          />\n          <div>\n            <p v-if=\"userName\" class=\"text-sm font-semibold\">{{ userName }}</p>\n            <p v-if=\"date\" class=\"text-sm text-muted-foreground\">{{ date }}</p>\n          </div>\n        </div>\n      </Motion>\n\n      <!-- Filter tabs -->\n      <Motion :variants=\"childVariant\">\n        <UiTabs class=\"mt-5\" :default-value=\"categories[0]\">\n          <UiTabsList\n            :pill=\"false\"\n            class=\"relative h-auto w-full justify-start gap-3 overflow-x-auto\"\n          >\n            <template v-for=\"c in categories\" :key=\"c\">\n              <UiTabsTrigger\n                class=\"p-2 focus-visible:ring-0 focus-visible:ring-offset-0\"\n                :pill=\"false\"\n                :value=\"c\"\n                >{{ c }}</UiTabsTrigger\n              >\n            </template>\n            <UiTabsIndicator />\n          </UiTabsList>\n        </UiTabs>\n      </Motion>\n\n      <!-- Articles grid with staggered animations -->\n      <section\n        class=\"mt-12 grid grid-cols-1 gap-x-8 gap-y-12 md:grid-cols-2 lg:mt-16 lg:grid-cols-3\"\n      >\n        <Motion\n          v-for=\"n in 9\"\n          :key=\"n\"\n          :variants=\"childVariant\"\n          :transition=\"{\n            delay: n * 0.05,\n          }\"\n        >\n          <div>\n            <NuxtLink :to=\"link\" class=\"block\">\n              <img\n                v-if=\"image\"\n                :src=\"image\"\n                :alt=\"alt\"\n                class=\"mb-5 h-[240px] w-full rounded-lg object-cover shadow transition-transform duration-300 hover:scale-[1.02]\"\n              />\n            </NuxtLink>\n            <p v-if=\"headline\" class=\"mb-2 text-sm font-semibold text-primary\">{{ headline }}</p>\n            <NuxtLink :to=\"link\">\n              <p\n                class=\"mb-2 text-xl font-semibold transition-colors hover:text-primary lg:text-2xl\"\n              >\n                {{ title }}\n              </p>\n            </NuxtLink>\n            <p v-if=\"description\" class=\"mb-5 line-clamp-2 text-ellipsis text-muted-foreground\">\n              {{ description }}\n            </p>\n            <div class=\"flex items-center\">\n              <UiAvatar\n                v-if=\"userImage\"\n                :src=\"userImage\"\n                :alt=\"userName\"\n                class=\"mr-3 rounded-full bg-background shadow ring-1 ring-ring/30\"\n              />\n              <div>\n                <p v-if=\"userName\" class=\"text-sm font-semibold\">{{ userName }}</p>\n                <p v-if=\"date\" class=\"text-sm text-muted-foreground\">{{ date }}</p>\n              </div>\n            </div>\n          </div>\n        </Motion>\n      </section>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const categories = [\"Design\", \"Research\", \"Presentation\", \"Development\", \"Marketing\", \"Sales\"];\n\n  const headline = \"Design\";\n  const title = \"UX review presentations\";\n  const image =\n    \"https://images.unsplash.com/photo-1524169220946-12efd782aab4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\";\n  const alt = \"UX review presentations\";\n  const description =\n    \"How do you create compelling presentations that wow your colleagues and impress your managers?\";\n  const date = \"30 Jan 2024\";\n  const userImage = \"https://api.dicebear.com/7.x/lorelei/svg?flip=false\";\n  const userName = \"John Doe\";\n  const link = \"#\";\n</script>\n","category":"Page","path":"Blog/Page/BlockBlogPage1.vue","components":["avatar","badge","container","tabs","tabsindicator","tabslist","tabstrigger"]},{"name":"Blog Page 2","fileName":"BlockBlogPage2.vue","file":"<template>\n  <!-- \n    Blog page with sidebar navigation and search\n    Features: Centered header, sticky sidebar, search input, category navigation, responsive layout\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <!-- Centered header -->\n      <div class=\"text-center\">\n        <Motion as=\"p\" :variants=\"childVariant\" class=\"mb-3 font-semibold text-primary\">\n          Our blog\n        </Motion>\n        <Motion\n          as=\"h1\"\n          :variants=\"childVariant\"\n          class=\"mb-4 text-4xl font-semibold lg:mb-6 lg:text-5xl\"\n        >\n          The latest writings from our team\n        </Motion>\n        <Motion as=\"p\" :variants=\"childVariant\" class=\"text-lg text-muted-foreground lg:text-xl\">\n          The latest industry news, interviews, technologies, and resources.\n        </Motion>\n      </div>\n\n      <!-- Featured blog image - Desktop -->\n      <Motion\n        :variants=\"{\n          initial: { opacity: 0, y: 30, scale: 0.95 },\n          animate: {\n            opacity: 1,\n            y: 0,\n            scale: 1,\n            transition: {\n              type: 'spring',\n              stiffness: 200,\n              damping: 25,\n            },\n          },\n        }\"\n        title=\"Blog page on image\"\n        class=\"mt-10 hidden h-60 w-full items-end overflow-hidden rounded-lg bg-[url('https://images.unsplash.com/photo-1511447333015-45b65e60f6d5?q=80&w=2155&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover drop-shadow lg:mt-24 lg:flex lg:h-[720px]\"\n      >\n        <div\n          class=\"w-full border-t border-white/10 bg-black/40 p-6 text-white backdrop-blur-2xl md:p-10\"\n        >\n          <NuxtLink to=\"#\">\n            <h2\n              class=\"mb-2 text-xl font-semibold transition-colors hover:text-primary/80 md:text-2xl\"\n            >\n              Improve your design skills: Develop an \"eye\" for design\n            </h2>\n          </NuxtLink>\n          <p class=\"text-sm md:text-base\">\n            Tools and trends change, but good design is timeless. Learn how to quickly develop an\n            \"eye\" for design.\n          </p>\n          <p class=\"mt-5 text-sm\">Written by</p>\n          <NuxtLink to=\"#\">\n            <div class=\"mt-2 flex items-center gap-3 transition-opacity hover:opacity-80\">\n              <UiAvatar\n                class=\"ring-1 ring-white/20\"\n                src=\"https://api.dicebear.com/7.x/lorelei/svg?flip=false\"\n              />\n              <span>Jane Doe</span>\n            </div>\n          </NuxtLink>\n          <div class=\"mt-5 flex flex-wrap items-center gap-2\">\n            <template v-for=\"t in ['Design', 'Research', 'Presentation']\" :key=\"t\">\n              <UiBadge class=\"border-white px-3 py-1 text-sm text-white\" variant=\"outline\">{{\n                t\n              }}</UiBadge>\n            </template>\n          </div>\n        </div>\n      </Motion>\n\n      <!-- Featured blog - Mobile -->\n      <Motion :variants=\"childVariant\" class=\"mt-16 mb-10 lg:hidden\">\n        <NuxtLink :to=\"link\" class=\"block\">\n          <img\n            src=\"https://images.unsplash.com/photo-1511447333015-45b65e60f6d5?q=80&w=2155&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n            :alt=\"alt\"\n            class=\"mb-5 h-[240px] w-full rounded-lg object-cover transition-transform duration-300 hover:scale-[1.02]\"\n          />\n        </NuxtLink>\n        <UiBadge\n          v-if=\"headline || readTime\"\n          variant=\"outline\"\n          class=\"mb-2 border-ring/50 px-3 py-1 text-sm font-medium text-primary\"\n          >{{ headline }} <span v-if=\"readTime\" class=\"ml-1\">{{ readTime }}</span></UiBadge\n        >\n        <NuxtLink :to=\"link\">\n          <p class=\"mb-2 text-xl font-semibold transition-colors hover:text-primary lg:text-2xl\">\n            {{ title }}\n          </p>\n        </NuxtLink>\n        <p v-if=\"description\" class=\"mb-5 line-clamp-2 text-ellipsis text-muted-foreground\">\n          {{ description }}\n        </p>\n        <div class=\"flex items-center\">\n          <UiAvatar\n            v-if=\"userImage\"\n            :src=\"userImage\"\n            :alt=\"userName\"\n            class=\"mr-3 rounded-full bg-background shadow ring-1 ring-ring/30\"\n          />\n          <div>\n            <p v-if=\"userName\" class=\"text-sm font-semibold\">{{ userName }}</p>\n            <p v-if=\"date\" class=\"text-sm text-muted-foreground\">{{ date }}</p>\n          </div>\n        </div>\n      </Motion>\n\n      <!-- Articles grid with sidebar -->\n      <section class=\"mt-12 grid grid-cols-1 gap-y-12 lg:mt-16 lg:grid-cols-12 lg:gap-x-8\">\n        <!-- Sidebar -->\n        <Motion :variants=\"childVariant\" class=\"col-span-full bg-background lg:col-span-4\">\n          <div class=\"sticky top-5\">\n            <UiVeeInput placeholder=\"Search\" icon=\"lucide:search\" />\n\n            <p class=\"mt-5 font-semibold text-primary md:text-sm\">Blog categories</p>\n            <ul class=\"mt-5 flex flex-col gap-5 pl-2 font-medium md:text-sm\">\n              <Motion\n                v-for=\"(c, index) in categories\"\n                :key=\"c\"\n                :variants=\"{\n                  initial: { opacity: 0, x: -10 },\n                  animate: {\n                    opacity: 1,\n                    x: 0,\n                    transition: {\n                      delay: index * 0.05,\n                    },\n                  },\n                }\"\n                as=\"li\"\n              >\n                <NuxtLink class=\"transition-colors hover:text-primary\" to=\"#\">{{ c }}</NuxtLink>\n              </Motion>\n            </ul>\n          </div>\n        </Motion>\n\n        <!-- Articles grid -->\n        <div class=\"col-span-full grid grid-cols-1 gap-x-8 gap-y-12 md:grid-cols-2 lg:col-span-8\">\n          <Motion\n            v-for=\"n in 8\"\n            :key=\"n\"\n            :variants=\"childVariant\"\n            :transition=\"{\n              delay: n * 0.05,\n            }\"\n          >\n            <div>\n              <NuxtLink :to=\"link\" class=\"block\">\n                <img\n                  v-if=\"image\"\n                  :src=\"image\"\n                  :alt=\"alt\"\n                  class=\"mb-5 h-[240px] w-full rounded-lg object-cover transition-transform duration-300 hover:scale-[1.02]\"\n                />\n              </NuxtLink>\n              <UiBadge\n                v-if=\"headline || readTime\"\n                variant=\"outline\"\n                class=\"mb-2 border-ring/50 px-3 py-1 text-sm font-medium text-primary\"\n                >{{ headline }} <span v-if=\"readTime\" class=\"ml-1\">{{ readTime }}</span></UiBadge\n              >\n              <NuxtLink :to=\"link\">\n                <p\n                  class=\"mb-2 text-xl font-semibold transition-colors hover:text-primary lg:text-2xl\"\n                >\n                  {{ title }}\n                </p>\n              </NuxtLink>\n              <p v-if=\"description\" class=\"mb-5 line-clamp-2 text-ellipsis text-muted-foreground\">\n                {{ description }}\n              </p>\n              <div class=\"flex items-center\">\n                <UiAvatar\n                  v-if=\"userImage\"\n                  :src=\"userImage\"\n                  :alt=\"userName\"\n                  class=\"mr-3 rounded-full bg-background shadow ring-1 ring-ring/30\"\n                />\n                <div>\n                  <p v-if=\"userName\" class=\"text-sm font-semibold\">{{ userName }}</p>\n                  <p v-if=\"date\" class=\"text-sm text-muted-foreground\">{{ date }}</p>\n                </div>\n              </div>\n            </div>\n          </Motion>\n        </div>\n      </section>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const categories = [\"Design\", \"Research\", \"Presentation\", \"Development\", \"Marketing\", \"Sales\"];\n\n  const headline = \"Design\";\n  const title = \"UX review presentations\";\n  const image =\n    \"https://images.unsplash.com/photo-1524169220946-12efd782aab4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\";\n  const alt = \"UX review presentations\";\n  const description =\n    \"How do you create compelling presentations that wow your colleagues and impress your managers?\";\n  const date = \"30 Jan 2024\";\n  const userImage = \"https://api.dicebear.com/7.x/lorelei/svg?flip=false\";\n  const userName = \"John Doe\";\n  const readTime = \"5 mins\";\n  const link = \"#\";\n</script>\n","category":"Page","path":"Blog/Page/BlockBlogPage2.vue","components":["avatar","badge","container","veeinput"]},{"name":"Blog Page 3","fileName":"BlockBlogPage3.vue","file":"<template>\n  <!-- \n    Blog page with newsletter subscription\n    Features: Centered header, inline newsletter form, animated featured post, tag-based cards\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <!-- Centered header -->\n      <div class=\"text-center\">\n        <Motion as=\"p\" :variants=\"childVariant\" class=\"mb-3 font-semibold text-primary\">\n          Our blog\n        </Motion>\n        <Motion\n          as=\"h1\"\n          :variants=\"childVariant\"\n          class=\"mb-4 text-4xl font-semibold lg:mb-6 lg:text-5xl\"\n        >\n          Resources and insights\n        </Motion>\n        <Motion as=\"p\" :variants=\"childVariant\" class=\"text-lg text-muted-foreground lg:text-xl\">\n          The latest industry news, interviews, technologies, and resources.\n        </Motion>\n      </div>\n\n      <!-- Subscribe form -->\n      <Motion :variants=\"childVariant\" class=\"mx-auto w-full max-w-sm\">\n        <form class=\"mt-8 flex flex-col gap-3 lg:mt-12 lg:flex-row lg:items-center\">\n          <div class=\"w-full\">\n            <UiVeeInput required placeholder=\"Enter your email\" aria-label=\"Enter your email\" />\n          </div>\n          <p class=\"my-2 text-sm text-muted-foreground lg:hidden\">\n            We care about your data in our privacy policy.\n          </p>\n          <div>\n            <UiButton class=\"w-full whitespace-nowrap lg:w-auto\" type=\"submit\"\n              >Get started</UiButton\n            >\n          </div>\n        </form>\n        <p class=\"mt-3 hidden text-sm text-muted-foreground lg:block\">\n          We care about your data in our privacy policy.\n        </p>\n      </Motion>\n\n      <!-- Featured blog image - Desktop -->\n      <Motion\n        :variants=\"{\n          initial: { opacity: 0, y: 30, scale: 0.95 },\n          animate: {\n            opacity: 1,\n            y: 0,\n            scale: 1,\n            transition: {\n              type: 'spring',\n              stiffness: 200,\n              damping: 25,\n            },\n          },\n        }\"\n        title=\"Blog page on image\"\n        class=\"mt-10 hidden h-60 w-full items-end overflow-hidden rounded-lg bg-[url('https://images.unsplash.com/photo-1541701494587-cb58502866ab?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover drop-shadow lg:mt-24 lg:flex lg:h-[720px]\"\n      >\n        <div\n          class=\"w-full border-t border-white/10 bg-black/40 p-6 text-white backdrop-blur-2xl md:p-10\"\n        >\n          <NuxtLink to=\"#\">\n            <h2\n              class=\"mb-2 text-xl font-semibold transition-colors hover:text-primary/80 md:text-2xl\"\n            >\n              Improve your design skills: Develop an \"eye\" for design\n            </h2>\n          </NuxtLink>\n          <p class=\"text-sm md:text-base\">\n            Tools and trends change, but good design is timeless. Learn how to quickly develop an\n            \"eye\" for design.\n          </p>\n          <p class=\"mt-5 text-sm\">Written by</p>\n          <NuxtLink to=\"#\">\n            <div class=\"mt-2 flex items-center gap-3 transition-opacity hover:opacity-80\">\n              <UiAvatar\n                class=\"ring-1 ring-white/20\"\n                src=\"https://api.dicebear.com/7.x/lorelei/svg?flip=false\"\n              />\n              <span>Jane Doe</span>\n            </div>\n          </NuxtLink>\n          <div class=\"mt-5 flex flex-wrap items-center gap-2\">\n            <template v-for=\"t in ['Design', 'Research', 'Presentation']\" :key=\"t\">\n              <UiBadge class=\"border-white px-3 py-1 text-sm text-white\" variant=\"outline\">{{\n                t\n              }}</UiBadge>\n            </template>\n          </div>\n        </div>\n      </Motion>\n\n      <!-- Featured blog - Mobile -->\n      <Motion :variants=\"childVariant\" class=\"mt-16 mb-10 lg:hidden\">\n        <NuxtLink :to=\"link\" class=\"block\">\n          <img\n            src=\"https://images.unsplash.com/photo-1541701494587-cb58502866ab?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n            :alt=\"alt\"\n            class=\"mb-5 h-[240px] w-full rounded-lg object-cover shadow transition-transform duration-300 hover:scale-[1.02]\"\n          />\n        </NuxtLink>\n        <p v-if=\"headline\" class=\"mb-2 text-sm font-semibold text-primary\">\n          {{ headline }} <span v-if=\"date\">- {{ date }}</span>\n        </p>\n        <NuxtLink :to=\"link\">\n          <p class=\"mb-2 text-xl font-semibold transition-colors hover:text-primary lg:text-2xl\">\n            {{ title }}\n          </p>\n        </NuxtLink>\n        <p v-if=\"description\" class=\"mb-3 line-clamp-2 text-ellipsis text-muted-foreground\">\n          {{ description }}\n        </p>\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <template v-for=\"t in tags\" :key=\"t\">\n            <UiBadge class=\"px-3 py-1 text-sm\" variant=\"outline\">{{ t }}</UiBadge>\n          </template>\n        </div>\n      </Motion>\n\n      <!-- Articles grid with staggered animations -->\n      <section\n        class=\"mt-12 grid grid-cols-1 gap-x-8 gap-y-12 md:grid-cols-2 lg:mt-16 lg:grid-cols-3\"\n      >\n        <Motion\n          v-for=\"n in 9\"\n          :key=\"n\"\n          :variants=\"childVariant\"\n          :transition=\"{\n            delay: n * 0.05,\n          }\"\n        >\n          <div>\n            <NuxtLink :to=\"link\" class=\"block\">\n              <img\n                v-if=\"image\"\n                :src=\"image\"\n                :alt=\"alt\"\n                class=\"mb-5 h-[240px] w-full rounded-lg object-cover shadow transition-transform duration-300 hover:scale-[1.02]\"\n              />\n            </NuxtLink>\n            <p v-if=\"headline\" class=\"mb-2 text-sm font-semibold text-primary\">\n              {{ headline }} <span v-if=\"date\">- {{ date }}</span>\n            </p>\n            <NuxtLink :to=\"link\">\n              <p\n                class=\"mb-2 text-xl font-semibold transition-colors hover:text-primary lg:text-2xl\"\n              >\n                {{ title }}\n              </p>\n            </NuxtLink>\n            <p v-if=\"description\" class=\"mb-3 line-clamp-2 text-ellipsis text-muted-foreground\">\n              {{ description }}\n            </p>\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <Motion\n                v-for=\"(t, index) in tags\"\n                :key=\"t\"\n                :variants=\"{\n                  initial: { opacity: 0, scale: 0.8 },\n                  animate: {\n                    opacity: 1,\n                    scale: 1,\n                    transition: {\n                      delay: index * 0.05,\n                    },\n                  },\n                }\"\n                as-child\n              >\n                <UiBadge class=\"px-3 py-1 text-sm\" variant=\"outline\">{{ t }}</UiBadge>\n              </Motion>\n            </div>\n          </div>\n        </Motion>\n      </section>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const headline = \"Design\";\n  const title = \"UX review presentations\";\n  const image =\n    \"https://images.unsplash.com/photo-1524169220946-12efd782aab4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\";\n  const alt = \"UX review presentations\";\n  const description =\n    \"How do you create compelling presentations that wow your colleagues and impress your managers?\";\n  const date = \"30 Jan 2024\";\n  const tags = [\"Design\", \"UX\", \"UI\"];\n  const link = \"#\";\n</script>\n","category":"Page","path":"Blog/Page/BlockBlogPage3.vue","components":["avatar","badge","button","container","veeinput"]},{"name":"Blog Page 4","fileName":"BlockBlogPage4.vue","file":"<template>\n  <!-- \n    Minimal blog page with search-focused design\n    Features: Large search bar, trending topics chips, minimal two-column grid\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <!-- Minimal centered header -->\n      <div class=\"mx-auto max-w-3xl text-center\">\n        <Motion\n          as=\"h1\"\n          :variants=\"childVariant\"\n          class=\"mb-4 text-4xl font-bold lg:mb-6 lg:text-6xl\"\n        >\n          Blog\n        </Motion>\n        <Motion\n          as=\"p\"\n          :variants=\"childVariant\"\n          class=\"mb-8 text-lg text-muted-foreground lg:text-xl\"\n        >\n          Discover stories, thinking, and expertise from writers on any topic\n        </Motion>\n\n        <!-- Large search bar -->\n        <Motion :variants=\"childVariant\" class=\"relative mx-auto max-w-md\">\n          <UiVeeInput placeholder=\"Search articles...\" icon=\"lucide:search\" class=\"\" />\n        </Motion>\n\n        <!-- Trending topics -->\n        <Motion :variants=\"childVariant\" class=\"mt-6\">\n          <p class=\"mb-6 text-sm font-semibold text-muted-foreground\">Trending topics</p>\n          <div class=\"flex flex-wrap items-center justify-center gap-2\">\n            <Motion\n              v-for=\"(topic, index) in trendingTopics\"\n              :key=\"topic\"\n              :variants=\"{\n                initial: { opacity: 0, scale: 0.8 },\n                animate: {\n                  opacity: 1,\n                  scale: 1,\n                  transition: {\n                    delay: index * 0.05,\n                  },\n                },\n              }\"\n              as-child\n            >\n              <UiBadge\n                variant=\"outline\"\n                class=\"cursor-pointer hover:bg-primary hover:text-primary-foreground\"\n              >\n                {{ topic }}\n              </UiBadge>\n            </Motion>\n          </div>\n        </Motion>\n      </div>\n\n      <!-- Articles grid - Two column minimal layout -->\n      <section class=\"mx-auto mt-16 max-w-4xl lg:mt-24\">\n        <Motion :variants=\"childVariant\" class=\"mb-8 flex items-center justify-between\">\n          <h2 class=\"text-2xl font-semibold\">Recent articles</h2>\n          <UiButton variant=\"ghost\" size=\"sm\">\n            View all\n            <Icon name=\"lucide:arrow-right\" class=\"ml-2 h-4 w-4\" />\n          </UiButton>\n        </Motion>\n\n        <div class=\"space-y-8\">\n          <Motion\n            v-for=\"n in 6\"\n            :key=\"n\"\n            :variants=\"childVariant\"\n            :transition=\"{\n              delay: n * 0.05,\n            }\"\n          >\n            <UiDivider v-if=\"n > 1\" class=\"my-8\" />\n            <div class=\"grid grid-cols-1 gap-6 md:grid-cols-12 md:items-center\">\n              <!-- Image -->\n              <NuxtLink :to=\"link\" class=\"group md:col-span-5\">\n                <img\n                  :src=\"image\"\n                  :alt=\"alt\"\n                  class=\"h-[200px] w-full rounded-lg object-cover transition-all duration-300 group-hover:scale-[1.02] group-hover:shadow-lg md:h-[180px]\"\n                />\n              </NuxtLink>\n\n              <!-- Content -->\n              <div class=\"md:col-span-7\">\n                <div class=\"mb-3 flex items-center gap-2\">\n                  <UiAvatar :src=\"userImage\" :alt=\"userName\" size=\"xs\" />\n                  <span class=\"text-sm font-medium\">{{ userName }}</span>\n                  <span class=\"text-sm text-muted-foreground\">·</span>\n                  <span class=\"text-sm text-muted-foreground\">{{ date }}</span>\n                </div>\n                <NuxtLink :to=\"link\">\n                  <h3\n                    class=\"mb-2 text-xl font-semibold transition-colors hover:text-primary lg:text-2xl\"\n                  >\n                    {{ title }}\n                  </h3>\n                </NuxtLink>\n                <p class=\"mb-3 line-clamp-2 text-muted-foreground\">{{ description }}</p>\n                <div class=\"flex items-center gap-4 text-sm text-muted-foreground\">\n                  <span class=\"flex items-center gap-1\">\n                    <Icon name=\"lucide:clock\" class=\"h-4 w-4\" />\n                    5 min read\n                  </span>\n                  <span class=\"flex items-center gap-1\">\n                    <Icon name=\"lucide:bookmark\" class=\"h-4 w-4\" />\n                    Save\n                  </span>\n                </div>\n              </div>\n            </div>\n          </Motion>\n        </div>\n\n        <!-- Load more -->\n        <Motion :variants=\"childVariant\" class=\"mt-12 text-center\">\n          <UiButton size=\"lg\" variant=\"outline\">Load more articles</UiButton>\n        </Motion>\n      </section>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const trendingTopics = [\n    \"AI & Machine Learning\",\n    \"Web Development\",\n    \"Design Systems\",\n    \"UX Research\",\n    \"Product Management\",\n  ];\n\n  const title = \"The future of web development in 2024\";\n  const image =\n    \"https://images.unsplash.com/photo-1524169220946-12efd782aab4?q=80&w=2070&auto=format&fit=crop\";\n  const alt = \"Web development\";\n  const description =\n    \"Explore the latest trends and technologies shaping the future of web development.\";\n  const date = \"Mar 15, 2024\";\n  const userImage = \"https://i.pravatar.cc/300?img=20\";\n  const userName = \"Emily Chen\";\n  const link = \"#\";\n</script>\n","category":"Page","path":"Blog/Page/BlockBlogPage4.vue","components":["avatar","badge","button","container","divider","veeinput"]},{"name":"Blog Page 5","fileName":"BlockBlogPage5.vue","file":"<template>\n  <!-- \n    Magazine-style blog page with featured grid\n    Features: Large featured post, mixed grid layout, statistics bar, author highlights\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <!-- Header with stats -->\n      <div\n        class=\"mb-12 flex flex-col items-start justify-between gap-6 md:flex-row md:items-center lg:mb-16\"\n      >\n        <div>\n          <Motion as=\"h1\" :variants=\"childVariant\" class=\"mb-2 text-4xl font-bold lg:text-5xl\">\n            The Magazine\n          </Motion>\n          <Motion as=\"p\" :variants=\"childVariant\" class=\"text-lg text-muted-foreground\">\n            Stories that matter. Ideas that inspire.\n          </Motion>\n        </div>\n\n        <!-- Stats bar -->\n        <Motion :variants=\"childVariant\" class=\"flex gap-6\">\n          <div class=\"text-center\">\n            <p class=\"text-2xl font-bold\">500+</p>\n            <p class=\"text-sm text-muted-foreground\">Articles</p>\n          </div>\n          <UiSeparator orientation=\"vertical\" class=\"h-auto\" />\n          <div class=\"text-center\">\n            <p class=\"text-2xl font-bold\">50K+</p>\n            <p class=\"text-sm text-muted-foreground\">Readers</p>\n          </div>\n          <UiSeparator orientation=\"vertical\" class=\"h-auto\" />\n          <div class=\"text-center\">\n            <p class=\"text-2xl font-bold\">100+</p>\n            <p class=\"text-sm text-muted-foreground\">Authors</p>\n          </div>\n        </Motion>\n      </div>\n\n      <!-- Featured section - Magazine grid layout -->\n      <div class=\"grid grid-cols-1 gap-8 lg:grid-cols-12\">\n        <!-- Large featured post (left side) -->\n        <Motion :variants=\"childVariant\" class=\"lg:col-span-7\">\n          <UiCard\n            class=\"group sticky top-0 overflow-hidden border-0 py-0 shadow-lg transition-shadow hover:shadow-xl\"\n          >\n            <div class=\"relative overflow-hidden\">\n              <img\n                :src=\"image\"\n                :alt=\"alt\"\n                class=\"h-[400px] w-full object-cover transition-transform duration-500 group-hover:scale-105 lg:h-[500px]\"\n              />\n              <div\n                class=\"absolute inset-0 bg-linear-to-t from-background via-background/60 to-transparent\"\n              ></div>\n              <div class=\"absolute right-0 bottom-0 left-0 p-6 lg:p-8\">\n                <UiBadge class=\"mb-3 bg-primary text-primary-foreground\">Featured</UiBadge>\n                <NuxtLink :to=\"link\">\n                  <h2\n                    class=\"mb-3 text-2xl font-bold transition-colors hover:text-primary lg:text-3xl\"\n                  >\n                    {{ title }}\n                  </h2>\n                </NuxtLink>\n                <p class=\"mb-4 line-clamp-2 text-muted-foreground lg:text-lg\">{{ description }}</p>\n                <div class=\"flex items-center gap-3\">\n                  <UiAvatar :src=\"userImage\" :alt=\"userName\" />\n                  <div>\n                    <p class=\"font-semibold\">{{ userName }}</p>\n                    <p class=\"text-sm text-muted-foreground\">{{ date }} · 8 min read</p>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </UiCard>\n        </Motion>\n\n        <!-- Sidebar posts (right side) -->\n        <div class=\"space-y-6 lg:col-span-5\">\n          <Motion :variants=\"childVariant\">\n            <h3 class=\"mb-4 text-xl font-semibold\">Trending now</h3>\n          </Motion>\n\n          <Motion\n            v-for=\"n in 4\"\n            :key=\"n\"\n            :variants=\"childVariant\"\n            :transition=\"{\n              delay: n * 0.05,\n            }\"\n          >\n            <UiCard class=\"group overflow-hidden p-2 transition-all hover:shadow-md\">\n              <div class=\"flex gap-4\">\n                <img\n                  :src=\"image\"\n                  :alt=\"alt\"\n                  class=\"h-24 w-24 shrink-0 rounded-lg object-cover transition-transform duration-300 group-hover:scale-105\"\n                />\n                <div class=\"min-w-0 flex-1\">\n                  <UiBadge variant=\"secondary\" size=\"sm\" class=\"mb-2\">{{ headline }}</UiBadge>\n                  <NuxtLink :to=\"link\" class=\"block\">\n                    <h4\n                      class=\"mb-1 line-clamp-2 font-semibold transition-colors hover:text-primary\"\n                    >\n                      {{ title }}\n                    </h4>\n                  </NuxtLink>\n                  <p class=\"text-xs text-muted-foreground\">{{ date }} · 5 min</p>\n                </div>\n              </div>\n            </UiCard>\n          </Motion>\n        </div>\n      </div>\n\n      <!-- Latest articles grid -->\n      <Motion :variants=\"childVariant\" class=\"mt-16 lg:mt-24\">\n        <div class=\"mb-8 flex items-center justify-between\">\n          <h2 class=\"text-2xl font-semibold\">Latest articles</h2>\n          <UiDropdownMenu>\n            <UiDropdownMenuTrigger as-child>\n              <UiButton variant=\"outline\" size=\"sm\">\n                Sort by\n                <Icon name=\"lucide:chevron-down\" class=\"ml-2 h-4 w-4\" />\n              </UiButton>\n            </UiDropdownMenuTrigger>\n            <UiDropdownMenuContent>\n              <UiDropdownMenuItem>Most recent</UiDropdownMenuItem>\n              <UiDropdownMenuItem>Most popular</UiDropdownMenuItem>\n              <UiDropdownMenuItem>Trending</UiDropdownMenuItem>\n            </UiDropdownMenuContent>\n          </UiDropdownMenu>\n        </div>\n      </Motion>\n\n      <div class=\"grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3\">\n        <Motion\n          v-for=\"n in 6\"\n          :key=\"n\"\n          :variants=\"childVariant\"\n          :transition=\"{\n            delay: n * 0.05,\n          }\"\n        >\n          <UiCard\n            class=\"group h-full overflow-hidden py-0 shadow-xs transition-all hover:shadow-lg\"\n          >\n            <div class=\"relative overflow-hidden\">\n              <img\n                :src=\"image\"\n                :alt=\"alt\"\n                class=\"h-[200px] w-full object-cover transition-transform duration-500 group-hover:scale-105\"\n              />\n            </div>\n            <UiCardContent class=\"p-6 pt-0\">\n              <UiBadge variant=\"outline\" size=\"sm\" class=\"mb-3\">{{ headline }}</UiBadge>\n              <NuxtLink :to=\"link\">\n                <h4 class=\"mb-2 font-semibold transition-colors hover:text-primary\">\n                  {{ title }}\n                </h4>\n              </NuxtLink>\n              <p class=\"mb-4 line-clamp-2 text-sm text-muted-foreground\">{{ description }}</p>\n              <div class=\"flex items-center gap-2\">\n                <UiAvatar :src=\"userImage\" :alt=\"userName\" size=\"xs\" />\n                <span class=\"text-xs font-medium\">{{ userName }}</span>\n              </div>\n            </UiCardContent>\n          </UiCard>\n        </Motion>\n      </div>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const headline = \"Technology\";\n  const title = \"Building the future of digital products\";\n  const image =\n    \"https://images.unsplash.com/photo-1586455122341-927f2dec0691?q=80&w=1974&auto=format&fit=crop\";\n  const alt = \"Digital products\";\n  const description =\n    \"Discover how modern teams are leveraging cutting-edge technology to create exceptional digital experiences.\";\n  const date = \"Apr 20, 2024\";\n  const userImage = \"https://i.pravatar.cc/300?img=25\";\n  const userName = \"Michael Rodriguez\";\n  const link = \"#\";\n</script>\n","category":"Page","path":"Blog/Page/BlockBlogPage5.vue","components":["avatar","badge","button","card","cardcontent","container","dropdownmenu","dropdownmenucontent","dropdownmenuitem","dropdownmenutrigger","separator"]},{"name":"Blog Page 6","fileName":"BlockBlogPage6.vue","file":"<template>\n  <!-- \n    Dark theme blog page with gradient accents\n    Features: Gradient header, author spotlight, card hover effects, dark aesthetic\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <div class=\"min-h-screen bg-background py-16 lg:py-24\">\n      <!-- Gradient header section -->\n      <Motion\n        :variants=\"childVariant\"\n        class=\"relative overflow-hidden rounded-2xl bg-linear-to-br from-primary/20 via-primary/10 to-transparent p-8 lg:p-16\"\n      >\n        <UiContainer>\n          <div class=\"relative z-10\">\n            <Motion\n              as=\"div\"\n              :variants=\"{\n                initial: { scale: 1 },\n                animate: {\n                  scale: [1, 1.2, 1],\n                  transition: {\n                    duration: 3,\n                    repeat: Infinity,\n                    repeatType: 'loop',\n                  },\n                },\n              }\"\n              class=\"absolute -top-20 -right-20 h-40 w-40 rounded-full bg-primary/30 blur-3xl\"\n            ></Motion>\n            <Motion\n              as=\"div\"\n              :variants=\"{\n                initial: { scale: 1 },\n                animate: {\n                  scale: [1, 1.3, 1],\n                  transition: {\n                    duration: 4,\n                    repeat: Infinity,\n                    repeatType: 'loop',\n                  },\n                },\n              }\"\n              class=\"absolute bottom-0 -left-20 h-40 w-40 rounded-full bg-primary/20 blur-3xl\"\n            ></Motion>\n\n            <div class=\"relative text-center\">\n              <h1 class=\"mb-4 text-4xl font-bold lg:text-6xl\">Insights & Stories</h1>\n              <p class=\"mx-auto max-w-2xl text-lg text-muted-foreground lg:text-xl\">\n                Exploring ideas at the intersection of technology, design, and human experience\n              </p>\n            </div>\n          </div>\n        </UiContainer>\n      </Motion>\n\n      <UiContainer class=\"mt-16 lg:mt-24\">\n        <!-- Featured authors section -->\n        <Motion :variants=\"childVariant\" class=\"mb-12\">\n          <div class=\"mb-6 flex items-center justify-between\">\n            <h2 class=\"text-2xl font-semibold\">Featured authors</h2>\n            <UiButton variant=\"ghost\" size=\"sm\">View all</UiButton>\n          </div>\n\n          <div class=\"grid grid-cols-2 gap-4 md:grid-cols-4 lg:gap-6\">\n            <Motion\n              v-for=\"n in 4\"\n              :key=\"n\"\n              :variants=\"{\n                initial: { opacity: 0, scale: 0.9 },\n                animate: {\n                  opacity: 1,\n                  scale: 1,\n                  transition: {\n                    delay: n * 0.05,\n                  },\n                },\n              }\"\n            >\n              <UiCard\n                class=\"group cursor-pointer overflow-hidden pb-0 transition-all hover:shadow-lg\"\n              >\n                <UiCardContent class=\"p-6 pt-0 text-center\">\n                  <UiAvatar :src=\"userImage\" :alt=\"userName\" size=\"lg\" class=\"mx-auto mb-3\" />\n                  <p class=\"mb-1 font-semibold\">{{ userName }}</p>\n                  <p class=\"mb-2 text-xs text-muted-foreground\">{{ n * 12 }} articles</p>\n                  <UiButton size=\"sm\" variant=\"outline\" class=\"w-full\">Follow</UiButton>\n                </UiCardContent>\n              </UiCard>\n            </Motion>\n          </div>\n        </Motion>\n\n        <!-- Filter tabs with gradient indicator -->\n        <Motion :variants=\"childVariant\" class=\"mb-8\">\n          <UiTabs default-value=\"all\">\n            <UiTabsList class=\"w-fit justify-start overflow-x-auto\">\n              <UiTabsTrigger value=\"all\">All posts</UiTabsTrigger>\n              <UiTabsTrigger value=\"tech\">Technology</UiTabsTrigger>\n              <UiTabsTrigger value=\"design\">Design</UiTabsTrigger>\n              <UiTabsTrigger value=\"business\">Business</UiTabsTrigger>\n              <UiTabsTrigger value=\"culture\">Culture</UiTabsTrigger>\n            </UiTabsList>\n          </UiTabs>\n        </Motion>\n\n        <!-- Articles grid with enhanced cards -->\n        <div class=\"grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3\">\n          <Motion\n            v-for=\"n in 9\"\n            :key=\"n\"\n            :variants=\"childVariant\"\n            :transition=\"{\n              delay: n * 0.05,\n            }\"\n          >\n            <UiCard\n              class=\"group h-full overflow-hidden border-0 bg-muted/30 py-0 shadow transition-all hover:scale-[1.02] hover:shadow-xl\"\n            >\n              <div class=\"relative overflow-hidden\">\n                <img\n                  :src=\"image\"\n                  :alt=\"alt\"\n                  class=\"h-[220px] w-full object-cover transition-transform duration-500 group-hover:scale-110\"\n                />\n                <div\n                  class=\"absolute inset-0 bg-linear-to-t from-background/90 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100\"\n                ></div>\n\n                <!-- Hover overlay with action button -->\n                <div\n                  class=\"absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100\"\n                >\n                  <UiButton size=\"sm\" class=\"shadow-lg\">\n                    Read article\n                    <Icon name=\"lucide:arrow-right\" class=\"ml-2 h-4 w-4\" />\n                  </UiButton>\n                </div>\n              </div>\n\n              <UiCardContent class=\"p-6 pt-0\">\n                <div class=\"mb-3 flex items-center gap-2\">\n                  <UiBadge variant=\"secondary\" size=\"sm\">{{ headline }}</UiBadge>\n                  <span class=\"text-xs text-muted-foreground\">· 6 min read</span>\n                </div>\n\n                <NuxtLink :to=\"link\">\n                  <h3\n                    class=\"mb-2 line-clamp-2 text-lg font-semibold transition-colors group-hover:text-primary\"\n                  >\n                    {{ title }}\n                  </h3>\n                </NuxtLink>\n\n                <p class=\"mb-4 line-clamp-2 text-sm text-muted-foreground\">{{ description }}</p>\n\n                <UiDivider class=\"my-4\" />\n\n                <div class=\"flex items-center justify-between\">\n                  <div class=\"flex items-center gap-2\">\n                    <UiAvatar :src=\"userImage\" :alt=\"userName\" size=\"xs\" />\n                    <span class=\"text-xs font-medium\">{{ userName }}</span>\n                  </div>\n                  <div class=\"flex items-center gap-3 text-xs text-muted-foreground\">\n                    <span class=\"flex items-center gap-1\">\n                      <Icon name=\"lucide:heart\" class=\"h-3.5 w-3.5\" />\n                      {{ n * 42 }}\n                    </span>\n                    <span class=\"flex items-center gap-1\">\n                      <Icon name=\"lucide:message-circle\" class=\"h-3.5 w-3.5\" />\n                      {{ n * 8 }}\n                    </span>\n                  </div>\n                </div>\n              </UiCardContent>\n            </UiCard>\n          </Motion>\n        </div>\n\n        <!-- Pagination -->\n        <Motion :variants=\"childVariant\" class=\"mt-12 flex justify-center gap-2\">\n          <UiPagination :items-per-page=\"5\" :total=\"20\" />\n        </Motion>\n      </UiContainer>\n    </div>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const headline = \"Innovation\";\n  const title = \"The art of building products people love\";\n  const image =\n    \"https://images.unsplash.com/photo-1620121692029-d088224ddc74?q=80&w=1932&auto=format&fit=crop\";\n  const alt = \"Product design\";\n  const description =\n    \"Understanding the principles and practices that drive successful product development in the modern era.\";\n  const userImage = \"https://i.pravatar.cc/300?img=30\";\n  const userName = \"Sarah Williams\";\n  const link = \"#\";\n</script>\n","category":"Page","path":"Blog/Page/BlockBlogPage6.vue","components":["avatar","badge","button","card","cardcontent","container","divider","pagination","tabs","tabslist","tabstrigger"]},{"name":"Blog Post Card 1","fileName":"BlockBlogPostCard1.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.15),\n        },\n      },\n    }\"\n  >\n    <Motion\n      as-child\n      :variants=\"{\n        initial: { opacity: 0, y: 10, scale: 0.95 },\n        animate: {\n          opacity: 1,\n          y: 0,\n          scale: 1,\n          transition: { duration: 0.4, ease: 'easeOut' },\n        },\n      }\"\n      class=\"block\"\n    >\n      <NuxtLink :to=\"link\">\n        <img\n          v-if=\"image\"\n          :src=\"image\"\n          :alt=\"alt\"\n          class=\"mb-5 h-[240px] w-full rounded-lg object-cover shadow\"\n        />\n      </NuxtLink>\n    </Motion>\n    <Motion\n      v-if=\"headline\"\n      :variants=\"{\n        initial: { opacity: 0, y: 10 },\n        animate: { opacity: 1, y: 0 },\n      }\"\n      as=\"p\"\n      class=\"mb-2 text-sm font-semibold text-primary\"\n      >{{ headline }}</Motion\n    >\n    <NuxtLink :to=\"link\">\n      <Motion\n        :variants=\"{\n          initial: { opacity: 0, y: 10 },\n          animate: { opacity: 1, y: 0 },\n        }\"\n        as=\"p\"\n        class=\"mb-2 text-xl font-semibold lg:text-2xl\"\n        >{{ title }}</Motion\n      >\n    </NuxtLink>\n    <Motion\n      v-if=\"description\"\n      as=\"p\"\n      :variants=\"{\n        initial: { opacity: 0, y: 10 },\n        animate: { opacity: 1, y: 0 },\n      }\"\n      class=\"mb-5 line-clamp-2 text-ellipsis text-muted-foreground\"\n    >\n      {{ description }}\n    </Motion>\n    <div class=\"flex items-center\">\n      <Motion\n        v-if=\"userImage\"\n        :variants=\"{\n          initial: { opacity: 0, scale: 0.8 },\n          animate: { opacity: 1, scale: 1 },\n        }\"\n        as-child\n      >\n        <UiAvatar\n          :src=\"userImage\"\n          :alt=\"userName\"\n          class=\"mr-3 rounded-full bg-background shadow ring-1 ring-ring/30\"\n        />\n      </Motion>\n      <div>\n        <Motion\n          v-if=\"userName\"\n          :variants=\"{\n            initial: { opacity: 0, x: 10 },\n            animate: { opacity: 1, x: 0 },\n          }\"\n          as=\"p\"\n          class=\"text-sm font-semibold\"\n          >{{ userName }}</Motion\n        >\n        <Motion\n          v-if=\"date\"\n          :variants=\"{\n            initial: { opacity: 0, x: 10 },\n            animate: { opacity: 1, x: 0 },\n          }\"\n          as=\"p\"\n          class=\"text-sm text-muted-foreground\"\n          >{{ date }}</Motion\n        >\n      </div>\n    </div>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n\n  withDefaults(\n    defineProps<{\n      image?: string;\n      alt?: string;\n      headline?: string;\n      description?: string;\n      title?: string;\n      userImage?: string;\n      userName?: string;\n      date?: string;\n      link?: string;\n    }>(),\n    {\n      headline: \"Design\",\n      title: \"UX review presentations\",\n      image:\n        \"https://images.unsplash.com/photo-1620121692029-d088224ddc74?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n      alt: \"UX review presentations\",\n      description:\n        \"How do you create compelling presentations that wow your colleagues and impress your managers?\",\n      date: \"30 Jan 2024\",\n      userImage: \"https://i.pravatar.cc/300?img=15\",\n      userName: \"John Doe\",\n      readTime: \"5 min read\",\n      tags: [\"Design\", \"UX\", \"UI\"],\n      link: \"#\",\n    }\n  );\n</script>\n","category":"Post","path":"Blog/Post/BlockBlogPostCard1.vue","components":["avatar"]},{"name":"Blog Post Card 2","fileName":"BlockBlogPostCard2.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.15),\n        },\n      },\n    }\"\n  >\n    <Motion as-child class=\"block\" :variants=\"childVariant\">\n      <NuxtLink :to=\"link\">\n        <img v-if=\"image\" :src=\"image\" :alt=\"alt\" class=\"mb-5 h-[240px] w-full object-cover\" />\n      </NuxtLink>\n    </Motion>\n\n    <Motion v-if=\"headline || readTime\" as-child :variants=\"childVariant\">\n      <UiBadge\n        variant=\"outline\"\n        class=\"mb-2 rounded-none border-ring/50 px-3 py-1 text-sm font-medium text-primary\"\n        >{{ headline }} <span v-if=\"readTime\" class=\"ml-1\">{{ readTime }}</span></UiBadge\n      >\n    </Motion>\n    <Motion as-child :variants=\"childVariant\" class=\"block\">\n      <NuxtLink :to=\"link\">\n        <p class=\"mb-2 text-xl font-semibold lg:text-2xl\">{{ title }}</p>\n      </NuxtLink>\n    </Motion>\n    <Motion\n      v-if=\"description\"\n      as=\"p\"\n      :variants=\"childVariant\"\n      class=\"mb-4 line-clamp-2 text-ellipsis text-muted-foreground\"\n    >\n      {{ description }}\n    </Motion>\n    <Motion :variants=\"childVariant\" class=\"flex items-center\">\n      <UiAvatar\n        v-if=\"userImage\"\n        :src=\"userImage\"\n        :alt=\"userName\"\n        class=\"mr-3 rounded-none bg-background shadow ring-1 ring-ring/30\"\n      />\n      <div>\n        <p v-if=\"userName\" class=\"text-sm font-semibold\">{{ userName }}</p>\n        <p v-if=\"date\" class=\"text-sm text-muted-foreground\">{{ date }}</p>\n      </div>\n    </Motion>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, x: -10 },\n    animate: {\n      opacity: 1,\n      x: 0,\n      transition: {\n        type: \"keyframes\",\n        ease: \"easeOut\",\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n      },\n    },\n  };\n\n  withDefaults(\n    defineProps<{\n      image?: string;\n      alt?: string;\n      headline?: string;\n      description?: string;\n      title?: string;\n      userImage?: string;\n      userName?: string;\n      date?: string;\n      readTime?: string;\n      link?: string;\n    }>(),\n    {\n      headline: \"Design\",\n      title: \"UX review presentations\",\n      image:\n        \"https://images.unsplash.com/photo-1620121692029-d088224ddc74?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n      alt: \"UX review presentations\",\n      description:\n        \"How do you create compelling presentations that wow your colleagues and impress your managers?\",\n      date: \"30 Jan 2024\",\n      userImage: \"https://i.pravatar.cc/300?img=15\",\n      userName: \"John Doe\",\n      readTime: \"5 min read\",\n      tags: [\"Design\", \"UX\", \"UI\"],\n      link: \"#\",\n    }\n  );\n</script>\n","category":"Post","path":"Blog/Post/BlockBlogPostCard2.vue","components":["avatar","badge"]},{"name":"Blog Post Card 3","fileName":"BlockBlogPostCard3.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.15),\n        },\n      },\n    }\"\n  >\n    <Motion v-if=\"image\" as-child class=\"block\" :variants=\"childVariant\">\n      <NuxtLink :to=\"link\">\n        <img :src=\"image\" :alt=\"alt\" class=\"mb-5 h-[240px] w-full rounded-lg object-cover shadow\" />\n      </NuxtLink>\n    </Motion>\n    <Motion\n      v-if=\"headline\"\n      as=\"p\"\n      :variants=\"childVariant\"\n      class=\"mb-2 text-sm font-semibold text-primary\"\n    >\n      {{ headline }} <span v-if=\"date\">- {{ date }}</span>\n    </Motion>\n    <NuxtLink :to=\"link\">\n      <Motion as=\"p\" :variants=\"childVariant\" class=\"mb-2 text-xl font-semibold lg:text-2xl\">{{\n        title\n      }}</Motion>\n    </NuxtLink>\n    <Motion\n      v-if=\"description\"\n      as=\"p\"\n      :variants=\"childVariant\"\n      class=\"mb-3 line-clamp-2 text-ellipsis text-muted-foreground\"\n    >\n      {{ description }}\n    </Motion>\n    <div class=\"flex flex-wrap items-center gap-2\">\n      <template v-for=\"t in tags\" :key=\"t\">\n        <Motion v-if=\"headline\" as-child :variants=\"childVariant\">\n          <UiBadge class=\"px-2 py-0.5 text-sm\" variant=\"outline\">{{ t }}</UiBadge>\n        </Motion>\n      </template>\n    </div>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 10 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"keyframes\",\n        ease: \"easeOut\",\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n      },\n    },\n  };\n\n  withDefaults(\n    defineProps<{\n      image?: string;\n      alt?: string;\n      headline?: string;\n      description?: string;\n      title?: string;\n      date?: string;\n      tags?: string[];\n      link?: string;\n    }>(),\n    {\n      headline: \"Design\",\n      title: \"UX review presentations\",\n      image:\n        \"https://images.unsplash.com/photo-1620121692029-d088224ddc74?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n      alt: \"UX review presentations\",\n      description:\n        \"How do you create compelling presentations that wow your colleagues and impress your managers?\",\n      date: \"30 Jan 2024\",\n      readTime: \"5 min read\",\n      tags: () => [\"Design\", \"UX\", \"UI\"],\n      link: \"#\",\n    }\n  );\n</script>\n","category":"Post","path":"Blog/Post/BlockBlogPostCard3.vue","components":["badge"]},{"name":"Blog Post Card 4","fileName":"BlockBlogPostCard4.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.15),\n        },\n      },\n    }\"\n  >\n    <div class=\"flex flex-col gap-5 md:flex-row\">\n      <Motion\n        v-if=\"image\"\n        as-child\n        class=\"block basis-full md:basis-[60%]\"\n        :variants=\"{\n          initial: { opacity: 0 },\n          animate: { opacity: 1, transition: { duration: 0.4, ease: 'easeOut' } },\n        }\"\n      >\n        <NuxtLink :to=\"link\" class=\"shrink-0\">\n          <img\n            :src=\"image\"\n            :alt=\"alt\"\n            class=\"h-[240px] w-full rounded-lg object-cover shadow md:h-[200px]\"\n          />\n        </NuxtLink>\n      </Motion>\n      <div class=\"basis-full md:basis-[40%]\">\n        <Motion\n          v-if=\"headline\"\n          as=\"p\"\n          :variants=\"childVariant\"\n          class=\"mb-2 text-sm font-semibold text-primary\"\n          >{{ headline }}</Motion\n        >\n        <Motion as-child :variants=\"childVariant\" class=\"block\">\n          <NuxtLink :to=\"link\">\n            <p class=\"mb-2 text-xl font-semibold lg:text-2xl\">{{ title }}</p>\n          </NuxtLink>\n        </Motion>\n        <Motion\n          v-if=\"description\"\n          as=\"p\"\n          :variants=\"childVariant\"\n          class=\"mb-5 line-clamp-2 text-ellipsis text-muted-foreground\"\n        >\n          {{ description }}\n        </Motion>\n        <Motion :variants=\"childVariant\" class=\"flex items-center\">\n          <UiAvatar\n            v-if=\"userImage\"\n            :src=\"userImage\"\n            :alt=\"userName\"\n            class=\"mr-3 rounded-full bg-background shadow ring-1 ring-ring/30\"\n          />\n          <div>\n            <p v-if=\"userName\" class=\"text-sm font-semibold\">{{ userName }}</p>\n            <p v-if=\"date\" class=\"text-sm text-muted-foreground\">{{ date }}</p>\n          </div>\n        </Motion>\n      </div>\n    </div>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 10 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"keyframes\",\n        ease: \"easeOut\",\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n      },\n    },\n  };\n  withDefaults(\n    defineProps<{\n      image?: string;\n      alt?: string;\n      headline?: string;\n      description?: string;\n      title?: string;\n      userImage?: string;\n      userName?: string;\n      date?: string;\n      link?: string;\n    }>(),\n    {\n      headline: \"Design\",\n      title: \"UX review presentations\",\n      image:\n        \"https://images.unsplash.com/photo-1620121692029-d088224ddc74?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n      alt: \"UX review presentations\",\n      description:\n        \"How do you create compelling presentations that wow your colleagues and impress your managers?\",\n      date: \"30 Jan 2024\",\n      userImage: \"https://i.pravatar.cc/300?img=15\",\n      userName: \"John Doe\",\n      link: \"#\",\n    }\n  );\n</script>\n","category":"Post","path":"Blog/Post/BlockBlogPostCard4.vue","components":["avatar"]},{"name":"Blog Post Card 5","fileName":"BlockBlogPostCard5.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.12),\n        },\n      },\n    }\"\n  >\n    <div\n      class=\"group relative overflow-hidden rounded-xl border bg-background shadow-lg transition-all hover:shadow-xl\"\n    >\n      <Motion\n        as-child\n        :variants=\"{\n          initial: { opacity: 0, scale: 1.1 },\n          animate: { opacity: 1, scale: 1, transition: { duration: 0.6, ease: 'easeOut' } },\n        }\"\n        class=\"block\"\n      >\n        <NuxtLink :to=\"link\" class=\"relative block overflow-hidden\">\n          <img\n            v-if=\"image\"\n            :src=\"image\"\n            :alt=\"alt\"\n            class=\"h-[280px] w-full object-cover transition-transform duration-300 group-hover:scale-105\"\n          />\n          <div\n            class=\"absolute inset-0 bg-linear-to-t from-background/80 via-background/20 to-transparent opacity-0 transition-opacity group-hover:opacity-100\"\n          />\n        </NuxtLink>\n      </Motion>\n\n      <div class=\"p-6\">\n        <div class=\"mb-3 flex items-center gap-2\">\n          <Motion\n            v-if=\"headline\"\n            as-child\n            :variants=\"{\n              initial: { opacity: 0, scale: 0 },\n              animate: {\n                opacity: 1,\n                scale: 1,\n                transition: { type: 'spring', stiffness: 300, damping: 20 },\n              },\n            }\"\n          >\n            <UiBadge variant=\"secondary\" class=\"text-xs\">\n              {{ headline }}\n            </UiBadge>\n          </Motion>\n          <Motion\n            v-if=\"readTime\"\n            as=\"span\"\n            :variants=\"{\n              initial: { opacity: 0, x: -10 },\n              animate: { opacity: 1, x: 0 },\n            }\"\n            class=\"text-xs text-muted-foreground\"\n          >\n            {{ readTime }}\n          </Motion>\n        </div>\n\n        <Motion as-child :variants=\"childVariant\">\n          <NuxtLink :to=\"link\">\n            <h3 class=\"mb-3 text-xl font-bold transition-colors hover:text-primary lg:text-2xl\">\n              {{ title }}\n            </h3>\n          </NuxtLink>\n        </Motion>\n\n        <Motion\n          v-if=\"description\"\n          as=\"p\"\n          :variants=\"childVariant\"\n          class=\"mb-5 line-clamp-3 text-ellipsis text-muted-foreground\"\n        >\n          {{ description }}\n        </Motion>\n\n        <Motion :variants=\"childVariant\" class=\"flex items-center justify-between\">\n          <div class=\"flex items-center\">\n            <UiAvatar\n              v-if=\"userImage\"\n              :src=\"userImage\"\n              :alt=\"userName\"\n              class=\"mr-3 size-10 ring-2 ring-background\"\n            />\n            <div>\n              <p v-if=\"userName\" class=\"text-sm font-semibold\">{{ userName }}</p>\n              <p v-if=\"date\" class=\"text-xs text-muted-foreground\">{{ date }}</p>\n            </div>\n          </div>\n          <Icon\n            name=\"lucide:arrow-right\"\n            class=\"size-5 text-muted-foreground transition-transform group-hover:translate-x-1\"\n          />\n        </Motion>\n      </div>\n    </div>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 10 },\n    animate: { opacity: 1, y: 0, transition: { duration: 0.4, ease: \"easeOut\" } },\n  };\n\n  withDefaults(\n    defineProps<{\n      image?: string;\n      alt?: string;\n      headline?: string;\n      description?: string;\n      title?: string;\n      userImage?: string;\n      userName?: string;\n      date?: string;\n      readTime?: string;\n      link?: string;\n    }>(),\n    {\n      headline: \"Technology\",\n      title: \"The Future of Web Development\",\n      image:\n        \"https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=2072&auto=format&fit=crop\",\n      alt: \"The Future of Web Development\",\n      description:\n        \"Explore the latest trends and technologies shaping the future of web development and how they impact our digital experiences.\",\n      date: \"15 Feb 2024\",\n      userImage: \"https://i.pravatar.cc/300?img=12\",\n      userName: \"Sarah Chen\",\n      readTime: \"8 min read\",\n      link: \"#\",\n    }\n  );\n</script>\n","category":"Post","path":"Blog/Post/BlockBlogPostCard5.vue","components":["avatar","badge"]},{"name":"Blog Post Card 6","fileName":"BlockBlogPostCard6.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <div\n      class=\"overflow-hidden rounded-2xl border-2 bg-background shadow-md transition-all hover:border-primary/50 hover:shadow-xl\"\n    >\n      <div class=\"flex flex-col md:flex-row\">\n        <Motion\n          as-child\n          :variants=\"{\n            initial: { opacity: 0, x: -30 },\n            animate: { opacity: 1, x: 0, transition: { duration: 0.5, ease: 'easeOut' } },\n          }\"\n          class=\"md:w-2/5\"\n        >\n          <NuxtLink :to=\"link\" class=\"relative block overflow-hidden\">\n            <img\n              v-if=\"image\"\n              :src=\"image\"\n              :alt=\"alt\"\n              class=\"h-[200px] w-full object-cover transition-transform duration-500 hover:scale-110 md:h-full\"\n            />\n            <Motion\n              :variants=\"{\n                initial: { opacity: 0, y: 20 },\n                animate: { opacity: 1, y: 0, transition: { delay: 0.3 } },\n              }\"\n              class=\"absolute bottom-3 left-3\"\n            >\n              <UiBadge variant=\"default\" class=\"shadow-lg\">\n                <Icon name=\"lucide:bookmark\" class=\"size-3\" />\n                {{ headline }}\n              </UiBadge>\n            </Motion>\n          </NuxtLink>\n        </Motion>\n\n        <div class=\"flex flex-1 flex-col justify-between p-6 md:w-3/5\">\n          <div>\n            <Motion\n              as=\"div\"\n              :variants=\"{\n                initial: { opacity: 0, y: 10 },\n                animate: { opacity: 1, y: 0 },\n              }\"\n              class=\"mb-3 flex items-center gap-2 text-xs text-muted-foreground\"\n            >\n              <Icon name=\"lucide:calendar\" class=\"size-3.5\" />\n              <span>{{ date }}</span>\n              <span class=\"mx-1\">•</span>\n              <Icon name=\"lucide:clock\" class=\"size-3.5\" />\n              <span>{{ readTime }}</span>\n            </Motion>\n\n            <Motion as-child :variants=\"childVariant\">\n              <NuxtLink :to=\"link\">\n                <h3 class=\"mb-3 text-2xl font-bold transition-colors hover:text-primary\">\n                  {{ title }}\n                </h3>\n              </NuxtLink>\n            </Motion>\n\n            <Motion\n              v-if=\"description\"\n              as=\"p\"\n              :variants=\"childVariant\"\n              class=\"mb-4 line-clamp-2 text-muted-foreground\"\n            >\n              {{ description }}\n            </Motion>\n          </div>\n\n          <Motion :variants=\"childVariant\" class=\"flex items-center justify-between\">\n            <div class=\"flex items-center gap-3\">\n              <UiAvatar v-if=\"userImage\" :src=\"userImage\" :alt=\"userName\" class=\"size-9\" />\n              <span v-if=\"userName\" class=\"text-sm font-medium\">{{ userName }}</span>\n            </div>\n            <NuxtLink :to=\"link\">\n              <UiButton size=\"sm\" variant=\"ghost\" class=\"group\">\n                Read more\n                <Icon\n                  name=\"lucide:chevron-right\"\n                  class=\"size-4 transition-transform group-hover:translate-x-1\"\n                />\n              </UiButton>\n            </NuxtLink>\n          </Motion>\n        </div>\n      </div>\n    </div>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 10 },\n    animate: { opacity: 1, y: 0, transition: { duration: 0.4, ease: \"easeOut\" } },\n  };\n\n  withDefaults(\n    defineProps<{\n      image?: string;\n      alt?: string;\n      headline?: string;\n      description?: string;\n      title?: string;\n      userImage?: string;\n      userName?: string;\n      date?: string;\n      readTime?: string;\n      link?: string;\n    }>(),\n    {\n      headline: \"Featured\",\n      title: \"Building Scalable Design Systems\",\n      image:\n        \"https://images.unsplash.com/photo-1558655146-d09347e92766?q=80&w=2064&auto=format&fit=crop\",\n      alt: \"Building Scalable Design Systems\",\n      description:\n        \"Learn how to create and maintain a design system that scales with your organization and keeps your team aligned.\",\n      date: \"22 Mar 2024\",\n      userImage: \"https://i.pravatar.cc/300?img=8\",\n      userName: \"Michael Rodriguez\",\n      readTime: \"12 min read\",\n      link: \"#\",\n    }\n  );\n</script>\n","category":"Post","path":"Blog/Post/BlockBlogPostCard6.vue","components":["avatar","badge","button"]},{"name":"Blog Post Card 7","fileName":"BlockBlogPostCard7.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <div\n      class=\"group relative overflow-hidden rounded-xl bg-linear-to-br from-violet-500 via-pink-500/50 to-orange-500/50 p-0.5\"\n    >\n      <div class=\"overflow-hidden rounded-lg bg-background\">\n        <Motion\n          as-child\n          :variants=\"{\n            initial: { opacity: 0, y: 20 },\n            animate: { opacity: 1, y: 0, transition: { duration: 0.5 } },\n          }\"\n        >\n          <NuxtLink :to=\"link\" class=\"relative block overflow-hidden rounded-t-lg\">\n            <img\n              v-if=\"image\"\n              :src=\"image\"\n              :alt=\"alt\"\n              class=\"h-[240px] w-full object-cover transition-all duration-500 group-hover:scale-105 group-hover:brightness-75\"\n            />\n            <div\n              class=\"absolute inset-0 flex items-center justify-center opacity-0 transition-all group-hover:opacity-100\"\n            >\n              <Motion\n                :initial=\"{ scale: 0 }\"\n                :animate=\"{ scale: 1 }\"\n                :transition=\"{ delay: 0.1, type: 'spring', stiffness: 300, damping: 20 }\"\n                class=\"flex size-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-xl\"\n              >\n                <Icon name=\"lucide:arrow-right\" class=\"size-6\" />\n              </Motion>\n            </div>\n          </NuxtLink>\n        </Motion>\n\n        <div class=\"p-5\">\n          <div class=\"mb-3 flex flex-wrap items-center gap-2\">\n            <Motion\n              v-for=\"(tag, i) in tags\"\n              :key=\"tag\"\n              as-child\n              :variants=\"{\n                initial: { opacity: 0, scale: 0 },\n                animate: {\n                  opacity: 1,\n                  scale: 1,\n                  transition: { delay: i * 0.05, type: 'spring', stiffness: 300, damping: 20 },\n                },\n              }\"\n            >\n              <UiBadge variant=\"secondary\" class=\"text-xs\">\n                {{ tag }}\n              </UiBadge>\n            </Motion>\n          </div>\n\n          <Motion as-child :variants=\"childVariant\">\n            <NuxtLink :to=\"link\">\n              <h3 class=\"mb-2 text-xl font-bold transition-colors hover:text-primary lg:text-2xl\">\n                {{ title }}\n              </h3>\n            </NuxtLink>\n          </Motion>\n\n          <Motion\n            v-if=\"description\"\n            as=\"p\"\n            :variants=\"childVariant\"\n            class=\"mb-4 line-clamp-2 text-sm text-muted-foreground\"\n          >\n            {{ description }}\n          </Motion>\n\n          <Motion :variants=\"childVariant\" class=\"flex items-center justify-between border-t pt-4\">\n            <div class=\"flex items-center gap-3\">\n              <UiAvatar v-if=\"userImage\" :src=\"userImage\" :alt=\"userName\" class=\"size-8\" />\n              <div>\n                <p v-if=\"userName\" class=\"text-sm font-semibold\">{{ userName }}</p>\n                <div class=\"flex items-center gap-1.5 text-xs text-muted-foreground\">\n                  <span>{{ date }}</span>\n                  <span v-if=\"readTime\">• {{ readTime }}</span>\n                </div>\n              </div>\n            </div>\n            <UiButton\n              size=\"icon-sm\"\n              variant=\"ghost\"\n              class=\"text-muted-foreground transition-colors hover:text-primary\"\n            >\n              <Icon name=\"lucide:bookmark\" class=\"size-5\" />\n            </UiButton>\n          </Motion>\n        </div>\n      </div>\n    </div>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 10 },\n    animate: { opacity: 1, y: 0, transition: { duration: 0.4, ease: \"easeOut\" } },\n  };\n\n  withDefaults(\n    defineProps<{\n      image?: string;\n      alt?: string;\n      description?: string;\n      title?: string;\n      userImage?: string;\n      userName?: string;\n      date?: string;\n      readTime?: string;\n      tags?: string[];\n      link?: string;\n    }>(),\n    {\n      title: \"Mastering CSS Grid Layouts\",\n      image:\n        \"https://images.unsplash.com/photo-1507721999472-8ed4421c4af2?q=80&w=2070&auto=format&fit=crop\",\n      alt: \"Mastering CSS Grid Layouts\",\n      description:\n        \"Deep dive into CSS Grid and learn how to create complex, responsive layouts with ease using modern techniques.\",\n      date: \"5 Apr 2024\",\n      userImage: \"https://i.pravatar.cc/300?img=22\",\n      userName: \"Emma Wilson\",\n      readTime: \"6 min read\",\n      tags: () => [\"CSS\", \"Web Design\", \"Tutorial\"],\n      link: \"#\",\n    }\n  );\n</script>\n","category":"Post","path":"Blog/Post/BlockBlogPostCard7.vue","components":["avatar","badge","button"]},{"name":"Blog Post Card 8","fileName":"BlockBlogPostCard8.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.15),\n        },\n      },\n    }\"\n  >\n    <div class=\"group relative overflow-hidden rounded-2xl bg-background shadow-lg\">\n      <div\n        class=\"absolute inset-0 bg-linear-to-br from-primary/30 via-transparent to-transparent opacity-0 transition-opacity group-hover:opacity-100\"\n      />\n\n      <div class=\"relative\">\n        <Motion\n          as-child\n          :variants=\"{\n            initial: { opacity: 0, scale: 0.9 },\n            animate: { opacity: 1, scale: 1, transition: { duration: 0.6, ease: 'easeOut' } },\n          }\"\n        >\n          <NuxtLink :to=\"link\" class=\"relative block\">\n            <img v-if=\"image\" :src=\"image\" :alt=\"alt\" class=\"h-[220px] w-full object-cover\" />\n            <div\n              class=\"absolute inset-0 bg-linear-to-t from-background/90 via-background/30 to-transparent\"\n            />\n            <Motion\n              :variants=\"{\n                initial: { y: 20, opacity: 0 },\n                animate: { y: 0, opacity: 1, transition: { delay: 0.2 } },\n              }\"\n              class=\"absolute right-4 bottom-4 left-4\"\n            >\n              <UiBadge variant=\"default\" class=\"mb-2 shadow-lg\">\n                <Icon name=\"lucide:star\" class=\"size-3 fill-current\" />\n                {{ headline }}\n              </UiBadge>\n            </Motion>\n          </NuxtLink>\n        </Motion>\n\n        <div class=\"p-6\">\n          <div class=\"mb-3 flex items-center gap-2 text-xs text-muted-foreground\">\n            <Motion\n              :variants=\"{\n                initial: { opacity: 0, x: -10 },\n                animate: { opacity: 1, x: 0 },\n              }\"\n              class=\"flex items-center gap-1\"\n            >\n              <Icon name=\"lucide:eye\" class=\"size-3.5\" />\n              <span>{{ views }} views</span>\n            </Motion>\n            <Motion\n              :variants=\"{\n                initial: { opacity: 0, x: -10 },\n                animate: { opacity: 1, x: 0 },\n              }\"\n              >•</Motion\n            >\n            <Motion\n              :variants=\"{\n                initial: { opacity: 0, x: -10 },\n                animate: { opacity: 1, x: 0 },\n              }\"\n              class=\"flex items-center gap-1\"\n            >\n              <Icon name=\"lucide:message-circle\" class=\"size-3.5\" />\n              <span>{{ comments }} comments</span>\n            </Motion>\n          </div>\n\n          <Motion as-child :variants=\"childVariant\">\n            <NuxtLink :to=\"link\">\n              <h3\n                class=\"mb-3 text-xl leading-tight font-bold transition-colors hover:text-primary lg:text-2xl\"\n              >\n                {{ title }}\n              </h3>\n            </NuxtLink>\n          </Motion>\n\n          <Motion\n            v-if=\"description\"\n            as=\"p\"\n            :variants=\"childVariant\"\n            class=\"mb-5 line-clamp-2 text-sm text-muted-foreground\"\n          >\n            {{ description }}\n          </Motion>\n\n          <Motion :variants=\"childVariant\" class=\"flex items-center justify-between\">\n            <div class=\"flex items-center gap-3\">\n              <UiAvatar\n                v-if=\"userImage\"\n                :src=\"userImage\"\n                :alt=\"userName\"\n                class=\"size-10 ring-2 ring-muted\"\n              />\n              <div>\n                <p v-if=\"userName\" class=\"text-sm font-semibold\">{{ userName }}</p>\n                <p v-if=\"date\" class=\"text-xs text-muted-foreground\">{{ date }}</p>\n              </div>\n            </div>\n            <div class=\"flex items-center gap-2\">\n              <UiButton size=\"icon-sm\" variant=\"ghost\">\n                <Icon\n                  name=\"lucide:heart\"\n                  class=\"size-4 text-muted-foreground transition-colors hover:fill-red-500 hover:text-red-500\"\n                />\n                <span class=\"sr-only\">Like</span>\n              </UiButton>\n              <UiButton size=\"icon-sm\" variant=\"ghost\">\n                <Icon name=\"lucide:share-2\" class=\"size-4 text-muted-foreground\" />\n                <span class=\"sr-only\">Share</span>\n              </UiButton>\n            </div>\n          </Motion>\n        </div>\n      </div>\n    </div>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 10 },\n    animate: { opacity: 1, y: 0, transition: { duration: 0.4, ease: \"easeOut\" } },\n  };\n\n  withDefaults(\n    defineProps<{\n      image?: string;\n      alt?: string;\n      headline?: string;\n      description?: string;\n      title?: string;\n      userImage?: string;\n      userName?: string;\n      date?: string;\n      views?: string;\n      comments?: string;\n      link?: string;\n    }>(),\n    {\n      headline: \"Trending\",\n      title: \"The Rise of AI in Creative Design\",\n      image:\n        \"https://images.unsplash.com/photo-1677442136019-21780ecad995?q=80&w=2070&auto=format&fit=crop\",\n      alt: \"The Rise of AI in Creative Design\",\n      description:\n        \"Discover how artificial intelligence is revolutionizing the creative industry and what it means for designers.\",\n      date: \"18 Apr 2024\",\n      userImage: \"https://i.pravatar.cc/300?img=33\",\n      userName: \"David Park\",\n      views: \"2.3K\",\n      comments: \"47\",\n      link: \"#\",\n    }\n  );\n</script>\n","category":"Post","path":"Blog/Post/BlockBlogPostCard8.vue","components":["avatar","badge","button"]},{"name":"Blog Post Card 9","fileName":"BlockBlogPostCard9.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.12),\n        },\n      },\n    }\"\n  >\n    <div\n      class=\"group overflow-hidden rounded-xl border bg-background transition-all hover:border-primary/50 hover:shadow-xl\"\n    >\n      <div class=\"relative\">\n        <Motion\n          as-child\n          :variants=\"{\n            initial: { opacity: 0 },\n            animate: { opacity: 1, transition: { duration: 0.5 } },\n          }\"\n        >\n          <NuxtLink :to=\"link\" class=\"group/img relative block\">\n            <Motion\n              :variants=\"{\n                initial: { opacity: 0 },\n                animate: { opacity: 1, transition: { duration: 0.5 } },\n              }\"\n              class=\"relative overflow-hidden\"\n            >\n              <img\n                v-if=\"image\"\n                :src=\"image\"\n                :alt=\"alt\"\n                class=\"h-[200px] w-full object-cover transition-all duration-700 group-hover:scale-110\"\n              />\n              <div\n                class=\"absolute inset-0 bg-black/40 opacity-0 transition-opacity group-hover:opacity-100\"\n              />\n            </Motion>\n\n            <Motion\n              :variants=\"{\n                initial: { scale: 0, rotate: -180 },\n                animate: {\n                  scale: 1,\n                  rotate: 0,\n                  transition: { delay: 0.3, type: 'spring', stiffness: 200, damping: 15 },\n                },\n              }\"\n              class=\"absolute top-4 right-4 flex size-10 items-center justify-center rounded-full bg-background shadow-lg group-hover/img:scale-110\"\n            >\n              <Icon name=\"lucide:arrow-up-right\" class=\"size-5 text-primary\" />\n            </Motion>\n          </NuxtLink>\n        </Motion>\n      </div>\n\n      <div class=\"p-5\">\n        <div class=\"mb-4 flex items-center justify-between\">\n          <Motion\n            v-if=\"headline\"\n            as-child\n            :variants=\"{\n              initial: { opacity: 0, y: -10 },\n              animate: { opacity: 1, y: 0 },\n            }\"\n          >\n            <UiBadge variant=\"outline\" class=\"text-xs font-semibold text-primary\">\n              {{ headline }}\n            </UiBadge>\n          </Motion>\n          <Motion\n            :variants=\"{\n              initial: { opacity: 0, x: 10 },\n              animate: { opacity: 1, x: 0 },\n            }\"\n            class=\"flex items-center gap-1 text-xs text-muted-foreground\"\n          >\n            <Icon name=\"lucide:clock\" class=\"size-3.5\" />\n            <span>{{ readTime }}</span>\n          </Motion>\n        </div>\n\n        <Motion as-child :variants=\"childVariant\">\n          <NuxtLink :to=\"link\">\n            <h3\n              class=\"mb-2 text-lg leading-tight font-bold transition-colors hover:text-primary lg:text-xl\"\n            >\n              {{ title }}\n            </h3>\n          </NuxtLink>\n        </Motion>\n\n        <Motion\n          v-if=\"description\"\n          as=\"p\"\n          :variants=\"childVariant\"\n          class=\"mb-4 line-clamp-3 text-sm text-muted-foreground\"\n        >\n          {{ description }}\n        </Motion>\n\n        <Motion :variants=\"childVariant\">\n          <UiDivider class=\"my-4\" />\n        </Motion>\n\n        <Motion :variants=\"childVariant\" class=\"flex items-center justify-between\">\n          <div class=\"flex items-center gap-2\">\n            <UiAvatar v-if=\"userImage\" :src=\"userImage\" :alt=\"userName\" size=\"sm\" />\n            <div class=\"flex flex-col\">\n              <span v-if=\"userName\" class=\"text-xs font-semibold\">{{ userName }}</span>\n              <span v-if=\"date\" class=\"text-xs text-muted-foreground\">{{ date }}</span>\n            </div>\n          </div>\n          <div class=\"flex items-center gap-3 text-xs text-muted-foreground\">\n            <div class=\"flex items-center gap-1\">\n              <Icon name=\"lucide:heart\" class=\"size-3.5\" />\n              <span>{{ likes }}</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <Icon name=\"lucide:bookmark\" class=\"size-3.5\" />\n              <span>{{ bookmarks }}</span>\n            </div>\n          </div>\n        </Motion>\n      </div>\n    </div>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 10 },\n    animate: { opacity: 1, y: 0, transition: { duration: 0.4, ease: \"easeOut\" } },\n  };\n\n  withDefaults(\n    defineProps<{\n      image?: string;\n      alt?: string;\n      headline?: string;\n      description?: string;\n      title?: string;\n      userImage?: string;\n      userName?: string;\n      date?: string;\n      readTime?: string;\n      likes?: string;\n      bookmarks?: string;\n      link?: string;\n    }>(),\n    {\n      headline: \"Development\",\n      title: \"Modern JavaScript Patterns You Should Know\",\n      image:\n        \"https://images.unsplash.com/photo-1587620962725-abab7fe55159?q=80&w=2031&auto=format&fit=crop\",\n      alt: \"Modern JavaScript Patterns\",\n      description:\n        \"Learn essential JavaScript design patterns that will make your code more maintainable and efficient in modern applications.\",\n      date: \"10 May 2024\",\n      userImage: \"https://i.pravatar.cc/300?img=18\",\n      userName: \"Lisa Anderson\",\n      readTime: \"10 min read\",\n      likes: \"156\",\n      bookmarks: \"89\",\n      link: \"#\",\n    }\n  );\n</script>\n","category":"Post","path":"Blog/Post/BlockBlogPostCard9.vue","components":["avatar","badge","divider"]},{"name":"Pricing 1","fileName":"BlockPricing1.vue","file":"<template>\n  <UiContainer class=\"relative py-16 lg:py-24\">\n    <div class=\"max-w-[760px]\">\n      <p class=\"font-semibold text-primary\">Pricing</p>\n      <h2 class=\"mt-3 mb-4 text-3xl font-semibold lg:mb-5 lg:text-4xl\">\n        Simple, transparent pricing\n      </h2>\n      <p class=\"text-lg text-muted-foreground lg:text-xl\">\n        We believe {{ COMPANY_NAME }} should be accessible to all companies, no matter the size.\n      </p>\n    </div>\n\n    <div class=\"mt-5 flex flex-col-reverse gap-3 md:flex-row lg:mt-7\">\n      <UiButton size=\"lg\" variant=\"outline\">Contact sales</UiButton>\n      <UiButton size=\"lg\">Get started</UiButton>\n    </div>\n\n    <div class=\"grid grid-cols-1 gap-y-10 py-10 lg:grid-cols-3 lg:gap-8 lg:gap-y-12 lg:py-20\">\n      <template v-for=\"(p, i) in prices\" :key=\"i\">\n        <UiCard\n          class=\"overflow-hidden\"\n          :class=\"[i == prices.length - 2 ? 'border-primary shadow-lg' : '']\"\n        >\n          <UiCardContent class=\"flex w-full flex-col items-center\">\n            <div class=\"mb-5 flex h-12 w-12 items-center justify-center rounded-full bg-primary/20\">\n              <Icon :name=\"p.icon\" class=\"h-6 w-6 text-primary\" />\n            </div>\n            <h3 class=\"mb-2 text-xl font-semibold text-primary\">{{ p.title }} plan</h3>\n            <p class=\"text-4xl/loose font-semibold lg:text-5xl/snug\">${{ p.price }}/mth</p>\n            <p class=\"mt-2 text-muted-foreground\">Billed annually</p>\n\n            <ul class=\"flex w-full flex-col items-center gap-4 px-5 py-8 lg:items-start\">\n              <li v-for=\"(perk, k) in p.perks\" :key=\"k\" class=\"flex items-center gap-3\">\n                <Icon name=\"heroicons:check-circle\" class=\"h-6 w-6 shrink-0 text-primary\" />\n                <span class=\"opacity-80\">{{ perk }}</span>\n              </li>\n            </ul>\n          </UiCardContent>\n          <UiCardFooter class=\"border-t bg-muted pt-6! dark:border-muted/50 dark:bg-muted/30\">\n            <UiButton class=\"w-full\"> Get started </UiButton>\n          </UiCardFooter>\n        </UiCard>\n      </template>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const prices = [\n    {\n      icon: \"heroicons:bolt\",\n      title: \"Basic\",\n      price: 10,\n      perks: [\n        \"Access to all basic features\",\n        \"Basic reporting and analytics\",\n        \"Up to 10 individual users\",\n        \"20GB individual data each user\",\n        \"Basic chat and email support\",\n      ],\n    },\n    {\n      icon: \"heroicons:bolt\",\n      title: \"Business\",\n      price: 20,\n      perks: [\n        \"200+ integrations\",\n        \"Advanced reporting and analytics\",\n        \"Up to 20 individual users\",\n        \"40GB individual data each user\",\n        \"Priority chat and email support\",\n      ],\n    },\n    {\n      icon: \"heroicons:bolt\",\n      title: \"Enterprise\",\n      price: 40,\n      perks: [\n        \"Advanced custom fields\",\n        \"Audit log and data history\",\n        \"Unlimited individual users\",\n        \"Unlimited individual data\",\n        \"Personalised+priotity service\",\n      ],\n    },\n  ];\n</script>\n","category":"Pricing","path":"Pricing/BlockPricing1.vue","components":["button","card","cardcontent","cardfooter","container"]},{"name":"Pricing 2","fileName":"BlockPricing2.vue","file":"<template>\n  <UiContainer class=\"relative py-16 lg:py-24\">\n    <div class=\"max-w-[760px]\">\n      <p class=\"font-semibold text-primary\">Pricing</p>\n      <h2 class=\"mt-3 mb-4 text-3xl font-semibold lg:mb-5 lg:text-4xl\">\n        Simple, transparent pricing\n      </h2>\n      <p class=\"text-lg text-muted-foreground lg:text-xl\">\n        We believe {{ COMPANY_NAME }} should be accessible to all companies, no matter the size.\n      </p>\n    </div>\n\n    <div class=\"grid grid-cols-1 gap-y-10 py-10 lg:grid-cols-3 lg:gap-8 lg:gap-y-12 lg:py-20\">\n      <template v-for=\"(p, i) in prices\" :key=\"i\">\n        <UiCard\n          class=\"overflow-hidden\"\n          :class=\"[i == prices.length - 2 ? 'border-primary shadow-lg' : '']\"\n        >\n          <UiCardContent class=\"flex w-full flex-col items-center\">\n            <h3 class=\"text-4xl/loose font-semibold lg:text-5xl/snug\">${{ p.price }}/mth</h3>\n            <p class=\"my-2 text-xl font-semibold\">{{ p.title }} plan</p>\n            <p class=\"mt-2 text-muted-foreground\">Billed annually</p>\n\n            <ul class=\"flex w-full flex-col items-center gap-4 px-5 py-8 lg:items-start\">\n              <li v-for=\"(perk, k) in p.perks\" :key=\"k\" class=\"flex items-center gap-3\">\n                <Icon\n                  name=\"solar:check-circle-bold-duotone\"\n                  class=\"h-6 w-6 shrink-0 text-green-500\"\n                />\n                <span class=\"opacity-80\">{{ perk }}</span>\n              </li>\n            </ul>\n          </UiCardContent>\n          <UiCardFooter class=\"flex-col gap-3\">\n            <UiButton class=\"w-full\"> Get started </UiButton>\n            <UiButton variant=\"outline\" class=\"w-full\"> Contact sales </UiButton>\n          </UiCardFooter>\n        </UiCard>\n      </template>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const prices = [\n    {\n      icon: \"heroicons:bolt\",\n      title: \"Basic\",\n      price: 10,\n      perks: [\n        \"Access to all basic features\",\n        \"Basic reporting and analytics\",\n        \"Up to 10 individual users\",\n        \"20GB individual data each user\",\n        \"Basic chat and email support\",\n      ],\n    },\n    {\n      icon: \"heroicons:bolt\",\n      title: \"Business\",\n      price: 20,\n      perks: [\n        \"200+ integrations\",\n        \"Advanced reporting and analytics\",\n        \"Up to 20 individual users\",\n        \"40GB individual data each user\",\n        \"Priority chat and email support\",\n      ],\n    },\n    {\n      icon: \"heroicons:bolt\",\n      title: \"Enterprise\",\n      price: 40,\n      perks: [\n        \"Advanced custom fields\",\n        \"Audit log and data history\",\n        \"Unlimited individual users\",\n        \"Unlimited individual data\",\n        \"Personalised+priotity service\",\n      ],\n    },\n  ];\n</script>\n","category":"Pricing","path":"Pricing/BlockPricing2.vue","components":["button","card","cardcontent","cardfooter","container"]},{"name":"Pricing 3","fileName":"BlockPricing3.vue","file":"<template>\n  <UiContainer class=\"relative py-16 lg:py-24\">\n    <div class=\"mx-auto max-w-[760px] text-center\">\n      <p class=\"font-semibold text-primary\">Pricing</p>\n      <h2 class=\"mt-3 mb-4 text-3xl font-semibold lg:mb-6 lg:text-4xl\">\n        Plans that fit your scale\n      </h2>\n      <p class=\"text-lg text-muted-foreground lg:text-xl\">\n        Simple, transparent pricing that grows with you. Try any plan free for 30 days.\n      </p>\n    </div>\n\n    <UiTabs class=\"mx-auto mt-5 w-full md:w-[450px] lg:mt-7\" default-value=\"monthly\">\n      <UiTabsList class=\"grid h-auto w-full grid-cols-2\">\n        <UiTabsTrigger class=\"h-10\" value=\"monthly\">Monthly billing</UiTabsTrigger>\n        <UiTabsTrigger class=\"h-10\" value=\"annual\"\n          >Annual Billing\n          <UiBadge class=\"ml-2 hidden lg:block\" variant=\"outline\">Save 20%</UiBadge></UiTabsTrigger\n        >\n      </UiTabsList>\n    </UiTabs>\n\n    <div class=\"grid grid-cols-1 gap-y-10 py-10 lg:grid-cols-2 lg:gap-8 lg:gap-y-12 lg:py-20\">\n      <template v-for=\"(p, i) in prices\" :key=\"i\">\n        <UiCard class=\"overflow-hidden\">\n          <UiCardContent class=\"w-full px-0\">\n            <div\n              class=\"flex flex-col-reverse gap-4 border-b px-6 pb-6 lg:flex-row lg:justify-between\"\n            >\n              <div>\n                <p class=\"text-xl font-semibold lg:text-2xl\">\n                  {{ p.title }} plan\n                  <UiBadge\n                    v-if=\"i == prices.length - 1\"\n                    class=\"ml-2 border-primary/50 text-primary\"\n                    variant=\"outline\"\n                    >Popular</UiBadge\n                  >\n                </p>\n                <p class=\"mt-1 text-muted-foreground\">{{ p.description }}</p>\n              </div>\n              <div>\n                <p class=\"text-5xl/snug font-bold lg:text-5xl/snug\">\n                  ${{ p.price }}<span class=\"text-base font-normal\">per month</span>\n                </p>\n              </div>\n            </div>\n            <div class=\"px-6 pt-6\">\n              <p class=\"font-semibold uppercase\">Features</p>\n              <p class=\"mt-2 text-muted-foreground\">Below is the list of features offered</p>\n            </div>\n\n            <ul class=\"grid w-full grid-cols-1 gap-4 px-5 pt-8 md:grid-cols-2 lg:py-8\">\n              <li v-for=\"(perk, k) in p.perks\" :key=\"k\" class=\"flex items-center gap-3\">\n                <Icon name=\"heroicons:check-circle\" class=\"h-6 w-6 shrink-0 text-primary\" />\n                <span class=\"opacity-80\">{{ perk }}</span>\n              </li>\n            </ul>\n          </UiCardContent>\n          <UiCardFooter class=\"border-t pt-6! dark:border-muted/50\">\n            <UiButton class=\"w-full\"> Get started </UiButton>\n          </UiCardFooter>\n        </UiCard>\n      </template>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const prices = [\n    {\n      icon: \"heroicons:bolt\",\n      title: \"Basic\",\n      description: \"For small teams or office\",\n      price: 10,\n      perks: [\n        \"Access to all basic features\",\n        \"Basic reporting and analytics\",\n        \"Up to 10 individual users\",\n        \"20GB individual data each user\",\n        \"Basic chat and email support\",\n        \"Attend events\",\n        \"Automatic updates\",\n        \"Backup your account\",\n        \"Audit log and notes\",\n        \"Feature requests\",\n      ],\n    },\n    {\n      icon: \"heroicons:bolt\",\n      title: \"Business\",\n      description: \"Advanced features and reporting\",\n      price: 20,\n      perks: [\n        \"200+ integrations\",\n        \"Advanced reporting\",\n        \"Up to 20 individual users\",\n        \"40GB individual data each user\",\n        \"Priority chat and email support\",\n        \"Advanced custom fields\",\n        \"Audit log and data history\",\n        \"Unlimited individual users\",\n        \"Unlimited individual data\",\n        \"Personalised+priotity service\",\n      ],\n    },\n  ];\n</script>\n","category":"Pricing","path":"Pricing/BlockPricing3.vue","components":["badge","button","card","cardcontent","cardfooter","container","tabs","tabslist","tabstrigger"]},{"name":"Pricing 4","fileName":"BlockPricing4.vue","file":"<template>\n  <UiContainer class=\"relative py-16 lg:py-24\">\n    <div class=\"mx-auto max-w-[760px] text-center\">\n      <p class=\"font-semibold text-primary\">Pricing</p>\n      <h2 class=\"mt-3 mb-4 text-3xl font-semibold lg:mb-6 lg:text-4xl\">\n        Compare our plans and find yours\n      </h2>\n      <p class=\"text-lg text-muted-foreground lg:text-xl\">\n        Simple, transparent pricing that grows with you. Try any plan free for 30 days.\n      </p>\n    </div>\n\n    <UiTabs class=\"mx-auto mt-5 w-full md:w-[450px] lg:mt-7\" default-value=\"monthly\">\n      <UiTabsList class=\"grid h-auto w-full grid-cols-2\">\n        <UiTabsTrigger class=\"h-10\" value=\"monthly\">Monthly billing</UiTabsTrigger>\n        <UiTabsTrigger class=\"h-10\" value=\"annual\"\n          >Annual Billing\n          <UiBadge class=\"ml-2 hidden lg:block\" variant=\"outline\">Save 20%</UiBadge></UiTabsTrigger\n        >\n      </UiTabsList>\n    </UiTabs>\n\n    <div class=\"grid grid-cols-1 gap-y-5 py-10 lg:grid-cols-4 lg:gap-x-10 lg:py-20\">\n      <template v-for=\"(p, i) in prices\" :key=\"i\">\n        <div class=\"lg:first:col-start-2\">\n          <p class=\"text-xl font-semibold\">{{ p.title }}</p>\n          <div class=\"mt-10 flex items-end\">\n            <p class=\"text-3xl font-semibold lg:text-5xl\">${{ p.price }}</p>\n            <p class=\"ml-1 text-muted-foreground\">per user / month</p>\n          </div>\n          <p class=\"mt-6 text-sm text-muted-foreground\">{{ p.description }}</p>\n          <div class=\"mt-7 flex flex-col gap-3\">\n            <UiButton class=\"w-full\">Get started</UiButton>\n            <UiButton variant=\"outline\" class=\"w-full\">Contact sales</UiButton>\n          </div>\n\n          <div class=\"mt-10 grid gap-5 lg:hidden\">\n            <div>\n              <p class=\"mb-4 text-sm font-semibold text-primary\">Overview</p>\n              <ul>\n                <li class=\"grid grid-cols-2\">\n                  <template v-for=\"(o, k) in p.overview\" :key=\"`overview-${k}`\">\n                    <p\n                      class=\"px-3 py-6 text-sm font-medium\"\n                      :class=\"[k % 2 == 0 ? 'bg-muted dark:bg-muted/40' : '']\"\n                    >\n                      {{ o.text }}\n                    </p>\n                    <p\n                      v-if=\"typeof o.value === 'string'\"\n                      class=\"px-3 py-6 text-center text-sm font-medium\"\n                      :class=\"[k % 2 == 0 ? 'bg-muted dark:bg-muted/40' : '']\"\n                    >\n                      {{ o.value }}\n                    </p>\n                    <p\n                      v-if=\"typeof o.value === 'boolean'\"\n                      class=\"px-3 py-6 text-center text-sm font-medium\"\n                      :class=\"[k % 2 == 0 ? 'bg-muted dark:bg-muted/40' : '']\"\n                    >\n                      <Icon\n                        v-if=\"o.value\"\n                        name=\"heroicons:check-circle\"\n                        class=\"h-6 w-6 text-green-500\"\n                      />\n                      <span v-else>--</span>\n                    </p>\n                  </template>\n                </li>\n              </ul>\n            </div>\n            <div>\n              <p class=\"mb-4 text-sm font-semibold text-primary\">Reporting and analytics</p>\n              <ul>\n                <li class=\"grid grid-cols-2\">\n                  <template v-for=\"(o, k) in p.reporting\" :key=\"`reporting-${k}`\">\n                    <p\n                      class=\"px-3 py-6 text-sm font-medium\"\n                      :class=\"[k % 2 == 0 ? 'bg-muted dark:bg-muted/40' : '']\"\n                    >\n                      {{ o.text }}\n                    </p>\n                    <p\n                      v-if=\"typeof o.value === 'string'\"\n                      class=\"px-3 py-6 text-center text-sm font-medium\"\n                      :class=\"[k % 2 == 0 ? 'bg-muted dark:bg-muted/40' : '']\"\n                    >\n                      {{ o.value }}\n                    </p>\n                    <p\n                      v-if=\"typeof o.value === 'boolean'\"\n                      class=\"px-3 py-6 text-center text-sm font-medium\"\n                      :class=\"[k % 2 == 0 ? 'bg-muted dark:bg-muted/40' : '']\"\n                    >\n                      <Icon\n                        v-if=\"o.value\"\n                        name=\"heroicons:check-circle\"\n                        class=\"h-6 w-6 text-green-500\"\n                      />\n                      <span v-else>--</span>\n                    </p>\n                  </template>\n                </li>\n              </ul>\n            </div>\n            <div>\n              <p class=\"mb-4 text-sm font-semibold text-primary\">User access</p>\n              <ul>\n                <li class=\"grid grid-cols-2\">\n                  <template v-for=\"(o, k) in p.access\" :key=\"`access-${k}`\">\n                    <p\n                      class=\"px-3 py-6 text-sm font-medium\"\n                      :class=\"[k % 2 == 0 ? 'bg-muted dark:bg-muted/40' : '']\"\n                    >\n                      {{ o.text }}\n                    </p>\n                    <p\n                      v-if=\"typeof o.value === 'string'\"\n                      class=\"px-3 py-6 text-center text-sm font-medium\"\n                      :class=\"[k % 2 == 0 ? 'bg-muted dark:bg-muted/40' : '']\"\n                    >\n                      {{ o.value }}\n                    </p>\n                    <p\n                      v-if=\"typeof o.value === 'boolean'\"\n                      class=\"px-3 py-6 text-center text-sm font-medium\"\n                      :class=\"[k % 2 == 0 ? 'bg-muted dark:bg-muted/40' : '']\"\n                    >\n                      <Icon\n                        v-if=\"o.value\"\n                        name=\"heroicons:check-circle\"\n                        class=\"h-6 w-6 text-green-500\"\n                      />\n                      <span v-else>--</span>\n                    </p>\n                  </template>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n      </template>\n    </div>\n\n    <div class=\"hidden lg:block\">\n      <div>\n        <p class=\"mb-4 text-sm font-semibold text-primary\">Overview</p>\n        <ul>\n          <li class=\"grid grid-cols-2 lg:grid-cols-4\">\n            <template\n              v-for=\"(o, k) in prices[0] && prices[0].overview\n                ? prices[0].overview.map((x) => x.text)\n                : []\"\n              :key=\"`prices-overview-${k}`\"\n            >\n              <p\n                class=\"text-sm font-medium lg:px-3 lg:py-6\"\n                :class=\"[k % 2 == 0 ? 'bg-muted dark:bg-muted/40' : '']\"\n              >\n                {{ o }}\n              </p>\n              <template v-for=\"(p, i) in prices\" :key=\"i\">\n                <p\n                  v-if=\"typeof p.overview.find((x) => x.text == o)?.value === 'string'\"\n                  class=\"text-center text-sm font-medium lg:px-3 lg:py-6\"\n                  :class=\"[k % 2 == 0 ? 'bg-muted dark:bg-muted/40' : '']\"\n                >\n                  {{ p.overview.find((x) => x.text == o)?.value }}\n                </p>\n                <p\n                  v-if=\"typeof p.overview.find((x) => x.text == o)?.value === 'boolean'\"\n                  class=\"text-center text-sm font-medium lg:px-3 lg:py-6\"\n                  :class=\"[k % 2 == 0 ? 'bg-muted dark:bg-muted/40' : '']\"\n                >\n                  <Icon\n                    v-if=\"p.overview.find((x) => x.text == o)?.value\"\n                    name=\"heroicons:check-circle\"\n                    class=\"h-6 w-6 text-green-500\"\n                  />\n                  <span v-else>--</span>\n                </p>\n              </template>\n            </template>\n          </li>\n        </ul>\n      </div>\n      <div class=\"mt-10\">\n        <p class=\"mb-4 text-sm font-semibold text-primary\">Reporting and analytics</p>\n        <ul>\n          <li class=\"grid grid-cols-2 lg:grid-cols-4\">\n            <template\n              v-for=\"(o, k) in prices[0] && prices[0].reporting\n                ? prices[0].reporting.map((x) => x.text)\n                : []\"\n              :key=\"`prices-reporting-${k}`\"\n            >\n              <p\n                class=\"text-sm font-medium lg:px-3 lg:py-6\"\n                :class=\"[k % 2 == 0 ? 'bg-muted dark:bg-muted/40' : '']\"\n              >\n                {{ o }}\n              </p>\n              <template v-for=\"(p, i) in prices\" :key=\"i\">\n                <p\n                  v-if=\"typeof p.reporting.find((x) => x.text == o)?.value === 'string'\"\n                  class=\"text-center text-sm font-medium lg:px-3 lg:py-6\"\n                  :class=\"[k % 2 == 0 ? 'bg-muted dark:bg-muted/40' : '']\"\n                >\n                  {{ p.reporting.find((x) => x.text == o)?.value }}\n                </p>\n                <p\n                  v-if=\"typeof p.reporting.find((x) => x.text == o)?.value === 'boolean'\"\n                  class=\"text-center text-sm font-medium lg:px-3 lg:py-6\"\n                  :class=\"[k % 2 == 0 ? 'bg-muted dark:bg-muted/40' : '']\"\n                >\n                  <Icon\n                    v-if=\"p.reporting.find((x) => x.text == o)?.value\"\n                    name=\"heroicons:check-circle\"\n                    class=\"h-6 w-6 text-green-500\"\n                  />\n                  <span v-else>--</span>\n                </p>\n              </template>\n            </template>\n          </li>\n        </ul>\n      </div>\n      <div class=\"mt-10\">\n        <p class=\"mb-4 text-sm font-semibold text-primary\">User access</p>\n        <ul>\n          <li class=\"grid grid-cols-2 lg:grid-cols-4\">\n            <template\n              v-for=\"(o, k) in prices[0] && prices[0].access\n                ? prices[0].access.map((x) => x.text)\n                : []\"\n              :key=\"`prices-access-${k}`\"\n            >\n              <p\n                class=\"text-sm font-medium lg:px-3 lg:py-6\"\n                :class=\"[k % 2 == 0 ? 'bg-muted dark:bg-muted/40' : '']\"\n              >\n                {{ o }}\n              </p>\n              <template v-for=\"(p, i) in prices\" :key=\"i\">\n                <p\n                  v-if=\"typeof p.access.find((x) => x.text == o)?.value === 'string'\"\n                  class=\"text-center text-sm font-medium lg:px-3 lg:py-6\"\n                  :class=\"[k % 2 == 0 ? 'bg-muted dark:bg-muted/40' : '']\"\n                >\n                  {{ p.access.find((x) => x.text == o)?.value }}\n                </p>\n                <p\n                  v-if=\"typeof p.access.find((x) => x.text == o)?.value === 'boolean'\"\n                  class=\"text-center text-sm font-medium lg:px-3 lg:py-6\"\n                  :class=\"[k % 2 == 0 ? 'bg-muted dark:bg-muted/40' : '']\"\n                >\n                  <Icon\n                    v-if=\"p.access.find((x) => x.text == o)?.value\"\n                    name=\"heroicons:check-circle\"\n                    class=\"h-6 w-6 text-green-500\"\n                  />\n                  <span v-else>--</span>\n                </p>\n              </template>\n            </template>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const prices = [\n    {\n      title: \"Basic\",\n      description: \"Basic features for up to 10 employees with everything you need.\",\n      price: 10,\n      overview: [\n        { text: \"Basic features\", value: true },\n        { text: \"Users\", value: \"10\" },\n        { text: \"Individual data\", value: \"20GB\" },\n        { text: \"Support\", value: true },\n        { text: \"Automated workflows\", value: false },\n        { text: \"Integrations\", value: false },\n      ],\n      reporting: [\n        { text: \"Analytics\", value: \"Basic\" },\n        { text: \"Export reports\", value: true },\n        { text: \"Scheduled reports\", value: true },\n        { text: \"API access\", value: false },\n        { text: \"Advanced reports\", value: false },\n        { text: \"Saved reports\", value: false },\n        { text: \"Custom properties\", value: false },\n        { text: \"Custom fields\", value: false },\n      ],\n      access: [\n        { text: \"SSO/SAML authentication\", value: true },\n        { text: \"Advanced permissions\", value: false },\n        { text: \"Audit log\", value: false },\n        { text: \"Data history\", value: false },\n      ],\n    },\n    {\n      title: \"Business\",\n      description: \"Advanced features and reporting, better workflows and automation.\",\n      price: 20,\n      overview: [\n        { text: \"Basic features\", value: true },\n        { text: \"Users\", value: \"20\" },\n        { text: \"Individual data\", value: \"40GB\" },\n        { text: \"Support\", value: true },\n        { text: \"Automated workflows\", value: true },\n        { text: \"Integrations\", value: true },\n      ],\n      reporting: [\n        { text: \"Analytics\", value: \"Advanced\" },\n        { text: \"Export reports\", value: true },\n        { text: \"Scheduled reports\", value: true },\n        { text: \"API access\", value: true },\n        { text: \"Advanced reports\", value: true },\n        { text: \"Saved reports\", value: true },\n        { text: \"Custom properties\", value: false },\n        { text: \"Custom fields\", value: false },\n      ],\n      access: [\n        { text: \"SSO/SAML authentication\", value: true },\n        { text: \"Advanced permissions\", value: true },\n        { text: \"Audit log\", value: false },\n        { text: \"Data history\", value: false },\n      ],\n    },\n    {\n      title: \"Enterprise\",\n      description: \"Personalized service and enterprise security for large teams.\",\n      price: 40,\n      overview: [\n        { text: \"Basic features\", value: true },\n        { text: \"Users\", value: \"Unlimited\" },\n        { text: \"Individual data\", value: \"Unlimited\" },\n        { text: \"Support\", value: true },\n        { text: \"Automated workflows\", value: true },\n        { text: \"Integrations\", value: true },\n      ],\n      reporting: [\n        { text: \"Analytics\", value: \"Advanced\" },\n        { text: \"Export reports\", value: true },\n        { text: \"Scheduled reports\", value: true },\n        { text: \"API access\", value: true },\n        { text: \"Advanced reports\", value: true },\n        { text: \"Saved reports\", value: true },\n        { text: \"Custom properties\", value: true },\n        { text: \"Custom fields\", value: true },\n      ],\n      access: [\n        { text: \"SSO/SAML authentication\", value: true },\n        { text: \"Advanced permissions\", value: true },\n        { text: \"Audit log\", value: true },\n        { text: \"Data history\", value: true },\n      ],\n    },\n  ];\n</script>\n","category":"Pricing","path":"Pricing/BlockPricing4.vue","components":["badge","button","container","tabs","tabslist","tabstrigger"]},{"name":"Pricing 5","fileName":"BlockPricing5.vue","file":"<template>\n  <div class=\"bg-muted/30 py-16 lg:py-24\">\n    <UiContainer>\n      <div class=\"mx-auto max-w-[760px] text-center\">\n        <h2 class=\"mb-4 text-3xl font-semibold lg:text-4xl\">Choose your plan</h2>\n        <p class=\"text-lg text-muted-foreground\">\n          Start building for free, then add a site plan to go live. Account plans unlock additional\n          features.\n        </p>\n      </div>\n\n      <div class=\"mt-12 grid grid-cols-1 gap-8 lg:mt-16 lg:grid-cols-3\">\n        <template v-for=\"(p, i) in prices\" :key=\"i\">\n          <div class=\"relative rounded-lg border bg-card p-8\">\n            <UiBadge\n              v-if=\"p.popular\"\n              class=\"absolute -top-3 left-1/2 -translate-x-1/2\"\n              variant=\"default\"\n              >Most popular</UiBadge\n            >\n            <div class=\"mb-6\">\n              <h3 class=\"mb-2 text-2xl font-bold\">{{ p.title }}</h3>\n              <p class=\"text-sm text-muted-foreground\">{{ p.description }}</p>\n            </div>\n            <div class=\"mb-6\">\n              <p class=\"mb-1 text-4xl font-bold\">${{ p.price }}</p>\n              <p class=\"text-sm text-muted-foreground\">per user, per month</p>\n            </div>\n            <UiButton class=\"mb-6 w-full\" :variant=\"p.popular ? 'default' : 'outline'\">\n              {{ p.cta }}\n            </UiButton>\n            <div class=\"space-y-3\">\n              <p class=\"text-sm font-semibold\">What's included:</p>\n              <ul class=\"space-y-3\">\n                <li v-for=\"(feature, k) in p.features\" :key=\"k\" class=\"flex items-start gap-3\">\n                  <Icon name=\"lucide:check\" class=\"mt-0.5 size-5 shrink-0 text-primary\" />\n                  <span class=\"text-sm\">{{ feature }}</span>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </template>\n      </div>\n    </UiContainer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  const prices = [\n    {\n      title: \"Starter\",\n      description: \"Perfect for trying out our platform\",\n      price: 0,\n      cta: \"Start for free\",\n      popular: false,\n      features: [\n        \"Up to 5 users\",\n        \"Basic analytics\",\n        \"Community support\",\n        \"1GB storage\",\n        \"Email notifications\",\n      ],\n    },\n    {\n      title: \"Professional\",\n      description: \"For growing teams and businesses\",\n      price: 29,\n      cta: \"Get started\",\n      popular: true,\n      features: [\n        \"Up to 50 users\",\n        \"Advanced analytics\",\n        \"Priority support\",\n        \"50GB storage\",\n        \"Custom integrations\",\n        \"Advanced reporting\",\n      ],\n    },\n    {\n      title: \"Enterprise\",\n      description: \"For large organizations\",\n      price: 99,\n      cta: \"Contact sales\",\n      popular: false,\n      features: [\n        \"Unlimited users\",\n        \"Custom analytics\",\n        \"Dedicated support\",\n        \"Unlimited storage\",\n        \"API access\",\n        \"SLA guarantee\",\n        \"Custom onboarding\",\n      ],\n    },\n  ];\n</script>\n","category":"Pricing","path":"Pricing/BlockPricing5.vue","components":["badge","button","container"]},{"name":"Pricing 6","fileName":"BlockPricing6.vue","file":"<template>\n  <UiContainer class=\"py-16 lg:py-24\">\n    <div class=\"text-center\">\n      <h2 class=\"mb-4 text-3xl font-semibold lg:text-4xl\">Pricing plans for teams of all sizes</h2>\n      <p class=\"mx-auto max-w-2xl text-lg text-muted-foreground\">\n        Choose an affordable plan that's packed with the best features for engaging your audience,\n        creating customer loyalty, and driving sales.\n      </p>\n    </div>\n\n    <div class=\"mt-12 grid grid-cols-1 gap-6 lg:mt-16 lg:grid-cols-2\">\n      <template v-for=\"(p, i) in prices\" :key=\"i\">\n        <div\n          class=\"relative rounded-lg border p-8\"\n          :class=\"[p.featured ? 'border-primary bg-primary/5' : 'bg-card']\"\n        >\n          <div class=\"flex items-start justify-between\">\n            <div>\n              <h3 class=\"mb-1 text-xl font-bold\">{{ p.title }}</h3>\n              <p class=\"text-sm text-muted-foreground\">{{ p.description }}</p>\n            </div>\n            <UiBadge v-if=\"p.featured\" variant=\"default\">Recommended</UiBadge>\n          </div>\n\n          <div class=\"my-8\">\n            <div class=\"flex items-baseline gap-2\">\n              <span class=\"text-5xl font-bold\">${{ p.price }}</span>\n              <span class=\"text-muted-foreground\">/month</span>\n            </div>\n            <p class=\"mt-2 text-sm text-muted-foreground\">{{ p.billing }}</p>\n          </div>\n\n          <div class=\"mb-8 space-y-4\">\n            <div v-for=\"(feature, k) in p.features\" :key=\"k\" class=\"flex items-start gap-3\">\n              <Icon name=\"lucide:check-circle-2\" class=\"mt-0.5 size-5 shrink-0 text-primary\" />\n              <div>\n                <p class=\"font-medium\">{{ feature.name }}</p>\n                <p class=\"text-sm text-muted-foreground\">{{ feature.description }}</p>\n              </div>\n            </div>\n          </div>\n\n          <UiButton class=\"w-full\" :variant=\"p.featured ? 'default' : 'outline'\">\n            {{ p.cta }}\n          </UiButton>\n        </div>\n      </template>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const prices = [\n    {\n      title: \"Basic\",\n      description: \"Everything you need to get started\",\n      price: 15,\n      billing: \"Billed monthly\",\n      cta: \"Start free trial\",\n      featured: false,\n      features: [\n        {\n          name: \"Up to 10 team members\",\n          description: \"Add your whole team and collaborate\",\n        },\n        {\n          name: \"100GB storage\",\n          description: \"Store all your important files\",\n        },\n        {\n          name: \"Email support\",\n          description: \"Get help when you need it\",\n        },\n        {\n          name: \"Basic integrations\",\n          description: \"Connect with your favorite tools\",\n        },\n      ],\n    },\n    {\n      title: \"Pro\",\n      description: \"Advanced features for power users\",\n      price: 49,\n      billing: \"Billed monthly, or $470 yearly\",\n      cta: \"Get started\",\n      featured: true,\n      features: [\n        {\n          name: \"Unlimited team members\",\n          description: \"Scale without worrying about seats\",\n        },\n        {\n          name: \"1TB storage\",\n          description: \"Never run out of space\",\n        },\n        {\n          name: \"Priority support\",\n          description: \"Get answers faster with priority access\",\n        },\n        {\n          name: \"Advanced integrations\",\n          description: \"Connect to any service via API\",\n        },\n        {\n          name: \"Custom workflows\",\n          description: \"Automate your processes\",\n        },\n      ],\n    },\n  ];\n</script>\n","category":"Pricing","path":"Pricing/BlockPricing6.vue","components":["badge","button","container"]},{"name":"Pricing 7","fileName":"BlockPricing7.vue","file":"<template>\n  <UiContainer class=\"py-16 lg:py-24\">\n    <div class=\"mx-auto max-w-4xl\">\n      <div class=\"mb-12 text-center\">\n        <h2 class=\"mb-4 text-3xl font-semibold lg:text-4xl\">Simple, straightforward pricing</h2>\n        <p class=\"text-lg text-muted-foreground\">No contracts. No surprise fees. Cancel anytime.</p>\n      </div>\n\n      <div class=\"mb-8 flex items-center justify-center gap-3\">\n        <span :class=\"[!isAnnual ? 'font-semibold' : 'text-muted-foreground']\">Monthly</span>\n        <UiSwitch v-model=\"isAnnual\" />\n        <span :class=\"[isAnnual ? 'font-semibold' : 'text-muted-foreground']\">\n          Annual\n          <UiBadge class=\"ml-2\" variant=\"secondary\">Save 20%</UiBadge>\n        </span>\n      </div>\n\n      <div class=\"grid grid-cols-1 gap-8 md:grid-cols-3\">\n        <template v-for=\"(p, i) in prices\" :key=\"i\">\n          <div class=\"rounded-lg border bg-card p-6\">\n            <h3 class=\"mb-2 text-xl font-bold\">{{ p.title }}</h3>\n            <p class=\"mb-6 text-sm text-muted-foreground\">{{ p.description }}</p>\n\n            <div class=\"mb-6\">\n              <div class=\"flex items-baseline gap-1\">\n                <span class=\"text-4xl font-bold\"\n                  >${{ isAnnual ? p.annualPrice : p.monthlyPrice }}</span\n                >\n                <span class=\"text-muted-foreground\">/mo</span>\n              </div>\n              <AnimatePresence>\n                <Motion\n                  v-if=\"isAnnual\"\n                  :initial=\"{ opacity: 0, height: 0 }\"\n                  :animate=\"{ opacity: 1, height: 'auto' }\"\n                  :exit=\"{ opacity: 0, height: 0 }\"\n                  as=\"p\"\n                  class=\"mt-1 text-xs text-muted-foreground\"\n                >\n                  Billed as ${{ p.annualPrice * 12 }} annually\n                </Motion>\n              </AnimatePresence>\n            </div>\n\n            <UiButton class=\"mb-6 w-full\" :variant=\"i === 1 ? 'default' : 'outline'\">\n              Get started\n            </UiButton>\n\n            <ul class=\"space-y-3\">\n              <li v-for=\"(feature, k) in p.features\" :key=\"k\" class=\"flex items-center gap-3\">\n                <Icon name=\"lucide:check\" class=\"size-4 shrink-0 text-primary\" />\n                <span class=\"text-sm\">{{ feature }}</span>\n              </li>\n            </ul>\n          </div>\n        </template>\n      </div>\n\n      <p class=\"mt-8 text-center text-sm text-muted-foreground\">\n        All plans include a 30-day money-back guarantee.\n      </p>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const isAnnual = ref(false);\n\n  const prices = [\n    {\n      title: \"Hobby\",\n      description: \"For personal projects\",\n      monthlyPrice: 9,\n      annualPrice: 7,\n      features: [\n        \"5 projects\",\n        \"10GB storage\",\n        \"Community support\",\n        \"Basic analytics\",\n        \"SSL certificate\",\n      ],\n    },\n    {\n      title: \"Team\",\n      description: \"For small teams\",\n      monthlyPrice: 29,\n      annualPrice: 23,\n      features: [\n        \"Unlimited projects\",\n        \"100GB storage\",\n        \"Priority support\",\n        \"Advanced analytics\",\n        \"Custom domain\",\n        \"Team collaboration\",\n      ],\n    },\n    {\n      title: \"Business\",\n      description: \"For larger organizations\",\n      monthlyPrice: 79,\n      annualPrice: 63,\n      features: [\n        \"Everything in Team\",\n        \"1TB storage\",\n        \"Phone support\",\n        \"SSO & SAML\",\n        \"Advanced security\",\n        \"SLA guarantee\",\n        \"Dedicated manager\",\n      ],\n    },\n  ];\n</script>\n","category":"Pricing","path":"Pricing/BlockPricing7.vue","components":["badge","button","container","switch"]},{"name":"Pricing 8","fileName":"BlockPricing8.vue","file":"<template>\n  <UiContainer class=\"py-16 lg:py-24\">\n    <div class=\"mx-auto max-w-3xl text-center\">\n      <h2 class=\"mb-4 text-3xl font-semibold lg:text-4xl\">Flexible pricing to fit your needs</h2>\n      <p class=\"text-lg text-muted-foreground\">\n        Whether you're a solopreneur or a large enterprise, we have a plan for you.\n      </p>\n    </div>\n\n    <div class=\"mt-12 grid grid-cols-1 gap-8 md:grid-cols-2 lg:mt-16 xl:grid-cols-4\">\n      <template v-for=\"(p, i) in prices\" :key=\"i\">\n        <div\n          class=\"flex flex-col rounded-lg border p-6\"\n          :class=\"[p.highlighted ? 'border-primary shadow-lg' : 'bg-card']\"\n        >\n          <div class=\"mb-6 flex-1\">\n            <div class=\"mb-4 inline-flex rounded-lg bg-primary/10 p-3\">\n              <Icon :name=\"p.icon\" class=\"size-6 text-primary\" />\n            </div>\n            <h3 class=\"mb-2 text-xl font-bold\">{{ p.title }}</h3>\n            <p class=\"text-sm text-muted-foreground\">{{ p.description }}</p>\n          </div>\n\n          <div class=\"mb-6\">\n            <div v-if=\"p.price !== 'Custom'\" class=\"flex items-baseline gap-1\">\n              <span class=\"text-4xl font-bold\">${{ p.price }}</span>\n              <span class=\"text-muted-foreground\">/month</span>\n            </div>\n            <div v-else>\n              <span class=\"text-4xl font-bold\">{{ p.price }}</span>\n            </div>\n          </div>\n\n          <UiButton class=\"mb-6 w-full\" :variant=\"p.highlighted ? 'default' : 'outline'\">\n            {{ p.cta }}\n          </UiButton>\n\n          <div class=\"border-t pt-6\">\n            <p class=\"mb-3 text-xs font-semibold text-muted-foreground uppercase\">Key features</p>\n            <ul class=\"space-y-2\">\n              <li v-for=\"(feature, k) in p.features\" :key=\"k\" class=\"flex items-start gap-2\">\n                <Icon name=\"lucide:check\" class=\"mt-0.5 size-4 shrink-0 text-primary\" />\n                <span class=\"text-sm\">{{ feature }}</span>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </template>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const prices = [\n    {\n      title: \"Free\",\n      description: \"Get started at no cost\",\n      price: 0,\n      cta: \"Sign up free\",\n      icon: \"lucide:gift\",\n      highlighted: false,\n      features: [\"1 user\", \"5GB storage\", \"Basic features\", \"Community support\"],\n    },\n    {\n      title: \"Starter\",\n      description: \"For small projects\",\n      price: 12,\n      cta: \"Start trial\",\n      icon: \"lucide:zap\",\n      highlighted: false,\n      features: [\"5 users\", \"50GB storage\", \"Standard features\", \"Email support\"],\n    },\n    {\n      title: \"Pro\",\n      description: \"Most popular choice\",\n      price: 39,\n      cta: \"Start trial\",\n      icon: \"lucide:star\",\n      highlighted: true,\n      features: [\n        \"25 users\",\n        \"500GB storage\",\n        \"Advanced features\",\n        \"Priority support\",\n        \"Integrations\",\n      ],\n    },\n    {\n      title: \"Enterprise\",\n      description: \"For large teams\",\n      price: \"Custom\",\n      cta: \"Contact us\",\n      icon: \"lucide:building\",\n      highlighted: false,\n      features: [\n        \"Unlimited users\",\n        \"Unlimited storage\",\n        \"Custom features\",\n        \"Dedicated support\",\n        \"SLA\",\n      ],\n    },\n  ];\n</script>\n","category":"Pricing","path":"Pricing/BlockPricing8.vue","components":["button","container"]},{"name":"Pricing 9","fileName":"BlockPricing9.vue","file":"<template>\n  <div\n    class=\"min-h-screen bg-background py-16 text-foreground [--color-primary:#6366f1] [--primary:#6366f1] [--radius:10px] [--ring:#6366f1] lg:py-24\"\n  >\n    <UiContainer>\n      <!-- Header -->\n      <Motion\n        :initial=\"{ opacity: 0, y: -16 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, ease: 'easeOut' }\"\n        class=\"mx-auto max-w-2xl text-center\"\n      >\n        <UiBadge variant=\"outline\" class=\"mb-4 px-3 py-1 text-xs font-medium tracking-wide\"\n          >Pricing</UiBadge\n        >\n        <h2 class=\"mb-4 text-4xl font-bold tracking-tight lg:text-5xl\">\n          Simple, transparent pricing\n        </h2>\n        <p class=\"text-lg text-muted-foreground\">\n          Start for free, scale as you grow. No contracts, no hidden fees — cancel anytime.\n        </p>\n      </Motion>\n\n      <!-- Billing toggle -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 8 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.1, ease: 'easeOut' }\"\n        class=\"mt-10 flex items-center justify-center gap-3\"\n      >\n        <span\n          class=\"text-sm font-medium transition-colors\"\n          :class=\"[!isAnnual ? 'text-foreground' : 'text-muted-foreground']\"\n          >Monthly</span\n        >\n        <UiSwitch v-model=\"isAnnual\" />\n        <span\n          class=\"flex items-center gap-2 text-sm font-medium transition-colors\"\n          :class=\"[isAnnual ? 'text-foreground' : 'text-muted-foreground']\"\n        >\n          Annual\n          <AnimatePresence>\n            <Motion\n              v-if=\"isAnnual\"\n              :initial=\"{ opacity: 0, scale: 0.75 }\"\n              :animate=\"{ opacity: 1, scale: 1 }\"\n              :exit=\"{ opacity: 0, scale: 0.75 }\"\n              :transition=\"{ duration: 0.2, ease: 'easeOut' }\"\n            >\n              <UiBadge\n                variant=\"outline\"\n                class=\"border-green-500/40 bg-green-500/10 text-green-600 dark:text-green-400\"\n                >Save 25%</UiBadge\n              >\n            </Motion>\n          </AnimatePresence>\n        </span>\n      </Motion>\n\n      <!-- Pricing cards -->\n      <Motion\n        initial=\"initial\"\n        animate=\"animate\"\n        :variants=\"containerVariant\"\n        class=\"mt-12 grid grid-cols-1 gap-8 md:grid-cols-3 lg:mt-16\"\n      >\n        <Motion\n          v-for=\"plan in plans\"\n          :key=\"plan.title\"\n          :variants=\"cardVariant\"\n          class=\"relative flex flex-col rounded-2xl border p-8\"\n          :class=\"[\n            plan.highlighted\n              ? 'border-primary bg-primary/5 shadow-xl ring-1 shadow-primary/10 ring-primary'\n              : 'border-border bg-card',\n          ]\"\n        >\n          <!-- Recommended badge -->\n          <div\n            v-if=\"plan.highlighted\"\n            class=\"absolute -top-3.5 left-1/2 -translate-x-1/2 whitespace-nowrap\"\n          >\n            <UiBadge class=\"px-3 py-1 text-xs font-semibold shadow\" variant=\"default\"\n              >Recommended</UiBadge\n            >\n          </div>\n\n          <!-- Plan name & description -->\n          <div class=\"mb-6\">\n            <h3 class=\"mb-1 text-xl font-bold\">{{ plan.title }}</h3>\n            <p class=\"text-sm text-muted-foreground\">{{ plan.description }}</p>\n          </div>\n\n          <!-- Price display -->\n          <div class=\"mb-8\">\n            <div v-if=\"plan.monthlyPrice !== null\" class=\"flex items-baseline gap-1\">\n              <span class=\"text-5xl font-extrabold tracking-tight\">\n                ${{ isAnnual ? plan.annualPrice : plan.monthlyPrice }}\n              </span>\n              <span class=\"text-sm text-muted-foreground\">/mo</span>\n            </div>\n            <div v-else>\n              <span class=\"text-4xl font-extrabold tracking-tight\">Custom</span>\n            </div>\n            <AnimatePresence>\n              <Motion\n                v-if=\"isAnnual && plan.monthlyPrice !== null\"\n                :initial=\"{ opacity: 0, height: 0 }\"\n                :animate=\"{ opacity: 1, height: 'auto' }\"\n                :exit=\"{ opacity: 0, height: 0 }\"\n                :transition=\"{ duration: 0.25, ease: 'easeOut' }\"\n                as=\"p\"\n                class=\"mt-1 overflow-hidden text-xs text-muted-foreground\"\n              >\n                Billed as ${{ (plan.annualPrice ?? 0) * 12 }}/yr\n              </Motion>\n            </AnimatePresence>\n          </div>\n\n          <!-- CTA button -->\n          <UiButton\n            class=\"mb-8 w-full\"\n            size=\"lg\"\n            :variant=\"plan.highlighted ? 'default' : 'outline'\"\n          >\n            {{ plan.cta }}\n          </UiButton>\n\n          <!-- Feature list -->\n          <ul class=\"flex-1 space-y-3\">\n            <li\n              v-for=\"feature in plan.features\"\n              :key=\"feature\"\n              class=\"flex items-start gap-3 text-sm\"\n            >\n              <Icon\n                name=\"heroicons:check-circle-solid\"\n                class=\"mt-0.5 size-5 shrink-0\"\n                :class=\"[plan.highlighted ? 'text-primary' : 'text-muted-foreground']\"\n              />\n              <span>{{ feature }}</span>\n            </li>\n          </ul>\n        </Motion>\n      </Motion>\n\n      <!-- Social proof row -->\n      <Motion\n        :initial=\"{ opacity: 0, y: 16 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ duration: 0.4, delay: 0.55, ease: 'easeOut' }\"\n        class=\"mt-20 border-t border-border pt-12\"\n      >\n        <p class=\"mb-8 text-center text-sm text-muted-foreground\">\n          Trusted by teams at world-class companies\n        </p>\n        <div class=\"flex flex-wrap items-center justify-center gap-8 sm:gap-12\">\n          <div\n            v-for=\"brand in brands\"\n            :key=\"brand.name\"\n            class=\"flex items-center gap-2 text-muted-foreground/50 transition-colors duration-200 hover:text-muted-foreground\"\n          >\n            <Icon :name=\"brand.icon\" class=\"size-6 shrink-0\" />\n            <span class=\"text-base font-semibold tracking-tight\">{{ brand.name }}</span>\n          </div>\n        </div>\n      </Motion>\n    </UiContainer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { AnimatePresence, Motion } from \"motion-v\";\n\n  const isAnnual = ref(false);\n\n  const containerVariant = {\n    initial: {},\n    animate: { transition: { staggerChildren: 0.1, delayChildren: 0.2 } },\n  };\n\n  const cardVariant = {\n    initial: { opacity: 0, y: 20 },\n    animate: { opacity: 1, y: 0, transition: { duration: 0.4, ease: \"easeOut\" } },\n  };\n\n  const plans = [\n    {\n      title: \"Free\",\n      description: \"Perfect for side projects and early-stage experimentation.\",\n      monthlyPrice: 0,\n      annualPrice: 0,\n      cta: \"Get started for free\",\n      highlighted: false,\n      features: [\n        \"Up to 3 projects\",\n        \"5 GB storage\",\n        \"Community support\",\n        \"Basic analytics dashboard\",\n        \"SSL certificate included\",\n      ],\n    },\n    {\n      title: \"Pro\",\n      description: \"Everything your growing team needs to move faster.\",\n      monthlyPrice: 32,\n      annualPrice: 24,\n      cta: \"Start 14-day free trial\",\n      highlighted: true,\n      features: [\n        \"Unlimited projects\",\n        \"100 GB storage\",\n        \"Priority email & chat support\",\n        \"Advanced analytics & reports\",\n        \"Custom domains & webhooks\",\n        \"Role-based access control\",\n      ],\n    },\n    {\n      title: \"Enterprise\",\n      description: \"Dedicated infrastructure and support for large organisations.\",\n      monthlyPrice: null,\n      annualPrice: null,\n      cta: \"Contact sales\",\n      highlighted: false,\n      features: [\n        \"Everything in Pro\",\n        \"Unlimited storage & bandwidth\",\n        \"Dedicated account manager\",\n        \"SSO & SAML authentication\",\n        \"99.99% uptime SLA guarantee\",\n        \"Custom onboarding & training\",\n      ],\n    },\n  ];\n\n  const brands = [\n    { name: \"Vercel\", icon: \"heroicons:globe-alt\" },\n    { name: \"Stripe\", icon: \"heroicons:credit-card\" },\n    { name: \"GitHub\", icon: \"heroicons:code-bracket-square\" },\n    { name: \"Notion\", icon: \"heroicons:document-text\" },\n    { name: \"Linear\", icon: \"heroicons:chart-bar\" },\n  ];\n</script>\n","category":"Pricing","path":"Pricing/BlockPricing9.vue","components":["badge","button","container","switch"]},{"name":"Reset Password","fileName":"BlockResetPassword.vue","file":"<template>\n  <div class=\"relative flex h-screen items-center justify-center\">\n    <div\n      class=\"absolute inset-0 z-1 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] mask-[radial-gradient(circle,transparent_25%,var(--color-border)_100%)] bg-size-[100px_100px]\"\n    />\n    <div class=\"relative z-2 w-full max-w-[340px] px-5\">\n      <div\n        class=\"mx-auto mb-6 flex size-14 items-center justify-center rounded-lg border bg-background\"\n      >\n        <Icon class=\"size-6\" name=\"lucide:lock\" />\n      </div>\n\n      <div class=\"flex flex-col items-center text-center\">\n        <h1 class=\"text-2xl font-bold tracking-tight lg:text-3xl\">{{ title }}</h1>\n        <p class=\"mt-1 text-muted-foreground\">{{ description }}</p>\n      </div>\n\n      <form class=\"mt-10\" @submit=\"submit\">\n        <fieldset :disabled=\"isSubmitting\" class=\"grid gap-5\">\n          <UiVeeInput label=\"Password\" type=\"password\" name=\"password\" placeholder=\"••••••••\" />\n          <UiVeeInput\n            label=\"Confirm password\"\n            type=\"password\"\n            name=\"confirmPassword\"\n            placeholder=\"••••••••\"\n          />\n          <ul class=\"flex flex-col gap-4\">\n            <li class=\"flex items-center gap-3 text-sm text-muted-foreground\">\n              <Icon\n                :class=\"[meta.valid ? 'text-green-500' : '']\"\n                class=\"size-4\"\n                name=\"lucide:check-circle-2\"\n              />\n              <span>At least 8 characters</span>\n            </li>\n            <li class=\"flex items-center gap-3 text-sm text-muted-foreground\">\n              <Icon\n                :class=\"[meta.valid ? 'text-green-500' : '']\"\n                class=\"size-4\"\n                name=\"lucide:check-circle-2\"\n              />\n              <span>At least 1 number & special character</span>\n            </li>\n          </ul>\n          <UiButton class=\"w-full\" type=\"submit\" text=\"Set new password\" />\n        </fieldset>\n      </form>\n      <p class=\"mt-8 text-center text-sm\">\n        <NuxtLink class=\"font-semibold text-primary underline-offset-2 hover:underline\" to=\"#\"\n          >Back to Log in</NuxtLink\n        >\n      </p>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { object, string, ref as yupRef } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  const title = \"New Password\";\n  const description = \"Enter your new password below.\";\n\n  useSeoMeta({ title, description });\n\n  const LoginSchema = object({\n    password: string()\n      .required()\n      .min(8)\n      .label(\"Password\")\n      .test(\"password\", \"Password must contain at least 1 number & special character\", (value) => {\n        return /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,}$/.test(value);\n      }),\n    confirmPassword: string()\n      .required()\n      .oneOf([yupRef(\"password\")], \"Passwords must match\"),\n  });\n\n  const { handleSubmit, isSubmitting, meta } = useForm<InferType<typeof LoginSchema>>({\n    validationSchema: LoginSchema,\n  });\n\n  const submit = handleSubmit(async (_) => {\n    useSonner(\"Password updated\", {\n      description: \"Your password has been updated successfully.\",\n    });\n  });\n</script>\n","category":"ResetPassword","path":"ResetPassword/BlockResetPassword.vue","components":["button","veeinput"]},{"name":"Reset Password 2","fileName":"BlockResetPassword2.vue","file":"<template>\n  <div class=\"relative flex min-h-screen items-center justify-center bg-muted/30 p-4\">\n    <UiCard class=\"w-full max-w-md\">\n      <div class=\"p-6 lg:p-8\">\n        <div class=\"mb-8 text-center\">\n          <h1 class=\"mb-2 text-2xl font-bold tracking-tight\">{{ title }}</h1>\n          <p class=\"text-sm text-muted-foreground\">{{ description }}</p>\n        </div>\n\n        <form @submit=\"submit\">\n          <fieldset :disabled=\"isSubmitting\" class=\"grid gap-5\">\n            <UiVeeInput\n              label=\"New password\"\n              type=\"password\"\n              name=\"password\"\n              placeholder=\"••••••••\"\n            />\n\n            <UiVeeInput\n              label=\"Confirm password\"\n              type=\"password\"\n              name=\"confirmPassword\"\n              placeholder=\"••••••••\"\n            />\n\n            <div class=\"rounded-lg bg-muted/50 p-4\">\n              <p class=\"mb-2 text-xs font-medium text-muted-foreground\">Password must contain:</p>\n              <ul class=\"space-y-1 text-xs text-muted-foreground\">\n                <li class=\"flex items-center gap-2\">\n                  <Icon\n                    :class=\"['size-4', meta.valid ? 'text-green-600' : 'text-muted-foreground/40']\"\n                    name=\"lucide:check-circle\"\n                  />\n                  At least 8 characters\n                </li>\n                <li class=\"flex items-center gap-2\">\n                  <Icon\n                    :class=\"['size-4', meta.valid ? 'text-green-600' : 'text-muted-foreground/40']\"\n                    name=\"lucide:check-circle\"\n                  />\n                  One number and one special character\n                </li>\n              </ul>\n            </div>\n\n            <UiButton class=\"w-full\" size=\"lg\" type=\"submit\"> Reset Password </UiButton>\n          </fieldset>\n        </form>\n      </div>\n    </UiCard>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { object, string, ref as yupRef } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  const title = \"Create new password\";\n  const description = \"Enter a new password for your account.\";\n\n  useSeoMeta({ title, description });\n\n  const ResetPasswordSchema = object({\n    password: string()\n      .required()\n      .min(8)\n      .matches(\n        /^(?=.*\\d)(?=.*[!@#$%^&*])/,\n        \"Password must contain at least one number and one special character\"\n      )\n      .label(\"Password\"),\n    confirmPassword: string()\n      .required()\n      .oneOf([yupRef(\"password\")], \"Passwords must match\")\n      .label(\"Confirm password\"),\n  });\n\n  const { handleSubmit, isSubmitting, meta } = useForm<InferType<typeof ResetPasswordSchema>>({\n    validationSchema: ResetPasswordSchema,\n  });\n\n  const submit = handleSubmit(async (values) => {\n    console.log(values);\n    useSonner.success(\"Password reset\", {\n      description: \"Your password has been successfully reset.\",\n    });\n  });\n</script>\n","category":"ResetPassword","path":"ResetPassword/BlockResetPassword2.vue","components":["button","card","veeinput"]},{"name":"Blog Section 1","fileName":"BlockBlogSection1.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.15),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <div class=\"flex flex-col md:flex-row md:justify-between\">\n        <div class=\"flex flex-col gap-3\">\n          <Motion as=\"p\" :variants=\"textVariant\" class=\"font-semibold text-primary\"\n            >Our blog</Motion\n          >\n          <Motion as=\"h3\" :variants=\"textVariant\" class=\"text-3xl font-semibold lg:text-4xl\"\n            >Our latest blog posts</Motion\n          >\n          <Motion as=\"p\" :variants=\"textVariant\" class=\"text-lg text-muted-foreground lg:text-xl\">\n            Tool and strategies modern teams need to help their companies grow.\n          </Motion>\n        </div>\n        <Motion :variants=\"textVariant\">\n          <UiButton class=\"hidden shrink-0 whitespace-nowrap md:flex\">View all posts</UiButton>\n        </Motion>\n      </div>\n\n      <div class=\"mt-12 grid grid-cols-1 gap-10 lg:mt-16 lg:grid-cols-3\">\n        <Motion\n          v-for=\"item in 3\"\n          :key=\"item\"\n          :variants=\"textVariant\"\n          :transition=\"{\n            delay: item * 0.1,\n          }\"\n        >\n          <Motion\n            as-child\n            :variants=\"{\n              initial: { opacity: 0, y: 10, scale: 0.95 },\n              animate: {\n                opacity: 1,\n                y: 0,\n                scale: 1,\n                transition: { duration: 0.4, ease: 'easeOut' },\n              },\n            }\"\n            class=\"block\"\n          >\n            <NuxtLink :to=\"link\">\n              <img\n                v-if=\"image\"\n                :src=\"image\"\n                :alt=\"alt\"\n                class=\"mb-5 h-[240px] w-full rounded-lg object-cover shadow\"\n              />\n            </NuxtLink>\n          </Motion>\n          <Motion\n            v-if=\"headline\"\n            :variants=\"{\n              initial: { opacity: 0, y: 10 },\n              animate: { opacity: 1, y: 0 },\n            }\"\n            as=\"p\"\n            class=\"mb-2 text-sm font-semibold text-primary\"\n            >{{ headline }}</Motion\n          >\n          <NuxtLink :to=\"link\">\n            <Motion\n              :variants=\"{\n                initial: { opacity: 0, y: 10 },\n                animate: { opacity: 1, y: 0 },\n              }\"\n              as=\"p\"\n              class=\"mb-2 text-xl font-semibold lg:text-2xl\"\n              >{{ title }}</Motion\n            >\n          </NuxtLink>\n          <Motion\n            v-if=\"description\"\n            as=\"p\"\n            :variants=\"{\n              initial: { opacity: 0, y: 10 },\n              animate: { opacity: 1, y: 0 },\n            }\"\n            class=\"mb-5 line-clamp-2 text-ellipsis text-muted-foreground\"\n          >\n            {{ description }}\n          </Motion>\n          <div class=\"flex items-center\">\n            <Motion\n              v-if=\"userImage\"\n              :variants=\"{\n                initial: { opacity: 0, scale: 0.8 },\n                animate: { opacity: 1, scale: 1 },\n              }\"\n              as-child\n            >\n              <UiAvatar\n                :src=\"userImage\"\n                :alt=\"userName\"\n                class=\"mr-3 rounded-full bg-background shadow ring-1 ring-ring/30\"\n              />\n            </Motion>\n            <div>\n              <Motion\n                v-if=\"userName\"\n                :variants=\"{\n                  initial: { opacity: 0, x: 10 },\n                  animate: { opacity: 1, x: 0 },\n                }\"\n                as=\"p\"\n                class=\"text-sm font-semibold\"\n                >{{ userName }}</Motion\n              >\n              <Motion\n                v-if=\"date\"\n                :variants=\"{\n                  initial: { opacity: 0, x: 10 },\n                  animate: { opacity: 1, x: 0 },\n                }\"\n                as=\"p\"\n                class=\"text-sm text-muted-foreground\"\n                >{{ date }}</Motion\n              >\n            </div>\n          </div>\n        </Motion>\n      </div>\n      <Motion as-child :variants=\"textVariant\">\n        <UiButton class=\"mt-10 w-full shrink-0 whitespace-nowrap md:hidden\"\n          >View all posts</UiButton\n        >\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  /**\n* This blog section is using the cards from BlockBlogPostCard1.vue\nand rendering them in a loop.\n*/\n  import { stagger } from \"motion-v\";\n\n  const textVariant = {\n    initial: { opacity: 0, y: 10 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.15),\n      },\n    },\n  };\n\n  withDefaults(\n    defineProps<{\n      image?: string;\n      alt?: string;\n      headline?: string;\n      description?: string;\n      title?: string;\n      userImage?: string;\n      userName?: string;\n      date?: string;\n      link?: string;\n    }>(),\n    {\n      headline: \"Design\",\n      title: \"UX review presentations\",\n      image:\n        \"https://images.unsplash.com/photo-1620121692029-d088224ddc74?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n      alt: \"UX review presentations\",\n      description:\n        \"How do you create compelling presentations that wow your colleagues and impress your managers?\",\n      date: \"30 Jan 2024\",\n      userImage: \"https://i.pravatar.cc/300?img=15\",\n      userName: \"John Doe\",\n      readTime: \"5 min read\",\n      tags: [\"Design\", \"UX\", \"UI\"],\n      link: \"#\",\n    }\n  );\n</script>\n","category":"Section","path":"Blog/Section/BlockBlogSection1.vue","components":["avatar","button","container"]},{"name":"Blog Section 2","fileName":"BlockBlogSection2.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.15),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <div class=\"flex flex-col gap-3\">\n        <Motion as=\"h3\" :variants=\"childVariant\" class=\"text-3xl font-semibold lg:text-4xl\"\n          >From the blog</Motion\n        >\n        <Motion as=\"p\" :variants=\"childVariant\" class=\"text-lg text-muted-foreground lg:text-xl\">\n          Tool and strategies modern teams need to help their companies grow.\n        </Motion>\n      </div>\n\n      <div class=\"mt-12 grid grid-cols-1 gap-10 md:grid-cols-2 lg:mt-16\">\n        <Motion v-for=\"item in 4\" :key=\"item\" :variants=\"childVariant\">\n          <Motion v-if=\"image\" as-child class=\"block\" :variants=\"childVariant\">\n            <NuxtLink :to=\"link\">\n              <img\n                :src=\"image\"\n                :alt=\"alt\"\n                class=\"mb-5 h-[240px] w-full rounded-lg object-cover shadow\"\n              />\n            </NuxtLink>\n          </Motion>\n          <Motion\n            v-if=\"headline\"\n            as=\"p\"\n            :variants=\"childVariant\"\n            class=\"mb-2 text-sm font-semibold text-primary\"\n          >\n            {{ headline }} <span v-if=\"date\">- {{ date }}</span>\n          </Motion>\n          <NuxtLink :to=\"link\">\n            <Motion\n              as=\"p\"\n              :variants=\"childVariant\"\n              class=\"mb-2 text-xl font-semibold lg:text-2xl\"\n              >{{ title }}</Motion\n            >\n          </NuxtLink>\n          <Motion\n            v-if=\"description\"\n            as=\"p\"\n            :variants=\"childVariant\"\n            class=\"mb-3 line-clamp-2 text-ellipsis text-muted-foreground\"\n          >\n            {{ description }}\n          </Motion>\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <template v-for=\"t in tags\" :key=\"t\">\n              <Motion v-if=\"headline\" as-child :variants=\"childVariant\">\n                <UiBadge class=\"px-2 py-0.5 text-sm\" variant=\"outline\">{{ t }}</UiBadge>\n              </Motion>\n            </template>\n          </div>\n        </Motion>\n      </div>\n      <Motion :variants=\"childVariant\">\n        <UiButton size=\"lg\" class=\"mt-14 w-full shrink-0 whitespace-nowrap md:w-auto\"\n          >View all posts</UiButton\n        >\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  /**\n   * This section is using the cards from BlockBlogPostCard3.vue\n   */\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 10 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"keyframes\",\n        ease: \"easeOut\",\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n      },\n    },\n  };\n\n  // suggest default props for demonstration\n  const headline = \"Automation\";\n  const title = \"How to automate your workflow\";\n  const image =\n    \"https://images.unsplash.com/photo-1586455122341-927f2dec0691?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\";\n  const alt = \"Automation\";\n  const description =\n    \"Learn how to streamline your tasks and improve efficiency with automation tools.\";\n  const date = \"Mar 16, 2027\";\n  const tags = [\"Productivity\", \"Tools\"];\n  const link = \"#\";\n</script>\n","category":"Section","path":"Blog/Section/BlockBlogSection2.vue","components":["badge","button","container"]},{"name":"Blog Section 3","fileName":"BlockBlogSection3.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.15),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"overflow-hidden py-16 lg:py-24\">\n      <div>\n        <Motion\n          as=\"h3\"\n          :variants=\"{\n            initial: { opacity: 0, y: 10, scale: 1.1 },\n            animate: { opacity: 1, y: 0, scale: 1 },\n          }\"\n          class=\"mb-5 text-center text-3xl font-semibold lg:text-4xl\"\n          >From the blog</Motion\n        >\n        <Motion\n          as=\"p\"\n          :variants=\"{\n            initial: { opacity: 0, y: 10, scale: 1.1 },\n            animate: { opacity: 1, y: 0, scale: 1 },\n          }\"\n          class=\"text-center text-lg text-muted-foreground lg:text-xl\"\n        >\n          Tool and strategies modern teams need to help their companies grow.\n        </Motion>\n      </div>\n\n      <div class=\"mt-12 grid grid-cols-1 gap-10 lg:mt-16 lg:grid-cols-2\">\n        <Motion\n          v-for=\"item in 4\"\n          :key=\"item\"\n          :variants=\"childVariant\"\n          :transition=\"{\n            delay: item * 0.1,\n          }\"\n        >\n          <div class=\"flex flex-col gap-5 md:flex-row\">\n            <Motion\n              v-if=\"image\"\n              as-child\n              class=\"block basis-full md:basis-[30%]\"\n              :variants=\"{\n                initial: { opacity: 0, scale: 1.1 },\n                animate: { opacity: 1, scale: 1, transition: { duration: 0.4, ease: 'easeOut' } },\n              }\"\n            >\n              <NuxtLink :to=\"link\" class=\"shrink-0\">\n                <img\n                  :src=\"image\"\n                  :alt=\"alt\"\n                  class=\"h-[240px] w-full rounded-lg object-cover shadow md:h-[200px]\"\n                />\n              </NuxtLink>\n            </Motion>\n            <div class=\"basis-full md:basis-[60%]\">\n              <Motion\n                v-if=\"headline\"\n                as=\"p\"\n                :variants=\"childVariant\"\n                class=\"mb-2 text-sm font-semibold text-primary\"\n                >{{ headline }}</Motion\n              >\n              <Motion as-child :variants=\"childVariant\" class=\"block\">\n                <NuxtLink :to=\"link\">\n                  <p class=\"mb-2 text-xl font-semibold lg:text-2xl\">{{ title }}</p>\n                </NuxtLink>\n              </Motion>\n              <Motion\n                v-if=\"description\"\n                as=\"p\"\n                :variants=\"childVariant\"\n                class=\"mb-5 line-clamp-2 text-ellipsis text-muted-foreground\"\n              >\n                {{ description }}\n              </Motion>\n              <Motion :variants=\"childVariant\" class=\"flex items-center\">\n                <UiAvatar\n                  v-if=\"userImage\"\n                  :src=\"userImage\"\n                  :alt=\"userName\"\n                  class=\"mr-3 rounded-full bg-background shadow ring-1 ring-ring/30\"\n                />\n                <div>\n                  <p v-if=\"userName\" class=\"text-sm font-semibold\">{{ userName }}</p>\n                  <p v-if=\"date\" class=\"text-sm text-muted-foreground\">{{ date }}</p>\n                </div>\n              </Motion>\n            </div>\n          </div>\n        </Motion>\n      </div>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 10 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"keyframes\",\n        ease: \"easeOut\",\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n      },\n    },\n  };\n\n  const headline = \"Design\";\n  const title = \"UX review presentations\";\n  const image =\n    \"https://images.unsplash.com/photo-1627637820550-423ab938955c?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=3132\";\n  const alt = \"UX review presentations\";\n  const description =\n    \"How do you create compelling presentations that wow your colleagues and impress your managers?\";\n  const date = \"30 Jan 2024\";\n  const userImage = \"https://i.pravatar.cc/300?img=15\";\n  const userName = \"John Doe\";\n  const link = \"#\";\n</script>\n","category":"Section","path":"Blog/Section/BlockBlogSection3.vue","components":["avatar","container"]},{"name":"Blog Section 4","fileName":"BlockBlogSection4.vue","file":"<template>\n  <!-- \n    Featured blog section with gradient header and sidebar layout\n    Features: Large featured post, sidebar with recent posts, category chips\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <!-- Header with gradient background -->\n      <Motion\n        :variants=\"childVariant\"\n        class=\"mb-12 rounded-2xl bg-linear-to-br from-primary/10 via-primary/5 to-transparent p-8 lg:mb-16\"\n      >\n        <h3 class=\"mb-3 text-3xl font-semibold lg:text-4xl\">Latest from our blog</h3>\n        <p class=\"text-lg text-muted-foreground lg:text-xl\">\n          Insights, stories, and updates from our team\n        </p>\n      </Motion>\n\n      <!-- Two-column layout: Featured + Sidebar -->\n      <div class=\"grid grid-cols-1 gap-10 lg:grid-cols-3\">\n        <!-- Featured post (2 columns) -->\n        <Motion :variants=\"childVariant\" class=\"lg:col-span-2\">\n          <NuxtLink :to=\"link\" class=\"group block\">\n            <div class=\"relative overflow-hidden rounded-xl\">\n              <Motion\n                as=\"img\"\n                :variants=\"{\n                  initial: { scale: 1.1 },\n                  animate: { scale: 1, transition: { duration: 0.6, ease: 'easeOut' } },\n                }\"\n                :src=\"image\"\n                :alt=\"alt\"\n                class=\"h-[400px] w-full object-cover transition-transform duration-500 group-hover:scale-105\"\n              />\n              <div\n                class=\"absolute inset-0 bg-linear-to-t from-background/95 via-background/50 to-transparent\"\n              ></div>\n              <div class=\"absolute right-0 bottom-0 left-0 z-10 p-6 lg:p-8\">\n                <UiBadge class=\"mb-3\">{{ headline }}</UiBadge>\n                <h4 class=\"mb-2 text-2xl font-semibold text-foreground lg:text-3xl\">\n                  {{ title }}\n                </h4>\n                <p class=\"mb-4 line-clamp-2\">{{ description }}</p>\n                <div class=\"flex items-center gap-3\">\n                  <UiAvatar\n                    :src=\"userImage\"\n                    :alt=\"userName\"\n                    class=\"bg-background shadow ring-1 ring-ring/30\"\n                  />\n                  <div>\n                    <p class=\"text-sm font-semibold\">{{ userName }}</p>\n                    <p class=\"text-sm text-muted-foreground\">{{ date }}</p>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </NuxtLink>\n        </Motion>\n\n        <!-- Sidebar with recent posts (1 column) -->\n        <div class=\"space-y-4\">\n          <Motion :variants=\"childVariant\">\n            <h4 class=\"mb-4 text-lg font-semibold\">Recent posts</h4>\n          </Motion>\n\n          <Motion\n            v-for=\"item in 3\"\n            :key=\"item\"\n            :variants=\"childVariant\"\n            class=\"flex gap-3 rounded-lg p-1 hover:bg-muted/50\"\n          >\n            <img :src=\"image\" :alt=\"alt\" class=\"h-20 w-20 shrink-0 rounded-lg object-cover\" />\n            <div class=\"min-w-0 flex-1\">\n              <NuxtLink :to=\"link\" class=\"block\">\n                <p class=\"mb-1 line-clamp-2 font-semibold\">{{ title }}</p>\n              </NuxtLink>\n              <p class=\"text-xs text-muted-foreground\">{{ date }}</p>\n            </div>\n          </Motion>\n\n          <!-- Categories -->\n          <Motion :variants=\"childVariant\" class=\"pt-4\">\n            <h5 class=\"mb-3 text-sm font-semibold\">Popular categories</h5>\n            <div class=\"flex flex-wrap gap-2\">\n              <template v-for=\"tag in tags\" :key=\"tag\">\n                <UiBadge variant=\"outline\">{{ tag }}</UiBadge>\n              </template>\n            </div>\n          </Motion>\n        </div>\n      </div>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const headline = \"Featured\";\n  const title = \"The future of design systems in 2024\";\n  const image =\n    \"https://images.unsplash.com/photo-1586455122341-927f2dec0691?q=80&w=1974&auto=format&fit=crop\";\n  const alt = \"Design systems\";\n  const description =\n    \"Explore the latest trends and best practices for building scalable design systems that empower teams.\";\n  const date = \"Jan 15, 2024\";\n  const userImage = \"https://i.pravatar.cc/300?img=20\";\n  const userName = \"Sarah Johnson\";\n  const link = \"#\";\n  const tags = [\"Design\", \"Development\", \"UX\", \"Tools\", \"Trends\"];\n</script>\n","category":"Section","path":"Blog/Section/BlockBlogSection4.vue","components":["avatar","badge","container"]},{"name":"Blog Section 5","fileName":"BlockBlogSection5.vue","file":"<template>\n  <!-- \n    Masonry-style blog grid with staggered card heights\n    Features: Mixed card sizes, category filters, load more button\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.12),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <!-- Header with filter tabs -->\n      <div class=\"mb-12 flex flex-col gap-6 lg:mb-16\">\n        <div class=\"flex flex-col gap-3\">\n          <Motion as=\"h3\" :variants=\"childVariant\" class=\"text-3xl font-semibold lg:text-4xl\">\n            Browse our articles\n          </Motion>\n          <Motion as=\"p\" :variants=\"childVariant\" class=\"text-lg text-muted-foreground lg:text-xl\">\n            Discover insights across design, development, and business\n          </Motion>\n        </div>\n\n        <!-- Category filter tabs -->\n        <Motion :variants=\"childVariant\">\n          <UiTabs default-value=\"all\" class=\"w-full\">\n            <UiTabsList class=\"w-fit overflow-x-auto\">\n              <UiTabsTrigger value=\"all\">All posts</UiTabsTrigger>\n              <UiTabsTrigger value=\"design\">Design</UiTabsTrigger>\n              <UiTabsTrigger value=\"dev\">Development</UiTabsTrigger>\n              <UiTabsTrigger value=\"business\">Business</UiTabsTrigger>\n            </UiTabsList>\n          </UiTabs>\n        </Motion>\n      </div>\n\n      <!-- Masonry grid with varied heights -->\n      <div class=\"grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3\">\n        <!-- Large card (spans 2 rows) -->\n        <Motion :variants=\"childVariant\" class=\"md:row-span-2\">\n          <UiCard\n            class=\"group overflow-hidden border-0 py-0 shadow-lg transition-shadow hover:shadow-xl\"\n          >\n            <div class=\"relative overflow-hidden\">\n              <Motion\n                as=\"img\"\n                :variants=\"{\n                  initial: { scale: 1 },\n                  animate: { scale: 1, transition: { duration: 0.3 } },\n                }\"\n                :src=\"image\"\n                :alt=\"alt\"\n                class=\"h-[400px] w-full object-cover transition-transform duration-500 group-hover:scale-105\"\n              />\n              <UiBadge class=\"absolute top-4 left-4 shadow-md\">{{ headline }}</UiBadge>\n            </div>\n            <UiCardContent class=\"space-y-3 p-6\">\n              <NuxtLink :to=\"link\">\n                <h4 class=\"text-xl font-semibold transition-colors hover:text-primary lg:text-2xl\">\n                  {{ title }}\n                </h4>\n              </NuxtLink>\n              <p class=\"mt-2 line-clamp-3 text-muted-foreground\">{{ description }}</p>\n              <div class=\"flex items-center gap-3 pt-2\">\n                <UiAvatar :src=\"userImage\" :alt=\"userName\" size=\"sm\" />\n                <div>\n                  <p class=\"text-sm font-medium\">{{ userName }}</p>\n                  <p class=\"text-xs text-muted-foreground\">{{ date }} · 5 min read</p>\n                </div>\n              </div>\n            </UiCardContent>\n          </UiCard>\n        </Motion>\n\n        <!-- Regular cards -->\n        <Motion v-for=\"item in 4\" :key=\"item\" :variants=\"childVariant\">\n          <UiCard\n            class=\"group h-full overflow-hidden border-0 py-0 shadow transition-shadow hover:shadow-lg\"\n          >\n            <div class=\"relative overflow-hidden\">\n              <img\n                :src=\"image\"\n                :alt=\"alt\"\n                class=\"h-[200px] w-full object-cover transition-transform duration-500 group-hover:scale-105\"\n              />\n            </div>\n            <UiCardContent class=\"space-y-2 pb-5\">\n              <UiBadge variant=\"outline\" size=\"sm\">{{ headline }}</UiBadge>\n              <NuxtLink :to=\"link\">\n                <h5 class=\"font-semibold transition-colors hover:text-primary\">{{ title }}</h5>\n              </NuxtLink>\n              <p class=\"line-clamp-2 text-sm text-muted-foreground\">{{ description }}</p>\n              <div class=\"flex items-center gap-2 pt-2\">\n                <UiAvatar :src=\"userImage\" :alt=\"userName\" size=\"xs\" />\n                <p class=\"text-xs text-muted-foreground\">{{ userName }} · {{ date }}</p>\n              </div>\n            </UiCardContent>\n          </UiCard>\n        </Motion>\n      </div>\n\n      <!-- Load more button -->\n      <Motion :variants=\"childVariant\" class=\"mt-10 text-center\">\n        <UiButton size=\"lg\" variant=\"outline\">\n          Load more articles\n          <Icon name=\"lucide:chevron-down\" class=\"ml-2 h-4 w-4\" />\n        </UiButton>\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 250,\n        damping: 25,\n      },\n    },\n  };\n\n  const headline = \"Design\";\n  const title = \"Creating accessible design systems\";\n  const image =\n    \"https://images.unsplash.com/photo-1620121692029-d088224ddc74?q=80&w=1932&auto=format&fit=crop\";\n  const alt = \"Design systems\";\n  const description =\n    \"Learn how to build design systems that are inclusive and accessible to all users.\";\n  const date = \"Feb 10, 2024\";\n  const userImage = \"https://i.pravatar.cc/300?img=18\";\n  const userName = \"Alex Chen\";\n  const link = \"#\";\n</script>\n","category":"Section","path":"Blog/Section/BlockBlogSection5.vue","components":["avatar","badge","button","card","cardcontent","container","tabs","tabslist","tabstrigger"]},{"name":"Blog Section 6","fileName":"BlockBlogSection6.vue","file":"<template>\n  <!-- \n    Newsletter-integrated blog section with subscription card\n    Features: Blog cards with stats, inline newsletter signup, animated badge\n  -->\n  <DefineCard>\n    <UiCard class=\"group overflow-hidden py-0 shadow-xs transition-all\">\n      <div class=\"relative overflow-hidden\">\n        <img\n          :src=\"image\"\n          :alt=\"alt\"\n          class=\"h-[200px] w-full object-cover transition-transform duration-500 group-hover:scale-105\"\n        />\n      </div>\n      <UiCardContent class=\"space-y-3 pb-5\">\n        <div class=\"flex items-center gap-2\">\n          <UiBadge variant=\"secondary\">{{ headline }}</UiBadge>\n          <UiSeparator orientation=\"vertical\" class=\"h-4\" />\n          <span class=\"text-xs text-muted-foreground\">5 min read</span>\n        </div>\n        <NuxtLink :to=\"link\">\n          <h4 class=\"text-lg font-semibold transition-colors hover:text-primary\">\n            {{ title }}\n          </h4>\n        </NuxtLink>\n        <p class=\"line-clamp-2 text-sm text-muted-foreground\">{{ description }}</p>\n        <UiDivider />\n        <div class=\"flex items-center justify-between\">\n          <div class=\"flex items-center gap-2\">\n            <UiAvatar :src=\"userImage\" :alt=\"userName\" size=\"xs\" />\n            <span class=\"text-xs font-medium\">{{ userName }}</span>\n          </div>\n          <div class=\"flex items-center gap-3 text-xs text-muted-foreground\">\n            <span class=\"flex items-center gap-1\">\n              <Icon name=\"lucide:heart\" class=\"h-3 w-3\" />\n              124\n            </span>\n            <span class=\"flex items-center gap-1\">\n              <Icon name=\"lucide:message-circle\" class=\"h-3 w-3\" />\n              12\n            </span>\n          </div>\n        </div>\n      </UiCardContent>\n    </UiCard>\n  </DefineCard>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <!-- Centered header -->\n      <div class=\"mx-auto max-w-3xl text-center\">\n        <Motion\n          :variants=\"childVariant\"\n          as=\"div\"\n          class=\"mb-3 inline-flex items-center gap-2 rounded-full bg-primary/10 px-4 py-1.5\"\n        >\n          <Motion\n            :variants=\"{\n              initial: { scale: 1 },\n              animate: {\n                scale: [1, 1.2, 1],\n                transition: {\n                  duration: 2,\n                  repeat: Infinity,\n                  repeatType: 'loop',\n                },\n              },\n            }\"\n            class=\"h-2 w-2 rounded-full bg-primary\"\n          ></Motion>\n          <span class=\"text-sm font-semibold text-primary\">Weekly updates</span>\n        </Motion>\n        <Motion as=\"h3\" :variants=\"childVariant\" class=\"mb-3 text-3xl font-semibold lg:text-4xl\">\n          Stories worth reading\n        </Motion>\n        <Motion as=\"p\" :variants=\"childVariant\" class=\"text-lg text-muted-foreground lg:text-xl\">\n          Expert insights and practical tips for modern teams\n        </Motion>\n      </div>\n\n      <!-- Grid with newsletter card -->\n      <div class=\"mt-12 grid grid-cols-1 gap-8 md:grid-cols-2 lg:mt-16 lg:grid-cols-3\">\n        <!-- Blog cards -->\n        <Motion v-for=\"item in 2\" :key=\"item\" :variants=\"childVariant\">\n          <BlogCard />\n        </Motion>\n\n        <!-- Newsletter signup card -->\n        <Motion :variants=\"childVariant\">\n          <UiCard class=\"relative h-full overflow-hidden border-2 border-dashed border-primary/30\">\n            <div\n              class=\"absolute top-0 right-0 h-32 w-32 bg-linear-to-br from-primary/20 to-transparent blur-3xl\"\n            ></div>\n            <UiCardContent class=\"relative flex h-full flex-col justify-center p-6 text-center\">\n              <Motion\n                :variants=\"{\n                  initial: { scale: 1, rotate: 0 },\n                  animate: {\n                    scale: [1, 1.1, 1],\n                    rotate: [0, 5, -5, 0],\n                    transition: {\n                      duration: 4,\n                      repeat: Infinity,\n                      repeatType: 'loop',\n                    },\n                  },\n                }\"\n                class=\"mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10\"\n              >\n                <Icon name=\"lucide:mail\" class=\"h-8 w-8 text-primary\" />\n              </Motion>\n              <h4 class=\"mb-2 text-lg font-semibold\">Never miss a post</h4>\n              <p class=\"mb-4 text-sm text-muted-foreground\">\n                Get the latest articles delivered to your inbox weekly\n              </p>\n              <UiInput placeholder=\"Enter your email\" class=\"mb-3\" />\n              <UiButton class=\"w-full\">Subscribe now</UiButton>\n              <p class=\"mt-3 text-xs text-muted-foreground\">Join 10,000+ subscribers</p>\n            </UiCardContent>\n          </UiCard>\n        </Motion>\n\n        <!-- More blog cards -->\n        <Motion v-for=\"item in 3\" :key=\"`extra-${item}`\" :variants=\"childVariant\">\n          <BlogCard />\n        </Motion>\n      </div>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const [DefineCard, BlogCard] = createReusableTemplate();\n\n  const headline = \"Product\";\n  const title = \"Building better products with user feedback\";\n  const image =\n    \"https://images.unsplash.com/photo-1586455122341-927f2dec0691?q=80&w=1974&auto=format&fit=crop\";\n  const alt = \"Product development\";\n  const description =\n    \"Discover how continuous user feedback shapes product development and drives innovation.\";\n  const userImage = \"https://i.pravatar.cc/300?img=25\";\n  const userName = \"Maria Garcia\";\n  const link = \"#\";\n</script>\n","category":"Section","path":"Blog/Section/BlockBlogSection6.vue","components":["avatar","badge","button","card","cardcontent","container","divider","input","separator"]},{"name":"Blog Section 7","fileName":"BlockBlogSection7.vue","file":"<template>\n  <!-- \n    Timeline-style blog section with chronological layout\n    Features: Date markers, connecting line, slide-in animations\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.15),\n        },\n      },\n    }\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <!-- Header -->\n      <div class=\"mb-12 lg:mb-16\">\n        <Motion as=\"p\" :variants=\"childVariant\" class=\"mb-2 font-semibold text-primary\">\n          Our journey\n        </Motion>\n        <Motion as=\"h3\" :variants=\"childVariant\" class=\"mb-3 text-3xl font-semibold lg:text-4xl\">\n          Recent updates\n        </Motion>\n        <Motion as=\"p\" :variants=\"childVariant\" class=\"text-lg text-muted-foreground lg:text-xl\">\n          Follow our latest stories and announcements\n        </Motion>\n      </div>\n\n      <!-- Timeline -->\n      <div class=\"relative space-y-12\">\n        <!-- Vertical line (hidden on mobile) -->\n        <Motion\n          :initial=\"{ height: 0 }\"\n          :animate=\"{\n            height: '100%',\n            transition: { duration: 1, delay: 0.2 },\n          }\"\n          class=\"absolute top-0 left-px hidden w-0.5 bg-linear-to-b from-primary via-primary/50 to-transparent md:block\"\n        ></Motion>\n\n        <!-- Timeline items -->\n        <Motion\n          v-for=\"(item, index) in 4\"\n          :key=\"item\"\n          :variants=\"{\n            initial: { opacity: 0 },\n            animate: {\n              opacity: 1,\n              transition: {\n                delay: index * 0.1,\n              },\n            },\n          }\"\n          class=\"relative md:pl-12\"\n        >\n          <!-- Timeline dot -->\n          <Motion\n            :variants=\"{\n              initial: { scale: 0, opacity: 0 },\n              animate: {\n                scale: [1, 1.3, 1],\n                opacity: 1,\n                transition: {\n                  delay: index * 0.1,\n                },\n              },\n            }\"\n            class=\"absolute top-3 left-0 hidden size-4 -translate-x-1.5 rounded-full bg-primary ring-4 ring-background md:block\"\n          ></Motion>\n\n          <!-- Content card -->\n          <UiCard class=\"group overflow-hidden shadow-xs transition-all hover:shadow-lg\">\n            <div class=\"grid grid-cols-1 items-start gap-6 md:grid-cols-5\">\n              <!-- Date section -->\n              <div\n                class=\"flex items-start gap-3 pl-5 md:col-span-1 md:h-full md:flex-col md:items-end md:justify-start md:border-r md:pr-6 md:pl-0\"\n              >\n                <UiBadge variant=\"outline\" class=\"shrink-0 py-1\">\n                  <Icon name=\"lucide:calendar\" class=\"mr-1.5 h-3 w-3\" />\n                  {{ date }}\n                </UiBadge>\n                <span class=\"text-sm text-muted-foreground\">5 min read</span>\n              </div>\n\n              <!-- Image section -->\n              <div class=\"relative overflow-hidden rounded-md md:col-span-2\">\n                <img\n                  :src=\"image\"\n                  :alt=\"alt\"\n                  class=\"h-full w-full object-cover transition-transform duration-500 group-hover:scale-110\"\n                />\n              </div>\n\n              <!-- Content section -->\n              <UiCardContent class=\"flex flex-col justify-center md:col-span-2\">\n                <UiBadge class=\"mb-3 w-fit\" variant=\"secondary\">{{ headline }}</UiBadge>\n                <NuxtLink :to=\"link\">\n                  <h4\n                    class=\"mb-2 text-xl font-semibold transition-colors hover:text-primary lg:text-2xl\"\n                  >\n                    {{ title }}\n                  </h4>\n                </NuxtLink>\n                <p class=\"mb-4 line-clamp-2 text-muted-foreground\">{{ description }}</p>\n                <div class=\"flex items-center gap-3\">\n                  <UiAvatar :src=\"userImage\" :alt=\"userName\" size=\"sm\" />\n                  <div>\n                    <p class=\"text-sm font-medium\">{{ userName }}</p>\n                    <p class=\"text-xs text-muted-foreground\">Author</p>\n                  </div>\n                </div>\n              </UiCardContent>\n            </div>\n          </UiCard>\n        </Motion>\n      </div>\n\n      <!-- View all button -->\n      <Motion :variants=\"childVariant\" class=\"mt-12 text-center\">\n        <UiButton size=\"lg\" variant=\"outline\">\n          View complete timeline\n          <Icon name=\"lucide:arrow-right\" class=\"ml-2 h-4 w-4\" />\n        </UiButton>\n      </Motion>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, x: -30 },\n    animate: {\n      opacity: 1,\n      x: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 25,\n      },\n    },\n  };\n\n  const headline = \"Update\";\n  const title = \"Introducing new collaboration features\";\n  const image =\n    \"https://images.unsplash.com/photo-1620121692029-d088224ddc74?q=80&w=1932&auto=format&fit=crop\";\n  const alt = \"Collaboration features\";\n  const description =\n    \"We're excited to announce new tools that make team collaboration easier and more productive.\";\n  const date = \"Apr 12, 2024\";\n  const userImage = \"https://i.pravatar.cc/300?img=30\";\n  const userName = \"David Lee\";\n  const link = \"#\";\n</script>\n","category":"Section","path":"Blog/Section/BlockBlogSection7.vue","components":["avatar","badge","button","card","cardcontent","container"]},{"name":"Blog Section 8","fileName":"BlockBlogSection8.vue","file":"<template>\n  <!-- \n    Compact blog section with horizontal scroll on mobile\n    Features: Scrollable cards, gradient fade edges, view counter, bookmark action\n  -->\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <div class=\"overflow-hidden py-16 lg:py-24\">\n      <UiContainer>\n        <!-- Header -->\n        <div class=\"mb-8 flex items-end justify-between lg:mb-12\">\n          <div>\n            <Motion\n              as=\"h3\"\n              :variants=\"childVariant\"\n              class=\"mb-2 text-3xl font-semibold lg:text-4xl\"\n            >\n              Trending articles\n            </Motion>\n            <Motion as=\"p\" :variants=\"childVariant\" class=\"text-muted-foreground\">\n              Most popular posts this week\n            </Motion>\n          </div>\n          <Motion :variants=\"childVariant\">\n            <UiButton variant=\"ghost\" class=\"hidden md:flex\">\n              View all\n              <Icon name=\"lucide:arrow-right\" class=\"ml-2 h-4 w-4\" />\n            </UiButton>\n          </Motion>\n        </div>\n      </UiContainer>\n\n      <!-- Scrollable container -->\n      <Motion :variants=\"childVariant\" class=\"relative\">\n        <!-- Gradient fade on edges (desktop only) -->\n        <div\n          class=\"pointer-events-none absolute top-0 left-0 z-10 hidden h-full w-20 bg-linear-to-r from-background to-transparent lg:block\"\n        ></div>\n        <div\n          class=\"pointer-events-none absolute top-0 right-0 z-10 hidden h-full w-20 bg-linear-to-l from-background to-transparent lg:block\"\n        ></div>\n\n        <!-- Horizontal scroll -->\n        <UiScrollArea orientation=\"horizontal\" class=\"w-full whitespace-nowrap\">\n          <div class=\"flex gap-6 px-4 pb-4 lg:px-12\">\n            <Motion\n              v-for=\"item in 6\"\n              :key=\"item\"\n              :variants=\"{\n                initial: { opacity: 0, scale: 0.9 },\n                animate: {\n                  opacity: 1,\n                  scale: 1,\n                  transition: {\n                    type: 'spring',\n                    stiffness: 200,\n                    damping: 20,\n                    delay: item * 0.05,\n                  },\n                },\n              }\"\n              class=\"inline-block w-[320px] shrink-0 lg:w-[380px]\"\n            >\n              <UiCard class=\"group h-full overflow-hidden py-0 transition-all hover:shadow-xl\">\n                <!-- Image with overlay badge -->\n                <div class=\"relative overflow-hidden\">\n                  <img\n                    :src=\"image\"\n                    :alt=\"alt\"\n                    class=\"h-[200px] w-full object-cover transition-transform duration-500 group-hover:scale-110\"\n                  />\n                  <div\n                    class=\"absolute inset-0 bg-linear-to-t from-background/90 via-background/40 to-transparent\"\n                  ></div>\n\n                  <!-- Trending badge -->\n                  <div\n                    class=\"absolute top-4 left-4 flex items-center gap-2 rounded-full bg-background/90 px-3 py-1.5 shadow-lg backdrop-blur-sm\"\n                  >\n                    <Motion\n                      :variants=\"{\n                        initial: {},\n                        animate: {\n                          scale: [1, 1.2, 1],\n                          transition: {\n                            duration: 2,\n                            repeat: Infinity,\n                            ease: 'linear',\n                          },\n                        },\n                      }\"\n                    >\n                      <Icon name=\"lucide:trending-up\" class=\"h-4 w-4 text-primary\" />\n                    </Motion>\n                    <span class=\"text-xs font-semibold\">Trending</span>\n                  </div>\n\n                  <!-- Stats overlay -->\n                  <div class=\"absolute right-4 bottom-4 left-4 flex items-center justify-between\">\n                    <div class=\"flex items-center gap-3 text-xs text-foreground\">\n                      <span class=\"flex items-center gap-1\">\n                        <Icon name=\"lucide:eye\" class=\"h-3.5 w-3.5\" />\n                        2.4k\n                      </span>\n                      <span class=\"flex items-center gap-1\">\n                        <Icon name=\"lucide:clock\" class=\"h-3.5 w-3.5\" />\n                        5 min\n                      </span>\n                    </div>\n                    <UiButton\n                      size=\"icon\"\n                      variant=\"secondary\"\n                      class=\"h-7 w-7 rounded-full shadow-lg\"\n                    >\n                      <Icon name=\"lucide:bookmark\" class=\"h-3.5 w-3.5\" />\n                    </UiButton>\n                  </div>\n                </div>\n\n                <!-- Content -->\n                <UiCardContent class=\"space-y-3 pb-5\">\n                  <UiBadge variant=\"outline\" size=\"sm\">{{ headline }}</UiBadge>\n                  <NuxtLink :to=\"link\" class=\"block\">\n                    <h4\n                      class=\"line-clamp-2 text-lg font-semibold transition-colors hover:text-primary\"\n                    >\n                      {{ title }}\n                    </h4>\n                  </NuxtLink>\n                  <p class=\"line-clamp-2 text-sm text-muted-foreground\">{{ description }}</p>\n                  <UiDivider class=\"my-3!\" />\n                  <div class=\"flex items-center gap-2\">\n                    <UiAvatar :src=\"userImage\" :alt=\"userName\" size=\"xs\" />\n                    <div class=\"min-w-0 flex-1\">\n                      <p class=\"truncate text-xs font-medium\">{{ userName }}</p>\n                      <p class=\"text-xs text-muted-foreground\">{{ date }}</p>\n                    </div>\n                  </div>\n                </UiCardContent>\n              </UiCard>\n            </Motion>\n          </div>\n        </UiScrollArea>\n      </Motion>\n\n      <!-- Mobile view all button -->\n      <UiContainer>\n        <Motion :variants=\"childVariant\" class=\"mt-6 md:hidden\">\n          <UiButton variant=\"outline\" class=\"w-full\">\n            View all articles\n            <Icon name=\"lucide:arrow-right\" class=\"ml-2 h-4 w-4\" />\n          </UiButton>\n        </Motion>\n      </UiContainer>\n    </div>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const headline = \"Tutorial\";\n  const title = \"Getting started with modern web development\";\n  const image =\n    \"https://images.unsplash.com/photo-1627637820550-423ab938955c?ixlib=rb-4.1.0&auto=format&fit=crop&q=80&w=3132\";\n  const alt = \"Web development\";\n  const description =\n    \"A comprehensive guide to building modern web applications with the latest tools and frameworks.\";\n  const date = \"May 8, 2024\";\n  const userImage = \"https://i.pravatar.cc/300?img=35\";\n  const userName = \"Emma Wilson\";\n  const link = \"#\";\n</script>\n","category":"Section","path":"Blog/Section/BlockBlogSection8.vue","components":["avatar","badge","button","card","cardcontent","container","divider","scrollarea"]},{"name":"App Sidebar 1","fileName":"BlockAppSidebar1.vue","file":"<template>\n  <aside class=\"h-screen w-[300px] border-r\">\n    <UiScrollArea class=\"size-full\">\n      <div class=\"flex h-screen flex-col pt-7\">\n        <NuxtLink to=\"#\" class=\"flex w-full items-center gap-3 px-5\">\n          <UiAvatar src=\"/icon.png\" alt=\"Company Logo\" class=\"size-7 rounded object-contain\" />\n          <span class=\"text-xl font-bold\">{{ COMPANY_NAME }}</span>\n        </NuxtLink>\n        <div class=\"my-6 px-5\">\n          <UiVeeInput v-model=\"search\" placeholder=\"Search...\" icon=\"lucide:search\" />\n        </div>\n        <div class=\"flex h-full grow flex-col px-5 pb-8\">\n          <div class=\"mb-10 flex flex-col gap-10\">\n            <nav class=\"flex flex-col gap-1\">\n              <template v-for=\"(n, i) in topNav\" :key=\"i\">\n                <UiButton\n                  v-if=\"!n.items\"\n                  :to=\"n.link\"\n                  size=\"default\"\n                  variant=\"ghost\"\n                  class=\"justify-start gap-4 px-3\"\n                >\n                  <Icon v-if=\"n.icon\" :name=\"n.icon\" class=\"size-4 text-muted-foreground\" />\n                  <span>{{ n.title }}</span>\n                </UiButton>\n                <UiCollapsible v-if=\"n.items\">\n                  <UiCollapsibleTrigger as-child>\n                    <UiButton\n                      size=\"default\"\n                      variant=\"ghost\"\n                      class=\"group w-full justify-start gap-4 px-3\"\n                    >\n                      <Icon v-if=\"n.icon\" :name=\"n.icon\" class=\"size-4 text-muted-foreground\" />\n                      <span>{{ n.title }}</span>\n                      <Icon\n                        name=\"lucide:chevron-down\"\n                        class=\"ml-auto size-4 text-muted-foreground transition group-data-[state=open]:rotate-180\"\n                      />\n                    </UiButton>\n                  </UiCollapsibleTrigger>\n                  <UiCollapsibleContent class=\"flex flex-col gap-1.5 pr-2 pl-4\">\n                    <template v-for=\"(item, index) in n.items\" :key=\"index\">\n                      <UiButton\n                        :to=\"item.link\"\n                        size=\"sm\"\n                        variant=\"ghost\"\n                        class=\"justify-start gap-4 px-3\"\n                      >\n                        <span>{{ item.title }}</span>\n                      </UiButton>\n                    </template>\n                  </UiCollapsibleContent>\n                </UiCollapsible>\n              </template>\n            </nav>\n            <nav class=\"mt-auto flex flex-col gap-1\">\n              <template v-for=\"(n, i) in bottomNav\" :key=\"i\">\n                <UiButton\n                  v-if=\"!n.items\"\n                  :to=\"n.link\"\n                  size=\"default\"\n                  variant=\"ghost\"\n                  class=\"justify-start gap-4 px-3\"\n                >\n                  <Icon v-if=\"n.icon\" :name=\"n.icon\" class=\"size-4 text-muted-foreground\" />\n                  <span>{{ n.title }}</span>\n                </UiButton>\n                <UiCollapsible v-if=\"n.items\">\n                  <UiCollapsibleTrigger as-child>\n                    <UiButton\n                      size=\"default\"\n                      variant=\"ghost\"\n                      class=\"group w-full justify-start gap-4 px-3\"\n                    >\n                      <Icon v-if=\"n.icon\" :name=\"n.icon\" class=\"size-4 text-muted-foreground\" />\n                      <span>{{ n.title }}</span>\n                      <Icon\n                        name=\"lucide:chevron-down\"\n                        class=\"ml-auto size-4 text-muted-foreground transition group-data-[state=open]:rotate-180\"\n                      />\n                    </UiButton>\n                  </UiCollapsibleTrigger>\n                  <UiCollapsibleContent class=\"flex flex-col gap-1.5 pr-2 pl-4\">\n                    <template v-for=\"(item, index) in n.items\" :key=\"index\">\n                      <UiButton\n                        :to=\"item.link\"\n                        size=\"sm\"\n                        variant=\"ghost\"\n                        class=\"justify-start gap-4 px-3\"\n                      >\n                        <span>{{ item.title }}</span>\n                      </UiButton>\n                    </template>\n                  </UiCollapsibleContent>\n                </UiCollapsible>\n              </template>\n            </nav>\n          </div>\n          <div class=\"mt-auto rounded-lg bg-muted/50 p-4 text-sm\">\n            <div class=\"flex items-center justify-between\">\n              <p class=\"font-semibold\">Used space</p>\n              <UiButton class=\"size-6\" size=\"icon-sm\" variant=\"ghost\">\n                <Icon name=\"lucide:x\" class=\"size-4 text-muted-foreground\" />\n              </UiButton>\n            </div>\n            <p class=\"mt-3 text-muted-foreground\">\n              Your team has used 80% of your available space. Need more?\n            </p>\n            <UiProgress class=\"my-4 h-2\" :model-value=\"80\" />\n\n            <div class=\"flex items-center gap-1\">\n              <UiButton class=\"px-2\" variant=\"ghost\" size=\"sm\">Dismiss</UiButton>\n              <UiButton class=\"px-2 text-sky-500 hover:text-sky-600\" variant=\"ghost\" size=\"sm\"\n                >Upgrade plan</UiButton\n              >\n            </div>\n          </div>\n          <UiDivider class=\"my-6\" />\n          <div class=\"flex items-center gap-3 pb-8\">\n            <div class=\"flex items-center gap-3\">\n              <UiAvatar :src=\"user.avatar\" class=\"size-10\" />\n              <div>\n                <p class=\"text-sm font-semibold\" v-html=\"user.username\" />\n                <p class=\"text-sm text-muted-foreground\" v-html=\"user.email\" />\n              </div>\n            </div>\n            <UiTooltip>\n              <UiTooltipTrigger as-child>\n                <UiButton class=\"ml-auto shrink-0\" size=\"icon-sm\" variant=\"ghost\">\n                  <Icon name=\"lucide:log-out\" class=\"size-4 text-muted-foreground\" />\n                </UiButton>\n              </UiTooltipTrigger>\n              <UiTooltipContent side=\"right\" align=\"center\">Logout</UiTooltipContent>\n            </UiTooltip>\n          </div>\n        </div>\n      </div>\n    </UiScrollArea>\n  </aside>\n</template>\n\n<script lang=\"ts\" setup>\n  const search = ref<string>(\"\");\n\n  const user = {\n    avatar: \"https://randomuser.me/api/portraits/med/men/2.jpg\",\n    username: \"Jane Doe\",\n    email: \"muzcad@he.tg\",\n  };\n\n  const topNav = [\n    { title: \"Home\", icon: \"lucide:home\", link: \"#\" },\n    {\n      title: \"Dashboard\",\n      icon: \"lucide:bar-chart-3\",\n      items: [\n        { title: \"Overview\", link: \"#\" },\n        { title: \"Notifications\", link: \"#\" },\n        { title: \"Analytics\", link: \"#\" },\n        { title: \"Reports\", link: \"#\" },\n      ],\n    },\n    { title: \"Projects\", icon: \"lucide:folder-dot\", link: \"#\" },\n    { title: \"Tasks\", icon: \"lucide:list-checks\", link: \"#\" },\n    { title: \"Users\", icon: \"lucide:users\", link: \"#\" },\n  ];\n  const bottomNav = [\n    { title: \"Support\", icon: \"lucide:life-buoy\", link: \"#\" },\n    {\n      title: \"Settings\",\n      icon: \"lucide:settings-2\",\n      items: [\n        { title: \"Profile\", link: \"#\" },\n        { title: \"Account\", link: \"#\" },\n        { title: \"Security\", link: \"#\" },\n        { title: \"Billing\", link: \"#\" },\n      ],\n    },\n  ];\n</script>\n","category":"Sidebar","path":"App/Sidebar/BlockAppSidebar1.vue","components":["avatar","button","collapsible","collapsiblecontent","collapsibletrigger","divider","progress","scrollarea","tooltip","tooltipcontent","tooltiptrigger","veeinput"]},{"name":"App Sidebar 2","fileName":"BlockAppSidebar2.vue","file":"<template>\n  <aside class=\"flex h-screen\">\n    <UiScrollArea class=\"z-10 h-full w-[300px] border-r\">\n      <div class=\"flex h-screen flex-col pt-7\">\n        <NuxtLink to=\"#\" class=\"flex w-full items-center gap-3 px-5\">\n          <UiAvatar src=\"/icon.png\" alt=\"Company Logo\" class=\"size-7 rounded object-contain\" />\n          <span class=\"text-xl font-bold\">{{ COMPANY_NAME }}</span>\n        </NuxtLink>\n        <div class=\"my-6 px-5\">\n          <UiVeeInput v-model=\"search\" placeholder=\"Search...\" icon=\"lucide:search\" />\n        </div>\n        <div class=\"flex h-full grow flex-col px-5 pb-8\">\n          <div class=\"mb-10 flex flex-col gap-10\">\n            <nav class=\"flex flex-col gap-1\">\n              <template v-for=\"(n, i) in topNav\" :key=\"i\">\n                <UiButton\n                  size=\"default\"\n                  :to=\"n.link\"\n                  variant=\"ghost\"\n                  class=\"justify-start gap-4 px-3\"\n                  @click=\"setMiniBarItems(n.items)\"\n                >\n                  <Icon v-if=\"n.icon\" :name=\"n.icon\" class=\"size-4 text-muted-foreground\" />\n                  <span>{{ n.title }}</span>\n                  <Icon\n                    v-if=\"n.items\"\n                    name=\"lucide:chevron-right\"\n                    class=\"ml-auto size-4 text-muted-foreground/80\"\n                  />\n                </UiButton>\n              </template>\n            </nav>\n            <nav class=\"mt-auto flex flex-col gap-1\">\n              <template v-for=\"(n, i) in bottomNav\" :key=\"i\">\n                <UiButton\n                  :to=\"n.link\"\n                  size=\"default\"\n                  variant=\"ghost\"\n                  class=\"justify-start gap-4 px-3\"\n                  @click=\"setMiniBarItems(n.items)\"\n                >\n                  <Icon v-if=\"n.icon\" :name=\"n.icon\" class=\"size-4 text-muted-foreground\" />\n                  <span>{{ n.title }}</span>\n                  <Icon\n                    v-if=\"n.items\"\n                    name=\"lucide:chevron-right\"\n                    class=\"ml-auto size-4 text-muted-foreground/80\"\n                  />\n                </UiButton>\n              </template>\n            </nav>\n          </div>\n          <div class=\"mt-auto rounded-lg bg-muted/50 p-4 text-sm\">\n            <div class=\"flex items-center justify-between\">\n              <p class=\"font-semibold\">Used space</p>\n              <UiButton class=\"size-6\" size=\"icon-sm\" variant=\"ghost\">\n                <Icon name=\"lucide:x\" class=\"size-4 text-muted-foreground\" />\n              </UiButton>\n            </div>\n            <p class=\"mt-3 text-muted-foreground\">\n              Your team has used 80% of your available space. Need more?\n            </p>\n            <UiProgress class=\"my-4 h-2\" :model-value=\"80\" />\n\n            <div class=\"flex items-center gap-1\">\n              <UiButton class=\"px-2\" variant=\"ghost\" size=\"sm\">Dismiss</UiButton>\n              <UiButton class=\"px-2 text-sky-500 hover:text-sky-600\" variant=\"ghost\" size=\"sm\"\n                >Upgrade plan</UiButton\n              >\n            </div>\n          </div>\n          <UiDivider class=\"my-6\" />\n          <div class=\"flex items-center gap-3 pb-8\">\n            <div class=\"flex items-center gap-3\">\n              <UiAvatar :src=\"user.avatar\" class=\"size-10\" />\n              <div>\n                <p class=\"text-sm font-semibold\" v-html=\"user.username\" />\n                <p class=\"text-sm text-muted-foreground\" v-html=\"user.email\" />\n              </div>\n            </div>\n            <UiTooltip>\n              <UiTooltipTrigger as-child>\n                <UiButton class=\"ml-auto shrink-0\" size=\"icon-sm\" variant=\"ghost\">\n                  <Icon name=\"lucide:log-out\" class=\"size-4 text-muted-foreground\" />\n                </UiButton>\n              </UiTooltipTrigger>\n              <UiTooltipContent side=\"right\" align=\"center\">Logout</UiTooltipContent>\n            </UiTooltip>\n          </div>\n        </div>\n      </div>\n    </UiScrollArea>\n    <TransitionSlide ref=\"sideBarRef\" :offset=\"[-30, 0]\">\n      <UiScrollArea v-if=\"showMiniSidebar\" class=\"h-full w-[250px] border-r px-5 py-4\">\n        <nav class=\"flex flex-col gap-1\">\n          <template v-for=\"(n, i) in miniSidebarItems\" :key=\"i\">\n            <UiButton :to=\"n.link\" size=\"default\" variant=\"ghost\" class=\"justify-start gap-4 px-3\">\n              <Icon v-if=\"n.icon\" :name=\"n.icon\" class=\"size-4 text-muted-foreground\" />\n              <span>{{ n.title }}</span>\n            </UiButton>\n          </template>\n        </nav>\n      </UiScrollArea>\n    </TransitionSlide>\n  </aside>\n</template>\n\n<script lang=\"ts\" setup>\n  const search = ref<string>(\"\");\n  const showMiniSidebar = ref<boolean>(false);\n  const miniSidebarItems = ref<Array<any>>();\n  const sideBarRef = ref<any>();\n\n  onClickOutside(sideBarRef, () => {\n    showMiniSidebar.value = false;\n    miniSidebarItems.value = [];\n  });\n\n  const user = {\n    avatar: \"https://randomuser.me/api/portraits/med/men/2.jpg\",\n    username: \"Jane Doe\",\n    email: \"muzcad@he.tg\",\n  };\n\n  const topNav = [\n    { title: \"Home\", icon: \"lucide:home\", link: \"#\" },\n    {\n      title: \"Dashboard\",\n      icon: \"lucide:bar-chart-3\",\n      items: [\n        { title: \"Overview\", link: \"#\", icon: \"lucide:activity\" },\n        { title: \"Notifications\", link: \"#\", icon: \"lucide:bell\" },\n        { title: \"Analytics\", link: \"#\", icon: \"lucide:pie-chart\" },\n        { title: \"Reports\", link: \"#\", icon: \"lucide:file-text\" },\n      ],\n    },\n    { title: \"Projects\", icon: \"lucide:folder-dot\", link: \"#\" },\n    { title: \"Tasks\", icon: \"lucide:list-checks\", link: \"#\" },\n    { title: \"Users\", icon: \"lucide:users\", link: \"#\" },\n  ];\n  const bottomNav = [\n    { title: \"Support\", icon: \"lucide:life-buoy\", link: \"#\" },\n    {\n      title: \"Settings\",\n      icon: \"lucide:settings-2\",\n      items: [\n        { title: \"Profile\", link: \"#\", icon: \"lucide:user\" },\n        { title: \"Account\", link: \"#\", icon: \"lucide:settings\" },\n        { title: \"Security\", link: \"#\", icon: \"lucide:shield\" },\n        { title: \"Billing\", link: \"#\", icon: \"lucide:credit-card\" },\n      ],\n    },\n  ];\n\n  const setMiniBarItems = (items?: any) => {\n    if (!items) return (showMiniSidebar.value = false);\n    miniSidebarItems.value = items;\n    showMiniSidebar.value = true;\n  };\n</script>\n","category":"Sidebar","path":"App/Sidebar/BlockAppSidebar2.vue","components":["avatar","button","divider","progress","scrollarea","tooltip","tooltipcontent","tooltiptrigger","veeinput"]},{"name":"App Sidebar 3","fileName":"BlockAppSidebar3.vue","file":"<template>\n  <DefineNavItem v-slot=\"{ item: n }\">\n    <UiButton\n      :to=\"n.link\"\n      :size=\"isExpanded ? 'default' : 'icon'\"\n      variant=\"ghost\"\n      class=\"relative w-full shrink-0 justify-start gap-3 overflow-hidden p-3\"\n    >\n      <Icon v-if=\"n.icon\" :name=\"n.icon\" class=\"size-5 shrink-0 text-muted-foreground\" />\n      <span\n        class=\"whitespace-nowrap opacity-0 transition-opacity duration-200 group-hover:opacity-100\"\n      >\n        {{ n.title }}\n      </span>\n    </UiButton>\n  </DefineNavItem>\n\n  <aside\n    class=\"group flex h-screen w-16 flex-col border-r py-4 transition-all duration-300 ease-in-out hover:w-[240px]\"\n    @mouseenter=\"isExpanded = true\"\n    @mouseleave=\"isExpanded = false\"\n  >\n    <div class=\"mb-8 flex items-center overflow-hidden px-3\">\n      <NuxtLink to=\"#\" class=\"flex items-center gap-3\">\n        <UiAvatar\n          src=\"/icon.png\"\n          alt=\"Company Logo\"\n          class=\"size-8 shrink-0 rounded object-contain\"\n        />\n        <span\n          class=\"text-lg font-bold whitespace-nowrap opacity-0 transition-opacity duration-200 group-hover:opacity-100\"\n        >\n          {{ COMPANY_NAME }}\n        </span>\n      </NuxtLink>\n    </div>\n\n    <UiScrollArea class=\"size-full\">\n      <nav class=\"flex flex-col gap-2 px-2\">\n        <template v-for=\"(n, i) in navigation\" :key=\"i\">\n          <NavItem :item=\"n\" />\n        </template>\n      </nav>\n\n      <UiDivider class=\"my-4\" />\n\n      <nav class=\"flex flex-col gap-2 px-2\">\n        <template v-for=\"(n, i) in bottomNavigation\" :key=\"i\">\n          <NavItem :item=\"n\" />\n        </template>\n      </nav>\n    </UiScrollArea>\n\n    <div class=\"mt-auto px-2\">\n      <UiButton variant=\"ghost\" class=\"relative w-full justify-start gap-3 overflow-hidden pl-2\">\n        <UiAvatar :src=\"user.avatar\" class=\"size-8 shrink-0\" />\n        <span\n          class=\"text-sm font-semibold whitespace-nowrap opacity-0 transition-opacity duration-200 group-hover:opacity-100\"\n        >\n          {{ user.username }}\n        </span>\n      </UiButton>\n    </div>\n  </aside>\n</template>\n\n<script lang=\"ts\" setup>\n  const isExpanded = ref(false);\n\n  const [DefineNavItem, NavItem] = createReusableTemplate<{\n    item: {\n      title: string;\n      icon?: string;\n      link: string;\n    };\n  }>();\n\n  const user = {\n    avatar: \"https://randomuser.me/api/portraits/med/men/2.jpg\",\n    username: \"Jane Doe\",\n  };\n\n  const navigation = [\n    { title: \"Home\", icon: \"lucide:home\", link: \"#\" },\n    { title: \"Dashboard\", icon: \"lucide:bar-chart-3\", link: \"#\" },\n    { title: \"Projects\", icon: \"lucide:folder-dot\", link: \"#\" },\n    { title: \"Tasks\", icon: \"lucide:list-checks\", link: \"#\" },\n    { title: \"Calendar\", icon: \"lucide:calendar\", link: \"#\" },\n    { title: \"Messages\", icon: \"lucide:mail\", link: \"#\" },\n    { title: \"Team\", icon: \"lucide:users\", link: \"#\" },\n  ];\n\n  const bottomNavigation = [\n    { title: \"Settings\", icon: \"lucide:settings\", link: \"#\" },\n    { title: \"Help\", icon: \"lucide:help-circle\", link: \"#\" },\n  ];\n</script>\n","category":"Sidebar","path":"App/Sidebar/BlockAppSidebar3.vue","components":["avatar","button","divider","scrollarea"]},{"name":"App Sidebar 4","fileName":"BlockAppSidebar4.vue","file":"<template>\n  <div class=\"relative min-h-screen\">\n    <Motion\n      v-if=\"!isExpanded\"\n      :initial=\"{ opacity: 0, scale: 0 }\"\n      :animate=\"{ opacity: 1, scale: 1, transition: { delay: 0.2 } }\"\n      class=\"absolute top-4 left-3\"\n    >\n      <!-- absolute button that is displayed when sidebar is collapsed -->\n      <UiButton size=\"icon-sm\" variant=\"outline\" @click=\"isExpanded = !isExpanded\">\n        <Icon name=\"lucide:panel-left-close\" class=\"size-4 text-muted-foreground\" />\n      </UiButton>\n    </Motion>\n\n    <aside\n      class=\"relative flex h-screen w-[280px] flex-col overflow-y-auto border-r bg-muted/30 transition-transform duration-300 ease-in-out\"\n      :class=\"[isExpanded ? 'translate-x-0' : '-translate-x-full']\"\n    >\n      <div class=\"flex items-center justify-between border-b p-4\">\n        <NuxtLink to=\"#\" class=\"flex items-center gap-2\">\n          <UiAvatar src=\"/icon.png\" alt=\"Company Logo\" class=\"size-7 rounded object-contain\" />\n          <span class=\"font-bold\">{{ COMPANY_NAME }}</span>\n        </NuxtLink>\n        <UiButton size=\"icon-sm\" variant=\"ghost\" @click=\"isExpanded = !isExpanded\">\n          <Icon name=\"lucide:panel-left-close\" class=\"size-4 text-muted-foreground\" />\n        </UiButton>\n      </div>\n\n      <UiScrollArea>\n        <div class=\"p-4\">\n          <div class=\"mb-4\">\n            <UiVeeInput v-model=\"search\" placeholder=\"Search...\" icon=\"lucide:search\" size=\"sm\" />\n          </div>\n\n          <div class=\"mb-6\">\n            <div class=\"mb-2 flex items-center justify-between px-2\">\n              <span class=\"text-xs font-semibold tracking-wider text-muted-foreground uppercase\"\n                >Main Menu</span\n              >\n              <UiBadge variant=\"secondary\" class=\"h-5 px-1.5 text-xs\">{{\n                navigation.length\n              }}</UiBadge>\n            </div>\n            <nav class=\"flex flex-col gap-0.5\">\n              <Motion\n                v-for=\"(n, i) in navigation\"\n                :key=\"i\"\n                :initial=\"{ opacity: 0, x: -10 }\"\n                :animate=\"{ opacity: 1, x: 0 }\"\n                :transition=\"{ delay: i * 0.05, type: 'spring', stiffness: 200, damping: 25 }\"\n              >\n                <UiButton\n                  :to=\"n.link\"\n                  size=\"sm\"\n                  variant=\"ghost\"\n                  class=\"w-full justify-start gap-3 px-2\"\n                >\n                  <Icon v-if=\"n.icon\" :name=\"n.icon\" class=\"size-4 text-muted-foreground\" />\n                  <span>{{ n.title }}</span>\n                  <UiBadge v-if=\"n.badge\" variant=\"secondary\" class=\"ml-auto h-5 px-1.5 text-xs\">\n                    {{ n.badge }}\n                  </UiBadge>\n                </UiButton>\n              </Motion>\n            </nav>\n          </div>\n\n          <div class=\"mb-6\">\n            <div class=\"mb-2 flex items-center justify-between px-2\">\n              <span class=\"text-xs font-semibold tracking-wider text-muted-foreground uppercase\"\n                >Workspaces</span\n              >\n              <UiButton size=\"icon-sm\" variant=\"ghost\">\n                <Icon name=\"lucide:plus\" class=\"size-3 text-muted-foreground\" />\n              </UiButton>\n            </div>\n            <nav class=\"flex flex-col gap-0.5\">\n              <Motion\n                v-for=\"(w, i) in workspaces\"\n                :key=\"i\"\n                :initial=\"{ opacity: 0, x: -10 }\"\n                :animate=\"{ opacity: 1, x: 0 }\"\n                :transition=\"{ delay: i * 0.1, type: 'spring', stiffness: 200, damping: 25 }\"\n              >\n                <UiButton\n                  :to=\"w.link\"\n                  size=\"sm\"\n                  variant=\"ghost\"\n                  class=\"w-full justify-start gap-3 px-2\"\n                >\n                  <div class=\"size-5 shrink-0 rounded\" :style=\"{ backgroundColor: w.color }\" />\n                  <span>{{ w.title }}</span>\n                </UiButton>\n              </Motion>\n            </nav>\n          </div>\n\n          <div>\n            <div class=\"mb-2 px-2\">\n              <span class=\"text-xs font-semibold tracking-wider text-muted-foreground uppercase\"\n                >Settings</span\n              >\n            </div>\n            <nav class=\"flex flex-col gap-0.5\">\n              <Motion\n                v-for=\"(s, i) in settings\"\n                :key=\"i\"\n                :initial=\"{ opacity: 0, x: -10 }\"\n                :animate=\"{ opacity: 1, x: 0 }\"\n                :transition=\"{ delay: i * 0.1, type: 'spring', stiffness: 200, damping: 25 }\"\n              >\n                <UiButton\n                  :to=\"s.link\"\n                  size=\"sm\"\n                  variant=\"ghost\"\n                  class=\"w-full justify-start gap-3 px-2\"\n                >\n                  <Icon v-if=\"s.icon\" :name=\"s.icon\" class=\"size-4 text-muted-foreground\" />\n                  <span>{{ s.title }}</span>\n                </UiButton>\n              </Motion>\n            </nav>\n          </div>\n        </div>\n      </UiScrollArea>\n\n      <div class=\"mt-auto shrink-0 border-t p-4\">\n        <div class=\"flex items-center gap-3\">\n          <UiAvatar :src=\"user.avatar\" class=\"size-9\" />\n          <div class=\"flex-1 overflow-hidden\">\n            <p class=\"truncate text-sm font-semibold\">{{ user.username }}</p>\n            <p class=\"truncate text-xs text-muted-foreground\">{{ user.role }}</p>\n          </div>\n          <UiDropdownMenu>\n            <UiDropdownMenuTrigger as-child>\n              <UiButton size=\"icon-sm\" variant=\"ghost\">\n                <Icon name=\"lucide:more-horizontal\" class=\"size-4 text-muted-foreground\" />\n              </UiButton>\n            </UiDropdownMenuTrigger>\n            <UiDropdownMenuContent align=\"end\" side=\"right\">\n              <UiDropdownMenuItem title=\"Profile\" icon=\"lucide:user\" />\n              <UiDropdownMenuItem title=\"Settings\" icon=\"lucide:settings\" />\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuItem title=\"Logout\" icon=\"lucide:log-out\" variant=\"destructive\" />\n            </UiDropdownMenuContent>\n          </UiDropdownMenu>\n        </div>\n      </div>\n    </aside>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  const search = ref<string>(\"\");\n  const isExpanded = ref<boolean>(true);\n\n  const user = {\n    avatar: \"https://randomuser.me/api/portraits/med/women/44.jpg\",\n    username: \"Emily Davis\",\n    role: \"Product Manager\",\n  };\n\n  const navigation = [\n    { title: \"Overview\", icon: \"lucide:layout-dashboard\", link: \"#\", badge: \"3\" },\n    { title: \"Inbox\", icon: \"lucide:inbox\", link: \"#\", badge: \"12\" },\n    { title: \"Projects\", icon: \"lucide:folder\", link: \"#\" },\n    { title: \"Tasks\", icon: \"lucide:check-square\", link: \"#\", badge: \"5\" },\n    { title: \"Calendar\", icon: \"lucide:calendar\", link: \"#\" },\n    { title: \"Documents\", icon: \"lucide:file-text\", link: \"#\" },\n  ];\n\n  const workspaces = [\n    { title: \"Design Team\", link: \"#\", color: \"#8b5cf6\" },\n    { title: \"Marketing\", link: \"#\", color: \"#ec4899\" },\n    { title: \"Development\", link: \"#\", color: \"#3b82f6\" },\n  ];\n\n  const settings = [\n    { title: \"Preferences\", icon: \"lucide:settings\", link: \"#\" },\n    { title: \"Help & Support\", icon: \"lucide:help-circle\", link: \"#\" },\n  ];\n</script>\n","category":"Sidebar","path":"App/Sidebar/BlockAppSidebar4.vue","components":["avatar","badge","button","dropdownmenu","dropdownmenucontent","dropdownmenuitem","dropdownmenuseparator","dropdownmenutrigger","scrollarea","veeinput"]},{"name":"App Sidebar 5","fileName":"BlockAppSidebar5.vue","file":"<template>\n  <aside class=\"h-screen w-[300px] border-r\">\n    <UiScrollArea class=\"size-full\">\n      <div class=\"flex h-screen flex-col\">\n        <div class=\"border-b p-4\">\n          <NuxtLink to=\"#\" class=\"flex items-center gap-3\">\n            <UiAvatar src=\"/icon.png\" alt=\"Company Logo\" class=\"size-8 rounded object-contain\" />\n            <div>\n              <p class=\"font-bold\">{{ COMPANY_NAME }}</p>\n              <p class=\"text-xs text-muted-foreground\">Admin Dashboard</p>\n            </div>\n          </NuxtLink>\n        </div>\n\n        <div class=\"flex-1 p-4\">\n          <div class=\"relative mb-4 flex flex-col gap-2 rounded-lg border p-3 dark:bg-primary/5\">\n            <div class=\"mb-2 flex items-center gap-2\">\n              <Icon name=\"lucide:zap\" class=\"size-3.5 text-primary\" />\n              <span class=\"text-sm font-medium\">Quick Actions</span>\n            </div>\n            <div class=\"grid grid-cols-2 gap-2\">\n              <UiButton size=\"sm\" variant=\"outline\" class=\"h-auto py-2\">\n                <Icon name=\"lucide:plus\" class=\"size-4\" />\n                <span class=\"text-xs\">New</span>\n              </UiButton>\n              <UiButton size=\"sm\" variant=\"outline\" class=\"h-auto py-2\">\n                <Icon name=\"lucide:upload\" class=\"size-4\" />\n                <span class=\"text-xs\">Upload</span>\n              </UiButton>\n            </div>\n            <UiBorderBeam :duration=\"15\" />\n          </div>\n\n          <nav class=\"flex flex-col gap-6\">\n            <div v-for=\"(section, index) in sections\" :key=\"index\">\n              <div class=\"mb-2 px-2\">\n                <span class=\"text-xs tracking-wider text-muted-foreground/70 uppercase\">{{\n                  section.title\n                }}</span>\n              </div>\n              <div class=\"flex flex-col gap-0.5\">\n                <template v-for=\"(item, i) in section.items\" :key=\"i\">\n                  <UiButton\n                    v-if=\"!('children' in item)\"\n                    :to=\"item.link\"\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    class=\"justify-start gap-3 px-2\"\n                  >\n                    <Icon v-if=\"item.icon\" :name=\"item.icon\" class=\"size-4 text-muted-foreground\" />\n                    <span>{{ item.title }}</span>\n                    <UiBadge\n                      v-if=\"item.badge\"\n                      :variant=\"(item.badgeVariant as any) || 'secondary'\"\n                      class=\"ml-auto h-5 px-1.5 text-xs\"\n                    >\n                      {{ item.badge }}\n                    </UiBadge>\n                  </UiButton>\n                  <UiCollapsible v-else>\n                    <UiCollapsibleTrigger as-child>\n                      <UiButton\n                        size=\"sm\"\n                        variant=\"ghost\"\n                        class=\"group w-full justify-start gap-3 px-2\"\n                      >\n                        <Icon\n                          v-if=\"item.icon\"\n                          :name=\"item.icon\"\n                          class=\"size-4 text-muted-foreground\"\n                        />\n                        <span>{{ item.title }}</span>\n                        <Icon\n                          name=\"lucide:chevron-down\"\n                          class=\"ml-auto size-4 text-muted-foreground transition group-data-[state=open]:rotate-180\"\n                        />\n                      </UiButton>\n                    </UiCollapsibleTrigger>\n                    <UiCollapsibleContent class=\"flex flex-col gap-0.5 pr-2 pl-6\">\n                      <UiButton\n                        v-for=\"(child, ci) in item.children\"\n                        :key=\"ci\"\n                        :to=\"child.link\"\n                        size=\"sm\"\n                        variant=\"ghost\"\n                        class=\"justify-start gap-3 px-2\"\n                      >\n                        <span>{{ child.title }}</span>\n                      </UiButton>\n                    </UiCollapsibleContent>\n                  </UiCollapsible>\n                </template>\n              </div>\n            </div>\n          </nav>\n        </div>\n\n        <div class=\"border-t p-4\">\n          <div class=\"mb-3 flex items-center gap-3\">\n            <UiAvatar :src=\"user.avatar\" class=\"size-10\" />\n            <div class=\"flex-1\">\n              <p class=\"text-sm font-semibold\">{{ user.username }}</p>\n              <p class=\"text-xs text-muted-foreground\">{{ user.email }}</p>\n            </div>\n            <UiDropdownMenu>\n              <UiDropdownMenuTrigger as-child>\n                <UiButton size=\"icon-sm\" variant=\"ghost\">\n                  <Icon name=\"lucide:more-vertical\" class=\"size-4 text-muted-foreground\" />\n                </UiButton>\n              </UiDropdownMenuTrigger>\n              <UiDropdownMenuContent align=\"end\">\n                <UiDropdownMenuItem>\n                  <Icon name=\"lucide:user\" class=\"size-4\" />\n                  Profile\n                </UiDropdownMenuItem>\n                <UiDropdownMenuItem>\n                  <Icon name=\"lucide:settings\" class=\"size-4\" />\n                  Settings\n                </UiDropdownMenuItem>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem variant=\"destructive\">\n                  <Icon name=\"lucide:log-out\" class=\"size-4\" />\n                  Sign out\n                </UiDropdownMenuItem>\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </div>\n          <UiProgress :model-value=\"storageUsed\" class=\"h-1.5\" />\n          <p class=\"mt-2 text-xs text-muted-foreground\">{{ storageUsed }}% storage used</p>\n        </div>\n      </div>\n    </UiScrollArea>\n  </aside>\n</template>\n\n<script lang=\"ts\" setup>\n  type Child = { title: string; link: string };\n  type Item = {\n    title: string;\n    icon?: string;\n    link?: string;\n    badge?: string;\n    badgeVariant?: string;\n    children?: Child[];\n  };\n  type Section = { title: string; items: Item[] };\n\n  const storageUsed = 68;\n\n  const user = {\n    avatar: \"https://randomuser.me/api/portraits/med/men/75.jpg\",\n    username: \"Alex Morgan\",\n    email: \"alex@company.com\",\n  };\n\n  const sections: Section[] = [\n    {\n      title: \"Main\",\n      items: [\n        { title: \"Dashboard\", icon: \"lucide:home\", link: \"#\" },\n        {\n          title: \"Analytics\",\n          icon: \"lucide:bar-chart-2\",\n          link: \"#\",\n          badge: \"New\",\n          badgeVariant: \"default\",\n        },\n        { title: \"Reports\", icon: \"lucide:file-text\", link: \"#\" },\n      ],\n    },\n    {\n      title: \"Management\",\n      items: [\n        {\n          title: \"Users\",\n          icon: \"lucide:users\",\n          children: [\n            { title: \"All Users\", link: \"#\" },\n            { title: \"Roles\", link: \"#\" },\n            { title: \"Permissions\", link: \"#\" },\n          ],\n        },\n        { title: \"Projects\", icon: \"lucide:folder\", link: \"#\", badge: \"12\" },\n        { title: \"Tasks\", icon: \"lucide:check-circle\", link: \"#\", badge: \"5\" },\n      ],\n    },\n    {\n      title: \"Support\",\n      items: [\n        { title: \"Documentation\", icon: \"lucide:book-open\", link: \"#\" },\n        { title: \"Help Center\", icon: \"lucide:help-circle\", link: \"#\" },\n      ],\n    },\n  ];\n</script>\n","category":"Sidebar","path":"App/Sidebar/BlockAppSidebar5.vue","components":["avatar","badge","borderbeam","button","collapsible","collapsiblecontent","collapsibletrigger","dropdownmenu","dropdownmenucontent","dropdownmenuitem","dropdownmenuseparator","dropdownmenutrigger","progress","scrollarea"]},{"name":"App Sidebar 6","fileName":"BlockAppSidebar6.vue","file":"<template>\n  <aside class=\"flex h-screen\">\n    <div class=\"flex w-16 flex-col items-center border-r bg-muted/30 py-4\">\n      <Motion\n        :initial=\"{ opacity: 0, y: -10 }\"\n        :animate=\"{ opacity: 1, y: 0 }\"\n        :transition=\"{ type: 'spring', stiffness: 300, damping: 25 }\"\n        class=\"mb-10\"\n      >\n        <NuxtLink to=\"#\">\n          <UiAvatar src=\"/icon.png\" alt=\"Company Logo\" class=\"size-8 rounded object-contain\" />\n        </NuxtLink>\n      </Motion>\n\n      <nav class=\"flex flex-1 flex-col gap-2\">\n        <Motion\n          v-for=\"(item, i) in mainNav\"\n          :key=\"i\"\n          :initial=\"{ opacity: 0, scale: 0.8 }\"\n          :animate=\"{ opacity: 1, scale: 1 }\"\n          :transition=\"{ delay: i * 0.05, type: 'spring', stiffness: 300, damping: 25 }\"\n        >\n          <UiTooltip>\n            <UiTooltipTrigger as-child>\n              <UiButton\n                :variant=\"item.active == activeSection?.active ? 'secondary' : 'ghost'\"\n                size=\"icon\"\n                @click=\"setActiveSection(item)\"\n              >\n                <Icon :name=\"item.icon\" class=\"size-[18px]\" />\n              </UiButton>\n            </UiTooltipTrigger>\n            <UiTooltipContent side=\"right\">{{ item.title }}</UiTooltipContent>\n          </UiTooltip>\n        </Motion>\n      </nav>\n\n      <UiDivider class=\"my-2\" />\n\n      <UiTooltip>\n        <UiTooltipTrigger as-child>\n          <UiButton variant=\"ghost\" size=\"icon\">\n            <Icon name=\"lucide:settings\" class=\"size-[18px]\" />\n          </UiButton>\n        </UiTooltipTrigger>\n        <UiTooltipContent side=\"right\">Settings</UiTooltipContent>\n      </UiTooltip>\n\n      <UiDropdownMenu>\n        <UiDropdownMenuTrigger>\n          <UiAvatar :src=\"user.avatar\" class=\"mt-4\" />\n        </UiDropdownMenuTrigger>\n        <UiDropdownMenuContent side=\"right\">\n          <UiDropdownMenuLabel class=\"flex flex-col\">\n            <span>{{ user.username }}</span>\n            <span class=\"text-sm font-normal text-muted-foreground\">{{ user.email }}</span>\n          </UiDropdownMenuLabel>\n          <UiDropdownMenuSeparator />\n          <UiDropdownMenuItem title=\"View profile\" icon=\"lucide:user\" />\n          <UiDropdownMenuItem title=\"Edit profile\" icon=\"lucide:pen\" />\n          <UiDropdownMenuItem title=\"Change password\" icon=\"lucide:lock\" />\n          <UiDropdownMenuItem title=\"Delete account\" icon=\"lucide:trash\" />\n          <UiDropdownMenuSeparator />\n          <UiDropdownMenuItem variant=\"destructive\" title=\"Logout\" icon=\"lucide:log-out\" />\n        </UiDropdownMenuContent>\n      </UiDropdownMenu>\n    </div>\n\n    <div v-if=\"activeSection\" class=\"w-[280px] border-r bg-background\">\n      <UiScrollArea class=\"h-full\">\n        <div class=\"flex h-screen flex-col p-4\">\n          <div class=\"mb-6\">\n            <div class=\"mb-2 flex items-center gap-2\">\n              <Icon :name=\"activeSection.icon\" class=\"size-5 text-primary\" />\n              <h2 class=\"font-semibold\">{{ activeSection.title }}</h2>\n            </div>\n            <p class=\"text-sm text-muted-foreground\">{{ activeSection.description }}</p>\n          </div>\n\n          <div class=\"mb-4\">\n            <UiVeeInput v-model=\"search\" placeholder=\"Search...\" icon=\"lucide:search\" />\n          </div>\n\n          <nav class=\"flex flex-1 flex-col gap-1\">\n            <Motion\n              v-for=\"(item, i) in activeSection.items\"\n              :key=\"`${item.title}-${i}-${item.icon}`\"\n              :initial=\"{ opacity: 0, x: -10 }\"\n              :animate=\"{ opacity: 1, x: 0 }\"\n              :transition=\"{ delay: i * 0.05 }\"\n            >\n              <UiButton\n                :to=\"item.link\"\n                size=\"sm\"\n                variant=\"ghost\"\n                class=\"w-full justify-start gap-3 px-2\"\n              >\n                <Icon v-if=\"item.icon\" :name=\"item.icon\" class=\"size-4 text-muted-foreground\" />\n                <span>{{ item.title }}</span>\n                <span v-if=\"item.count\" class=\"ml-auto text-xs text-muted-foreground\">\n                  {{ item.count }}\n                </span>\n              </UiButton>\n            </Motion>\n          </nav>\n\n          <UiButton class=\"mt-auto w-full\" size=\"sm\">\n            <Icon name=\"lucide:plus\" class=\"size-4\" />\n            New {{ activeSection.title }}\n          </UiButton>\n        </div>\n      </UiScrollArea>\n    </div>\n  </aside>\n</template>\n\n<script lang=\"ts\" setup>\n  type NavItem = {\n    title: string;\n    icon: string;\n    active: boolean;\n    description: string;\n    items: Array<{\n      title: string;\n      link: string;\n      icon?: string;\n      count?: number;\n    }>;\n  };\n\n  const search = ref<string>(\"\");\n  const activeSection = ref<NavItem | null>(null);\n\n  const user = {\n    avatar: \"https://randomuser.me/api/portraits/med/women/67.jpg\",\n    username: \"Sarah Smith\",\n    email: \"sarah.smith@example.com\",\n  };\n\n  const mainNav: Array<NavItem> = [\n    {\n      title: \"Projects\",\n      icon: \"lucide:folder\",\n      active: false,\n      description: \"Manage your projects and workspaces\",\n      items: [\n        { title: \"All Projects\", link: \"#\", icon: \"lucide:grid-3x3\", count: 24 },\n        { title: \"Active\", link: \"#\", icon: \"lucide:play\", count: 8 },\n        { title: \"Archived\", link: \"#\", icon: \"lucide:archive\", count: 16 },\n        { title: \"Templates\", link: \"#\", icon: \"lucide:layout-template\" },\n      ],\n    },\n    {\n      title: \"Tasks\",\n      icon: \"lucide:check-square\",\n      active: false,\n      description: \"View and manage your tasks\",\n      items: [\n        { title: \"My Tasks\", link: \"#\", icon: \"lucide:user\", count: 12 },\n        { title: \"Assigned to me\", link: \"#\", icon: \"lucide:user-check\", count: 8 },\n        { title: \"Completed\", link: \"#\", icon: \"lucide:check-circle-2\", count: 45 },\n        { title: \"Overdue\", link: \"#\", icon: \"lucide:alert-circle\", count: 3 },\n      ],\n    },\n    {\n      title: \"Team\",\n      icon: \"lucide:users\",\n      active: false,\n      description: \"Collaborate with your team members\",\n      items: [\n        { title: \"All Members\", link: \"#\", icon: \"lucide:users\", count: 32 },\n        { title: \"Departments\", link: \"#\", icon: \"lucide:building-2\" },\n        { title: \"Invitations\", link: \"#\", icon: \"lucide:mail\", count: 2 },\n        { title: \"Activity\", link: \"#\", icon: \"lucide:activity\" },\n      ],\n    },\n    {\n      title: \"Messages\",\n      icon: \"lucide:message-square\",\n      active: false,\n      description: \"Team communication and messages\",\n      items: [\n        { title: \"Inbox\", link: \"#\", icon: \"lucide:inbox\", count: 5 },\n        { title: \"Sent\", link: \"#\", icon: \"lucide:send\" },\n        { title: \"Drafts\", link: \"#\", icon: \"lucide:file-edit\", count: 2 },\n        { title: \"Archived\", link: \"#\", icon: \"lucide:archive\" },\n      ],\n    },\n  ];\n\n  const setActiveSection = (item: any) => {\n    mainNav.forEach((nav) => (nav.active = false));\n    item.active = true;\n    activeSection.value = item;\n  };\n\n  // Set first item as active by default\n  onMounted(() => {\n    setActiveSection(mainNav[0]);\n  });\n</script>\n","category":"Sidebar","path":"App/Sidebar/BlockAppSidebar6.vue","components":["avatar","button","divider","dropdownmenu","dropdownmenucontent","dropdownmenuitem","dropdownmenulabel","dropdownmenuseparator","dropdownmenutrigger","scrollarea","tooltip","tooltipcontent","tooltiptrigger","veeinput"]},{"name":"App Sidebar 7","fileName":"BlockAppSidebar7.vue","file":"<template>\n  <DefineNavItem v-slot=\"{ project }\">\n    <UiButton\n      :to=\"project?.link\"\n      size=\"sm\"\n      variant=\"ghost\"\n      class=\"h-auto w-full justify-start gap-3 px-2 py-2\"\n    >\n      <div\n        v-if=\"project.color\"\n        class=\"size-2 shrink-0 rounded-full\"\n        :style=\"{ backgroundColor: project.color }\"\n      />\n      <div class=\"flex-1 overflow-hidden text-left\">\n        <p class=\"truncate text-sm\">{{ project.title }}</p>\n        <p v-if=\"project.team\" class=\"truncate text-xs text-muted-foreground\">{{ project.team }}</p>\n        <p v-if=\"project.updated\" class=\"truncate text-xs text-muted-foreground\">\n          {{ project.updated }}\n        </p>\n      </div>\n      <UiButton\n        size=\"icon-sm\"\n        variant=\"ghost\"\n        class=\"shrink-0\"\n        @click.prevent=\"toggleStar(project)\"\n      >\n        <Icon\n          :name=\"project.starred ? 'lucide:star' : 'lucide:star'\"\n          :class=\"project.starred ? 'fill-yellow-400 text-yellow-400' : ''\"\n          class=\"size-3.5 text-muted-foreground\"\n        />\n      </UiButton>\n    </UiButton>\n  </DefineNavItem>\n  <aside class=\"h-screen w-[320px] border-r\">\n    <UiScrollArea class=\"size-full\">\n      <div class=\"flex h-screen flex-col\">\n        <div class=\"flex items-center justify-between border-b px-4 py-3\">\n          <NuxtLink to=\"#\" class=\"flex items-center gap-2\">\n            <UiAvatar src=\"/icon.png\" alt=\"Company Logo\" class=\"size-7 rounded object-contain\" />\n            <span class=\"font-bold\">{{ COMPANY_NAME }}</span>\n          </NuxtLink>\n          <UiDropdownMenu>\n            <UiDropdownMenuTrigger as-child>\n              <UiButton size=\"icon-sm\" variant=\"ghost\">\n                <Icon name=\"lucide:plus\" class=\"size-4 text-muted-foreground\" />\n              </UiButton>\n            </UiDropdownMenuTrigger>\n            <UiDropdownMenuContent align=\"end\">\n              <UiDropdownMenuItem>\n                <Icon name=\"lucide:file-plus\" class=\"size-4\" />\n                New Project\n              </UiDropdownMenuItem>\n              <UiDropdownMenuItem>\n                <Icon name=\"lucide:folder-plus\" class=\"size-4\" />\n                New Folder\n              </UiDropdownMenuItem>\n              <UiDropdownMenuSeparator />\n              <UiDropdownMenuItem>\n                <Icon name=\"lucide:upload\" class=\"size-4\" />\n                Import\n              </UiDropdownMenuItem>\n            </UiDropdownMenuContent>\n          </UiDropdownMenu>\n        </div>\n\n        <div class=\"flex-1 p-4\">\n          <div class=\"mb-4\">\n            <UiVeeInput v-model=\"search\" placeholder=\"Search projects...\" icon=\"lucide:search\" />\n          </div>\n\n          <UiTabs default-value=\"recent\" class=\"w-full\">\n            <UiTabsList class=\"mb-4 grid w-full grid-cols-3\">\n              <UiTabsTrigger value=\"recent\">Recent</UiTabsTrigger>\n              <UiTabsTrigger value=\"starred\">Starred</UiTabsTrigger>\n              <UiTabsTrigger value=\"all\">All</UiTabsTrigger>\n            </UiTabsList>\n\n            <UiTabsContent value=\"recent\" class=\"space-y-1\">\n              <div v-for=\"(project, i) in recentProjects\" :key=\"i\">\n                <NavItem :project=\"project\" />\n              </div>\n            </UiTabsContent>\n\n            <UiTabsContent value=\"starred\" class=\"space-y-1\">\n              <div v-for=\"(project, i) in starredProjects\" :key=\"i\">\n                <NavItem :project=\"project\" />\n              </div>\n            </UiTabsContent>\n\n            <UiTabsContent value=\"all\" class=\"space-y-1\">\n              <div v-for=\"(project, i) in allProjects\" :key=\"i\">\n                <NavItem :project=\"project\" />\n              </div>\n            </UiTabsContent>\n          </UiTabs>\n\n          <UiDivider class=\"my-4\" />\n\n          <div>\n            <div class=\"mb-2 px-2\">\n              <span class=\"text-xs font-semibold tracking-wider text-muted-foreground uppercase\"\n                >Quick Links</span\n              >\n            </div>\n            <nav class=\"flex flex-col gap-0.5\">\n              <UiButton\n                v-for=\"(link, i) in quickLinks\"\n                :key=\"i\"\n                :to=\"link.link\"\n                size=\"sm\"\n                variant=\"ghost\"\n                class=\"justify-start gap-3 px-2\"\n              >\n                <Icon :name=\"link.icon\" class=\"size-4 text-muted-foreground\" />\n                <span>{{ link.title }}</span>\n              </UiButton>\n            </nav>\n          </div>\n        </div>\n\n        <div class=\"border-t p-4\">\n          <div class=\"flex items-center gap-3\">\n            <UiAvatar :src=\"user.avatar\" class=\"size-9\" />\n            <div class=\"flex-1 overflow-hidden\">\n              <p class=\"truncate text-sm font-semibold\">{{ user.username }}</p>\n              <p class=\"truncate text-xs text-muted-foreground\">{{ user.workspace }}</p>\n            </div>\n            <UiDropdownMenu>\n              <UiDropdownMenuTrigger as-child>\n                <UiButton size=\"icon-sm\" variant=\"ghost\">\n                  <Icon name=\"lucide:chevrons-up-down\" class=\"size-4 text-muted-foreground\" />\n                </UiButton>\n              </UiDropdownMenuTrigger>\n              <UiDropdownMenuContent align=\"end\">\n                <UiDropdownMenuItem>\n                  <Icon name=\"lucide:user\" class=\"size-4\" />\n                  Profile\n                </UiDropdownMenuItem>\n                <UiDropdownMenuItem>\n                  <Icon name=\"lucide:building-2\" class=\"size-4\" />\n                  Switch Workspace\n                </UiDropdownMenuItem>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem>\n                  <Icon name=\"lucide:log-out\" class=\"size-4\" />\n                  Sign out\n                </UiDropdownMenuItem>\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </div>\n        </div>\n      </div>\n    </UiScrollArea>\n  </aside>\n</template>\n\n<script lang=\"ts\" setup>\n  const search = ref<string>(\"\");\n\n  const user = {\n    avatar: \"https://randomuser.me/api/portraits/med/men/32.jpg\",\n    username: \"Chris Anderson\",\n    workspace: \"Design Team\",\n  };\n\n  type Project = {\n    title: string;\n    updated?: string;\n    color?: string;\n    starred?: boolean;\n    link?: string;\n    team?: string;\n  };\n\n  const recentProjects = ref<Array<Project>>([\n    {\n      title: \"Website Redesign\",\n      updated: \"2 hours ago\",\n      color: \"#8b5cf6\",\n      starred: true,\n      link: \"#\",\n    },\n    { title: \"Mobile App\", updated: \"5 hours ago\", color: \"#ec4899\", starred: false, link: \"#\" },\n    { title: \"Brand Identity\", updated: \"1 day ago\", color: \"#3b82f6\", starred: false, link: \"#\" },\n    {\n      title: \"Marketing Campaign\",\n      updated: \"2 days ago\",\n      color: \"#f59e0b\",\n      starred: true,\n      link: \"#\",\n    },\n  ]);\n\n  const starredProjects = computed(() => recentProjects.value.filter((project) => project.starred));\n\n  const allProjects = ref<Array<Project>>([\n    { title: \"Website Redesign\", team: \"Design Team\", color: \"#8b5cf6\", link: \"#\" },\n    { title: \"Mobile App\", team: \"Development\", color: \"#ec4899\", link: \"#\" },\n    { title: \"Brand Identity\", team: \"Design Team\", color: \"#3b82f6\", link: \"#\" },\n    { title: \"Marketing Campaign\", team: \"Marketing\", color: \"#f59e0b\", link: \"#\" },\n    { title: \"Product Launch\", team: \"Product\", color: \"#10b981\", link: \"#\" },\n    { title: \"Customer Portal\", team: \"Development\", color: \"#06b6d4\", link: \"#\" },\n  ]);\n\n  const quickLinks = [\n    { title: \"Settings\", icon: \"lucide:settings\", link: \"#\" },\n    { title: \"Team\", icon: \"lucide:users\", link: \"#\" },\n    { title: \"Help\", icon: \"lucide:help-circle\", link: \"#\" },\n  ];\n\n  const [DefineNavItem, NavItem] = createReusableTemplate();\n\n  const toggleStar = (project: any) => {\n    project.starred = !project.starred;\n  };\n</script>\n","category":"Sidebar","path":"App/Sidebar/BlockAppSidebar7.vue","components":["avatar","button","divider","dropdownmenu","dropdownmenucontent","dropdownmenuitem","dropdownmenuseparator","dropdownmenutrigger","scrollarea","tabs","tabscontent","tabslist","tabstrigger","veeinput"]},{"name":"Sidebar 01","fileName":"BlockSidebar01.vue","file":"<template>\n  <UiSidebarProvider>\n    <!-- App Sidebar -->\n    <UiSidebar>\n      <UiSidebarHeader>\n        <!-- Version switcher -->\n        <UiSidebarMenu>\n          <UiSidebarMenuItem>\n            <UiDropdownMenu>\n              <UiDropdownMenuTrigger as-child>\n                <UiSidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div\n                    class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\"\n                  >\n                    <Icon name=\"lucide:gallery-vertical-end\" class=\"size-4\" />\n                  </div>\n                  <div class=\"flex flex-col gap-0.5 leading-none\">\n                    <span class=\"font-semibold\">Documentation</span>\n                    <span class=\"\">v{{ selectedVersion }}</span>\n                  </div>\n                  <Icon name=\"lucide:chevrons-up-down\" class=\"ml-auto\" />\n                </UiSidebarMenuButton>\n              </UiDropdownMenuTrigger>\n              <UiDropdownMenuContent class=\"w-(--reka-dropdown-menu-trigger-width)\" align=\"start\">\n                <UiDropdownMenuItem\n                  v-for=\"version in data.versions\"\n                  :key=\"version\"\n                  class=\"cursor-pointer\"\n                  @select=\"selectedVersion = version\"\n                >\n                  v{{ version }}\n                  <Icon v-if=\"version === selectedVersion\" name=\"lucide:check\" class=\"ml-auto\" />\n                </UiDropdownMenuItem>\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiSidebarMenuItem>\n        </UiSidebarMenu>\n        <!-- Search form -->\n        <form>\n          <UiSidebarGroup class=\"py-0\">\n            <UiSidebarGroupContent class=\"relative\">\n              <UiLabel for=\"search\" class=\"sr-only\"> Search </UiLabel>\n              <UiSidebarInput id=\"search\" placeholder=\"Search the docs...\" class=\"pl-8\" />\n              <Icon\n                name=\"lucide:search\"\n                class=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n              />\n            </UiSidebarGroupContent>\n          </UiSidebarGroup>\n        </form>\n      </UiSidebarHeader>\n      <UiSidebarContent>\n        <!-- We create a SidebarGroup for each parent. -->\n        <template v-for=\"item in data.navMain\" :key=\"item.title\">\n          <UiSidebarGroup>\n            <UiSidebarGroupLabel :label=\"item.title\" />\n            <UiSidebarGroupContent>\n              <UiSidebarMenu>\n                <template v-for=\"child in item.items\" :key=\"`child-${child.title}`\">\n                  <UiSidebarMenuItem>\n                    <UiSidebarMenuButton as-child :is-active=\"child.isActive\">\n                      <NuxtLink :href=\"child.url\">{{ child.title }}</NuxtLink>\n                    </UiSidebarMenuButton>\n                  </UiSidebarMenuItem>\n                </template>\n              </UiSidebarMenu>\n            </UiSidebarGroupContent>\n          </UiSidebarGroup>\n        </template>\n      </UiSidebarContent>\n      <UiSidebarRail />\n    </UiSidebar>\n    <!-- Sidebar main content -->\n    <UiSidebarInset>\n      <!-- Navbar -->\n      <UiNavbar sticky class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <UiSidebarTrigger class=\"-ml-1\" />\n        <UiDivider orientation=\"vertical\" class=\"mr-2 h-4 w-px\" />\n        <UiBreadcrumbs :items=\"breadcrumbItems\" />\n      </UiNavbar>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <UiPlaceholder v-for=\"n in 3\" :key=\"n\" class=\"aspect-video rounded-lg\" />\n        </div>\n        <UiPlaceholder class=\"min-h-dvh flex-1 rounded-lg md:min-h-min\" />\n      </div>\n    </UiSidebarInset>\n  </UiSidebarProvider>\n</template>\n\n<script lang=\"ts\" setup>\n  // Breadcrumb items\n  const breadcrumbItems = [\n    { label: \"Building Your Application\", link: \"#\" },\n    { label: \"Data Fetching\", link: \"#\" },\n  ];\n  // This is sample data.\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  };\n  const selectedVersion = ref(data.versions[0]);\n  useSeoMeta({ title: \"Sidebar 01\" });\n</script>\n","category":"Sidebar","path":"Sidebar/BlockSidebar01.vue","components":["breadcrumbs","divider","dropdownmenu","dropdownmenucontent","dropdownmenuitem","dropdownmenutrigger","label","navbar","placeholder","sidebar","sidebarcontent","sidebargroup","sidebargroupcontent","sidebargrouplabel","sidebarheader","sidebarinput","sidebarinset","sidebarmenu","sidebarmenubutton","sidebarmenuitem","sidebarprovider","sidebarrail","sidebartrigger"]},{"name":"Sidebar 02","fileName":"BlockSidebar02.vue","file":"<template>\n  <UiSidebarProvider>\n    <!-- App Sidebar -->\n    <UiSidebar>\n      <UiSidebarHeader>\n        <!-- Version switcher -->\n        <UiSidebarMenu>\n          <UiSidebarMenuItem>\n            <UiDropdownMenu>\n              <UiDropdownMenuTrigger as-child>\n                <UiSidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div\n                    class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\"\n                  >\n                    <Icon name=\"lucide:gallery-vertical-end\" class=\"size-4\" />\n                  </div>\n                  <div class=\"flex flex-col gap-0.5 leading-none\">\n                    <span class=\"font-semibold\">Documentation</span>\n                    <span class=\"\">v{{ selectedVersion }}</span>\n                  </div>\n                  <Icon name=\"lucide:chevrons-up-down\" class=\"ml-auto\" />\n                </UiSidebarMenuButton>\n              </UiDropdownMenuTrigger>\n              <UiDropdownMenuContent class=\"w-(--reka-dropdown-menu-trigger-width)\" align=\"start\">\n                <UiDropdownMenuItem\n                  v-for=\"version in data.versions\"\n                  :key=\"version\"\n                  class=\"cursor-pointer\"\n                  @select=\"selectedVersion = version\"\n                >\n                  v{{ version }}\n                  <Icon v-if=\"version === selectedVersion\" name=\"lucide:check\" class=\"ml-auto\" />\n                </UiDropdownMenuItem>\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiSidebarMenuItem>\n        </UiSidebarMenu>\n        <!-- Search form -->\n        <form>\n          <UiSidebarGroup class=\"py-0\">\n            <UiSidebarGroupContent class=\"relative\">\n              <UiLabel for=\"search\" class=\"sr-only\"> Search </UiLabel>\n              <UiSidebarInput id=\"search\" placeholder=\"Search the docs...\" class=\"pl-8\" />\n              <Icon\n                name=\"lucide:search\"\n                class=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n              />\n            </UiSidebarGroupContent>\n          </UiSidebarGroup>\n        </form>\n      </UiSidebarHeader>\n      <UiSidebarContent>\n        <!-- We create a SidebarGroup for each parent. -->\n        <template v-for=\"item in data.navMain\" :key=\"item.title\">\n          <UiCollapsible v-slot=\"{ open }\" default-open>\n            <UiSidebarGroup>\n              <UiCollapsibleTrigger as-child>\n                <UiSidebarGroupLabel\n                  class=\"text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                  >{{ item.title }}\n                  <Icon\n                    class=\"ml-auto transition-transform\"\n                    :class=\"[open && 'rotate-90']\"\n                    name=\"lucide:chevron-right\"\n                /></UiSidebarGroupLabel>\n              </UiCollapsibleTrigger>\n              <UiCollapsibleContent>\n                <UiSidebarGroupContent>\n                  <UiSidebarMenu>\n                    <template v-for=\"child in item.items\" :key=\"`child-${child.title}`\">\n                      <UiSidebarMenuItem>\n                        <UiSidebarMenuButton as-child :is-active=\"child.isActive\">\n                          <NuxtLink :href=\"child.url\">{{ child.title }}</NuxtLink>\n                        </UiSidebarMenuButton>\n                      </UiSidebarMenuItem>\n                    </template>\n                  </UiSidebarMenu>\n                </UiSidebarGroupContent>\n              </UiCollapsibleContent>\n            </UiSidebarGroup>\n          </UiCollapsible>\n        </template>\n      </UiSidebarContent>\n      <UiSidebarRail />\n    </UiSidebar>\n    <!-- Sidebar main content -->\n    <UiSidebarInset>\n      <!-- Navbar -->\n      <UiNavbar sticky class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <UiSidebarTrigger class=\"-ml-1\" />\n        <UiDivider orientation=\"vertical\" class=\"mr-2 h-4 w-px\" />\n        <UiBreadcrumbs :items=\"breadcrumbItems\" />\n      </UiNavbar>\n      <div class=\"grid auto-rows-min gap-4 p-4 md:grid-cols-3\">\n        <UiPlaceholder v-for=\"n in 30\" :key=\"n\" class=\"aspect-video rounded-lg\" />\n      </div>\n    </UiSidebarInset>\n  </UiSidebarProvider>\n</template>\n\n<script lang=\"ts\" setup>\n  // Breadcrumb items\n  const breadcrumbItems = [\n    { label: \"Building Your Application\", link: \"#\" },\n    { label: \"Data Fetching\", link: \"#\" },\n  ];\n  // This is sample data.\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  };\n  const selectedVersion = ref(data.versions[0]);\n  useSeoMeta({ title: \"A sidebar with collapsible sections.\" });\n</script>\n","category":"Sidebar","path":"Sidebar/BlockSidebar02.vue","components":["breadcrumbs","collapsible","collapsiblecontent","collapsibletrigger","divider","dropdownmenu","dropdownmenucontent","dropdownmenuitem","dropdownmenutrigger","label","navbar","placeholder","sidebar","sidebarcontent","sidebargroup","sidebargroupcontent","sidebargrouplabel","sidebarheader","sidebarinput","sidebarinset","sidebarmenu","sidebarmenubutton","sidebarmenuitem","sidebarprovider","sidebarrail","sidebartrigger"]},{"name":"Sidebar 03","fileName":"BlockSidebar03.vue","file":"<template>\n  <UiSidebarProvider>\n    <!-- App Sidebar -->\n    <UiSidebar>\n      <UiSidebarHeader>\n        <!-- Version switcher -->\n        <UiSidebarMenu>\n          <UiSidebarMenuItem>\n            <UiDropdownMenu>\n              <UiDropdownMenuTrigger as-child>\n                <UiSidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div\n                    class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\"\n                  >\n                    <Icon name=\"lucide:gallery-vertical-end\" class=\"size-4\" />\n                  </div>\n                  <div class=\"flex flex-col gap-0.5 leading-none\">\n                    <span class=\"font-semibold\">Documentation</span>\n                    <span class=\"\">v{{ selectedVersion }}</span>\n                  </div>\n                  <Icon name=\"lucide:chevrons-up-down\" class=\"ml-auto\" />\n                </UiSidebarMenuButton>\n              </UiDropdownMenuTrigger>\n              <UiDropdownMenuContent class=\"w-(--reka-dropdown-menu-trigger-width)\" align=\"start\">\n                <UiDropdownMenuItem\n                  v-for=\"version in data.versions\"\n                  :key=\"version\"\n                  class=\"cursor-pointer\"\n                  @select=\"selectedVersion = version\"\n                >\n                  v{{ version }}\n                  <Icon v-if=\"version === selectedVersion\" name=\"lucide:check\" class=\"ml-auto\" />\n                </UiDropdownMenuItem>\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiSidebarMenuItem>\n        </UiSidebarMenu>\n        <!-- Search form -->\n        <form>\n          <UiSidebarGroup class=\"py-0\">\n            <UiSidebarGroupContent class=\"relative\">\n              <UiLabel for=\"search\" class=\"sr-only\"> Search </UiLabel>\n              <UiSidebarInput id=\"search\" placeholder=\"Search the docs...\" class=\"pl-8\" />\n              <Icon\n                name=\"lucide:search\"\n                class=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n              />\n            </UiSidebarGroupContent>\n          </UiSidebarGroup>\n        </form>\n      </UiSidebarHeader>\n      <UiSidebarContent>\n        <UiSidebarGroup>\n          <UiSidebarMenu>\n            <UiSidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <UiSidebarMenuButton as-child>\n                <NuxtLink :href=\"item.url\" class=\"font-medium\">\n                  {{ item.title }}\n                </NuxtLink>\n              </UiSidebarMenuButton>\n              <UiSidebarMenuSub v-if=\"item.items?.length\">\n                <UiSidebarMenuSubItem v-for=\"child in item.items\" :key=\"child.title\">\n                  <UiSidebarMenuSubButton as-child :is-active=\"child.isActive\">\n                    <NuxtLink :href=\"child.url\">{{ child.title }}</NuxtLink>\n                  </UiSidebarMenuSubButton>\n                </UiSidebarMenuSubItem>\n              </UiSidebarMenuSub>\n            </UiSidebarMenuItem>\n          </UiSidebarMenu>\n        </UiSidebarGroup>\n      </UiSidebarContent>\n      <UiSidebarRail />\n    </UiSidebar>\n    <!-- Sidebar main content -->\n    <UiSidebarInset>\n      <!-- Navbar -->\n      <UiNavbar sticky class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <UiSidebarTrigger class=\"-ml-1\" />\n        <UiDivider orientation=\"vertical\" class=\"mr-2 h-4 w-px\" />\n        <UiBreadcrumbs :items=\"breadcrumbItems\" />\n      </UiNavbar>\n      <div class=\"grid auto-rows-min gap-4 p-4 md:grid-cols-3\">\n        <UiPlaceholder v-for=\"n in 30\" :key=\"n\" class=\"aspect-video rounded-lg\" />\n      </div>\n    </UiSidebarInset>\n  </UiSidebarProvider>\n</template>\n\n<script lang=\"ts\" setup>\n  // Breadcrumb items\n  const breadcrumbItems = [\n    { label: \"Building Your Application\", link: \"#\" },\n    { label: \"Data Fetching\", link: \"#\" },\n  ];\n  // This is sample data.\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  };\n  const selectedVersion = ref(data.versions[0]);\n  useSeoMeta({ title: \"A sidebar with submenus.\" });\n</script>\n","category":"Sidebar","path":"Sidebar/BlockSidebar03.vue","components":["breadcrumbs","divider","dropdownmenu","dropdownmenucontent","dropdownmenuitem","dropdownmenutrigger","label","navbar","placeholder","sidebar","sidebarcontent","sidebargroup","sidebargroupcontent","sidebarheader","sidebarinput","sidebarinset","sidebarmenu","sidebarmenubutton","sidebarmenuitem","sidebarmenusub","sidebarmenusubbutton","sidebarmenusubitem","sidebarprovider","sidebarrail","sidebartrigger"]},{"name":"Sidebar 04","fileName":"BlockSidebar04.vue","file":"<template>\n  <UiSidebarProvider class=\"[--sidebar-width:19rem_!important]\">\n    <!-- App Sidebar -->\n    <UiSidebar variant=\"floating\">\n      <UiSidebarHeader>\n        <!-- Version switcher -->\n        <UiSidebarMenu>\n          <UiSidebarMenuItem>\n            <UiDropdownMenu>\n              <UiDropdownMenuTrigger as-child>\n                <UiSidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div\n                    class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\"\n                  >\n                    <Icon name=\"lucide:gallery-vertical-end\" class=\"size-4\" />\n                  </div>\n                  <div class=\"flex flex-col gap-0.5 leading-none\">\n                    <span class=\"font-semibold\">Documentation</span>\n                    <span class=\"\">v{{ selectedVersion }}</span>\n                  </div>\n                  <Icon name=\"lucide:chevrons-up-down\" class=\"ml-auto\" />\n                </UiSidebarMenuButton>\n              </UiDropdownMenuTrigger>\n              <UiDropdownMenuContent class=\"w-(--reka-dropdown-menu-trigger-width)\" align=\"start\">\n                <UiDropdownMenuItem\n                  v-for=\"version in data.versions\"\n                  :key=\"version\"\n                  class=\"cursor-pointer\"\n                  @select=\"selectedVersion = version\"\n                >\n                  v{{ version }}\n                  <Icon v-if=\"version === selectedVersion\" name=\"lucide:check\" class=\"ml-auto\" />\n                </UiDropdownMenuItem>\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiSidebarMenuItem>\n        </UiSidebarMenu>\n      </UiSidebarHeader>\n      <UiSidebarContent>\n        <UiSidebarGroup>\n          <UiSidebarMenu class=\"gap-2\">\n            <UiSidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <UiSidebarMenuButton as-child>\n                <NuxtLink :href=\"item.url\" class=\"font-medium\">\n                  {{ item.title }}\n                </NuxtLink>\n              </UiSidebarMenuButton>\n              <UiSidebarMenuSub v-if=\"item.items?.length\" class=\"border-l-0 px-1.5\">\n                <UiSidebarMenuSubItem v-for=\"child in item.items\" :key=\"child.title\">\n                  <UiSidebarMenuSubButton as-child :is-active=\"child.isActive\">\n                    <NuxtLink :href=\"child.url\">{{ child.title }}</NuxtLink>\n                  </UiSidebarMenuSubButton>\n                </UiSidebarMenuSubItem>\n              </UiSidebarMenuSub>\n            </UiSidebarMenuItem>\n          </UiSidebarMenu>\n        </UiSidebarGroup>\n      </UiSidebarContent>\n      <UiSidebarRail />\n    </UiSidebar>\n    <!-- Sidebar main content -->\n    <UiSidebarInset>\n      <!-- Navbar -->\n      <UiNavbar sticky class=\"flex h-14 shrink-0 items-center gap-2 border-b-0 px-4\">\n        <UiSidebarTrigger class=\"-ml-1\" />\n        <UiDivider orientation=\"vertical\" class=\"mr-2 h-4 w-px\" />\n        <UiBreadcrumbs :items=\"breadcrumbItems\" />\n      </UiNavbar>\n      <div class=\"grid auto-rows-min gap-4 p-4 md:grid-cols-3\">\n        <UiPlaceholder v-for=\"n in 30\" :key=\"n\" class=\"aspect-video rounded-lg\" />\n      </div>\n    </UiSidebarInset>\n  </UiSidebarProvider>\n</template>\n\n<script lang=\"ts\" setup>\n  // Breadcrumb items\n  const breadcrumbItems = [\n    { label: \"Building Your Application\", link: \"#\" },\n    { label: \"Data Fetching\", link: \"#\" },\n  ];\n  // This is sample data.\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  };\n  const selectedVersion = ref(data.versions[0]);\n  useSeoMeta({ title: \"A floating sidebar with submenus.\" });\n</script>\n","category":"Sidebar","path":"Sidebar/BlockSidebar04.vue","components":["breadcrumbs","divider","dropdownmenu","dropdownmenucontent","dropdownmenuitem","dropdownmenutrigger","navbar","placeholder","sidebar","sidebarcontent","sidebargroup","sidebarheader","sidebarinset","sidebarmenu","sidebarmenubutton","sidebarmenuitem","sidebarmenusub","sidebarmenusubbutton","sidebarmenusubitem","sidebarprovider","sidebarrail","sidebartrigger"]},{"name":"Sidebar 05","fileName":"BlockSidebar05.vue","file":"<template>\n  <UiSidebarProvider>\n    <!-- App Sidebar -->\n    <UiSidebar>\n      <UiSidebarHeader>\n        <!-- Version switcher -->\n        <UiSidebarMenu>\n          <UiSidebarMenuItem>\n            <UiDropdownMenu>\n              <UiDropdownMenuTrigger as-child>\n                <UiSidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div\n                    class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\"\n                  >\n                    <Icon name=\"lucide:gallery-vertical-end\" class=\"size-4\" />\n                  </div>\n                  <div class=\"flex flex-col gap-0.5 leading-none\">\n                    <span class=\"font-semibold\">Documentation</span>\n                    <span class=\"\">v{{ selectedVersion }}</span>\n                  </div>\n                  <Icon name=\"lucide:chevrons-up-down\" class=\"ml-auto\" />\n                </UiSidebarMenuButton>\n              </UiDropdownMenuTrigger>\n              <UiDropdownMenuContent class=\"w-(--reka-dropdown-menu-trigger-width)\" align=\"start\">\n                <UiDropdownMenuItem\n                  v-for=\"version in data.versions\"\n                  :key=\"version\"\n                  class=\"cursor-pointer\"\n                  @select=\"selectedVersion = version\"\n                >\n                  v{{ version }}\n                  <Icon v-if=\"version === selectedVersion\" name=\"lucide:check\" class=\"ml-auto\" />\n                </UiDropdownMenuItem>\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiSidebarMenuItem>\n        </UiSidebarMenu>\n        <!-- Search form -->\n        <form>\n          <UiSidebarGroup class=\"py-0\">\n            <UiSidebarGroupContent class=\"relative\">\n              <UiLabel for=\"search\" class=\"sr-only\"> Search </UiLabel>\n              <UiSidebarInput id=\"search\" placeholder=\"Search the docs...\" class=\"pl-8\" />\n              <Icon\n                name=\"lucide:search\"\n                class=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n              />\n            </UiSidebarGroupContent>\n          </UiSidebarGroup>\n        </form>\n      </UiSidebarHeader>\n      <UiSidebarContent>\n        <UiSidebarGroup>\n          <UiSidebarMenu>\n            <template v-for=\"(item, index) in data.navMain\" :key=\"item.title\">\n              <UiCollapsible v-slot=\"{ open }\" :default-open=\"index == 1\">\n                <UiSidebarMenuItem>\n                  <UiCollapsibleTrigger as-child>\n                    <UiSidebarMenuButton>\n                      {{ item.title }}\n                      <Icon v-if=\"!open\" name=\"lucide:plus\" class=\"ml-auto\" />\n                      <Icon v-else name=\"lucide:minus\" class=\"ml-auto\" />\n                    </UiSidebarMenuButton>\n                  </UiCollapsibleTrigger>\n                  <UiCollapsibleContent v-if=\"item.items?.length\">\n                    <UiSidebarMenuSub>\n                      <template v-for=\"child in item.items\" :key=\"child.title\">\n                        <UiSidebarMenuSubItem>\n                          <UiSidebarMenuSubButton as-child :is-active=\"child.isActive\">\n                            <NuxtLink :href=\"child.url\">{{ child.title }}</NuxtLink>\n                          </UiSidebarMenuSubButton>\n                        </UiSidebarMenuSubItem>\n                      </template>\n                    </UiSidebarMenuSub>\n                  </UiCollapsibleContent>\n                </UiSidebarMenuItem>\n              </UiCollapsible>\n            </template>\n          </UiSidebarMenu>\n        </UiSidebarGroup>\n      </UiSidebarContent>\n      <UiSidebarRail />\n    </UiSidebar>\n    <!-- Sidebar main content -->\n    <UiSidebarInset>\n      <!-- Navbar -->\n      <UiNavbar sticky class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <UiSidebarTrigger class=\"-ml-1\" />\n        <UiDivider orientation=\"vertical\" class=\"mr-2 h-4 w-px\" />\n        <UiBreadcrumbs :items=\"breadcrumbItems\" />\n      </UiNavbar>\n      <div class=\"grid auto-rows-min gap-4 p-4 md:grid-cols-3\">\n        <UiPlaceholder v-for=\"n in 30\" :key=\"n\" class=\"aspect-video rounded-lg\" />\n      </div>\n    </UiSidebarInset>\n  </UiSidebarProvider>\n</template>\n\n<script lang=\"ts\" setup>\n  // Breadcrumb items\n  const breadcrumbItems = [\n    { label: \"Building Your Application\", link: \"#\" },\n    { label: \"Data Fetching\", link: \"#\" },\n  ];\n  // This is sample data.\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  };\n  const selectedVersion = ref(data.versions[0]);\n  useSeoMeta({ title: \"A sidebar with collapsible submenus.\" });\n</script>\n","category":"Sidebar","path":"Sidebar/BlockSidebar05.vue","components":["breadcrumbs","collapsible","collapsiblecontent","collapsibletrigger","divider","dropdownmenu","dropdownmenucontent","dropdownmenuitem","dropdownmenutrigger","label","navbar","placeholder","sidebar","sidebarcontent","sidebargroup","sidebargroupcontent","sidebarheader","sidebarinput","sidebarinset","sidebarmenu","sidebarmenubutton","sidebarmenuitem","sidebarmenusub","sidebarmenusubbutton","sidebarmenusubitem","sidebarprovider","sidebarrail","sidebartrigger"]},{"name":"Sidebar 06","fileName":"BlockSidebar06.vue","file":"<template>\n  <UiSidebarProvider v-slot=\"{ isMobile }\">\n    <!-- App Sidebar -->\n    <UiSidebar>\n      <UiSidebarHeader>\n        <!-- Version switcher -->\n        <UiSidebarMenu>\n          <UiSidebarMenuItem>\n            <UiDropdownMenu>\n              <UiDropdownMenuTrigger as-child>\n                <UiSidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div\n                    class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\"\n                  >\n                    <Icon name=\"lucide:gallery-vertical-end\" class=\"size-4\" />\n                  </div>\n                  <div class=\"flex flex-col gap-0.5 leading-none\">\n                    <span class=\"font-semibold\">Documentation</span>\n                    <span class=\"\">v{{ selectedVersion }}</span>\n                  </div>\n                  <Icon name=\"lucide:chevrons-up-down\" class=\"ml-auto\" />\n                </UiSidebarMenuButton>\n              </UiDropdownMenuTrigger>\n              <UiDropdownMenuContent class=\"w-(--reka-dropdown-menu-trigger-width)\" align=\"start\">\n                <UiDropdownMenuItem\n                  v-for=\"version in data.versions\"\n                  :key=\"version\"\n                  class=\"cursor-pointer\"\n                  @select=\"selectedVersion = version\"\n                >\n                  v{{ version }}\n                  <Icon v-if=\"version === selectedVersion\" name=\"lucide:check\" class=\"ml-auto\" />\n                </UiDropdownMenuItem>\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiSidebarMenuItem>\n        </UiSidebarMenu>\n        <!-- Search form -->\n        <form>\n          <UiSidebarGroup class=\"py-0\">\n            <UiSidebarGroupContent class=\"relative\">\n              <UiLabel for=\"search\" class=\"sr-only\"> Search </UiLabel>\n              <UiSidebarInput id=\"search\" placeholder=\"Search the docs...\" class=\"pl-8\" />\n              <Icon\n                name=\"lucide:search\"\n                class=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n              />\n            </UiSidebarGroupContent>\n          </UiSidebarGroup>\n        </form>\n      </UiSidebarHeader>\n      <UiSidebarContent>\n        <UiSidebarGroup>\n          <UiSidebarMenu>\n            <template v-for=\"item in data.navMain\" :key=\"item.title\">\n              <UiDropdownMenu>\n                <UiSidebarMenuItem>\n                  <UiDropdownMenuTrigger as-child>\n                    <UiSidebarMenuButton\n                      class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                    >\n                      {{ item.title }}\n                      <Icon name=\"lucide:ellipsis-vertical\" class=\"ml-auto rotate-90\" />\n                    </UiSidebarMenuButton>\n                  </UiDropdownMenuTrigger>\n                </UiSidebarMenuItem>\n\n                <UiDropdownMenuContent\n                  v-if=\"item.items?.length\"\n                  :side=\"isMobile ? 'bottom' : 'right'\"\n                  :align=\"isMobile ? 'end' : 'start'\"\n                  class=\"min-w-56 rounded-lg\"\n                >\n                  <template v-for=\"child in item.items\" :key=\"`child-${child.title}`\">\n                    <UiDropdownMenuItem as-child>\n                      <NuxtLink :href=\"child.url\">{{ child.title }}</NuxtLink>\n                    </UiDropdownMenuItem>\n                  </template>\n                </UiDropdownMenuContent>\n              </UiDropdownMenu>\n            </template>\n          </UiSidebarMenu>\n        </UiSidebarGroup>\n      </UiSidebarContent>\n      <UiSidebarRail />\n      <!-- Footer with subscription form -->\n      <UiSidebarFooter>\n        <div class=\"p-1\">\n          <UiCard class=\"shadow-none\">\n            <form>\n              <UiCardHeader class=\"p-4\">\n                <UiCardTitle class=\"text-sm\">Subscribe to our newsletter</UiCardTitle>\n                <UiCardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </UiCardDescription>\n              </UiCardHeader>\n              <UiCardContent class=\"grid gap-2.5 p-4\">\n                <UiSidebarInput type=\"email\" placeholder=\"Email\" />\n                <UiButton\n                  class=\"bg-sidebar-primary text-sidebar-primary-foreground hover:bg-sidebar-primary/80\"\n                  size=\"sm\"\n                >\n                  Subscribe\n                </UiButton>\n              </UiCardContent>\n            </form>\n          </UiCard>\n        </div>\n      </UiSidebarFooter>\n    </UiSidebar>\n    <!-- Sidebar main content -->\n    <UiSidebarInset>\n      <!-- Navbar -->\n      <UiNavbar sticky class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <UiSidebarTrigger class=\"-ml-1\" />\n        <UiDivider orientation=\"vertical\" class=\"mr-2 h-4 w-px\" />\n        <UiBreadcrumbs :items=\"breadcrumbItems\" />\n      </UiNavbar>\n      <div class=\"grid auto-rows-min gap-4 p-4 md:grid-cols-3\">\n        <UiPlaceholder v-for=\"n in 30\" :key=\"n\" class=\"aspect-video rounded-lg\" />\n      </div>\n    </UiSidebarInset>\n  </UiSidebarProvider>\n</template>\n\n<script lang=\"ts\" setup>\n  // Breadcrumb items\n  const breadcrumbItems = [\n    { label: \"Building Your Application\", link: \"#\" },\n    { label: \"Data Fetching\", link: \"#\" },\n  ];\n  // This is sample data.\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  };\n  const selectedVersion = ref(data.versions[0]);\n  useSeoMeta({ title: \"A sidebar with collapsible submenus.\" });\n</script>\n","category":"Sidebar","path":"Sidebar/BlockSidebar06.vue","components":["breadcrumbs","button","card","cardcontent","carddescription","cardheader","cardtitle","divider","dropdownmenu","dropdownmenucontent","dropdownmenuitem","dropdownmenutrigger","label","navbar","placeholder","sidebar","sidebarcontent","sidebarfooter","sidebargroup","sidebargroupcontent","sidebarheader","sidebarinput","sidebarinset","sidebarmenu","sidebarmenubutton","sidebarmenuitem","sidebarprovider","sidebarrail","sidebartrigger"]},{"name":"Sidebar 07","fileName":"BlockSidebar07.vue","file":"<template>\n  <UiSidebarProvider v-slot=\"{ isMobile, state }\">\n    <!-- App Sidebar -->\n    <UiSidebar collapsible=\"icon\">\n      <!-- Team switcher -->\n      <UiSidebarHeader>\n        <UiSidebarMenu>\n          <UiSidebarMenuItem>\n            <UiDropdownMenu>\n              <UiDropdownMenuTrigger as-child>\n                <UiSidebarMenuButton\n                  size=\"lg\"\n                  class=\"group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-0! data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div\n                    class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\"\n                  >\n                    <Icon v-if=\"activeTeam\" mode=\"svg\" :name=\"activeTeam?.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">\n                      {{ activeTeam?.name }}\n                    </span>\n                    <span class=\"truncate text-xs\">{{ activeTeam?.plan }}</span>\n                  </div>\n                  <Icon mode=\"svg\" name=\"lucide:chevrons-up-down\" class=\"ml-auto\" />\n                </UiSidebarMenuButton>\n              </UiDropdownMenuTrigger>\n              <UiDropdownMenuContent\n                class=\"w-(--reka-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n                align=\"start\"\n                :side=\"isMobile ? 'bottom' : 'right'\"\n                :side-offset=\"4\"\n              >\n                <UiDropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </UiDropdownMenuLabel>\n                <template v-for=\"(team, index) in data.teams\" :key=\"index\">\n                  <UiDropdownMenuItem\n                    class=\"cursor-pointer gap-2 p-2\"\n                    :class=\"[team.name == activeTeam?.name && 'bg-muted']\"\n                    @click=\"activeTeam = team\"\n                  >\n                    <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                      <Icon mode=\"svg\" :name=\"team.logo\" class=\"size-4 shrink-0\" />\n                    </div>\n                    {{ team.name }}\n                    <UiDropdownMenuShortcut>⌘{{ index + 1 }}</UiDropdownMenuShortcut>\n                  </UiDropdownMenuItem>\n                </template>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem class=\"gap-2 p-2\">\n                  <div\n                    class=\"flex size-6 items-center justify-center rounded-md border bg-background\"\n                  >\n                    <Icon name=\"lucide:plus\" class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">Add team</div>\n                </UiDropdownMenuItem>\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiSidebarMenuItem>\n        </UiSidebarMenu>\n\n        <!-- Search form -->\n        <form v-if=\"state != 'collapsed'\">\n          <UiSidebarGroup class=\"py-0\">\n            <UiSidebarGroupContent class=\"relative\">\n              <UiLabel for=\"search\" class=\"sr-only\"> Search </UiLabel>\n              <UiSidebarInput id=\"search\" placeholder=\"Search the docs...\" class=\"pl-8\" />\n              <Icon\n                name=\"lucide:search\"\n                class=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n              />\n            </UiSidebarGroupContent>\n          </UiSidebarGroup>\n        </form>\n      </UiSidebarHeader>\n      <UiSidebarContent>\n        <!-- Main -->\n        <UiSidebarGroup>\n          <UiSidebarGroupLabel label=\"Platform\" />\n          <UiSidebarMenu>\n            <UiCollapsible\n              v-for=\"(item, index) in data.navMain\"\n              :key=\"index\"\n              v-slot=\"{ open }\"\n              as-child\n              :default-open=\"item.isActive\"\n            >\n              <UiSidebarMenuItem>\n                <UiCollapsibleTrigger as-child>\n                  <UiSidebarMenuButton :tooltip=\"item.title\">\n                    <Icon mode=\"svg\" :name=\"item.icon\" />\n\n                    <span>{{ item.title }}</span>\n                    <Icon\n                      mode=\"svg\"\n                      name=\"lucide:chevron-right\"\n                      class=\"ml-auto transition-transform duration-200\"\n                      :class=\"[open && 'rotate-90']\"\n                    />\n                  </UiSidebarMenuButton>\n                </UiCollapsibleTrigger>\n                <UiCollapsibleContent>\n                  <UiSidebarMenuSub>\n                    <UiSidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                      <UiSidebarMenuSubButton as-child>\n                        <NuxtLink :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </NuxtLink>\n                      </UiSidebarMenuSubButton>\n                    </UiSidebarMenuSubItem>\n                  </UiSidebarMenuSub>\n                </UiCollapsibleContent>\n              </UiSidebarMenuItem>\n            </UiCollapsible>\n          </UiSidebarMenu>\n        </UiSidebarGroup>\n        <!-- Projects -->\n        <UiSidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <UiSidebarGroupLabel label=\"Projects\" />\n          <UiSidebarMenu>\n            <UiSidebarMenuItem v-for=\"item in data.projects\" :key=\"item.name\">\n              <UiSidebarMenuButton as-child>\n                <NuxtLink :href=\"item.url\">\n                  <Icon mode=\"svg\" :name=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </NuxtLink>\n              </UiSidebarMenuButton>\n              <UiDropdownMenu>\n                <UiDropdownMenuTrigger as-child>\n                  <UiSidebarMenuAction show-on-hover>\n                    <Icon mode=\"svg\" name=\"lucide:ellipsis-vertical\" class=\"rotate-90\" />\n                    <span class=\"sr-only\">More</span>\n                  </UiSidebarMenuAction>\n                </UiDropdownMenuTrigger>\n                <UiDropdownMenuContent\n                  class=\"w-48 rounded-lg\"\n                  :side=\"isMobile ? 'bottom' : 'right'\"\n                  :align=\"isMobile ? 'end' : 'start'\"\n                >\n                  <UiDropdownMenuItem>\n                    <Icon mode=\"svg\" name=\"lucide:folder\" class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </UiDropdownMenuItem>\n                  <UiDropdownMenuItem>\n                    <Icon name=\"lucide:forward\" class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </UiDropdownMenuItem>\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem>\n                    <Icon name=\"lucide:trash-2\" class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </UiDropdownMenuItem>\n                </UiDropdownMenuContent>\n              </UiDropdownMenu>\n            </UiSidebarMenuItem>\n\n            <UiSidebarMenuItem>\n              <UiSidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <Icon\n                  name=\"lucide:ellipsis-vertical\"\n                  class=\"rotate-90 text-sidebar-foreground/70\"\n                />\n                <span>More</span>\n              </UiSidebarMenuButton>\n            </UiSidebarMenuItem>\n          </UiSidebarMenu>\n        </UiSidebarGroup>\n      </UiSidebarContent>\n      <UiSidebarRail />\n      <!-- Footer-->\n      <UiSidebarFooter>\n        <UiSidebarMenu>\n          <UiSidebarMenuItem>\n            <UiDropdownMenu>\n              <UiDropdownMenuTrigger as-child>\n                <UiSidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <UiAvatar class=\"size-8 rounded-lg\">\n                    <UiAvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <UiAvatarFallback class=\"rounded-lg\">BB</UiAvatarFallback>\n                  </UiAvatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <Icon name=\"lucide:chevrons-up-down\" class=\"ml-auto size-4\" />\n                </UiSidebarMenuButton>\n              </UiDropdownMenuTrigger>\n              <UiDropdownMenuContent\n                class=\"w-(--reka-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n                :side=\"isMobile ? 'bottom' : 'right'\"\n                :side-offset=\"4\"\n                align=\"end\"\n              >\n                <UiDropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <UiAvatar class=\"size-8 rounded-lg\">\n                      <UiAvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <UiAvatarFallback class=\"rounded-lg\">BB</UiAvatarFallback>\n                    </UiAvatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </UiDropdownMenuLabel>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuGroup>\n                  <UiDropdownMenuItem icon=\"lucide:sparkles\" title=\"Upgrade to Pro\" />\n                </UiDropdownMenuGroup>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuGroup>\n                  <UiDropdownMenuItem icon=\"lucide:badge-check\" title=\"Account\" />\n                  <UiDropdownMenuItem icon=\"lucide:credit-card\" title=\"Billing\" />\n                  <UiDropdownMenuItem icon=\"lucide:settings-2\" title=\"Settings\" />\n                  <UiDropdownMenuItem icon=\"lucide:bell\" title=\"Notifications\" />\n                </UiDropdownMenuGroup>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem icon=\"lucide:log-out\" title=\"Log out\" />\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiSidebarMenuItem>\n        </UiSidebarMenu>\n      </UiSidebarFooter>\n    </UiSidebar>\n    <!-- Sidebar main content -->\n    <UiSidebarInset>\n      <!-- Navbar -->\n      <UiNavbar sticky class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <UiSidebarTrigger class=\"-ml-1\" />\n        <UiDivider orientation=\"vertical\" class=\"mr-2 h-4 w-px\" />\n        <UiBreadcrumbs :items=\"breadcrumbItems\" />\n      </UiNavbar>\n      <div class=\"grid auto-rows-min gap-4 p-4 md:grid-cols-3\">\n        <UiPlaceholder v-for=\"n in 30\" :key=\"n\" class=\"aspect-video rounded-lg\" />\n      </div>\n    </UiSidebarInset>\n  </UiSidebarProvider>\n</template>\n\n<script lang=\"ts\" setup>\n  // Breadcrumb items\n  const breadcrumbItems = [\n    { label: \"Building Your Application\", link: \"#\" },\n    { label: \"Data Fetching\", link: \"#\" },\n  ];\n  // This is sample data.\n  const data = {\n    user: {\n      name: \"breezy\",\n      email: \"m@example.com\",\n      avatar: \"https://behonbaker.com/icon.png\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        logo: \"lucide:gallery-vertical-end\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        logo: \"lucide:audio-waveform\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        logo: \"lucide:command\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: \"lucide:square-terminal\",\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: \"lucide:bot\",\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: \"lucide:book-open\",\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: \"lucide:settings-2\",\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: \"lucide:frame\",\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: \"lucide:pie-chart\",\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: \"lucide:map\",\n      },\n    ],\n  };\n  const activeTeam = ref(data.teams[1]);\n  useSeoMeta({ title: \"A sidebar that collapses to icons.\" });\n</script>\n","category":"Sidebar","path":"Sidebar/BlockSidebar07.vue","components":["avatar","avatarfallback","avatarimage","breadcrumbs","collapsible","collapsiblecontent","collapsibletrigger","divider","dropdownmenu","dropdownmenucontent","dropdownmenugroup","dropdownmenuitem","dropdownmenulabel","dropdownmenuseparator","dropdownmenushortcut","dropdownmenutrigger","label","navbar","placeholder","sidebar","sidebarcontent","sidebarfooter","sidebargroup","sidebargroupcontent","sidebargrouplabel","sidebarheader","sidebarinput","sidebarinset","sidebarmenu","sidebarmenuaction","sidebarmenubutton","sidebarmenuitem","sidebarmenusub","sidebarmenusubbutton","sidebarmenusubitem","sidebarprovider","sidebarrail","sidebartrigger"]},{"name":"Sidebar 08","fileName":"BlockSidebar08.vue","file":"<template>\n  <UiSidebarProvider v-slot=\"{ isMobile, state }\">\n    <!-- App Sidebar -->\n    <UiSidebar variant=\"inset\">\n      <!-- Team switcher -->\n      <UiSidebarHeader>\n        <UiSidebarMenu>\n          <UiSidebarMenuItem>\n            <UiDropdownMenu>\n              <UiDropdownMenuTrigger as-child>\n                <UiSidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div\n                    class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\"\n                  >\n                    <Icon v-if=\"activeTeam\" mode=\"svg\" :name=\"activeTeam.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">\n                      {{ activeTeam?.name }}\n                    </span>\n                    <span class=\"truncate text-xs\">{{ activeTeam?.plan }}</span>\n                  </div>\n                  <Icon mode=\"svg\" name=\"lucide:chevrons-up-down\" class=\"ml-auto\" />\n                </UiSidebarMenuButton>\n              </UiDropdownMenuTrigger>\n              <UiDropdownMenuContent\n                class=\"w-(--reka-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n                align=\"start\"\n                :side=\"isMobile ? 'bottom' : 'right'\"\n                :side-offset=\"4\"\n              >\n                <UiDropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </UiDropdownMenuLabel>\n                <template v-for=\"(team, index) in data.teams\" :key=\"index\">\n                  <UiDropdownMenuItem\n                    class=\"cursor-pointer gap-2 p-2\"\n                    :class=\"[team.name == activeTeam?.name && 'bg-muted']\"\n                    @click=\"activeTeam = team\"\n                  >\n                    <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                      <Icon mode=\"svg\" :name=\"team.logo\" class=\"size-4 shrink-0\" />\n                    </div>\n                    {{ team.name }}\n                    <UiDropdownMenuShortcut>⌘{{ index + 1 }}</UiDropdownMenuShortcut>\n                  </UiDropdownMenuItem>\n                </template>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem class=\"gap-2 p-2\">\n                  <div\n                    class=\"flex size-6 items-center justify-center rounded-md border bg-background\"\n                  >\n                    <Icon name=\"lucide:plus\" class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">Add team</div>\n                </UiDropdownMenuItem>\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiSidebarMenuItem>\n        </UiSidebarMenu>\n\n        <!-- Search form -->\n        <form v-if=\"state != 'collapsed'\">\n          <UiSidebarGroup class=\"py-0\">\n            <UiSidebarGroupContent class=\"relative\">\n              <UiLabel for=\"search\" class=\"sr-only\"> Search </UiLabel>\n              <UiSidebarInput id=\"search\" placeholder=\"Search the docs...\" class=\"pl-8\" />\n              <Icon\n                name=\"lucide:search\"\n                class=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n              />\n            </UiSidebarGroupContent>\n          </UiSidebarGroup>\n        </form>\n      </UiSidebarHeader>\n      <UiSidebarContent>\n        <!-- Main -->\n        <UiSidebarGroup>\n          <UiSidebarGroupLabel label=\"Platform\" />\n          <UiSidebarMenu>\n            <UiCollapsible\n              v-for=\"(item, index) in data.navMain\"\n              :key=\"index\"\n              v-slot=\"{ open }\"\n              as-child\n              :default-open=\"item.isActive\"\n            >\n              <UiSidebarMenuItem>\n                <UiCollapsibleTrigger as-child>\n                  <UiSidebarMenuButton :tooltip=\"item.title\">\n                    <Icon mode=\"svg\" :name=\"item.icon\" />\n\n                    <span>{{ item.title }}</span>\n                    <Icon\n                      mode=\"svg\"\n                      name=\"lucide:chevron-right\"\n                      class=\"ml-auto transition-transform duration-200\"\n                      :class=\"[open && 'rotate-90']\"\n                    />\n                  </UiSidebarMenuButton>\n                </UiCollapsibleTrigger>\n                <UiCollapsibleContent>\n                  <UiSidebarMenuSub>\n                    <UiSidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                      <UiSidebarMenuSubButton as-child>\n                        <NuxtLink :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </NuxtLink>\n                      </UiSidebarMenuSubButton>\n                    </UiSidebarMenuSubItem>\n                  </UiSidebarMenuSub>\n                </UiCollapsibleContent>\n              </UiSidebarMenuItem>\n            </UiCollapsible>\n          </UiSidebarMenu>\n        </UiSidebarGroup>\n        <!-- Projects -->\n        <UiSidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <UiSidebarGroupLabel label=\"Projects\" />\n          <UiSidebarMenu>\n            <UiSidebarMenuItem v-for=\"item in data.projects\" :key=\"item.name\">\n              <UiSidebarMenuButton as-child>\n                <NuxtLink :href=\"item.url\">\n                  <Icon mode=\"svg\" :name=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </NuxtLink>\n              </UiSidebarMenuButton>\n              <UiDropdownMenu>\n                <UiDropdownMenuTrigger as-child>\n                  <UiSidebarMenuAction show-on-hover>\n                    <Icon mode=\"svg\" name=\"lucide:ellipsis-vertical\" class=\"rotate-90\" />\n                    <span class=\"sr-only\">More</span>\n                  </UiSidebarMenuAction>\n                </UiDropdownMenuTrigger>\n                <UiDropdownMenuContent\n                  class=\"w-48 rounded-lg\"\n                  :side=\"isMobile ? 'bottom' : 'right'\"\n                  :align=\"isMobile ? 'end' : 'start'\"\n                >\n                  <UiDropdownMenuItem>\n                    <Icon mode=\"svg\" name=\"lucide:folder\" class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </UiDropdownMenuItem>\n                  <UiDropdownMenuItem>\n                    <Icon name=\"lucide:forward\" class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </UiDropdownMenuItem>\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem>\n                    <Icon name=\"lucide:trash-2\" class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </UiDropdownMenuItem>\n                </UiDropdownMenuContent>\n              </UiDropdownMenu>\n            </UiSidebarMenuItem>\n\n            <UiSidebarMenuItem>\n              <UiSidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <Icon\n                  name=\"lucide:ellipsis-vertical\"\n                  class=\"rotate-90 text-sidebar-foreground/70\"\n                />\n                <span>More</span>\n              </UiSidebarMenuButton>\n            </UiSidebarMenuItem>\n          </UiSidebarMenu>\n        </UiSidebarGroup>\n        <!-- Secondary -->\n        <UiSidebarGroup class=\"mt-auto\">\n          <UiSidebarGroupContent>\n            <UiSidebarMenu>\n              <UiSidebarMenuItem v-for=\"item in data.navSecondary\" :key=\"item.title\">\n                <UiSidebarMenuButton as-child size=\"sm\">\n                  <NuxtLink :href=\"item.url\">\n                    <Icon mode=\"svg\" :name=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                  </NuxtLink>\n                </UiSidebarMenuButton>\n              </UiSidebarMenuItem>\n            </UiSidebarMenu>\n          </UiSidebarGroupContent>\n        </UiSidebarGroup>\n      </UiSidebarContent>\n      <UiSidebarRail />\n      <!-- Footer-->\n      <UiSidebarFooter>\n        <UiSidebarMenu>\n          <UiSidebarMenuItem>\n            <UiDropdownMenu>\n              <UiDropdownMenuTrigger as-child>\n                <UiSidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <UiAvatar class=\"size-8 rounded-lg\">\n                    <UiAvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <UiAvatarFallback class=\"rounded-lg\">BB</UiAvatarFallback>\n                  </UiAvatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <Icon name=\"lucide:chevrons-up-down\" class=\"ml-auto size-4\" />\n                </UiSidebarMenuButton>\n              </UiDropdownMenuTrigger>\n              <UiDropdownMenuContent\n                class=\"w-(--reka-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n                :side=\"isMobile ? 'bottom' : 'right'\"\n                :side-offset=\"4\"\n                align=\"end\"\n              >\n                <UiDropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <UiAvatar class=\"size-8 rounded-lg\">\n                      <UiAvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <UiAvatarFallback class=\"rounded-lg\">BB</UiAvatarFallback>\n                    </UiAvatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </UiDropdownMenuLabel>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuGroup>\n                  <UiDropdownMenuItem icon=\"lucide:sparkles\" title=\"Upgrade to Pro\" />\n                </UiDropdownMenuGroup>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuGroup>\n                  <UiDropdownMenuItem icon=\"lucide:badge-check\" title=\"Account\" />\n                  <UiDropdownMenuItem icon=\"lucide:credit-card\" title=\"Billing\" />\n                  <UiDropdownMenuItem icon=\"lucide:settings-2\" title=\"Settings\" />\n                  <UiDropdownMenuItem icon=\"lucide:bell\" title=\"Notifications\" />\n                </UiDropdownMenuGroup>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem icon=\"lucide:log-out\" title=\"Log out\" />\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiSidebarMenuItem>\n        </UiSidebarMenu>\n      </UiSidebarFooter>\n    </UiSidebar>\n    <!-- Sidebar main content -->\n    <UiSidebarInset>\n      <!-- Navbar -->\n      <UiNavbar sticky class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <UiSidebarTrigger class=\"-ml-1\" />\n        <UiDivider orientation=\"vertical\" class=\"mr-2 h-4 w-px\" />\n        <UiBreadcrumbs :items=\"breadcrumbItems\" />\n      </UiNavbar>\n      <div class=\"grid auto-rows-min gap-4 p-4 md:grid-cols-3\">\n        <UiPlaceholder v-for=\"n in 30\" :key=\"n\" class=\"aspect-video rounded-lg\" />\n      </div>\n    </UiSidebarInset>\n  </UiSidebarProvider>\n</template>\n\n<script lang=\"ts\" setup>\n  // Breadcrumb items\n  const breadcrumbItems = [\n    { label: \"Building Your Application\", link: \"#\" },\n    { label: \"Data Fetching\", link: \"#\" },\n  ];\n  // This is sample data.\n  const data = {\n    user: {\n      name: \"breezy\",\n      email: \"m@example.com\",\n      avatar: \"https://behonbaker.com/icon.png\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        logo: \"lucide:gallery-vertical-end\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        logo: \"lucide:audio-waveform\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        logo: \"lucide:command\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: \"lucide:square-terminal\",\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: \"lucide:bot\",\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: \"lucide:book-open\",\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: \"lucide:settings-2\",\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: \"lucide:frame\",\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: \"lucide:pie-chart\",\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: \"lucide:map\",\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: \"lucide:life-buoy\",\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: \"lucide:send\",\n      },\n    ],\n  };\n  const activeTeam = ref(data.teams[1]);\n  useSeoMeta({ title: \"An inset sidebar with secondary navigation.\" });\n</script>\n","category":"Sidebar","path":"Sidebar/BlockSidebar08.vue","components":["avatar","avatarfallback","avatarimage","breadcrumbs","collapsible","collapsiblecontent","collapsibletrigger","divider","dropdownmenu","dropdownmenucontent","dropdownmenugroup","dropdownmenuitem","dropdownmenulabel","dropdownmenuseparator","dropdownmenushortcut","dropdownmenutrigger","label","navbar","placeholder","sidebar","sidebarcontent","sidebarfooter","sidebargroup","sidebargroupcontent","sidebargrouplabel","sidebarheader","sidebarinput","sidebarinset","sidebarmenu","sidebarmenuaction","sidebarmenubutton","sidebarmenuitem","sidebarmenusub","sidebarmenusubbutton","sidebarmenusubitem","sidebarprovider","sidebarrail","sidebartrigger"]},{"name":"Sidebar 09","fileName":"BlockSidebar09.vue","file":"<template>\n  <UiSidebarProvider v-slot=\"{ isMobile, setOpen }\" class=\"[--sidebar-width:350px_!important]\">\n    <!-- App Sidebar -->\n    <UiSidebar collapsible=\"icon\" class=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\">\n      <!-- This is the first sidebar  -->\n      <!-- We disable collapsible and adjust width to icon.  -->\n      <!-- This will make the sidebar appear as icons.  -->\n      <UiSidebar collapsible=\"none\" class=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\">\n        <UiSidebarHeader>\n          <UiSidebarMenu>\n            <UiSidebarMenuItem>\n              <UiSidebarMenuButton size=\"lg\" as-child class=\"md:h-8 md:p-0\">\n                <NuxtLink href=\"#\">\n                  <div\n                    class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\"\n                  >\n                    <Icon mode=\"svg\" name=\"lucide:command\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">Acme Inc</span>\n                    <span class=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </NuxtLink>\n              </UiSidebarMenuButton>\n            </UiSidebarMenuItem>\n          </UiSidebarMenu>\n        </UiSidebarHeader>\n        <UiSidebarContent>\n          <UiSidebarGroup>\n            <UiSidebarGroupContent class=\"px-1.5 md:px-0\">\n              <UiSidebarMenu>\n                <UiSidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n                  <UiSidebarMenuButton\n                    :tooltip=\"item.title\"\n                    :is-active=\"activeItem?.title === item.title\"\n                    class=\"px-2.5 md:px-2\"\n                    @click=\"\n                      () => {\n                        activeItem = item;\n                        const mail = data.mails.sort(() => Math.random() - 0.5);\n\n                        mails = mail.slice(0, Math.max(5, Math.floor(Math.random() * 10) + 1));\n                        setOpen(true);\n                      }\n                    \"\n                  >\n                    <Icon mode=\"svg\" :name=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                  </UiSidebarMenuButton>\n                </UiSidebarMenuItem>\n              </UiSidebarMenu>\n            </UiSidebarGroupContent>\n          </UiSidebarGroup>\n        </UiSidebarContent>\n        <!-- minibar footer -->\n\n        <UiSidebarFooter>\n          <UiSidebarMenu>\n            <UiSidebarMenuItem>\n              <UiDropdownMenu>\n                <UiDropdownMenuTrigger as-child>\n                  <UiSidebarMenuButton\n                    size=\"lg\"\n                    class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0\"\n                  >\n                    <UiAvatar class=\"h-8 w-8 rounded-lg\">\n                      <UiAvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <UiAvatarFallback class=\"rounded-lg\">BB</UiAvatarFallback>\n                    </UiAvatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                    <Icon name=\"lucide:chevrons-up-down\" class=\"ml-auto size-4\" />\n                  </UiSidebarMenuButton>\n                </UiDropdownMenuTrigger>\n                <UiDropdownMenuContent\n                  class=\"w-(--reka-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n                  :side=\"isMobile ? 'bottom' : 'right'\"\n                  :side-offset=\"4\"\n                  align=\"end\"\n                >\n                  <UiDropdownMenuLabel class=\"p-0 font-normal\">\n                    <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                      <UiAvatar class=\"size-8 rounded-lg\">\n                        <UiAvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                        <UiAvatarFallback class=\"rounded-lg\">BB</UiAvatarFallback>\n                      </UiAvatar>\n                      <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                        <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                      </div>\n                    </div>\n                  </UiDropdownMenuLabel>\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuGroup>\n                    <UiDropdownMenuItem icon=\"lucide:sparkles\" title=\"Upgrade to Pro\" />\n                  </UiDropdownMenuGroup>\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuGroup>\n                    <UiDropdownMenuItem icon=\"lucide:badge-check\" title=\"Account\" />\n                    <UiDropdownMenuItem icon=\"lucide:credit-card\" title=\"Billing\" />\n                    <UiDropdownMenuItem icon=\"lucide:settings-2\" title=\"Settings\" />\n                    <UiDropdownMenuItem icon=\"lucide:bell\" title=\"Notifications\" />\n                  </UiDropdownMenuGroup>\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem icon=\"lucide:log-out\" title=\"Log out\" />\n                </UiDropdownMenuContent>\n              </UiDropdownMenu>\n            </UiSidebarMenuItem>\n          </UiSidebarMenu>\n        </UiSidebarFooter>\n      </UiSidebar>\n      <!-- This is the second sidebar  -->\n      <!-- We disable collapsible and let it fill remaining space  -->\n      <UiSidebar collapsible=\"none\" class=\"hidden flex-1 md:flex\">\n        <UiSidebarHeader class=\"gap-3.5 border-b p-4\">\n          <div class=\"flex w-full items-center justify-between\">\n            <div class=\"text-base font-medium text-foreground\">\n              {{ activeItem?.title }}\n            </div>\n            <UiLabel class=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <UiSwitch class=\"shadow-none\" />\n            </UiLabel>\n          </div>\n          <UiSidebarInput placeholder=\"Type to search...\" />\n        </UiSidebarHeader>\n        <UiSidebarContent>\n          <UiSidebarGroup class=\"px-0\">\n            <UiSidebarGroupContent>\n              <NuxtLink\n                v-for=\"mail in mails\"\n                :key=\"mail.email\"\n                href=\"#\"\n                class=\"flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <div class=\"flex w-full items-center gap-2\">\n                  <span>{{ mail.name }}</span>\n                  <span class=\"ml-auto text-xs\">{{ mail.date }}</span>\n                </div>\n                <span class=\"font-medium\">{{ mail.subject }}</span>\n                <span class=\"line-clamp-2 w-[260px] text-xs whitespace-break-spaces\">\n                  {{ mail.teaser }}\n                </span>\n              </NuxtLink>\n            </UiSidebarGroupContent>\n          </UiSidebarGroup>\n        </UiSidebarContent>\n      </UiSidebar>\n    </UiSidebar>\n    <!-- Sidebar main content -->\n    <UiSidebarInset>\n      <!-- Navbar -->\n      <UiNavbar sticky class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <UiSidebarTrigger class=\"-ml-1\" />\n        <UiDivider orientation=\"vertical\" class=\"mr-2 h-4 w-px\" />\n        <UiBreadcrumbs :items=\"breadcrumbItems\" />\n      </UiNavbar>\n      <div class=\"grid auto-rows-min gap-4 p-4 md:grid-cols-3\">\n        <UiPlaceholder v-for=\"n in 30\" :key=\"n\" class=\"aspect-video rounded-lg\" />\n      </div>\n    </UiSidebarInset>\n  </UiSidebarProvider>\n</template>\n\n<script lang=\"ts\" setup>\n  // Breadcrumb items\n  const breadcrumbItems = [\n    { label: \"All Inboxes\", link: \"#\" },\n    { label: \"Inbox\", link: \"#\" },\n  ];\n  // This is sample data.\n  const data = {\n    user: {\n      name: \"breezy\",\n      email: \"m@example.com\",\n      avatar: \"https://behonbaker.com/icon.png\",\n    },\n    navMain: [\n      {\n        title: \"Inbox\",\n        url: \"#\",\n        icon: \"lucide:inbox\",\n        isActive: true,\n      },\n      {\n        title: \"Drafts\",\n        url: \"#\",\n        icon: \"lucide:file\",\n        isActive: false,\n      },\n      {\n        title: \"Sent\",\n        url: \"#\",\n        icon: \"lucide:send\",\n        isActive: false,\n      },\n      {\n        title: \"Junk\",\n        url: \"#\",\n        icon: \"lucide:archive-x\",\n        isActive: false,\n      },\n      {\n        title: \"Trash\",\n        url: \"#\",\n        icon: \"lucide:trash-2\",\n        isActive: false,\n      },\n    ],\n    mails: [\n      {\n        name: \"William Smith\",\n        email: \"williamsmith@example.com\",\n        subject: \"Meeting Tomorrow\",\n        date: \"09:34 AM\",\n        teaser:\n          \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n      },\n      {\n        name: \"Alice Smith\",\n        email: \"alicesmith@example.com\",\n        subject: \"Re: Project Update\",\n        date: \"Yesterday\",\n        teaser:\n          \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n      },\n      {\n        name: \"Bob Johnson\",\n        email: \"bobjohnson@example.com\",\n        subject: \"Weekend Plans\",\n        date: \"2 days ago\",\n        teaser:\n          \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n      },\n      {\n        name: \"Emily Davis\",\n        email: \"emilydavis@example.com\",\n        subject: \"Re: Question about Budget\",\n        date: \"2 days ago\",\n        teaser:\n          \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n      },\n      {\n        name: \"Michael Wilson\",\n        email: \"michaelwilson@example.com\",\n        subject: \"Important Announcement\",\n        date: \"1 week ago\",\n        teaser:\n          \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n      },\n      {\n        name: \"Sarah Brown\",\n        email: \"sarahbrown@example.com\",\n        subject: \"Re: Feedback on Proposal\",\n        date: \"1 week ago\",\n        teaser:\n          \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n      },\n      {\n        name: \"David Lee\",\n        email: \"davidlee@example.com\",\n        subject: \"New Project Idea\",\n        date: \"1 week ago\",\n        teaser:\n          \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n      },\n      {\n        name: \"Olivia Wilson\",\n        email: \"oliviawilson@example.com\",\n        subject: \"Vacation Plans\",\n        date: \"1 week ago\",\n        teaser:\n          \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n      },\n      {\n        name: \"James Martin\",\n        email: \"jamesmartin@example.com\",\n        subject: \"Re: Conference Registration\",\n        date: \"1 week ago\",\n        teaser:\n          \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n      },\n      {\n        name: \"Sophia White\",\n        email: \"sophiawhite@example.com\",\n        subject: \"Team Dinner\",\n        date: \"1 week ago\",\n        teaser:\n          \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n      },\n    ],\n  };\n  const activeItem = ref(data.navMain[0]);\n  const mails = ref(data.mails);\n  useSeoMeta({ title: \"An inset sidebar with secondary navigation.\" });\n</script>\n","category":"Sidebar","path":"Sidebar/BlockSidebar09.vue","components":["avatar","avatarfallback","avatarimage","breadcrumbs","divider","dropdownmenu","dropdownmenucontent","dropdownmenugroup","dropdownmenuitem","dropdownmenulabel","dropdownmenuseparator","dropdownmenutrigger","label","navbar","placeholder","sidebar","sidebarcontent","sidebarfooter","sidebargroup","sidebargroupcontent","sidebarheader","sidebarinput","sidebarinset","sidebarmenu","sidebarmenubutton","sidebarmenuitem","sidebarprovider","sidebartrigger","switch"]},{"name":"Sidebar 10","fileName":"BlockSidebar10.vue","file":"<template>\n  <UiSidebarProvider v-slot=\"{ isMobile }\">\n    <!-- Main Sidebar -->\n    <UiSidebar class=\"border-r-0\">\n      <UiSidebarHeader>\n        <!-- Team Switcher -->\n        <UiSidebarMenu>\n          <UiSidebarMenuItem>\n            <UiDropdownMenu>\n              <UiDropdownMenuTrigger as-child>\n                <UiSidebarMenuButton class=\"w-full px-1.5\">\n                  <div\n                    class=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\"\n                  >\n                    <Icon v-if=\"activeTeam\" :name=\"activeTeam?.logo\" mode=\"svg\" class=\"size-3\" />\n                  </div>\n                  <span class=\"truncate font-semibold\">{{ activeTeam?.name }}</span>\n                  <Icon name=\"lucide:chevron-down\" class=\"ml-auto opacity-50\" />\n                </UiSidebarMenuButton>\n              </UiDropdownMenuTrigger>\n              <UiDropdownMenuContent\n                class=\"w-64 rounded-lg\"\n                align=\"start\"\n                side=\"bottom\"\n                :side-offset=\"4\"\n              >\n                <UiDropdownMenuLabel label=\"Teams\" class=\"text-xs text-muted-foreground\" />\n\n                <UiDropdownMenuItem\n                  v-for=\"(team, index) in data.teams\"\n                  :key=\"team.name\"\n                  class=\"gap-2 p-2\"\n                  @click=\"activeTeam = team\"\n                >\n                  <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                    <Icon :name=\"team.logo\" class=\"size-4 shrink-0\" />\n                  </div>\n                  {{ team.name }}\n                  <UiDropdownMenuShortcut>⌘{{ index + 1 }}</UiDropdownMenuShortcut>\n                </UiDropdownMenuItem>\n\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem class=\"gap-2 p-2\">\n                  <div\n                    class=\"flex size-6 items-center justify-center rounded-md border bg-background\"\n                  >\n                    <Icon name=\"lucide:plus\" class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">Add team</div>\n                </UiDropdownMenuItem>\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiSidebarMenuItem>\n        </UiSidebarMenu>\n        <!-- Nav Main -->\n        <UiSidebarMenu>\n          <UiSidebarMenuItem v-for=\"(item, index) in data.navMain\" :key=\"index\">\n            <UiSidebarMenuButton as-child :is-active=\"item.isActive\">\n              <NuxtLink :href=\"item.url\">\n                <Icon mode=\"svg\" :name=\"item.icon\" />\n                <span>{{ item.title }}</span>\n              </NuxtLink>\n            </UiSidebarMenuButton>\n          </UiSidebarMenuItem>\n        </UiSidebarMenu>\n      </UiSidebarHeader>\n      <!-- Sidebar content -->\n      <UiSidebarContent>\n        <!-- Nav favorites -->\n        <UiSidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <UiSidebarGroupLabel label=\"Favorites\" />\n          <UiSidebarMenu>\n            <UiSidebarMenuItem v-for=\"(item, index) in data.favorites\" :key=\"index\">\n              <UiSidebarMenuButton as-child>\n                <NuxtLink :href=\"item.url\" :title=\"item.name\">\n                  <span>{{ item.emoji }}</span>\n                  <span>{{ item.name }}</span>\n                </NuxtLink>\n              </UiSidebarMenuButton>\n              <UiDropdownMenu>\n                <UiDropdownMenuTrigger as-child>\n                  <UiSidebarMenuAction show-on-hover>\n                    <Icon name=\"lucide:ellipsis-vertical\" class=\"rotate-90\" />\n                    <span class=\"sr-only\">More</span>\n                  </UiSidebarMenuAction>\n                </UiDropdownMenuTrigger>\n                <UiDropdownMenuContent\n                  class=\"w-56 rounded-lg\"\n                  :side=\"isMobile ? 'bottom' : 'right'\"\n                  :align=\"isMobile ? 'end' : 'start'\"\n                >\n                  <UiDropdownMenuItem>\n                    <Icon name=\"lucide:star-off\" class=\"text-muted-foreground\" />\n                    <span>Remove from Favorites</span>\n                  </UiDropdownMenuItem>\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem>\n                    <Icon name=\"lucide:link\" class=\"text-muted-foreground\" />\n                    <span>Copy Link</span>\n                  </UiDropdownMenuItem>\n                  <UiDropdownMenuItem>\n                    <Icon name=\"lucide:arrow-up-right\" class=\"text-muted-foreground\" />\n                    <span>Open in New Tab</span>\n                  </UiDropdownMenuItem>\n                  <UiDropdownMenuSeparator />\n                  <UiDropdownMenuItem>\n                    <Icon name=\"lucide:trash-2\" class=\"text-muted-foreground\" />\n                    <span>Delete</span>\n                  </UiDropdownMenuItem>\n                </UiDropdownMenuContent>\n              </UiDropdownMenu>\n            </UiSidebarMenuItem>\n\n            <UiSidebarMenuItem>\n              <UiSidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <Icon name=\"lucide:ellipsis-vertical\" class=\"rotate-90\" />\n                <span>More</span>\n              </UiSidebarMenuButton>\n            </UiSidebarMenuItem>\n          </UiSidebarMenu>\n        </UiSidebarGroup>\n        <!-- Nav workspaces -->\n        <UiSidebarGroup>\n          <UiSidebarGroupLabel label=\"Workspaces\" />\n          <UiSidebarGroupContent>\n            <UiSidebarMenu>\n              <UiCollapsible v-for=\"(workspace, index) in data.workspaces\" :key=\"index\">\n                <UiSidebarMenuItem>\n                  <UiSidebarMenuButton as-child>\n                    <NuxtLink href=\"#\">\n                      <span>{{ workspace.emoji }}</span>\n                      <span>{{ workspace.name }}</span>\n                    </NuxtLink>\n                  </UiSidebarMenuButton>\n                  <UiCollapsibleTrigger as-child>\n                    <UiSidebarMenuAction\n                      class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                      show-on-hover\n                    >\n                      <Icon name=\"lucide:chevron-right\" mode=\"svg\" />\n                    </UiSidebarMenuAction>\n                  </UiCollapsibleTrigger>\n                  <UiSidebarMenuAction show-on-hover>\n                    <Icon name=\"lucide:plus\" />\n                  </UiSidebarMenuAction>\n                  <UiCollapsibleContent>\n                    <UiSidebarMenuSub>\n                      <UiSidebarMenuSubItem v-for=\"(page, idx) in workspace.pages\" :key=\"idx\">\n                        <UiSidebarMenuSubButton as-child>\n                          <NuxtLink href=\"#\">\n                            <span>{{ page.emoji }}</span>\n                            <span>{{ page.name }}</span>\n                          </NuxtLink>\n                        </UiSidebarMenuSubButton>\n                      </UiSidebarMenuSubItem>\n                    </UiSidebarMenuSub>\n                  </UiCollapsibleContent>\n                </UiSidebarMenuItem>\n              </UiCollapsible>\n\n              <UiSidebarMenuItem>\n                <UiSidebarMenuButton class=\"text-sidebar-foreground/70\">\n                  <Icon name=\"lucide:ellipsis-vertical\" class=\"rotate-90\" />\n                  <span>More</span>\n                </UiSidebarMenuButton>\n              </UiSidebarMenuItem>\n            </UiSidebarMenu>\n          </UiSidebarGroupContent>\n        </UiSidebarGroup>\n        <!-- Nav secondary -->\n        <UiSidebarGroup class=\"mt-auto\">\n          <UiSidebarGroupContent>\n            <UiSidebarMenu>\n              <UiSidebarMenuItem v-for=\"(item, index) in data.navSecondary\" :key=\"index\">\n                <UiSidebarMenuButton as-child>\n                  <NuxtLink :href=\"item.url\">\n                    <Icon mode=\"svg\" :name=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                  </NuxtLink>\n                </UiSidebarMenuButton>\n              </UiSidebarMenuItem>\n            </UiSidebarMenu>\n          </UiSidebarGroupContent>\n        </UiSidebarGroup>\n      </UiSidebarContent>\n    </UiSidebar>\n    <UiSidebarInset>\n      <header class=\"flex h-14 shrink-0 items-center gap-2\">\n        <div class=\"flex flex-1 items-center gap-2 px-3\">\n          <UiSidebarTrigger />\n          <UiDivider orientation=\"vertical\" class=\"mr-2 h-4 w-px\" />\n          <UiBreadcrumbs :items=\"breadcrumbItems\" />\n        </div>\n        <div class=\"ml-auto px-3\">\n          <!-- Nav actions -->\n          <div class=\"flex items-center gap-2 text-sm\">\n            <div class=\"hidden font-medium text-muted-foreground md:inline-block\">Edit Oct 08</div>\n            <UiButton variant=\"ghost\" size=\"icon\" class=\"h-7 w-7\">\n              <Icon name=\"lucide:star\" mode=\"svg\" />\n            </UiButton>\n            <UiPopover v-model:open=\"navOpen\">\n              <UiPopoverTrigger as-child>\n                <UiButton variant=\"ghost\" size=\"icon\" class=\"h-7 w-7 data-[state=open]:bg-accent\">\n                  <Icon name=\"lucide:ellipsis-vertical\" class=\"rotate-90\" />\n                </UiButton>\n              </UiPopoverTrigger>\n              <UiPopoverContent class=\"w-56 overflow-hidden rounded-lg p-0\" align=\"end\">\n                <!-- Sidebar inside the popup -->\n                <UiSidebar collapsible=\"none\" class=\"bg-transparent\">\n                  <UiSidebarContent>\n                    <UiSidebarGroup\n                      v-for=\"(group, index) in navActions\"\n                      :key=\"index\"\n                      class=\"border-b last:border-none\"\n                    >\n                      <UiSidebarGroupContent class=\"gap-0\">\n                        <UiSidebarMenu>\n                          <UiSidebarMenuItem v-for=\"(item, idx) in group\" :key=\"idx\">\n                            <UiSidebarMenuButton>\n                              <Icon mode=\"svg\" :name=\"item.icon\" /> <span>{{ item.label }}</span>\n                            </UiSidebarMenuButton>\n                          </UiSidebarMenuItem>\n                        </UiSidebarMenu>\n                      </UiSidebarGroupContent>\n                    </UiSidebarGroup>\n                  </UiSidebarContent>\n                </UiSidebar>\n              </UiPopoverContent>\n            </UiPopover>\n          </div>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n        <UiPlaceholder class=\"mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n        <UiPlaceholder class=\"mx-auto h-full w-full max-w-3xl rounded-xl\" />\n      </div>\n    </UiSidebarInset>\n  </UiSidebarProvider>\n</template>\n\n<script lang=\"ts\" setup>\n  const breadcrumbItems = [{ label: \"Project Management & Task Tracking\" }];\n  useSeoMeta({ title: \"A sidebar in a popover.\" });\n  const navActions = [\n    [\n      { label: \"Customize Page\", icon: \"lucide:settings-2\" },\n      { label: \"Turn into wiki\", icon: \"lucide:file-text\" },\n    ],\n    [\n      { label: \"Copy Link\", icon: \"lucide:link\" },\n      { label: \"Duplicate\", icon: \"lucide:copy\" },\n      { label: \"Move to\", icon: \"lucide:corner-up-right\" },\n      { label: \"Move to Trash\", icon: \"lucide:trash-2\" },\n    ],\n    [\n      { label: \"Undo\", icon: \"lucide:corner-up-left\" },\n      { label: \"View analytics\", icon: \"lucide:line-chart\" },\n      { label: \"Version History\", icon: \"lucide:gallery-vertical-end\" },\n      { label: \"Show delete pages\", icon: \"lucide:trash\" },\n      { label: \"Notifications\", icon: \"lucide:bell\" },\n    ],\n    [\n      { label: \"Import\", icon: \"lucide:arrow-up\" },\n      { label: \"Export\", icon: \"lucide:arrow-down\" },\n    ],\n  ];\n\n  const navOpen = ref(true);\n\n  const data = {\n    teams: [\n      { name: \"Acme Inc\", logo: \"lucide:command\", plan: \"Enterprise\" },\n      { name: \"Acme Corp.\", logo: \"lucide:audio-waveform\", plan: \"Startup\" },\n      { name: \"Evil Corp.\", logo: \"lucide:skull\", plan: \"Free\" },\n    ],\n    navMain: [\n      { title: \"Search\", url: \"#\", icon: \"lucide:search\" },\n      { title: \"Ask AI\", url: \"#\", icon: \"lucide:sparkles\" },\n      { title: \"Home\", url: \"#\", icon: \"lucide:home\", isActive: true },\n      { title: \"Inbox\", url: \"#\", icon: \"lucide:inbox\", badge: \"10\" },\n    ],\n    navSecondary: [\n      { title: \"Calendar\", url: \"#\", icon: \"lucide:calendar\" },\n      { title: \"Settings\", url: \"#\", icon: \"lucide:settings-2\" },\n      { title: \"Templates\", url: \"#\", icon: \"lucide:blocks\" },\n      { title: \"Trash\", url: \"#\", icon: \"lucide:trash-2\" },\n      { title: \"Help\", url: \"#\", icon: \"lucide:message-circle-question\" },\n    ],\n    favorites: [\n      { name: \"Project Management & Task Tracking\", url: \"#\", emoji: \"📊\" },\n      { name: \"Family Recipe Collection & Meal Planning\", url: \"#\", emoji: \"🍳\" },\n      { name: \"Fitness Tracker & Workout Routines\", url: \"#\", emoji: \"💪\" },\n      { name: \"Book Notes & Reading List\", url: \"#\", emoji: \"📚\" },\n      { name: \"Sustainable Gardening Tips & Plant Care\", url: \"#\", emoji: \"🌱\" },\n      { name: \"Language Learning Progress & Resources\", url: \"#\", emoji: \"🗣️\" },\n      { name: \"Home Renovation Ideas & Budget Tracker\", url: \"#\", emoji: \"🏠\" },\n      { name: \"Personal Finance & Investment Portfolio\", url: \"#\", emoji: \"💰\" },\n      { name: \"Movie & TV Show Watchlist with Reviews\", url: \"#\", emoji: \"🎬\" },\n      { name: \"Daily Habit Tracker & Goal Setting\", url: \"#\", emoji: \"✅\" },\n    ],\n    workspaces: [\n      {\n        name: \"Personal Life Management\",\n        emoji: \"🏠\",\n        pages: [\n          { name: \"Daily Journal & Reflection\", url: \"#\", emoji: \"📔\" },\n          { name: \"Health & Wellness Tracker\", url: \"#\", emoji: \"🍏\" },\n          { name: \"Personal Growth & Learning Goals\", url: \"#\", emoji: \"🌟\" },\n        ],\n      },\n      {\n        name: \"Professional Development\",\n        emoji: \"💼\",\n        pages: [\n          { name: \"Career Objectives & Milestones\", url: \"#\", emoji: \"🎯\" },\n          { name: \"Skill Acquisition & Training Log\", url: \"#\", emoji: \"🧠\" },\n          { name: \"Networking Contacts & Events\", url: \"#\", emoji: \"🤝\" },\n        ],\n      },\n      {\n        name: \"Creative Projects\",\n        emoji: \"🎨\",\n        pages: [\n          { name: \"Writing Ideas & Story Outlines\", url: \"#\", emoji: \"✍️\" },\n          { name: \"Art & Design Portfolio\", url: \"#\", emoji: \"🖼️\" },\n          { name: \"Music Composition & Practice Log\", url: \"#\", emoji: \"🎵\" },\n        ],\n      },\n      {\n        name: \"Home Management\",\n        emoji: \"🏡\",\n        pages: [\n          { name: \"Household Budget & Expense Tracking\", url: \"#\", emoji: \"💰\" },\n          { name: \"Home Maintenance Schedule & Tasks\", url: \"#\", emoji: \"🔧\" },\n          { name: \"Family Calendar & Event Planning\", url: \"#\", emoji: \"📅\" },\n        ],\n      },\n      {\n        name: \"Travel & Adventure\",\n        emoji: \"🧳\",\n        pages: [\n          { name: \"Trip Planning & Itineraries\", url: \"#\", emoji: \"🗺️\" },\n          { name: \"Travel Bucket List & Inspiration\", url: \"#\", emoji: \"🌎\" },\n          { name: \"Travel Journal & Photo Gallery\", url: \"#\", emoji: \"📸\" },\n        ],\n      },\n    ],\n  };\n  const activeTeam = ref(data.teams[0]);\n</script>\n","category":"Sidebar","path":"Sidebar/BlockSidebar10.vue","components":["breadcrumbs","button","collapsible","collapsiblecontent","collapsibletrigger","divider","dropdownmenu","dropdownmenucontent","dropdownmenuitem","dropdownmenulabel","dropdownmenuseparator","dropdownmenushortcut","dropdownmenutrigger","placeholder","popover","popovercontent","popovertrigger","sidebar","sidebarcontent","sidebargroup","sidebargroupcontent","sidebargrouplabel","sidebarheader","sidebarinset","sidebarmenu","sidebarmenuaction","sidebarmenubutton","sidebarmenuitem","sidebarmenusub","sidebarmenusubbutton","sidebarmenusubitem","sidebarprovider","sidebartrigger"]},{"name":"Sidebar 11","fileName":"BlockSidebar11.vue","file":"<template>\n  <UiSidebarProvider>\n    <!-- Main sidebar -->\n    <UiSidebar>\n      <UiSidebarContent>\n        <UiSidebarGroup>\n          <UiSidebarGroupLabel label=\"Changes\" />\n          <UiSidebarGroupContent>\n            <UiSidebarMenu>\n              <UiSidebarMenuItem v-for=\"(change, index) in data.changes\" :key=\"index\">\n                <UiSidebarMenuButton>\n                  <Icon mode=\"svg\" name=\"lucide:file\" />\n                  {{ change.file }}\n                </UiSidebarMenuButton>\n                <UiSidebarMenuBadge>{{ change.state }}</UiSidebarMenuBadge>\n              </UiSidebarMenuItem>\n            </UiSidebarMenu>\n          </UiSidebarGroupContent>\n        </UiSidebarGroup>\n        <UiSidebarGroup>\n          <UiSidebarGroupLabel label=\"Files\" />\n          <UiSidebarGroupContent>\n            <UiSidebarMenu>\n              <TreeComp v-for=\"(file, index) in data.tree\" :key=\"index\" :item=\"file\" />\n            </UiSidebarMenu>\n          </UiSidebarGroupContent>\n        </UiSidebarGroup>\n      </UiSidebarContent>\n      <UiSidebarRail />\n    </UiSidebar>\n    <UiSidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <UiSidebarTrigger class=\"-ml-1\" />\n        <UiDivider orientation=\"vertical\" class=\"mr-2 h-4 w-px\" />\n        <UiBreadcrumbs :items=\"breadcrumbItems\" />\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <UiPlaceholder class=\"aspect-video rounded-xl\" />\n          <UiPlaceholder class=\"aspect-video rounded-xl\" />\n          <UiPlaceholder class=\"aspect-video rounded-xl\" />\n        </div>\n        <UiPlaceholder class=\"min-h-screen flex-1 rounded-xl md:min-h-min\" />\n      </div>\n    </UiSidebarInset>\n  </UiSidebarProvider>\n</template>\n\n<script lang=\"ts\" setup>\n  import {\n    Icon,\n    UiCollapsible,\n    UiCollapsibleContent,\n    UiCollapsibleTrigger,\n    UiSidebarMenuButton,\n    UiSidebarMenuItem,\n    UiSidebarMenuSub,\n  } from \"#components\";\n\n  const breadcrumbItems = [{ label: \"components\" }, { label: \"ui\" }, { label: \"button.vue\" }];\n  useSeoMeta({ title: \"A sidebar with a collapsible file tree.\" });\n  const data = {\n    changes: [\n      { file: \"README.md\", state: \"M\" },\n      { file: \"api/hello/route.ts\", state: \"U\" },\n      { file: \"app/layout.tsx\", state: \"M\" },\n    ],\n    tree: [\n      [\"app\", [\"api\", [\"hello\", [\"route.ts\"]], \"page.tsx\", \"layout.tsx\", [\"blog\", [\"page.tsx\"]]]],\n      [\"components\", [\"ui\", \"button.tsx\", \"card.tsx\"], \"header.tsx\", \"footer.tsx\"],\n      [\"lib\", [\"util.ts\"]],\n      [\"public\", \"favicon.ico\", \"vercel.svg\"],\n      \".eslintrc.json\",\n      \".gitignore\",\n      \"next.config.js\",\n      \"tailwind.config.js\",\n      \"package.json\",\n      \"README.md\",\n    ],\n  };\n\n  const TreeComp = defineComponent({\n    props: {\n      item: {\n        type: [String, Array] as PropType<string | any[]>,\n        required: true,\n      },\n    },\n    computed: {\n      itemData() {\n        const [name, ...items] = Array.isArray(this.item) ? this.item : [this.item];\n        return { name, items };\n      },\n    },\n    render() {\n      const { name, items } = this.itemData;\n      if (!items.length) {\n        return h(\n          UiSidebarMenuButton,\n          {\n            class: \"data-[active=true]:bg-transparent\",\n          },\n          () => [h(Icon, { mode: \"svg\", name: \"lucide:file\" }), name]\n        );\n      }\n\n      return h(\n        UiSidebarMenuItem,\n        {},\n        {\n          default: () =>\n            h(\n              UiCollapsible,\n              {\n                class: \"group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90\",\n                defaultOpen: name === \"components\" || name === \"ui\",\n              },\n              {\n                default: () => [\n                  h(UiCollapsibleTrigger, { asChild: true }, () =>\n                    h(UiSidebarMenuButton, () => [\n                      h(Icon, {\n                        mode: \"svg\",\n                        name: \"lucide:chevron-right\",\n                      }),\n                      h(Icon, { mode: \"svg\", name: \"lucide:folder\" }),\n                      name,\n                    ])\n                  ),\n                  h(UiCollapsibleContent, () =>\n                    h(\n                      UiSidebarMenuSub,\n                      {},\n                      {\n                        default: () =>\n                          items.map((child, index) =>\n                            h(TreeComp, {\n                              key: index,\n                              item: child,\n                            })\n                          ),\n                      }\n                    )\n                  ),\n                ],\n              }\n            ),\n        }\n      );\n    },\n  });\n</script>\n","category":"Sidebar","path":"Sidebar/BlockSidebar11.vue","components":["breadcrumbs","divider","placeholder","sidebar","sidebarcontent","sidebargroup","sidebargroupcontent","sidebargrouplabel","sidebarinset","sidebarmenu","sidebarmenubadge","sidebarmenubutton","sidebarmenuitem","sidebarprovider","sidebarrail","sidebartrigger"]},{"name":"Sidebar 12","fileName":"BlockSidebar12.vue","file":"<template>\n  <UiSidebarProvider v-slot=\"{ isMobile }\" class=\"[--sidebar-width:280px_!important]\">\n    <!-- Main Sidebar -->\n    <UiSidebar>\n      <UiSidebarHeader class=\"h-16 border-b border-sidebar-border\">\n        <!-- Logged in user -->\n        <UiSidebarMenu>\n          <UiSidebarMenuItem>\n            <UiDropdownMenu>\n              <UiDropdownMenuTrigger as-child>\n                <UiSidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <UiAvatar class=\"h-8 w-8 rounded-lg\">\n                    <UiAvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <UiAvatarFallback class=\"rounded-lg\">BB</UiAvatarFallback>\n                  </UiAvatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <Icon name=\"lucide:chevrons-up-down\" class=\"ml-auto size-4\" />\n                </UiSidebarMenuButton>\n              </UiDropdownMenuTrigger>\n              <UiDropdownMenuContent\n                class=\"w-(--reka-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n                :side=\"isMobile ? 'bottom' : 'right'\"\n                :side-offset=\"4\"\n                align=\"end\"\n              >\n                <UiDropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <UiAvatar class=\"size-8 rounded-lg\">\n                      <UiAvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <UiAvatarFallback class=\"rounded-lg\">BB</UiAvatarFallback>\n                    </UiAvatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </UiDropdownMenuLabel>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuGroup>\n                  <UiDropdownMenuItem icon=\"lucide:sparkles\" title=\"Upgrade to Pro\" />\n                </UiDropdownMenuGroup>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuGroup>\n                  <UiDropdownMenuItem icon=\"lucide:badge-check\" title=\"Account\" />\n                  <UiDropdownMenuItem icon=\"lucide:credit-card\" title=\"Billing\" />\n                  <UiDropdownMenuItem icon=\"lucide:settings-2\" title=\"Settings\" />\n                  <UiDropdownMenuItem icon=\"lucide:bell\" title=\"Notifications\" />\n                </UiDropdownMenuGroup>\n                <UiDropdownMenuSeparator />\n                <UiDropdownMenuItem icon=\"lucide:log-out\" title=\"Log out\" />\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiSidebarMenuItem>\n        </UiSidebarMenu>\n      </UiSidebarHeader>\n      <UiSidebarContent>\n        <!-- Datepicker -->\n        <UiSidebarGroup class=\"px-0\">\n          <UiSidebarGroupContent>\n            <div class=\"flex justify-center\">\n              <UiDatepicker\n                :model-value=\"new Date()\"\n                borderless\n                class=\"[--vc-bg:var(--sidebar-background)_!important]\"\n              />\n            </div>\n          </UiSidebarGroupContent>\n        </UiSidebarGroup>\n        <UiSidebarSeparator class=\"mx-0\" />\n        <!-- Calendars -->\n        <template v-for=\"(calendar, index) in data.calendars\" :key=\"index\">\n          <UiSidebarGroup class=\"py-0\">\n            <UiCollapsible :default-open=\"index === 0\" class=\"group/collapsible\">\n              <UiSidebarGroupLabel\n                as-child\n                class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <UiCollapsibleTrigger>\n                  {{ calendar.name }}\n                  <Icon\n                    name=\"lucide:chevron-right\"\n                    class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </UiCollapsibleTrigger>\n              </UiSidebarGroupLabel>\n              <UiCollapsibleContent>\n                <UiSidebarGroupContent>\n                  <UiSidebarMenu>\n                    <UiSidebarMenuItem v-for=\"(item, idx) in calendar.items\" :key=\"idx\">\n                      <UiSidebarMenuButton>\n                        <div\n                          :data-active=\"idx < 2\"\n                          class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                        >\n                          <Icon\n                            mode=\"svg\"\n                            name=\"lucide:check\"\n                            class=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                          />\n                        </div>\n                        {{ item }}\n                      </UiSidebarMenuButton>\n                    </UiSidebarMenuItem>\n                  </UiSidebarMenu>\n                </UiSidebarGroupContent>\n              </UiCollapsibleContent>\n            </UiCollapsible>\n          </UiSidebarGroup>\n          <UiSidebarSeparator class=\"mx-0\" />\n        </template>\n      </UiSidebarContent>\n      <UiSidebarFooter>\n        <UiSidebarMenu>\n          <UiSidebarMenuItem>\n            <UiSidebarMenuButton>\n              <Icon name=\"lucide:plus\" mode=\"svg\" /> <span>New Calendar</span>\n            </UiSidebarMenuButton>\n          </UiSidebarMenuItem>\n        </UiSidebarMenu>\n      </UiSidebarFooter>\n      <UiSidebarRail />\n    </UiSidebar>\n\n    <UiSidebarInset>\n      <header\n        class=\"sticky top-0 z-20 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\"\n      >\n        <UiSidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <UiBreadcrumbs :items=\"breadcrumbItems\" />\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n          <UiPlaceholder v-for=\"n in 20\" :key=\"n\" class=\"aspect-square rounded-xl\" />\n        </div>\n      </div>\n    </UiSidebarInset>\n  </UiSidebarProvider>\n</template>\n\n<script lang=\"ts\" setup>\n  const breadcrumbItems = computed(() => [\n    { label: useDateFormat(new Date(), \"MMMM DD, YYYY\").value },\n  ]);\n  useSeoMeta({ title: \"A sidebar with a calendar.\" });\n  const data = {\n    user: {\n      name: \"breezy\",\n      email: \"m@example.com\",\n      avatar: \"https://behonbaker.com/icon.png\",\n    },\n    calendars: [\n      { name: \"My Calendars\", items: [\"Personal\", \"Work\", \"Family\"] },\n      { name: \"Favorites\", items: [\"Holidays\", \"Birthdays\"] },\n      { name: \"Other\", items: [\"Travel\", \"Reminders\", \"Deadlines\"] },\n    ],\n  };\n</script>\n","category":"Sidebar","path":"Sidebar/BlockSidebar12.vue","components":["avatar","avatarfallback","avatarimage","breadcrumbs","collapsible","collapsiblecontent","collapsibletrigger","datepicker","dropdownmenu","dropdownmenucontent","dropdownmenugroup","dropdownmenuitem","dropdownmenulabel","dropdownmenuseparator","dropdownmenutrigger","placeholder","sidebar","sidebarcontent","sidebarfooter","sidebargroup","sidebargroupcontent","sidebargrouplabel","sidebarheader","sidebarinset","sidebarmenu","sidebarmenubutton","sidebarmenuitem","sidebarprovider","sidebarrail","sidebarseparator","sidebartrigger"]},{"name":"Sidebar 13","fileName":"BlockSidebar13.vue","file":"<template>\n  <div class=\"flex h-svh items-center justify-center\">\n    <UiDialog v-model:open=\"open\">\n      <UiDialogTrigger as-child>\n        <UiButton size=\"sm\">Open Dialog</UiButton>\n      </UiDialogTrigger>\n      <UiDialogContent\n        class=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\"\n      >\n        <UiDialogTitle class=\"sr-only\">Settings</UiDialogTitle>\n        <UiDialogDescription class=\"sr-only\"> Customize your settings here. </UiDialogDescription>\n        <UiSidebarProvider class=\"items-start\">\n          <UiSidebar collapsible=\"none\" class=\"hidden md:flex\">\n            <UiSidebarContent>\n              <UiSidebarGroup>\n                <UiSidebarGroupContent>\n                  <UiSidebarMenu>\n                    <UiSidebarMenuItem v-for=\"item in data.nav\" :key=\"item.name\">\n                      <UiSidebarMenuButton as-child :is-active=\"item.name === 'Messages & media'\">\n                        <NuxtLink href=\"#\">\n                          <Icon :name=\"item.icon\" />\n                          <span>{{ item.name }}</span>\n                        </NuxtLink>\n                      </UiSidebarMenuButton>\n                    </UiSidebarMenuItem>\n                  </UiSidebarMenu>\n                </UiSidebarGroupContent>\n              </UiSidebarGroup>\n            </UiSidebarContent>\n          </UiSidebar>\n          <main class=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header\n              class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\"\n            >\n              <div class=\"flex items-center gap-2 px-4\">\n                <UiBreadcrumbs :items=\"breadcrumbItems\" />\n              </div>\n            </header>\n            <div class=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4\">\n              <div class=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n                <UiPlaceholder v-for=\"n in 40\" :key=\"n\" class=\"aspect-square rounded-xl\" />\n              </div>\n            </div>\n          </main>\n        </UiSidebarProvider>\n      </UiDialogContent>\n    </UiDialog>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  useSeoMeta({ title: \"A sidebar in a dialog.\" });\n  const breadcrumbItems = [\n    { label: \"Settings\", href: \"#\" },\n    { label: \"Messages & media\", href: \"#\" },\n  ];\n  const open = ref(true);\n  const data = {\n    nav: [\n      { name: \"Notifications\", icon: \"lucide:bell\" },\n      { name: \"Navigation\", icon: \"lucide:menu\" },\n      { name: \"Home\", icon: \"lucide:home\" },\n      { name: \"Appearance\", icon: \"lucide:paintbrush\" },\n      { name: \"Messages & media\", icon: \"lucide:message-circle\" },\n      { name: \"Language & region\", icon: \"lucide:globe\" },\n      { name: \"Accessibility\", icon: \"lucide:keyboard\" },\n      { name: \"Mark as read\", icon: \"lucide:check\" },\n      { name: \"Audio & video\", icon: \"lucide:video\" },\n      { name: \"Connected accounts\", icon: \"lucide:link\" },\n      { name: \"Privacy & visibility\", icon: \"lucide:lock\" },\n      { name: \"Advanced\", icon: \"lucide:settings\" },\n    ],\n  };\n</script>\n","category":"Sidebar","path":"Sidebar/BlockSidebar13.vue","components":["breadcrumbs","button","dialog","dialogcontent","dialogdescription","dialogtitle","dialogtrigger","placeholder","sidebar","sidebarcontent","sidebargroup","sidebargroupcontent","sidebarmenu","sidebarmenubutton","sidebarmenuitem","sidebarprovider"]},{"name":"Sidebar 14","fileName":"BlockSidebar14.vue","file":"<template>\n  <UiSidebarProvider>\n    <UiSidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <UiBreadcrumbs :items=\"breadcrumbItems\" />\n        <UiSidebarTrigger class=\"-mr-1 ml-auto rotate-180\" />\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <UiPlaceholder v-for=\"n in 3\" :key=\"n\" class=\"aspect-video rounded-xl\" />\n        </div>\n        <UiPlaceholder class=\"min-h-screen flex-1 rounded-xl md:min-h-min\" />\n      </div>\n    </UiSidebarInset>\n    <!-- Main Sidebar -->\n    <UiSidebar side=\"right\">\n      <UiSidebarContent>\n        <UiSidebarGroup>\n          <UiSidebarGroupLabel label=\"Table of Contents\" />\n          <UiSidebarGroupContent>\n            <UiSidebarMenu>\n              <UiSidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n                <UiSidebarMenuButton as-child>\n                  <NuxtLink :href=\"item.url\" class=\"font-medium\">\n                    {{ item.title }}\n                  </NuxtLink>\n                </UiSidebarMenuButton>\n                <UiSidebarMenuSub v-if=\"item.items?.length\">\n                  <UiSidebarMenuSubItem v-for=\"(child, index) in item.items\" :key=\"index\">\n                    <UiSidebarMenuSubButton as-child :is-active=\"child.isActive\">\n                      <NuxtLink :href=\"child.url\">{{ child.title }}</NuxtLink>\n                    </UiSidebarMenuSubButton>\n                  </UiSidebarMenuSubItem>\n                </UiSidebarMenuSub>\n              </UiSidebarMenuItem>\n            </UiSidebarMenu>\n          </UiSidebarGroupContent>\n        </UiSidebarGroup>\n      </UiSidebarContent>\n      <UiSidebarRail />\n    </UiSidebar>\n  </UiSidebarProvider>\n</template>\n\n<script lang=\"ts\" setup>\n  useSeoMeta({ title: \"A sidebar on the right.\" });\n  const breadcrumbItems = [\n    { label: \"Building Your Application\", href: \"#\" },\n    { label: \"Data Fetching\", href: \"#\" },\n  ];\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          { title: \"Installation\", url: \"#\" },\n          { title: \"Project Structure\", url: \"#\" },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          { title: \"Routing\", url: \"#\" },\n          { title: \"Data Fetching\", url: \"#\", isActive: true },\n          { title: \"Rendering\", url: \"#\" },\n          { title: \"Caching\", url: \"#\" },\n          { title: \"Styling\", url: \"#\" },\n          { title: \"Optimizing\", url: \"#\" },\n          { title: \"Configuring\", url: \"#\" },\n          { title: \"Testing\", url: \"#\" },\n          { title: \"Authentication\", url: \"#\" },\n          { title: \"Deploying\", url: \"#\" },\n          { title: \"Upgrading\", url: \"#\" },\n          { title: \"Examples\", url: \"#\" },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          { title: \"Components\", url: \"#\" },\n          { title: \"File Conventions\", url: \"#\" },\n          { title: \"Functions\", url: \"#\" },\n          { title: \"next.config.js Options\", url: \"#\" },\n          { title: \"CLI\", url: \"#\" },\n          { title: \"Edge Runtime\", url: \"#\" },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          { title: \"Accessibility\", url: \"#\" },\n          { title: \"Fast Refresh\", url: \"#\" },\n          { title: \"Next.js Compiler\", url: \"#\" },\n          { title: \"Supported Browsers\", url: \"#\" },\n          { title: \"Turbopack\", url: \"#\" },\n        ],\n      },\n      {\n        title: \"Community\",\n        url: \"#\",\n        items: [{ title: \"Contribution Guide\", url: \"#\" }],\n      },\n    ],\n  };\n</script>\n","category":"Sidebar","path":"Sidebar/BlockSidebar14.vue","components":["breadcrumbs","placeholder","sidebar","sidebarcontent","sidebargroup","sidebargroupcontent","sidebargrouplabel","sidebarinset","sidebarmenu","sidebarmenubutton","sidebarmenuitem","sidebarmenusub","sidebarmenusubbutton","sidebarmenusubitem","sidebarprovider","sidebarrail","sidebartrigger"]},{"name":"Sidebar Collapsible Side Group","fileName":"BlockSidebarCollapsibleSideGroup.vue","file":"<template>\n  <UiSidebarProvider>\n    <UiSidebar>\n      <UiSidebarContent>\n        <UiCollapsible v-slot=\"{ open }\" default-open>\n          <UiSidebarGroup>\n            <UiSidebarGroupLabel\n              class=\"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              as-child\n            >\n              <UiCollapsibleTrigger>\n                Application\n                <Icon class=\"ml-auto\" name=\"lucide:chevron-down\" :class=\"[open && 'rotate-180']\" />\n              </UiCollapsibleTrigger>\n            </UiSidebarGroupLabel>\n            <UiCollapsibleContent>\n              <UiSidebarGroupContent>\n                <UiSidebarMenu>\n                  <UiSidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n                    <UiSidebarMenuButton as-child>\n                      <a :href=\"item.url\">\n                        <Icon :name=\"item.icon\" />\n                        <span>{{ item.title }}</span>\n                      </a>\n                    </UiSidebarMenuButton>\n                  </UiSidebarMenuItem>\n                </UiSidebarMenu>\n              </UiSidebarGroupContent>\n            </UiCollapsibleContent>\n          </UiSidebarGroup>\n        </UiCollapsible>\n      </UiSidebarContent>\n    </UiSidebar>\n    <UiSidebarInset>\n      <UiNavbar sticky>\n        <UiContainer class=\"flex h-12 items-center\">\n          <UiSidebarTrigger />\n        </UiContainer>\n      </UiNavbar>\n    </UiSidebarInset>\n  </UiSidebarProvider>\n</template>\n\n<script lang=\"ts\" setup>\n  // Menu items.\n  const items = [\n    { title: \"Home\", url: \"#\", icon: \"lucide:home\" },\n    { title: \"Inbox\", url: \"#\", icon: \"lucide:inbox\" },\n    { title: \"Calendar\", url: \"#\", icon: \"lucide:calendar\" },\n    { title: \"Search\", url: \"#\", icon: \"lucide:search\" },\n    { title: \"Settings\", url: \"#\", icon: \"lucide:settings\" },\n  ];\n</script>\n","category":"Sidebar","path":"Sidebar/BlockSidebarCollapsibleSideGroup.vue","components":["collapsible","collapsiblecontent","collapsibletrigger","container","navbar","sidebar","sidebarcontent","sidebargroup","sidebargroupcontent","sidebargrouplabel","sidebarinset","sidebarmenu","sidebarmenubutton","sidebarmenuitem","sidebarprovider","sidebartrigger"]},{"name":"Sidebar Controlled","fileName":"BlockSidebarControlled.vue","file":"<template>\n  <UiSidebarProvider v-model:open=\"state\">\n    <UiSidebar>\n      <UiSidebarContent>\n        <UiSidebarGroup>\n          <UiSidebarGroupContent>\n            <UiSidebarMenu>\n              <template v-for=\"(item, index) in items\" :key=\"index\">\n                <UiSidebarMenuItem>\n                  <UiSidebarMenuButton as-child>\n                    <NuxtLink :href=\"item.url\">\n                      {{ item.title }}\n                    </NuxtLink>\n                  </UiSidebarMenuButton>\n                  <UiSidebarMenuSub>\n                    <template v-for=\"(child, k) in item.items\" :key=\"`child-${k}`\">\n                      <UiSidebarMenuSubItem>\n                        <UiSidebarMenuSubButton as-child>\n                          <NuxtLink :href=\"child.url\">\n                            {{ child.title }}\n                          </NuxtLink>\n                        </UiSidebarMenuSubButton>\n                      </UiSidebarMenuSubItem>\n                    </template>\n                  </UiSidebarMenuSub>\n                </UiSidebarMenuItem>\n              </template>\n            </UiSidebarMenu>\n          </UiSidebarGroupContent>\n        </UiSidebarGroup>\n      </UiSidebarContent>\n    </UiSidebar>\n    <UiSidebarInset>\n      <UiNavbar sticky>\n        <UiContainer class=\"flex h-12 items-center\">\n          <UiButton size=\"icon-xs\" variant=\"outline\" @click=\"toggleState\">\n            <Icon\n              name=\"lucide:arrow-right-from-line\"\n              class=\"transition\"\n              :class=\"[state && 'rotate-180']\"\n            />\n            <span class=\"sr-only\">{{ state ? \"Close Sidebar\" : \"Open Sidebar\" }}</span>\n          </UiButton>\n        </UiContainer>\n      </UiNavbar>\n      <UiContainer class=\"py-5\">\n        <UiPlaceholder class=\"h-[450px]\">\n          <p>\n            The sidebar is currently <strong>{{ state ? \"open\" : \"closed\" }}</strong\n            >.\n          </p>\n        </UiPlaceholder>\n      </UiContainer>\n    </UiSidebarInset>\n  </UiSidebarProvider>\n</template>\n\n<script lang=\"ts\" setup>\n  const state = ref(false);\n  const toggleState = () => (state.value = !state.value);\n  const items = [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ];\n</script>\n","category":"Sidebar","path":"Sidebar/BlockSidebarControlled.vue","components":["button","container","navbar","placeholder","sidebar","sidebarcontent","sidebargroup","sidebargroupcontent","sidebarinset","sidebarmenu","sidebarmenubutton","sidebarmenuitem","sidebarmenusub","sidebarmenusubbutton","sidebarmenusubitem","sidebarprovider"]},{"name":"Sidebar First Sidebar","fileName":"BlockSidebarFirstSidebar.vue","file":"<template>\n  <UiSidebarProvider>\n    <UiSidebar>\n      <UiSidebarContent>\n        <UiSidebarGroup>\n          <UiSidebarGroupLabel label=\"Application\" />\n          <UiSidebarGroupContent>\n            <UiSidebarMenu>\n              <UiSidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n                <UiSidebarMenuButton as-child>\n                  <a :href=\"item.url\">\n                    <Icon :name=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                  </a>\n                </UiSidebarMenuButton>\n              </UiSidebarMenuItem>\n            </UiSidebarMenu>\n          </UiSidebarGroupContent>\n        </UiSidebarGroup>\n      </UiSidebarContent>\n    </UiSidebar>\n    <UiSidebarInset>\n      <UiNavbar sticky>\n        <UiContainer class=\"flex h-12 items-center\">\n          <UiSidebarTrigger />\n        </UiContainer>\n      </UiNavbar>\n    </UiSidebarInset>\n  </UiSidebarProvider>\n</template>\n\n<script lang=\"ts\" setup>\n  // Menu items.\n  const items = [\n    { title: \"Home\", url: \"#\", icon: \"lucide:home\" },\n    { title: \"Inbox\", url: \"#\", icon: \"lucide:inbox\" },\n    { title: \"Calendar\", url: \"#\", icon: \"lucide:calendar\" },\n    { title: \"Search\", url: \"#\", icon: \"lucide:search\" },\n    { title: \"Settings\", url: \"#\", icon: \"lucide:settings\" },\n  ];\n</script>\n","category":"Sidebar","path":"Sidebar/BlockSidebarFirstSidebar.vue","components":["container","navbar","sidebar","sidebarcontent","sidebargroup","sidebargroupcontent","sidebargrouplabel","sidebarinset","sidebarmenu","sidebarmenubutton","sidebarmenuitem","sidebarprovider","sidebartrigger"]},{"name":"Sidebar Footer","fileName":"BlockSidebarFooter.vue","file":"<template>\n  <UiSidebarProvider>\n    <UiSidebar>\n      <UiSidebarContent>\n        <UiSidebarGroup>\n          <UiSidebarGroupLabel label=\"Main\" />\n          <UiSidebarGroupContent>\n            <UiSidebarMenu>\n              <UiSidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n                <UiSidebarMenuButton as-child>\n                  <a :href=\"item.url\">\n                    <Icon :name=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                  </a>\n                </UiSidebarMenuButton>\n              </UiSidebarMenuItem>\n            </UiSidebarMenu>\n          </UiSidebarGroupContent>\n        </UiSidebarGroup>\n      </UiSidebarContent>\n\n      <UiSidebarFooter>\n        <UiSidebarMenu>\n          <UiSidebarMenuItem>\n            <UiDropdownMenu>\n              <UiDropdownMenuTrigger as-child>\n                <UiSidebarMenuButton>\n                  <Icon name=\"lucide:user\" /> Username\n                  <Icon name=\"lucide:chevron-up\" class=\"ml-auto\" />\n                </UiSidebarMenuButton>\n              </UiDropdownMenuTrigger>\n              <UiDropdownMenuContent side=\"top\" class=\"w-[--radix-popper-anchor-width]\">\n                <UiDropdownMenuItem\n                  v-for=\"item in ['Account', 'Billing', 'Sign Out']\"\n                  :key=\"item\"\n                  :title=\"item\"\n                />\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiSidebarMenuItem>\n        </UiSidebarMenu>\n      </UiSidebarFooter>\n    </UiSidebar>\n    <UiSidebarInset>\n      <UiNavbar sticky>\n        <UiContainer class=\"flex h-12 items-center\">\n          <UiSidebarTrigger />\n        </UiContainer>\n      </UiNavbar>\n    </UiSidebarInset>\n  </UiSidebarProvider>\n</template>\n\n<script lang=\"ts\" setup>\n  // Menu items.\n  const items = [\n    { title: \"Home\", url: \"#\", icon: \"lucide:home\" },\n    { title: \"Inbox\", url: \"#\", icon: \"lucide:inbox\" },\n    { title: \"Calendar\", url: \"#\", icon: \"lucide:calendar\" },\n    { title: \"Search\", url: \"#\", icon: \"lucide:search\" },\n    { title: \"Settings\", url: \"#\", icon: \"lucide:settings\" },\n  ];\n</script>\n","category":"Sidebar","path":"Sidebar/BlockSidebarFooter.vue","components":["container","dropdownmenu","dropdownmenucontent","dropdownmenuitem","dropdownmenutrigger","navbar","sidebar","sidebarcontent","sidebarfooter","sidebargroup","sidebargroupcontent","sidebargrouplabel","sidebarinset","sidebarmenu","sidebarmenubutton","sidebarmenuitem","sidebarprovider","sidebartrigger"]},{"name":"Sidebar Header","fileName":"BlockSidebarHeader.vue","file":"<template>\n  <UiSidebarProvider>\n    <UiSidebar>\n      <UiSidebarHeader>\n        <UiSidebarMenu>\n          <UiSidebarMenuItem>\n            <UiDropdownMenu>\n              <UiDropdownMenuTrigger as-child>\n                <UiSidebarMenuButton>\n                  Select Workspace\n                  <Icon name=\"lucide:chevron-down\" class=\"ml-auto\" />\n                </UiSidebarMenuButton>\n              </UiDropdownMenuTrigger>\n              <UiDropdownMenuContent class=\"w-[--radix-popper-anchor-width]\">\n                <UiDropdownMenuItem>\n                  <span>Acme Inc</span>\n                </UiDropdownMenuItem>\n                <UiDropdownMenuItem>\n                  <span>Acme Corp.</span>\n                </UiDropdownMenuItem>\n              </UiDropdownMenuContent>\n            </UiDropdownMenu>\n          </UiSidebarMenuItem>\n        </UiSidebarMenu>\n      </UiSidebarHeader>\n      <UiSidebarContent>\n        <UiSidebarGroup>\n          <UiSidebarGroupLabel>Application</UiSidebarGroupLabel>\n          <UiSidebarGroupContent>\n            <UiSidebarMenu>\n              <UiSidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n                <UiSidebarMenuButton as-child>\n                  <a :href=\"item.url\">\n                    <Icon :name=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                  </a>\n                </UiSidebarMenuButton>\n              </UiSidebarMenuItem>\n            </UiSidebarMenu>\n          </UiSidebarGroupContent>\n        </UiSidebarGroup>\n      </UiSidebarContent>\n    </UiSidebar>\n    <UiSidebarInset>\n      <UiNavbar sticky>\n        <UiContainer class=\"flex h-12 items-center\">\n          <UiSidebarTrigger />\n        </UiContainer>\n      </UiNavbar>\n    </UiSidebarInset>\n  </UiSidebarProvider>\n</template>\n\n<script lang=\"ts\" setup>\n  // Menu items.\n  const items = [\n    { title: \"Home\", url: \"#\", icon: \"lucide:home\" },\n    { title: \"Inbox\", url: \"#\", icon: \"lucide:inbox\" },\n    { title: \"Calendar\", url: \"#\", icon: \"lucide:calendar\" },\n    { title: \"Search\", url: \"#\", icon: \"lucide:search\" },\n    { title: \"Settings\", url: \"#\", icon: \"lucide:settings\" },\n  ];\n</script>\n","category":"Sidebar","path":"Sidebar/BlockSidebarHeader.vue","components":["container","dropdownmenu","dropdownmenucontent","dropdownmenuitem","dropdownmenutrigger","navbar","sidebar","sidebarcontent","sidebargroup","sidebargroupcontent","sidebargrouplabel","sidebarheader","sidebarinset","sidebarmenu","sidebarmenubutton","sidebarmenuitem","sidebarprovider","sidebartrigger"]},{"name":"Sidebar Sidebar Group Action","fileName":"BlockSidebarSidebarGroupAction.vue","file":"<template>\n  <UiSidebarProvider>\n    <UiSidebar>\n      <UiSidebarContent>\n        <UiSidebarGroup>\n          <UiSidebarGroupLabel label=\"Projects\" />\n          <UiSidebarGroupAction title=\"Add Project\">\n            <Icon name=\"lucide:plus\" /> <span class=\"sr-only\">Add Project</span>\n          </UiSidebarGroupAction>\n          <UiSidebarGroupContent>\n            <UiSidebarMenu>\n              <UiSidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n                <UiSidebarMenuButton as-child>\n                  <a :href=\"item.url\">\n                    <Icon :name=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                  </a>\n                </UiSidebarMenuButton>\n              </UiSidebarMenuItem>\n            </UiSidebarMenu>\n          </UiSidebarGroupContent>\n        </UiSidebarGroup>\n      </UiSidebarContent>\n    </UiSidebar>\n    <UiSidebarInset>\n      <UiNavbar sticky>\n        <UiContainer class=\"flex h-12 items-center\">\n          <UiSidebarTrigger />\n        </UiContainer>\n      </UiNavbar>\n    </UiSidebarInset>\n  </UiSidebarProvider>\n</template>\n\n<script lang=\"ts\" setup>\n  // Menu items.\n  const items = [\n    { title: \"Home\", url: \"#\", icon: \"lucide:home\" },\n    { title: \"Inbox\", url: \"#\", icon: \"lucide:inbox\" },\n    { title: \"Calendar\", url: \"#\", icon: \"lucide:calendar\" },\n    { title: \"Search\", url: \"#\", icon: \"lucide:search\" },\n    { title: \"Settings\", url: \"#\", icon: \"lucide:settings\" },\n  ];\n</script>\n","category":"Sidebar","path":"Sidebar/BlockSidebarSidebarGroupAction.vue","components":["container","navbar","sidebar","sidebarcontent","sidebargroup","sidebargroupaction","sidebargroupcontent","sidebargrouplabel","sidebarinset","sidebarmenu","sidebarmenubutton","sidebarmenuitem","sidebarprovider","sidebartrigger"]},{"name":"Sidebar Sidebar Menu Action","fileName":"BlockSidebarSidebarMenuAction.vue","file":"<template>\n  <UiSidebarProvider>\n    <UiSidebar>\n      <UiSidebarContent>\n        <UiSidebarGroup>\n          <UiSidebarGroupLabel label=\"Projects\" />\n          <UiSidebarGroupAction title=\"Add Project\">\n            <Icon name=\"lucide:plus\" /> <span class=\"sr-only\">Add Project</span>\n          </UiSidebarGroupAction>\n          <UiSidebarGroupContent>\n            <UiSidebarMenu>\n              <UiSidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n                <UiSidebarMenuButton as-child>\n                  <NuxtLink :href=\"item.url\">\n                    <Icon :name=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                  </NuxtLink>\n                </UiSidebarMenuButton>\n                <UiDropdownMenu>\n                  <UiDropdownMenuTrigger as-child>\n                    <UiSidebarMenuAction>\n                      <Icon name=\"lucide:ellipsis-vertical\" />\n                    </UiSidebarMenuAction>\n                  </UiDropdownMenuTrigger>\n                  <UiDropdownMenuContent side=\"right\" align=\"start\">\n                    <UiDropdownMenuItem v-for=\"child in actions\" :key=\"child.title\" as-child>\n                      <NuxtLink :href=\"child.url\">\n                        <Icon :name=\"child.icon\" />\n                        <span>{{ child.title }}</span>\n                      </NuxtLink>\n                    </UiDropdownMenuItem>\n                  </UiDropdownMenuContent>\n                </UiDropdownMenu>\n              </UiSidebarMenuItem>\n            </UiSidebarMenu>\n          </UiSidebarGroupContent>\n        </UiSidebarGroup>\n      </UiSidebarContent>\n    </UiSidebar>\n    <UiSidebarInset>\n      <UiNavbar sticky>\n        <UiContainer class=\"flex h-12 items-center\">\n          <UiSidebarTrigger />\n        </UiContainer>\n      </UiNavbar>\n    </UiSidebarInset>\n  </UiSidebarProvider>\n</template>\n\n<script lang=\"ts\" setup>\n  const items = [\n    { title: \"Design Engineering\", url: \"#\", icon: \"lucide:hash\" },\n    { title: \"Sales & Marketing\", url: \"#\", icon: \"lucide:chart-pie\" },\n    { title: \"Travel\", url: \"#\", icon: \"lucide:map\" },\n    { title: \"Support\", url: \"#\", icon: \"lucide:life-buoy\" },\n    { title: \"Feedback\", url: \"#\", icon: \"lucide:circle-help\" },\n  ];\n\n  const actions = [\n    { title: \"Add Project\", icon: \"lucide:plus\", url: \"#\" },\n    { title: \"Add Task\", icon: \"lucide:plus\", url: \"#\" },\n    { title: \"Add User\", icon: \"lucide:plus\", url: \"#\" },\n  ];\n</script>\n","category":"Sidebar","path":"Sidebar/BlockSidebarSidebarMenuAction.vue","components":["container","dropdownmenu","dropdownmenucontent","dropdownmenuitem","dropdownmenutrigger","navbar","sidebar","sidebarcontent","sidebargroup","sidebargroupaction","sidebargroupcontent","sidebargrouplabel","sidebarinset","sidebarmenu","sidebarmenuaction","sidebarmenubutton","sidebarmenuitem","sidebarprovider","sidebartrigger"]},{"name":"Sidebar Sidebar Menu Badge","fileName":"BlockSidebarSidebarMenuBadge.vue","file":"<template>\n  <UiSidebarProvider>\n    <UiSidebar>\n      <UiSidebarContent>\n        <UiSidebarGroup>\n          <UiSidebarGroupLabel label=\"Application\" />\n          <UiSidebarGroupContent>\n            <UiSidebarMenu>\n              <UiSidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n                <UiSidebarMenuButton as-child>\n                  <a :href=\"item.url\">\n                    <Icon :name=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                  </a>\n                </UiSidebarMenuButton>\n                <UiSidebarMenuBadge>{{ item.notifications }}</UiSidebarMenuBadge>\n              </UiSidebarMenuItem>\n            </UiSidebarMenu>\n          </UiSidebarGroupContent>\n        </UiSidebarGroup>\n      </UiSidebarContent>\n    </UiSidebar>\n    <UiSidebarInset>\n      <UiNavbar sticky>\n        <UiContainer class=\"flex h-12 items-center\">\n          <UiSidebarTrigger />\n        </UiContainer>\n      </UiNavbar>\n    </UiSidebarInset>\n  </UiSidebarProvider>\n</template>\n\n<script lang=\"ts\" setup>\n  const items = [\n    { title: \"Home\", url: \"#\", icon: \"lucide:home\", notifications: 45 },\n    { title: \"Inbox\", url: \"#\", icon: \"lucide:inbox\", notifications: 21 },\n    { title: \"Calendar\", url: \"#\", icon: \"lucide:calendar\", notifications: 17 },\n    { title: \"Search\", url: \"#\", icon: \"lucide:search\", notifications: 29 },\n    { title: \"Settings\", url: \"#\", icon: \"lucide:settings\", notifications: 29 },\n  ];\n</script>\n","category":"Sidebar","path":"Sidebar/BlockSidebarSidebarMenuBadge.vue","components":["container","navbar","sidebar","sidebarcontent","sidebargroup","sidebargroupcontent","sidebargrouplabel","sidebarinset","sidebarmenu","sidebarmenubadge","sidebarmenubutton","sidebarmenuitem","sidebarprovider","sidebartrigger"]},{"name":"Sidebar Sidebar Menu Sub","fileName":"BlockSidebarSidebarMenuSub.vue","file":"<template>\n  <UiSidebarProvider>\n    <UiSidebar>\n      <UiSidebarContent>\n        <UiSidebarGroup>\n          <UiSidebarGroupContent>\n            <UiSidebarMenu>\n              <template v-for=\"(item, index) in items\" :key=\"index\">\n                <UiSidebarMenuItem>\n                  <UiSidebarMenuButton as-child>\n                    <NuxtLink :href=\"item.url\">\n                      {{ item.title }}\n                    </NuxtLink>\n                  </UiSidebarMenuButton>\n                  <UiSidebarMenuSub>\n                    <template v-for=\"(child, k) in item.items\" :key=\"`child-${k}`\">\n                      <UiSidebarMenuSubItem>\n                        <UiSidebarMenuSubButton as-child>\n                          <NuxtLink :href=\"child.url\">\n                            {{ child.title }}\n                          </NuxtLink>\n                        </UiSidebarMenuSubButton>\n                      </UiSidebarMenuSubItem>\n                    </template>\n                  </UiSidebarMenuSub>\n                </UiSidebarMenuItem>\n              </template>\n            </UiSidebarMenu>\n          </UiSidebarGroupContent>\n        </UiSidebarGroup>\n      </UiSidebarContent>\n    </UiSidebar>\n    <UiSidebarInset>\n      <UiNavbar sticky>\n        <UiContainer class=\"flex h-12 items-center\">\n          <UiSidebarTrigger />\n        </UiContainer>\n      </UiNavbar>\n    </UiSidebarInset>\n  </UiSidebarProvider>\n</template>\n\n<script lang=\"ts\" setup>\n  const items = [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ];\n</script>\n","category":"Sidebar","path":"Sidebar/BlockSidebarSidebarMenuSub.vue","components":["container","navbar","sidebar","sidebarcontent","sidebargroup","sidebargroupcontent","sidebarinset","sidebarmenu","sidebarmenubutton","sidebarmenuitem","sidebarmenusub","sidebarmenusubbutton","sidebarmenusubitem","sidebarprovider","sidebartrigger"]},{"name":"Sidebar Sidebar Menu Sub Collapsible","fileName":"BlockSidebarSidebarMenuSubCollapsible.vue","file":"<template>\n  <UiSidebarProvider>\n    <UiSidebar>\n      <UiSidebarContent>\n        <UiSidebarGroup>\n          <UiSidebarGroupContent>\n            <UiSidebarMenu>\n              <template v-for=\"(item, index) in items\" :key=\"index\">\n                <UiCollapsible v-slot=\"{ open }\" default-open>\n                  <UiSidebarMenuItem>\n                    <UiCollapsibleTrigger as-child>\n                      <UiSidebarMenuButton as-child>\n                        <NuxtLink :href=\"item.url\">\n                          {{ item.title }}\n                          <Icon\n                            name=\"lucide:chevron-right\"\n                            class=\"ml-auto transition\"\n                            :class=\"[open && 'rotate-90']\"\n                          />\n                        </NuxtLink>\n                      </UiSidebarMenuButton>\n                    </UiCollapsibleTrigger>\n                    <UiCollapsibleContent>\n                      <UiSidebarMenuSub>\n                        <template v-for=\"(child, k) in item.items\" :key=\"`child-${k}`\">\n                          <UiSidebarMenuSubItem>\n                            <UiSidebarMenuSubButton as-child>\n                              <NuxtLink :href=\"child.url\">\n                                {{ child.title }}\n                              </NuxtLink>\n                            </UiSidebarMenuSubButton>\n                          </UiSidebarMenuSubItem>\n                        </template>\n                      </UiSidebarMenuSub>\n                    </UiCollapsibleContent>\n                  </UiSidebarMenuItem>\n                </UiCollapsible>\n              </template>\n            </UiSidebarMenu>\n          </UiSidebarGroupContent>\n        </UiSidebarGroup>\n      </UiSidebarContent>\n    </UiSidebar>\n    <UiSidebarInset>\n      <UiNavbar sticky>\n        <UiContainer class=\"flex h-12 items-center\">\n          <UiSidebarTrigger />\n        </UiContainer>\n      </UiNavbar>\n    </UiSidebarInset>\n  </UiSidebarProvider>\n</template>\n\n<script lang=\"ts\" setup>\n  const items = [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ];\n</script>\n","category":"Sidebar","path":"Sidebar/BlockSidebarSidebarMenuSubCollapsible.vue","components":["collapsible","collapsiblecontent","collapsibletrigger","container","navbar","sidebar","sidebarcontent","sidebargroup","sidebargroupcontent","sidebarinset","sidebarmenu","sidebarmenubutton","sidebarmenuitem","sidebarmenusub","sidebarmenusubbutton","sidebarmenusubitem","sidebarprovider","sidebartrigger"]},{"name":"Sidebar Sidebar Rail","fileName":"BlockSidebarSidebarRail.vue","file":"<template>\n  <UiSidebarProvider>\n    <UiSidebar>\n      <UiSidebarRail />\n      <UiSidebarContent>\n        <UiSidebarGroup>\n          <UiSidebarGroupContent>\n            <UiSidebarMenu>\n              <template v-for=\"(item, index) in items\" :key=\"index\">\n                <UiSidebarMenuItem>\n                  <UiSidebarMenuButton as-child>\n                    <NuxtLink :href=\"item.url\">\n                      {{ item.title }}\n                    </NuxtLink>\n                  </UiSidebarMenuButton>\n                  <UiSidebarMenuSub>\n                    <template v-for=\"(child, k) in item.items\" :key=\"`child-${k}`\">\n                      <UiSidebarMenuSubItem>\n                        <UiSidebarMenuSubButton as-child>\n                          <NuxtLink :href=\"child.url\">\n                            {{ child.title }}\n                          </NuxtLink>\n                        </UiSidebarMenuSubButton>\n                      </UiSidebarMenuSubItem>\n                    </template>\n                  </UiSidebarMenuSub>\n                </UiSidebarMenuItem>\n              </template>\n            </UiSidebarMenu>\n          </UiSidebarGroupContent>\n        </UiSidebarGroup>\n      </UiSidebarContent>\n    </UiSidebar>\n    <UiSidebarInset />\n  </UiSidebarProvider>\n</template>\n\n<script lang=\"ts\" setup>\n  const items = [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n  ];\n</script>\n","category":"Sidebar","path":"Sidebar/BlockSidebarSidebarRail.vue","components":["sidebar","sidebarcontent","sidebargroup","sidebargroupcontent","sidebarinset","sidebarmenu","sidebarmenubutton","sidebarmenuitem","sidebarmenusub","sidebarmenusubbutton","sidebarmenusubitem","sidebarprovider","sidebarrail"]},{"name":"Sign Up","fileName":"BlockSignUp.vue","file":"<template>\n  <div class=\"relative flex h-screen items-center justify-center\">\n    <div\n      class=\"absolute h-full w-full bg-[radial-gradient(--alpha(var(--color-border)/90%)_1px,transparent_1px)] mask-[radial-gradient(ellipse_closest-side_at_50%_50%,#000_60%,transparent_100%)] bg-size-[20px_20px]\"\n    />\n\n    <div class=\"relative w-full max-w-[330px] px-5\">\n      <h1 class=\"text-2xl font-bold tracking-tight lg:text-3xl\">{{ title }}</h1>\n      <p class=\"mt-1 text-muted-foreground\">{{ description }}</p>\n\n      <form class=\"mt-10\" @submit=\"submit\">\n        <fieldset :disabled=\"isSubmitting\" class=\"grid gap-5\">\n          <UiVeeInput required label=\"Name\" name=\"name\" placeholder=\"John Doe\" />\n          <UiVeeInput\n            required\n            label=\"Email\"\n            type=\"email\"\n            name=\"email\"\n            placeholder=\"john@example.com\"\n          />\n          <UiVeeInput required label=\"Password\" type=\"password\" name=\"password\" />\n          <UiButton class=\"w-full\" type=\"submit\" text=\"Create account\" />\n        </fieldset>\n      </form>\n      <p class=\"mt-8 text-sm text-muted-foreground\">\n        Already have an account?\n        <NuxtLink class=\"font-semibold text-primary underline-offset-2 hover:underline\" to=\"#\"\n          >Log in</NuxtLink\n        >\n      </p>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  const title = \"Sign Up\";\n  const description = \"Create an account to get started.\";\n\n  useSeoMeta({ title, description });\n\n  const Schema = object({\n    name: string().required().label(\"Name\").min(3).max(50),\n    email: string().email().required().label(\"Email\"),\n    password: string().required().label(\"Password\").min(8),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof Schema>>({\n    validationSchema: Schema,\n  });\n\n  const submit = handleSubmit(async (_) => {\n    useSonner(\"Account created!\", {\n      description: \"You have successfully created an account.\",\n    });\n  });\n</script>\n","category":"SignUp","path":"SignUp/BlockSignUp.vue","components":["button","veeinput"]},{"name":"Sign Up Card","fileName":"BlockSignUpCard.vue","file":"<template>\n  <div class=\"relative flex h-screen items-center justify-center\">\n    <div\n      class=\"absolute h-full w-full bg-[radial-gradient(var(--color-border)_1px,transparent_1px)] mask-[radial-gradient(ellipse_closest-side_at_50%_50%,#000_80%,transparent_100%)] bg-size-[20px_20px]\"\n    />\n\n    <div\n      class=\"relative w-full max-w-[380px] border-border/60 bg-card px-8 py-5 shadow-xs min-[480px]:rounded-lg min-[480px]:border dark:border-border\"\n    >\n      <h1 class=\"text-2xl font-bold tracking-tight lg:text-3xl\">{{ title }}</h1>\n      <p class=\"mt-1 text-muted-foreground\">{{ description }}</p>\n\n      <form class=\"mt-10\" @submit=\"submit\">\n        <fieldset :disabled=\"isSubmitting\" class=\"grid gap-5\">\n          <UiVeeInput required label=\"Name\" name=\"name\" placeholder=\"John Doe\" />\n          <UiVeeInput\n            required\n            label=\"Email\"\n            type=\"email\"\n            name=\"email\"\n            placeholder=\"john@example.com\"\n          />\n          <UiVeeInput required label=\"Password\" type=\"password\" name=\"password\" />\n          <UiButton class=\"w-full\" type=\"submit\" text=\"Create account\" />\n        </fieldset>\n      </form>\n      <p class=\"mt-8 text-sm text-muted-foreground\">\n        Already have an account?\n        <NuxtLink class=\"font-semibold text-primary underline-offset-2 hover:underline\" to=\"#\"\n          >Log in</NuxtLink\n        >\n      </p>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  const title = \"Sign Up\";\n  const description = \"Create an account to get started.\";\n\n  useSeoMeta({ title, description });\n\n  const Schema = object({\n    name: string().required().label(\"Name\").min(3).max(50),\n    email: string().email().required().label(\"Email\"),\n    password: string().required().label(\"Password\").min(8),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof Schema>>({\n    validationSchema: Schema,\n  });\n\n  const submit = handleSubmit(async (_) => {\n    useSonner(\"Account created!\", {\n      description: \"You have successfully created an account.\",\n    });\n  });\n</script>\n","category":"SignUp","path":"SignUp/BlockSignUpCard.vue","components":["button","veeinput"]},{"name":"Sign Up Centered","fileName":"BlockSignUpCentered.vue","file":"<template>\n  <div class=\"flex h-screen items-center justify-center px-5\">\n    <div class=\"w-full max-w-[380px]\">\n      <div class=\"text-center\">\n        <svg\n          class=\"mx-auto mb-6 h-10 fill-primary\"\n          viewBox=\"0 0 53 44\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M23.2997 0L52.0461 28.6301V44H38.6311V34.1553L17.7522 13.3607L13.415 13.3607L13.415 44H0L0 0L23.2997 0ZM38.6311 15.2694V0L52.0461 0V15.2694L38.6311 15.2694Z\"\n            class=\"ccustom\"\n          />\n        </svg>\n        <h1 class=\"text-2xl font-bold tracking-tight lg:text-3xl\">Get started for free</h1>\n        <p class=\"mt-2 text-muted-foreground\">\n          No credit card required. Start building immediately.\n        </p>\n      </div>\n\n      <div class=\"mt-10\">\n        <div class=\"grid gap-3\">\n          <UiButton variant=\"outline\" type=\"button\" @click=\"signUpWithGoogle()\">\n            <Icon class=\"size-5\" name=\"logos:google-icon\" />\n            <span class=\"ml-2\">Sign up with Google</span>\n          </UiButton>\n          <UiButton variant=\"outline\" type=\"button\" @click=\"signUpWithGithub()\">\n            <Icon class=\"size-5\" name=\"mdi:github\" />\n            <span class=\"ml-2\">Sign up with Github</span>\n          </UiButton>\n        </div>\n\n        <UiDivider class=\"my-6\" label=\"Or continue with email\" />\n\n        <form @submit=\"submit\">\n          <fieldset :disabled=\"isSubmitting\" class=\"grid gap-5\">\n            <UiVeeInput required label=\"Full name\" name=\"name\" placeholder=\"John Doe\" />\n            <UiVeeInput\n              required\n              label=\"Work email\"\n              type=\"email\"\n              name=\"email\"\n              placeholder=\"you@company.com\"\n            />\n            <UiVeeInput required label=\"Password\" type=\"password\" name=\"password\" />\n            <div class=\"flex items-start gap-3\">\n              <UiVeeCheckbox\n                required\n                name=\"marketing\"\n                label=\"Send me occasional product updates and announcements\"\n              />\n            </div>\n            <UiButton class=\"w-full\" type=\"submit\" text=\"Create account\" />\n          </fieldset>\n        </form>\n\n        <p class=\"mt-6 text-center text-sm text-muted-foreground\">\n          Already have an account?\n          <NuxtLink class=\"font-semibold text-primary underline-offset-2 hover:underline\" to=\"#\"\n            >Sign in</NuxtLink\n          >\n        </p>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { boolean, object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  useSeoMeta({\n    title: \"Get started for free\",\n    description: \"No credit card required. Start building immediately.\",\n  });\n\n  const Schema = object({\n    name: string().required().label(\"Full name\").min(3),\n    email: string().email().required().label(\"Work email\"),\n    password: string().required().label(\"Password\").min(8),\n    marketing: boolean().label(\"Marketing\"),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof Schema>>({\n    validationSchema: Schema,\n  });\n\n  const submit = handleSubmit(async (_) => {\n    useSonner(\"Account created!\", {\n      description: \"You have successfully created an account.\",\n    });\n  });\n\n  const signUpWithGoogle = () => {\n    useSonner(\"Sign up with Google\", {\n      description: \"Redirecting to Google...\",\n    });\n  };\n\n  const signUpWithGithub = () => {\n    useSonner(\"Sign up with Github\", {\n      description: \"Redirecting to Github...\",\n    });\n  };\n</script>\n","category":"SignUp","path":"SignUp/BlockSignUpCentered.vue","components":["button","divider","veecheckbox","veeinput"]},{"name":"Sign Up Compact","fileName":"BlockSignUpCompact.vue","file":"<template>\n  <div class=\"flex h-screen items-center justify-center px-5\">\n    <div class=\"w-full max-w-[360px]\">\n      <div class=\"rounded-lg border bg-card p-6 shadow-sm\">\n        <div class=\"mb-6\">\n          <h1 class=\"text-xl font-bold tracking-tight\">Create account</h1>\n          <p class=\"mt-1 text-sm text-muted-foreground\">Sign up to get started</p>\n        </div>\n\n        <form @submit=\"submit\">\n          <fieldset :disabled=\"isSubmitting\" class=\"grid gap-4\">\n            <UiVeeInput type=\"text\" name=\"name\" placeholder=\"Full name\" />\n            <UiVeeInput type=\"email\" name=\"email\" placeholder=\"Email address\" />\n            <UiVeeInput type=\"password\" name=\"password\" placeholder=\"Password\" />\n            <UiButton class=\"w-full\" type=\"submit\" text=\"Sign up\" />\n          </fieldset>\n        </form>\n\n        <div class=\"mt-4 text-center text-sm\">\n          <NuxtLink class=\"font-medium text-primary underline-offset-2 hover:underline\" to=\"#\"\n            >Already have an account?</NuxtLink\n          >\n        </div>\n      </div>\n\n      <p class=\"mt-6 text-center text-xs text-muted-foreground\">\n        By signing up, you agree to our\n        <NuxtLink class=\"underline underline-offset-2 hover:text-foreground\" to=\"#\">Terms</NuxtLink>\n        and\n        <NuxtLink class=\"underline underline-offset-2 hover:text-foreground\" to=\"#\"\n          >Privacy Policy</NuxtLink\n        >\n      </p>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  useSeoMeta({\n    title: \"Create account\",\n    description: \"Sign up to get started.\",\n  });\n\n  const Schema = object({\n    name: string().required().label(\"Full name\").min(3),\n    email: string().email().required().label(\"Email address\"),\n    password: string().required().label(\"Password\").min(8),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof Schema>>({\n    validationSchema: Schema,\n  });\n\n  const submit = handleSubmit(async (_) => {\n    useSonner(\"Account created!\", {\n      description: \"You have successfully created an account.\",\n    });\n  });\n</script>\n","category":"SignUp","path":"SignUp/BlockSignUpCompact.vue","components":["button","veeinput"]},{"name":"Sign Up Image","fileName":"BlockSignUpImage.vue","file":"<template>\n  <div class=\"flex h-screen items-center justify-center\">\n    <div class=\"w-full md:w-1/2\">\n      <div class=\"mx-auto w-full max-w-[330px] px-5\">\n        <h1 class=\"text-2xl font-bold tracking-tight lg:text-3xl\">{{ title }}</h1>\n        <p class=\"mt-1 text-muted-foreground\">{{ description }}</p>\n\n        <form class=\"mt-10\" @submit=\"submit\">\n          <fieldset :disabled=\"isSubmitting\" class=\"grid gap-5\">\n            <UiVeeInput required label=\"Name\" name=\"name\" placeholder=\"John Doe\" />\n            <UiVeeInput\n              required\n              label=\"Email\"\n              type=\"email\"\n              name=\"email\"\n              placeholder=\"john@example.com\"\n            />\n            <UiVeeInput required label=\"Password\" type=\"password\" name=\"password\" />\n            <UiButton class=\"w-full\" type=\"submit\" text=\"Get Started\" />\n            <UiDivider label=\"OR\" />\n            <UiButton variant=\"outline\" type=\"button\" @click=\"signInWithGoogle()\">\n              <Icon class=\"size-4\" name=\"logos:google-icon\" />\n              <span class=\"ml-2\">Sign up with Google</span>\n            </UiButton>\n          </fieldset>\n        </form>\n        <p class=\"mt-8 text-sm text-muted-foreground\">\n          Already have an account?\n          <NuxtLink class=\"font-semibold text-primary underline-offset-2 hover:underline\" to=\"#\"\n            >Log in</NuxtLink\n          >\n        </p>\n      </div>\n    </div>\n    <div class=\"hidden h-screen md:block md:w-1/2 lg:w-1/2\">\n      <img\n        src=\"https://images.unsplash.com/photo-1512551980832-13df02babc9e?q=60&w=2864&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n        alt=\"Login form image\"\n        class=\"size-full object-cover\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  const title = \"Sign Up\";\n  const description = \"Create an account to get started.\";\n\n  useSeoMeta({ title, description });\n\n  const Schema = object({\n    name: string().required().label(\"Name\").min(3).max(50),\n    email: string().email().required().label(\"Email\"),\n    password: string().required().label(\"Password\").min(8),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof Schema>>({\n    validationSchema: Schema,\n  });\n\n  const submit = handleSubmit(async (_) => {\n    useSonner(\"Account created!\", {\n      description: \"You have successfully created an account.\",\n    });\n  });\n\n  const signInWithGoogle = () => {\n    useSonner(\"Getting started!\", {\n      description: \"Redirecting to Google...\",\n    });\n  };\n</script>\n","category":"SignUp","path":"SignUp/BlockSignUpImage.vue","components":["button","divider","veeinput"]},{"name":"Sign Up Minimal","fileName":"BlockSignUpMinimal.vue","file":"<template>\n  <div class=\"flex h-screen items-center justify-center bg-muted/50 px-5\">\n    <div class=\"w-full max-w-[420px] rounded-lg border bg-card p-8 shadow-sm\">\n      <div class=\"mb-8 text-center\">\n        <div\n          class=\"mx-auto mb-4 flex size-12 items-center justify-center rounded-full bg-primary/10\"\n        >\n          <Icon name=\"lucide:user-plus\" class=\"size-6 text-primary\" />\n        </div>\n        <h1 class=\"text-2xl font-bold tracking-tight\">Join us today</h1>\n        <p class=\"mt-1 text-sm text-muted-foreground\">Create your account in seconds</p>\n      </div>\n\n      <form @submit=\"submit\">\n        <fieldset :disabled=\"isSubmitting\" class=\"grid gap-4\">\n          <UiVeeInput required label=\"Full name\" name=\"name\" placeholder=\"John Doe\" />\n          <UiVeeInput\n            required\n            label=\"Email address\"\n            type=\"email\"\n            name=\"email\"\n            placeholder=\"you@example.com\"\n          />\n          <UiVeeInput\n            required\n            label=\"Password\"\n            type=\"password\"\n            name=\"password\"\n            placeholder=\"••••••••\"\n          />\n          <UiVeeInput\n            required\n            label=\"Confirm password\"\n            type=\"password\"\n            name=\"confirmPassword\"\n            placeholder=\"••••••••\"\n          />\n          <UiButton class=\"w-full\" type=\"submit\" text=\"Create account\" />\n        </fieldset>\n      </form>\n\n      <div class=\"mt-6 text-center\">\n        <p class=\"text-sm text-muted-foreground\">\n          Already have an account?\n          <NuxtLink class=\"font-semibold text-primary underline-offset-2 hover:underline\" to=\"#\"\n            >Sign in</NuxtLink\n          >\n        </p>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { object, string, ref as yupRef } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  useSeoMeta({\n    title: \"Join us today\",\n    description: \"Create your account in seconds.\",\n  });\n\n  const Schema = object({\n    name: string().required().label(\"Full name\").min(3),\n    email: string().email().required().label(\"Email address\"),\n    password: string().required().label(\"Password\").min(8),\n    confirmPassword: string()\n      .required()\n      .label(\"Confirm password\")\n      .oneOf([yupRef(\"password\")], \"Passwords must match\"),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof Schema>>({\n    validationSchema: Schema,\n  });\n\n  const submit = handleSubmit(async (_) => {\n    useSonner(\"Account created!\", {\n      description: \"You have successfully created an account.\",\n    });\n  });\n</script>\n","category":"SignUp","path":"SignUp/BlockSignUpMinimal.vue","components":["button","veeinput"]},{"name":"Sign Up Password Meter","fileName":"BlockSignUpPasswordMeter.vue","file":"<template>\n  <div class=\"relative flex h-screen items-center justify-center\">\n    <div\n      class=\"absolute h-full w-full bg-[radial-gradient(--alpha(var(--color-border)/90%)_1px,transparent_1px)] mask-[radial-gradient(ellipse_closest-side_at_50%_50%,#000_60%,transparent_100%)] bg-size-[20px_20px]\"\n    />\n\n    <div class=\"relative w-full max-w-[330px] px-5\">\n      <h1 class=\"text-2xl font-bold tracking-tight lg:text-3xl\">{{ title }}</h1>\n      <p class=\"mt-1 text-muted-foreground\">{{ description }}</p>\n\n      <form class=\"mt-10\" @submit=\"submit\">\n        <fieldset :disabled=\"isSubmitting\" class=\"grid gap-5\">\n          <UiVeeInput required label=\"Name\" name=\"name\" placeholder=\"John Doe\" />\n          <UiVeeInput\n            required\n            label=\"Email\"\n            type=\"email\"\n            name=\"email\"\n            placeholder=\"john@example.com\"\n          />\n          <UiVeeInput required label=\"Password\" type=\"password\" name=\"password\" />\n          <ul class=\"flex flex-col gap-4\">\n            <li class=\"flex items-center gap-3 text-sm text-muted-foreground\">\n              <Icon\n                :class=\"[meta.valid ? 'text-green-500' : '']\"\n                class=\"size-[18px]\"\n                name=\"lucide:check-circle-2\"\n              />\n              <span>At least 8 characters</span>\n            </li>\n            <li class=\"flex items-center gap-3 text-sm text-muted-foreground\">\n              <Icon\n                :class=\"[meta.valid ? 'text-green-500' : '']\"\n                class=\"size-[18px]\"\n                name=\"lucide:check-circle-2\"\n              />\n              <span>At least 1 number & special character</span>\n            </li>\n          </ul>\n          <UiButton class=\"w-full\" type=\"submit\" text=\"Create account\" />\n        </fieldset>\n      </form>\n      <p class=\"mt-8 text-sm text-muted-foreground\">\n        Already have an account?\n        <NuxtLink class=\"font-semibold text-primary underline-offset-2 hover:underline\" to=\"#\"\n          >Log in</NuxtLink\n        >\n      </p>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  const title = \"Sign Up\";\n  const description = \"Create an account to get started.\";\n\n  useSeoMeta({ title, description });\n\n  const Schema = object({\n    name: string().required().label(\"Name\").min(3).max(50),\n    email: string().email().required().label(\"Email\"),\n    password: string()\n      .required()\n      .min(8)\n      .label(\"Password\")\n      .test(\"password\", \"Password must contain at least 1 number & special character\", (value) => {\n        return /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,}$/.test(value);\n      }),\n  });\n\n  const { handleSubmit, isSubmitting, meta } = useForm<InferType<typeof Schema>>({\n    validationSchema: Schema,\n  });\n\n  const submit = handleSubmit(async (_) => {\n    useSonner(\"Account created!\", {\n      description: \"You have successfully created an account.\",\n    });\n  });\n</script>\n","category":"SignUp","path":"SignUp/BlockSignUpPasswordMeter.vue","components":["button","veeinput"]},{"name":"Sign Up Social","fileName":"BlockSignUpSocial.vue","file":"<template>\n  <div class=\"relative flex h-screen items-center justify-center\">\n    <div\n      class=\"absolute inset-0 bg-[linear-gradient(to_right,--alpha(var(--color-border)/80%)_1px,transparent_1px),linear-gradient(to_bottom,--alpha(var(--color-border)/80%)_1px,transparent_1px)] mask-[radial-gradient(ellipse_closest-side_at_50%_0%,#000_70%,transparent_110%)] bg-size-[60px_60px]\"\n    />\n\n    <div class=\"relative w-full max-w-[330px] px-5\">\n      <div class=\"flex flex-col items-center\">\n        <h1 class=\"text-2xl font-bold tracking-tight lg:text-3xl\">{{ title }}</h1>\n        <p class=\"mt-1 text-muted-foreground\">{{ description }}</p>\n      </div>\n\n      <form class=\"mt-10\" @submit=\"submit\">\n        <fieldset :disabled=\"isSubmitting\" class=\"grid gap-5\">\n          <UiVeeInput\n            required\n            label=\"Email\"\n            type=\"email\"\n            name=\"email\"\n            placeholder=\"john@example.com\"\n          />\n          <UiButton class=\"w-full\" type=\"submit\" text=\"Get Started\" />\n          <UiDivider label=\"OR\" />\n          <UiButton variant=\"outline\" type=\"button\" @click=\"signInWithGoogle()\">\n            <Icon class=\"size-4\" name=\"logos:google-icon\" />\n            <span class=\"ml-2\">Sign up with Google</span>\n          </UiButton>\n          <UiButton variant=\"outline\" type=\"button\" @click=\"signInWithFacebook()\">\n            <Icon class=\"size-4\" name=\"logos:facebook\" />\n            <span class=\"ml-2\">Sign up with Facebook</span>\n          </UiButton>\n          <UiButton variant=\"outline\" type=\"button\" @click=\"signInWithGithub()\">\n            <Icon class=\"size-4\" name=\"mdi:github\" />\n            <span class=\"ml-2\">Sign up with Github</span>\n          </UiButton>\n        </fieldset>\n      </form>\n      <p class=\"mt-8 text-center text-sm text-muted-foreground\">\n        Already have an account?\n        <NuxtLink class=\"font-semibold text-primary underline-offset-2 hover:underline\" to=\"#\"\n          >Log in</NuxtLink\n        >\n      </p>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  const title = \"Sign Up\";\n  const description = \"Create an account to get started.\";\n\n  useSeoMeta({ title, description });\n\n  const Schema = object({\n    email: string().email().required().label(\"Email\"),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof Schema>>({\n    validationSchema: Schema,\n  });\n\n  const submit = handleSubmit(async (_) => {\n    useSonner(\"Account created!\", {\n      description: \"You have successfully created an account.\",\n    });\n  });\n\n  const signInWithGoogle = () => {\n    useSonner(\"Getting started!\", {\n      description: \"Redirecting to Google...\",\n    });\n  };\n\n  const signInWithFacebook = () => {\n    useSonner(\"Getting started!\", {\n      description: \"Redirecting to Facebook...\",\n    });\n  };\n\n  const signInWithGithub = () => {\n    useSonner(\"Getting started!\", {\n      description: \"Redirecting to Github...\",\n    });\n  };\n</script>\n","category":"SignUp","path":"SignUp/BlockSignUpSocial.vue","components":["button","divider","veeinput"]},{"name":"Sign Up Two Column","fileName":"BlockSignUpTwoColumn.vue","file":"<template>\n  <div class=\"grid h-screen lg:grid-cols-2\">\n    <div class=\"flex items-center justify-center px-5\">\n      <div class=\"w-full max-w-[400px]\">\n        <h1 class=\"text-2xl font-bold tracking-tight lg:text-3xl\">Create your account</h1>\n        <p class=\"mt-1 text-muted-foreground\">Get started with your free account today.</p>\n\n        <form class=\"mt-8\" @submit=\"submit\">\n          <fieldset :disabled=\"isSubmitting\" class=\"grid gap-5\">\n            <div class=\"grid grid-cols-2 gap-3\">\n              <UiVeeInput required label=\"First name\" name=\"firstName\" placeholder=\"John\" />\n              <UiVeeInput required label=\"Last name\" name=\"lastName\" placeholder=\"Doe\" />\n            </div>\n            <UiVeeInput\n              required\n              label=\"Email\"\n              type=\"email\"\n              name=\"email\"\n              placeholder=\"john@example.com\"\n            />\n            <UiVeeInput required label=\"Password\" type=\"password\" name=\"password\" />\n            <UiVeeCheckbox\n              required\n              name=\"terms\"\n              label=\"I agree to the Terms of Service and Privacy Policy\"\n            />\n            <UiButton class=\"w-full\" type=\"submit\" text=\"Create account\" />\n          </fieldset>\n        </form>\n\n        <UiDivider class=\"my-6\" label=\"OR\" />\n\n        <div class=\"grid gap-3\">\n          <UiButton variant=\"outline\" type=\"button\" @click=\"signUpWithGoogle()\">\n            <Icon class=\"size-4\" name=\"logos:google-icon\" />\n            <span class=\"ml-2\">Sign up with Google</span>\n          </UiButton>\n          <UiButton variant=\"outline\" type=\"button\" @click=\"signUpWithGithub()\">\n            <Icon class=\"size-4\" name=\"mdi:github\" />\n            <span class=\"ml-2\">Sign up with Github</span>\n          </UiButton>\n        </div>\n\n        <p class=\"mt-6 text-sm text-muted-foreground\">\n          Already have an account?\n          <NuxtLink class=\"font-semibold text-primary underline-offset-2 hover:underline\" to=\"#\"\n            >Log in</NuxtLink\n          >\n        </p>\n      </div>\n    </div>\n    <div class=\"hidden bg-muted lg:block\">\n      <div class=\"flex h-full flex-col items-center justify-center p-8\">\n        <div class=\"max-w-md text-center\">\n          <Icon name=\"lucide:rocket\" class=\"mx-auto mb-6 size-16 text-primary\" />\n          <h2 class=\"mb-4 text-2xl font-bold\">Start building today</h2>\n          <p class=\"text-muted-foreground\">\n            Join thousands of developers and teams using our platform to build amazing products.\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { boolean, object, string } from \"yup\";\n  import type { InferType } from \"yup\";\n\n  useSeoMeta({\n    title: \"Create your account\",\n    description: \"Get started with your free account today.\",\n  });\n\n  const Schema = object({\n    firstName: string().required().label(\"First name\").min(2),\n    lastName: string().required().label(\"Last name\").min(2),\n    email: string().email().required().label(\"Email\"),\n    password: string().required().label(\"Password\").min(8),\n    terms: boolean()\n      .required()\n      .label(\"Terms\")\n      .test(\"terms\", \"You must accept the terms\", (value) => value === true),\n  });\n\n  const { handleSubmit, isSubmitting } = useForm<InferType<typeof Schema>>({\n    validationSchema: Schema,\n  });\n\n  const submit = handleSubmit(async (_) => {\n    useSonner(\"Account created!\", {\n      description: \"You have successfully created an account.\",\n    });\n  });\n\n  const signUpWithGoogle = () => {\n    useSonner(\"Sign up with Google\", {\n      description: \"Redirecting to Google...\",\n    });\n  };\n\n  const signUpWithGithub = () => {\n    useSonner(\"Sign up with Github\", {\n      description: \"Redirecting to Github...\",\n    });\n  };\n</script>\n","category":"SignUp","path":"SignUp/BlockSignUpTwoColumn.vue","components":["button","divider","veecheckbox","veeinput"]},{"name":"Social Proof 1","fileName":"BlockSocialProof1.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"parentVariant\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <Motion as-child :variants=\"childVariant\">\n        <p class=\"mb-8 text-center text-muted-foreground\">Join 4,000+ companies already growing</p>\n      </Motion>\n      <div class=\"flex flex-wrap items-center justify-center gap-5\">\n        <Motion v-for=\"n in companies\" :key=\"n.text\" as-child :variants=\"logoVariant\">\n          <div>\n            <span class=\"sr-only\">{{ n.text }}</span>\n            <Icon :name=\"n.icon\" class=\"h-24 w-24 transition-opacity hover:opacity-70\" />\n          </div>\n        </Motion>\n      </div>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const companies = [\n    { text: \"Company One\", icon: \"logos:100tb\" },\n    { text: \"Company Two\", icon: \"logos:aha\" },\n    { text: \"Company Three\", icon: \"logos:airbnb\" },\n    { text: \"Company Four\", icon: \"logos:akamai\" },\n  ];\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const logoVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, scale: 0.8 },\n    animate: {\n      opacity: 1,\n      scale: 1,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n</script>\n","category":"SocialProof","path":"SocialProof/BlockSocialProof1.vue","components":["container"]},{"name":"Social Proof 2","fileName":"BlockSocialProof2.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"parentVariant\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <Motion as-child :variants=\"childVariant\">\n        <div class=\"mb-12 text-center\">\n          <h2 class=\"mb-3 text-3xl font-bold lg:text-4xl\">Trusted by industry leaders</h2>\n          <p class=\"text-lg text-muted-foreground\">\n            Over 10,000+ companies use our platform to grow their business\n          </p>\n        </div>\n      </Motion>\n\n      <div class=\"grid grid-cols-2 gap-8 md:grid-cols-4 lg:gap-12\">\n        <Motion v-for=\"company in companies\" :key=\"company.text\" as-child :variants=\"cardVariant\">\n          <div\n            class=\"flex items-center justify-center rounded-lg border bg-card p-6 hover:border-primary/50 hover:shadow-md\"\n          >\n            <span class=\"sr-only\">{{ company.text }}</span>\n            <Icon :name=\"company.icon\" class=\"h-16 w-16 lg:h-20 lg:w-20\" />\n          </div>\n        </Motion>\n      </div>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const companies = [\n    { text: \"Company One\", icon: \"logos:100tb\" },\n    { text: \"Company Two\", icon: \"logos:aha\" },\n    { text: \"Company Three\", icon: \"logos:airbnb-icon\" },\n    { text: \"Company Four\", icon: \"logos:akamai\" },\n    { text: \"Company Five\", icon: \"logos:asana-icon\" },\n    { text: \"Company Six\", icon: \"logos:atlassian\" },\n    { text: \"Company Seven\", icon: \"logos:figma\" },\n    { text: \"Company Eight\", icon: \"logos:discord-icon\" },\n  ];\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const cardVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 30 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n</script>\n","category":"SocialProof","path":"SocialProof/BlockSocialProof2.vue","components":["container"]},{"name":"Social Proof 3","fileName":"BlockSocialProof3.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"parentVariant\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <div class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n        <Motion as-child :variants=\"contentVariant\">\n          <div>\n            <h2 class=\"mb-4 text-3xl font-bold lg:text-4xl\">Join thousands of happy customers</h2>\n            <p class=\"mb-6 text-lg text-muted-foreground\">\n              See why leading companies choose our platform to accelerate their growth and reach\n              their goals faster.\n            </p>\n            <div class=\"flex flex-col gap-6\">\n              <div class=\"flex items-start gap-4\">\n                <div\n                  class=\"flex size-12 shrink-0 items-center justify-center rounded-full bg-primary/10\"\n                >\n                  <Icon class=\"size-6 text-primary\" name=\"lucide:users\" />\n                </div>\n                <div>\n                  <p class=\"mb-1 font-semibold\">50,000+ Active Users</p>\n                  <p class=\"text-sm text-muted-foreground\">\n                    Growing community of professionals and teams\n                  </p>\n                </div>\n              </div>\n              <div class=\"flex items-start gap-4\">\n                <div\n                  class=\"flex size-12 shrink-0 items-center justify-center rounded-full bg-primary/10\"\n                >\n                  <Icon class=\"size-6 text-primary\" name=\"lucide:star\" />\n                </div>\n                <div>\n                  <p class=\"mb-1 font-semibold\">4.9/5 Rating</p>\n                  <p class=\"text-sm text-muted-foreground\">Based on 2,000+ verified reviews</p>\n                </div>\n              </div>\n              <div class=\"flex items-start gap-4\">\n                <div\n                  class=\"flex size-12 shrink-0 items-center justify-center rounded-full bg-primary/10\"\n                >\n                  <Icon class=\"size-6 text-primary\" name=\"lucide:award\" />\n                </div>\n                <div>\n                  <p class=\"mb-1 font-semibold\">Award Winning</p>\n                  <p class=\"text-sm text-muted-foreground\">\n                    Recognized by industry leaders worldwide\n                  </p>\n                </div>\n              </div>\n            </div>\n          </div>\n        </Motion>\n\n        <Motion as-child :variants=\"logosVariant\">\n          <div class=\"grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-2\">\n            <div\n              v-for=\"company in companies\"\n              :key=\"company.text\"\n              class=\"flex items-center justify-center rounded-lg bg-muted/50 p-6\"\n            >\n              <span class=\"sr-only\">{{ company.text }}</span>\n              <Icon :name=\"company.icon\" class=\"h-16 w-16\" />\n            </div>\n          </div>\n        </Motion>\n      </div>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import type { MotionProps } from \"motion-v\";\n\n  const companies = [\n    { text: \"Company One\", icon: \"logos:100tb\" },\n    { text: \"Company Two\", icon: \"logos:aha\" },\n    { text: \"Company Three\", icon: \"logos:airbnb-icon\" },\n    { text: \"Company Four\", icon: \"logos:akamai\" },\n    { text: \"Company Five\", icon: \"logos:asana-icon\" },\n    { text: \"Company Six\", icon: \"logos:atlassian\" },\n  ];\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n      },\n    },\n  };\n\n  const contentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, x: -50 },\n    animate: {\n      opacity: 1,\n      x: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const logosVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, x: 50 },\n    animate: {\n      opacity: 1,\n      x: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n        delay: 0.2,\n      },\n    },\n  };\n</script>\n","category":"SocialProof","path":"SocialProof/BlockSocialProof3.vue","components":["container"]},{"name":"Social Proof 4","fileName":"BlockSocialProof4.vue","file":"<template>\n  <div class=\"bg-muted/30 py-16 lg:py-24\">\n    <Motion\n      initial=\"initial\"\n      while-in-view=\"animate\"\n      :in-view-options=\"{ once: true }\"\n      as-child\n      :variants=\"parentVariant\"\n    >\n      <UiContainer>\n        <Motion as-child :variants=\"childVariant\">\n          <div class=\"mb-12 text-center\">\n            <p class=\"mb-3 text-sm font-semibold tracking-wider text-primary uppercase\">\n              Testimonials\n            </p>\n            <h2 class=\"mb-4 text-3xl font-bold lg:text-4xl\">What our customers say</h2>\n            <div class=\"mx-auto flex flex-col items-center justify-center gap-2 md:flex-row\">\n              <div class=\"flex\">\n                <Icon\n                  v-for=\"s in 5\"\n                  :key=\"s\"\n                  name=\"material-symbols:kid-star\"\n                  class=\"size-6 fill-yellow-400 text-yellow-400\"\n                />\n              </div>\n              <p class=\"text-lg font-semibold\">4.9 out of 5</p>\n              <p class=\"text-muted-foreground\">(2,458 reviews)</p>\n            </div>\n          </div>\n        </Motion>\n\n        <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n          <Motion\n            v-for=\"(testimonial, index) in testimonials\"\n            :key=\"index\"\n            as-child\n            :variants=\"cardVariant\"\n          >\n            <UiCard class=\"p-6\">\n              <div class=\"mb-4 flex\">\n                <Icon\n                  v-for=\"s in 5\"\n                  :key=\"s\"\n                  name=\"material-symbols:kid-star\"\n                  class=\"size-5 fill-yellow-400 text-yellow-400\"\n                />\n              </div>\n              <p class=\"mb-6 text-muted-foreground\">{{ testimonial.quote }}</p>\n              <div class=\"flex items-center gap-3\">\n                <UiAvatar :src=\"testimonial.avatar\" />\n                <div>\n                  <p class=\"font-semibold\">{{ testimonial.name }}</p>\n                  <p class=\"text-sm text-muted-foreground\">{{ testimonial.role }}</p>\n                </div>\n              </div>\n            </UiCard>\n          </Motion>\n        </div>\n\n        <Motion as-child :variants=\"logoSectionVariant\">\n          <div class=\"mt-16\">\n            <p class=\"mb-8 text-center text-sm text-muted-foreground\">\n              Trusted by leading companies worldwide\n            </p>\n            <div\n              class=\"flex flex-wrap items-center justify-center gap-8 opacity-60 grayscale hover:grayscale-0\"\n            >\n              <Icon v-for=\"company in companies\" :key=\"company\" :name=\"company\" class=\"h-12 w-12\" />\n            </div>\n          </div>\n        </Motion>\n      </UiContainer>\n    </Motion>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const testimonials = [\n    {\n      quote:\n        \"This platform has completely transformed how we work. The features are intuitive and powerful.\",\n      name: \"Sarah Johnson\",\n      role: \"CEO at TechCorp\",\n      avatar: \"https://i.pravatar.cc/150?img=1\",\n    },\n    {\n      quote: \"Best investment we've made this year. Our team productivity has increased by 40%.\",\n      name: \"Michael Chen\",\n      role: \"CTO at StartupHub\",\n      avatar: \"https://i.pravatar.cc/150?img=5\",\n    },\n    {\n      quote: \"Outstanding support and constant innovation. They truly care about their customers.\",\n      name: \"Emily Rodriguez\",\n      role: \"Product Manager at Innovate\",\n      avatar: \"https://i.pravatar.cc/150?img=10\",\n    },\n  ];\n\n  const companies = [\n    \"logos:100tb\",\n    \"logos:aha\",\n    \"logos:airbnb-icon\",\n    \"logos:akamai\",\n    \"logos:asana-icon\",\n  ];\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const cardVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 30 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const logoSectionVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        delay: 0.5,\n        duration: 0.5,\n      },\n    },\n  };\n</script>\n","category":"SocialProof","path":"SocialProof/BlockSocialProof4.vue","components":["avatar","card","container"]},{"name":"Social Proof 5","fileName":"BlockSocialProof5.vue","file":"<template>\n  <div class=\"overflow-hidden py-16 lg:py-24\">\n    <Motion\n      initial=\"initial\"\n      while-in-view=\"animate\"\n      :in-view-options=\"{ once: true }\"\n      as-child\n      :variants=\"parentVariant\"\n    >\n      <UiContainer>\n        <Motion as-child :variants=\"childVariant\">\n          <div class=\"mb-12 text-center\">\n            <h2 class=\"mb-4 text-3xl font-bold lg:text-4xl\">\n              Powering innovation at companies of all sizes\n            </h2>\n            <p class=\"text-lg text-muted-foreground\">From startups to Fortune 500 companies</p>\n          </div>\n        </Motion>\n\n        <!-- Scrolling logos animation -->\n        <Motion as-child :variants=\"childVariant\">\n          <div class=\"relative\">\n            <div class=\"animate-marquee flex items-center gap-12\">\n              <template v-for=\"n in 2\" :key=\"n\">\n                <div v-for=\"company in companies\" :key=\"`${company.text}-${n}`\" class=\"shrink-0\">\n                  <span class=\"sr-only\">{{ company.text }}</span>\n                  <Icon\n                    :name=\"company.icon\"\n                    class=\"h-20 w-20 opacity-60 grayscale transition-all hover:opacity-100 hover:grayscale-0\"\n                  />\n                </div>\n              </template>\n            </div>\n          </div>\n        </Motion>\n\n        <Motion as-child :variants=\"statsVariant\">\n          <div class=\"mt-16 grid gap-8 md:grid-cols-3\">\n            <div class=\"text-center\">\n              <p class=\"mb-2 text-4xl font-bold\">10,000+</p>\n              <p class=\"text-muted-foreground\">Companies worldwide</p>\n            </div>\n            <div class=\"text-center\">\n              <p class=\"mb-2 text-4xl font-bold\">5M+</p>\n              <p class=\"text-muted-foreground\">Monthly active users</p>\n            </div>\n            <div class=\"text-center\">\n              <p class=\"mb-2 text-4xl font-bold\">99.9%</p>\n              <p class=\"text-muted-foreground\">Customer satisfaction</p>\n            </div>\n          </div>\n        </Motion>\n      </UiContainer>\n    </Motion>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const companies = [\n    { text: \"Company One\", icon: \"logos:100tb\" },\n    { text: \"Company Two\", icon: \"logos:aha\" },\n    { text: \"Company Three\", icon: \"logos:airbnb-icon\" },\n    { text: \"Company Four\", icon: \"logos:akamai\" },\n    { text: \"Company Five\", icon: \"logos:asana-icon\" },\n    { text: \"Company Six\", icon: \"logos:atlassian\" },\n    { text: \"Company Seven\", icon: \"logos:figma\" },\n    { text: \"Company Eight\", icon: \"logos:discord-icon\" },\n  ];\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.15),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const statsVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 30 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n</script>\n\n<style scoped>\n  @keyframes marquee {\n    from {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(-50%);\n    }\n  }\n\n  .animate-marquee {\n    animation: marquee 30s linear infinite;\n  }\n\n  .animate-marquee:hover {\n    animation-play-state: paused;\n  }\n</style>\n","category":"SocialProof","path":"SocialProof/BlockSocialProof5.vue","components":["container"]},{"name":"App Stats 1","fileName":"BlockAppStats1.vue","file":"<template>\n  <UiCard class=\"relative\">\n    <slot>\n      <div class=\"absolute top-2 right-3\">\n        <UiDropdownMenu>\n          <UiDropdownMenuTrigger as-child>\n            <UiButton variant=\"ghost\" size=\"icon-sm\">\n              <Icon name=\"lucide:more-vertical\" class=\"size-4\" />\n            </UiButton>\n          </UiDropdownMenuTrigger>\n          <UiDropdownMenuContent>\n            <UiDropdownMenuItem>View</UiDropdownMenuItem>\n            <UiDropdownMenuItem>Edit</UiDropdownMenuItem>\n            <UiDropdownMenuItem>Delete</UiDropdownMenuItem>\n          </UiDropdownMenuContent>\n        </UiDropdownMenu>\n      </div>\n    </slot>\n    <UiCardContent>\n      <UiFancyIcon v-if=\"props.icon\" class=\"mb-6 bg-transparent\" :icon=\"props.icon\" />\n      <p\n        v-if=\"props.subHeader\"\n        class=\"mb-2 text-sm font-medium text-muted-foreground\"\n        v-html=\"props.subHeader\"\n      />\n      <div class=\"flex items-end justify-between gap-5\">\n        <h3 v-if=\"props.header\" class=\"text-3xl font-bold tracking-tight\" v-html=\"props.header\" />\n        <UiBadge v-if=\"props.badge\">{{ $props.badge }}</UiBadge>\n      </div>\n      <p\n        v-if=\"props.subText\"\n        class=\"mt-4 text-sm font-medium text-muted-foreground\"\n        v-html=\"props.subText\"\n      />\n    </UiCardContent>\n  </UiCard>\n</template>\n\n<script lang=\"ts\" setup>\n  const props = withDefaults(\n    defineProps<{\n      icon?: string;\n      subHeader?: string;\n      header?: string;\n      badge?: string;\n      subText?: string;\n    }>(),\n    {\n      icon: \"lucide:trending-up\",\n      subHeader: \"Revenue\",\n      header: \"$ 1,204\",\n      badge: \"+ 5.4%\",\n      subText: \"Since last month\",\n    }\n  );\n</script>\n","category":"Stats","path":"App/Stats/BlockAppStats1.vue","components":["badge","button","card","cardcontent","dropdownmenu","dropdownmenucontent","dropdownmenuitem","dropdownmenutrigger","fancyicon"]},{"name":"App Stats 10","fileName":"BlockAppStats10.vue","file":"<template>\n  <UiCard>\n    <UiCardContent class=\"space-y-4\">\n      <div class=\"flex items-start justify-between\">\n        <div>\n          <p class=\"text-sm font-medium text-muted-foreground\" v-html=\"props.label\" />\n          <h3 class=\"mt-1 text-2xl font-bold tracking-tight\" v-html=\"props.value\" />\n        </div>\n        <div :class=\"['rounded-lg p-2', props.iconBg || 'bg-primary/10']\">\n          <Icon :name=\"props.icon\" :class=\"['size-5', props.iconColor || 'text-primary']\" />\n        </div>\n      </div>\n\n      <div class=\"space-y-2\">\n        <div class=\"flex items-center justify-between text-sm\">\n          <span class=\"text-muted-foreground\">Goal</span>\n          <span class=\"font-medium\">{{ props.goal }}</span>\n        </div>\n        <UiProgress :model-value=\"props.progressPercent\" class=\"h-2\" />\n        <div class=\"flex items-center justify-between text-xs\">\n          <span class=\"text-muted-foreground\">{{ props.remaining }} remaining</span>\n          <span class=\"font-medium text-muted-foreground\">{{ props.progressPercent }}%</span>\n        </div>\n      </div>\n\n      <div class=\"flex items-center gap-2 rounded-lg bg-muted/50 p-3\">\n        <Icon\n          :name=\"props.trend === 'up' ? 'lucide:trending-up' : 'lucide:trending-down'\"\n          :class=\"[\n            'size-4',\n            props.trend === 'up'\n              ? 'text-green-600 dark:text-green-500'\n              : 'text-red-600 dark:text-red-500',\n          ]\"\n        />\n        <span class=\"flex-1 text-sm\">\n          <span\n            :class=\"[\n              'font-semibold',\n              props.trend === 'up'\n                ? 'text-green-600 dark:text-green-500'\n                : 'text-red-600 dark:text-red-500',\n            ]\"\n            v-html=\"props.change\"\n          />\n          <span class=\"text-muted-foreground\"> {{ props.timeframe }}</span>\n        </span>\n      </div>\n    </UiCardContent>\n  </UiCard>\n</template>\n\n<script lang=\"ts\" setup>\n  const props = withDefaults(\n    defineProps<{\n      label?: string;\n      value?: string;\n      goal?: string;\n      remaining?: string;\n      progressPercent?: number;\n      change?: string;\n      timeframe?: string;\n      trend?: \"up\" | \"down\";\n      icon?: string;\n      iconBg?: string;\n      iconColor?: string;\n    }>(),\n    {\n      label: \"Revenue Goal\",\n      value: \"$84,250\",\n      goal: \"$100,000\",\n      remaining: \"$15,750\",\n      progressPercent: 84.25,\n      change: \"+18.5%\",\n      timeframe: \"from last quarter\",\n      trend: \"up\",\n      icon: \"lucide:target\",\n    }\n  );\n</script>\n","category":"Stats","path":"App/Stats/BlockAppStats10.vue","components":["card","cardcontent","progress"]},{"name":"App Stats 2","fileName":"BlockAppStats2.vue","file":"<template>\n  <UiCard>\n    <UiCardContent class=\"flex items-center justify-between\">\n      <div class=\"flex-1\">\n        <p class=\"text-sm font-medium text-muted-foreground\" v-html=\"props.label\" />\n        <h3 class=\"mt-2 text-2xl font-bold tracking-tight\" v-html=\"props.value\" />\n        <div class=\"mt-2 flex items-center gap-1.5 text-sm\">\n          <Icon\n            :name=\"props.trend === 'up' ? 'lucide:trending-up' : 'lucide:trending-down'\"\n            :class=\"[\n              'size-4',\n              props.trend === 'up'\n                ? 'text-green-600 dark:text-green-500'\n                : 'text-red-600 dark:text-red-500',\n            ]\"\n          />\n          <span\n            :class=\"[\n              'font-medium',\n              props.trend === 'up'\n                ? 'text-green-600 dark:text-green-500'\n                : 'text-red-600 dark:text-red-500',\n            ]\"\n            v-html=\"props.change\"\n          />\n          <span class=\"text-muted-foreground\" v-html=\"props.timeframe\" />\n        </div>\n      </div>\n      <div\n        :class=\"[\n          'flex size-12 items-center justify-center rounded-lg',\n          props.iconBg || 'bg-primary/10',\n        ]\"\n      >\n        <Icon :name=\"props.icon\" :class=\"['size-6', props.iconColor || 'text-primary']\" />\n      </div>\n    </UiCardContent>\n  </UiCard>\n</template>\n\n<script lang=\"ts\" setup>\n  const props = withDefaults(\n    defineProps<{\n      label?: string;\n      value?: string;\n      change?: string;\n      timeframe?: string;\n      trend?: \"up\" | \"down\";\n      icon?: string;\n      iconBg?: string;\n      iconColor?: string;\n    }>(),\n    {\n      label: \"Total Revenue\",\n      value: \"$45,231.89\",\n      change: \"+20.1%\",\n      timeframe: \"from last month\",\n      trend: \"up\",\n      icon: \"lucide:dollar-sign\",\n    }\n  );\n</script>\n","category":"Stats","path":"App/Stats/BlockAppStats2.vue","components":["card","cardcontent"]},{"name":"App Stats 3","fileName":"BlockAppStats3.vue","file":"<template>\n  <UiCard>\n    <UiCardContent class=\"space-y-4\">\n      <div class=\"flex items-center justify-between\">\n        <p class=\"text-sm font-medium text-muted-foreground\" v-html=\"props.label\" />\n        <UiBadge :variant=\"props.trend === 'up' ? 'default' : 'destructive'\">\n          <Icon\n            :name=\"props.trend === 'up' ? 'lucide:arrow-up' : 'lucide:arrow-down'\"\n            class=\"mr-1 size-3\"\n          />\n          {{ props.change }}\n        </UiBadge>\n      </div>\n      <div>\n        <h3 class=\"text-3xl font-bold tracking-tight\" v-html=\"props.value\" />\n        <p class=\"mt-1 text-xs text-muted-foreground\" v-html=\"props.description\" />\n      </div>\n      <UiProgress :model-value=\"props.progress\" class=\"h-1.5\" />\n      <div class=\"flex items-center justify-between text-xs text-muted-foreground\">\n        <span v-html=\"props.progressLabel\" />\n        <span>{{ props.progress }}%</span>\n      </div>\n    </UiCardContent>\n  </UiCard>\n</template>\n\n<script lang=\"ts\" setup>\n  const props = withDefaults(\n    defineProps<{\n      label?: string;\n      value?: string;\n      change?: string;\n      trend?: \"up\" | \"down\";\n      description?: string;\n      progress?: number;\n      progressLabel?: string;\n    }>(),\n    {\n      label: \"Monthly Target\",\n      value: \"$12,450\",\n      change: \"+12.5%\",\n      trend: \"up\",\n      description: \"Target: $15,000\",\n      progress: 83,\n      progressLabel: \"83% of target reached\",\n    }\n  );\n</script>\n","category":"Stats","path":"App/Stats/BlockAppStats3.vue","components":["badge","card","cardcontent","progress"]},{"name":"App Stats 4","fileName":"BlockAppStats4.vue","file":"<template>\n  <UiCard class=\"overflow-hidden p-0\">\n    <UiCardContent class=\"p-0\">\n      <div class=\"flex\">\n        <div :class=\"['flex w-16 items-center justify-center', props.accentColor || 'bg-primary']\">\n          <Icon :name=\"props.icon\" class=\"size-8 text-primary-foreground\" />\n        </div>\n        <div class=\"flex-1 p-6\">\n          <p class=\"text-sm font-medium text-muted-foreground\" v-html=\"props.label\" />\n          <h3 class=\"mt-1 text-2xl font-bold tracking-tight\" v-html=\"props.value\" />\n          <div class=\"flex items-center gap-4\">\n            <div class=\"flex items-center gap-1 text-sm\">\n              <Icon name=\"lucide:calendar\" class=\"size-3.5 text-muted-foreground\" />\n              <span class=\"text-muted-foreground\" v-html=\"props.period\" />\n            </div>\n            <UiBadge variant=\"outline\">{{ props.status }}</UiBadge>\n          </div>\n        </div>\n      </div>\n    </UiCardContent>\n  </UiCard>\n</template>\n\n<script lang=\"ts\" setup>\n  const props = withDefaults(\n    defineProps<{\n      label?: string;\n      value?: string;\n      period?: string;\n      status?: string;\n      icon?: string;\n      accentColor?: string;\n    }>(),\n    {\n      label: \"Active Users\",\n      value: \"2,845\",\n      period: \"Last 30 days\",\n      status: \"Live\",\n      icon: \"lucide:users\",\n    }\n  );\n</script>\n","category":"Stats","path":"App/Stats/BlockAppStats4.vue","components":["badge","card","cardcontent"]},{"name":"App Stats 5","fileName":"BlockAppStats5.vue","file":"<template>\n  <UiCard>\n    <UiCardHeader>\n      <div class=\"flex items-center justify-between\">\n        <div class=\"flex items-center gap-3\">\n          <div\n            :class=\"[\n              'flex size-10 items-center justify-center rounded-full',\n              props.iconBg || 'bg-primary/10',\n            ]\"\n          >\n            <Icon :name=\"props.icon\" :class=\"['size-5', props.iconColor || 'text-primary']\" />\n          </div>\n          <div>\n            <p class=\"text-sm font-medium text-muted-foreground\" v-html=\"props.label\" />\n            <h3 class=\"text-xl font-bold tracking-tight\" v-html=\"props.value\" />\n          </div>\n        </div>\n        <UiDropdownMenu>\n          <UiDropdownMenuTrigger as-child>\n            <UiButton variant=\"ghost\" size=\"icon-sm\">\n              <Icon name=\"lucide:more-horizontal\" class=\"size-4\" />\n            </UiButton>\n          </UiDropdownMenuTrigger>\n          <UiDropdownMenuContent align=\"end\">\n            <UiDropdownMenuItem>\n              <Icon name=\"lucide:eye\" class=\"mr-2 size-4\" />\n              View Details\n            </UiDropdownMenuItem>\n            <UiDropdownMenuItem>\n              <Icon name=\"lucide:download\" class=\"mr-2 size-4\" />\n              Export\n            </UiDropdownMenuItem>\n            <UiDropdownMenuSeparator />\n            <UiDropdownMenuItem>\n              <Icon name=\"lucide:refresh-cw\" class=\"mr-2 size-4\" />\n              Refresh\n            </UiDropdownMenuItem>\n          </UiDropdownMenuContent>\n        </UiDropdownMenu>\n      </div>\n    </UiCardHeader>\n    <UiCardContent>\n      <div class=\"flex items-center justify-between\">\n        <div class=\"flex items-center gap-2\">\n          <Icon\n            :name=\"props.trend === 'up' ? 'lucide:trending-up' : 'lucide:trending-down'\"\n            :class=\"[\n              'size-4',\n              props.trend === 'up'\n                ? 'text-green-600 dark:text-green-500'\n                : 'text-red-600 dark:text-red-500',\n            ]\"\n          />\n          <span\n            :class=\"[\n              'text-sm font-medium',\n              props.trend === 'up'\n                ? 'text-green-600 dark:text-green-500'\n                : 'text-red-600 dark:text-red-500',\n            ]\"\n            v-html=\"props.change\"\n          />\n          <span class=\"text-sm text-muted-foreground\" v-html=\"props.timeframe\" />\n        </div>\n      </div>\n    </UiCardContent>\n  </UiCard>\n</template>\n\n<script lang=\"ts\" setup>\n  const props = withDefaults(\n    defineProps<{\n      label?: string;\n      value?: string;\n      change?: string;\n      timeframe?: string;\n      trend?: \"up\" | \"down\";\n      icon?: string;\n      iconBg?: string;\n      iconColor?: string;\n    }>(),\n    {\n      label: \"Sales\",\n      value: \"$24,500\",\n      change: \"+8.2%\",\n      timeframe: \"vs last week\",\n      trend: \"up\",\n      icon: \"lucide:shopping-cart\",\n    }\n  );\n</script>\n","category":"Stats","path":"App/Stats/BlockAppStats5.vue","components":["button","card","cardcontent","cardheader","dropdownmenu","dropdownmenucontent","dropdownmenuitem","dropdownmenuseparator","dropdownmenutrigger"]},{"name":"App Stats 6","fileName":"BlockAppStats6.vue","file":"<template>\n  <UiCard>\n    <UiCardContent>\n      <div class=\"flex items-start justify-between\">\n        <div class=\"space-y-1\">\n          <p class=\"text-sm font-medium text-muted-foreground\" v-html=\"props.label\" />\n          <h3 class=\"text-3xl font-bold tracking-tight\" v-html=\"props.value\" />\n        </div>\n        <UiFancyIcon :icon=\"props.icon\" :class=\"props.iconClass\" class=\"bg-transparent\" />\n      </div>\n      <UiSeparator class=\"my-4\" />\n      <div class=\"grid grid-cols-2 gap-4 text-sm\">\n        <div>\n          <p class=\"text-muted-foreground\" v-html=\"props.metric1Label\" />\n          <p class=\"mt-1 font-semibold\" v-html=\"props.metric1Value\" />\n        </div>\n        <div>\n          <p class=\"text-muted-foreground\" v-html=\"props.metric2Label\" />\n          <p class=\"mt-1 font-semibold\" v-html=\"props.metric2Value\" />\n        </div>\n      </div>\n    </UiCardContent>\n  </UiCard>\n</template>\n\n<script lang=\"ts\" setup>\n  const props = withDefaults(\n    defineProps<{\n      label?: string;\n      value?: string;\n      icon?: string;\n      iconClass?: string;\n      metric1Label?: string;\n      metric1Value?: string;\n      metric2Label?: string;\n      metric2Value?: string;\n    }>(),\n    {\n      label: \"Total Orders\",\n      value: \"1,429\",\n      icon: \"lucide:package\",\n      metric1Label: \"Pending\",\n      metric1Value: \"124\",\n      metric2Label: \"Completed\",\n      metric2Value: \"1,305\",\n    }\n  );\n</script>\n","category":"Stats","path":"App/Stats/BlockAppStats6.vue","components":["card","cardcontent","fancyicon","separator"]},{"name":"App Stats 7","fileName":"BlockAppStats7.vue","file":"<template>\n  <UiCard class=\"relative overflow-hidden\">\n    <div\n      :class=\"[\n        'absolute inset-y-0 left-0 w-1',\n        props.trend === 'up'\n          ? 'bg-green-500'\n          : props.trend === 'down'\n            ? 'bg-red-500'\n            : 'bg-primary',\n      ]\"\n    />\n    <UiCardContent class=\"pl-8\">\n      <div class=\"flex items-start justify-between\">\n        <div class=\"flex-1 space-y-1\">\n          <p class=\"text-sm font-medium text-muted-foreground\" v-html=\"props.label\" />\n          <div class=\"flex items-baseline gap-2\">\n            <h3 class=\"text-2xl font-bold tracking-tight\" v-html=\"props.value\" />\n            <span\n              :class=\"[\n                'text-sm font-medium',\n                props.trend === 'up'\n                  ? 'text-green-600 dark:text-green-500'\n                  : props.trend === 'down'\n                    ? 'text-red-600 dark:text-red-500'\n                    : 'text-muted-foreground',\n              ]\"\n              v-html=\"props.change\"\n            />\n          </div>\n          <p class=\"text-xs text-muted-foreground\" v-html=\"props.description\" />\n        </div>\n        <Icon :name=\"props.icon\" class=\"size-8 text-muted-foreground/50\" />\n      </div>\n      <div class=\"mt-4 flex items-center gap-4 text-xs\">\n        <div class=\"flex items-center gap-1\">\n          <div class=\"size-2 rounded-full bg-primary\" />\n          <span class=\"text-muted-foreground\">Current: {{ props.current }}</span>\n        </div>\n        <div class=\"flex items-center gap-1\">\n          <div class=\"size-2 rounded-full bg-muted\" />\n          <span class=\"text-muted-foreground\">Previous: {{ props.previous }}</span>\n        </div>\n      </div>\n    </UiCardContent>\n  </UiCard>\n</template>\n\n<script lang=\"ts\" setup>\n  const props = withDefaults(\n    defineProps<{\n      label?: string;\n      value?: string;\n      change?: string;\n      trend?: \"up\" | \"down\" | \"neutral\";\n      description?: string;\n      icon?: string;\n      current?: string;\n      previous?: string;\n    }>(),\n    {\n      label: \"Conversion Rate\",\n      value: \"3.24%\",\n      change: \"+0.4%\",\n      trend: \"up\",\n      description: \"Based on last 1,245 visitors\",\n      icon: \"lucide:activity\",\n      current: \"3.24%\",\n      previous: \"2.84%\",\n    }\n  );\n</script>\n","category":"Stats","path":"App/Stats/BlockAppStats7.vue","components":["card","cardcontent"]},{"name":"App Stats 8","fileName":"BlockAppStats8.vue","file":"<template>\n  <UiCard>\n    <UiCardContent class=\"space-y-4\">\n      <div class=\"flex items-center justify-between\">\n        <div\n          :class=\"[\n            'flex size-12 items-center justify-center rounded-xl',\n            props.iconBg || 'bg-linear-to-br from-primary/20 to-primary/5',\n          ]\"\n        >\n          <Icon :name=\"props.icon\" :class=\"['size-6', props.iconColor || 'text-primary']\" />\n        </div>\n        <UiButton variant=\"ghost\" size=\"icon\">\n          <Icon name=\"lucide:external-link\" class=\"size-4\" />\n        </UiButton>\n      </div>\n      <div>\n        <p class=\"text-sm font-medium text-muted-foreground\" v-html=\"props.label\" />\n        <h3 class=\"mt-1 text-3xl font-bold tracking-tight\" v-html=\"props.value\" />\n      </div>\n      <div class=\"flex items-center justify-between\">\n        <div class=\"flex items-center gap-1 text-sm\">\n          <Icon\n            :name=\"props.trend === 'up' ? 'lucide:arrow-up-right' : 'lucide:arrow-down-right'\"\n            :class=\"[\n              'size-4',\n              props.trend === 'up'\n                ? 'text-green-600 dark:text-green-500'\n                : 'text-red-600 dark:text-red-500',\n            ]\"\n          />\n          <span\n            :class=\"[\n              'font-semibold',\n              props.trend === 'up'\n                ? 'text-green-600 dark:text-green-500'\n                : 'text-red-600 dark:text-red-500',\n            ]\"\n            v-html=\"props.change\"\n          />\n          <span class=\"text-xs text-muted-foreground\" v-html=\"props.timeframe\" />\n        </div>\n      </div>\n    </UiCardContent>\n  </UiCard>\n</template>\n\n<script lang=\"ts\" setup>\n  const props = withDefaults(\n    defineProps<{\n      label?: string;\n      value?: string;\n      change?: string;\n      timeframe?: string;\n      trend?: \"up\" | \"down\";\n      icon?: string;\n      iconBg?: string;\n      iconColor?: string;\n    }>(),\n    {\n      label: \"New Customers\",\n      value: \"573\",\n      change: \"+12.3%\",\n      timeframe: \"this month\",\n      trend: \"up\",\n      icon: \"lucide:user-plus\",\n    }\n  );\n</script>\n","category":"Stats","path":"App/Stats/BlockAppStats8.vue","components":["button","card","cardcontent"]},{"name":"App Stats 9","fileName":"BlockAppStats9.vue","file":"<template>\n  <UiCard>\n    <UiCardContent>\n      <div class=\"mb-4 flex items-center justify-between\">\n        <p class=\"text-sm font-medium text-muted-foreground\" v-html=\"props.label\" />\n        <UiButton variant=\"ghost\" size=\"icon-sm\">\n          <Icon name=\"lucide:info\" class=\"size-4\" />\n        </UiButton>\n      </div>\n      <div class=\"space-y-3\">\n        <div class=\"flex items-end justify-between\">\n          <h3 class=\"text-4xl font-bold tracking-tight\" v-html=\"props.value\" />\n          <div class=\"flex items-center gap-1\">\n            <Icon\n              :name=\"props.trend === 'up' ? 'lucide:arrow-up' : 'lucide:arrow-down'\"\n              :class=\"[\n                'size-5',\n                props.trend === 'up'\n                  ? 'text-green-600 dark:text-green-500'\n                  : 'text-red-600 dark:text-red-500',\n              ]\"\n            />\n            <span\n              :class=\"[\n                'text-lg font-bold',\n                props.trend === 'up'\n                  ? 'text-green-600 dark:text-green-500'\n                  : 'text-red-600 dark:text-red-500',\n              ]\"\n              v-html=\"props.change\"\n            />\n          </div>\n        </div>\n        <div class=\"flex items-center gap-2\">\n          <UiAvatar size=\"sm\">\n            <UiAvatarImage :src=\"props.avatar\" />\n            <UiAvatarFallback>{{ props.avatarFallback }}</UiAvatarFallback>\n          </UiAvatar>\n          <div class=\"text-xs\">\n            <p class=\"font-medium\" v-html=\"props.assignedTo\" />\n            <p class=\"text-muted-foreground\" v-html=\"props.role\" />\n          </div>\n        </div>\n        <div class=\"flex gap-2\">\n          <UiChip size=\"sm\" class=\"ring-card\">\n            <UiBadge variant=\"warning\">\n              {{ props.tag1 }}\n            </UiBadge>\n          </UiChip>\n          <UiChip size=\"sm\" variant=\"outline\" class=\"ring-card\">\n            <UiBadge variant=\"outline\">\n              {{ props.tag2 }}\n            </UiBadge>\n          </UiChip>\n        </div>\n      </div>\n    </UiCardContent>\n  </UiCard>\n</template>\n\n<script lang=\"ts\" setup>\n  const props = withDefaults(\n    defineProps<{\n      label?: string;\n      value?: string;\n      change?: string;\n      trend?: \"up\" | \"down\";\n      avatar?: string;\n      avatarFallback?: string;\n      assignedTo?: string;\n      role?: string;\n      tag1?: string;\n      tag2?: string;\n    }>(),\n    {\n      label: \"Project Progress\",\n      value: \"68%\",\n      change: \"+5%\",\n      trend: \"up\",\n      avatar: \"https://i.pravatar.cc/150?img=3\",\n      avatarFallback: \"JD\",\n      assignedTo: \"John Doe\",\n      role: \"Project Manager\",\n      tag1: \"In Progress\",\n      tag2: \"High Priority\",\n    }\n  );\n</script>\n","category":"Stats","path":"App/Stats/BlockAppStats9.vue","components":["avatar","avatarfallback","avatarimage","badge","button","card","cardcontent","chip"]},{"name":"Blog Subscribe 1","fileName":"BlockBlogSubscribe1.vue","file":"<template>\n  <Motion\n    as-child\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :variants=\"{\n      initial: { opacity: 0, scale: 0.9 },\n      animate: {\n        opacity: 1,\n        scale: 1,\n        transition: { when: 'beforeChildren', delayChildren: stagger(0.1), type: 'keyframes' },\n      },\n    }\"\n  >\n    <UiCard class=\"shadow-xs\">\n      <UiCardContent>\n        <Motion\n          :variants=\"{\n            initial: { scale: 0, y: 20 },\n            animate: { scale: 1, y: 0 },\n          }\"\n          class=\"inline-flex size-16 items-center justify-center rounded-full bg-linear-to-b from-primary/50 text-primary\"\n        >\n          <Icon name=\"lucide:send\" class=\"h-6 w-6\" />\n        </Motion>\n\n        <Motion\n          as=\"h3\"\n          :variants=\"{\n            initial: { opacity: 0, y: 10 },\n            animate: { opacity: 1, y: 0 },\n          }\"\n          class=\"mt-6 mb-2 text-2xl font-semibold\"\n          >Weekly newsletter</Motion\n        >\n        <Motion\n          as=\"p\"\n          :variants=\"{\n            initial: { opacity: 0, y: 10 },\n            animate: { opacity: 1, y: 0 },\n          }\"\n          class=\"mb-6 text-muted-foreground\"\n        >\n          No spam. Just the latest releases and tips, interesting articles, and exclusive interviews\n          in your inbox every week.\n        </Motion>\n        <form>\n          <Motion\n            :variants=\"{\n              initial: { opacity: 0, y: 10 },\n              animate: { opacity: 1, y: 0 },\n            }\"\n            class=\"w-full\"\n          >\n            <UiVeeInput required placeholder=\"Enter your email\" aria-label=\"Enter your email\" />\n          </Motion>\n          <Motion\n            as=\"p\"\n            :variants=\"{\n              initial: { opacity: 0, y: 10 },\n              animate: { opacity: 1, y: 0 },\n            }\"\n            class=\"my-4 text-sm text-muted-foreground\"\n          >\n            Read about our privacy policy <a href=\"#\" class=\"text-primary\">here</a>.\n          </Motion>\n          <Motion\n            :variants=\"{\n              initial: { opacity: 0, y: 10 },\n              animate: { opacity: 1, y: 0 },\n            }\"\n          >\n            <UiButton size=\"lg\" class=\"w-full whitespace-nowrap\" type=\"submit\">Subscribe</UiButton>\n          </Motion>\n        </form>\n      </UiCardContent>\n    </UiCard>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n</script>\n","category":"Subscribe","path":"Blog/Subscribe/BlockBlogSubscribe1.vue","components":["button","card","cardcontent","veeinput"]},{"name":"Blog Subscribe 2","fileName":"BlockBlogSubscribe2.vue","file":"<template>\n  <Motion\n    as-child\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :variants=\"{\n      initial: { opacity: 0, scale: 0.9, y: 10 },\n      animate: {\n        opacity: 1,\n        scale: 1,\n        y: 0,\n        transition: { when: 'beforeChildren', delayChildren: stagger(0.2), type: 'keyframes' },\n      },\n    }\"\n  >\n    <UiCard class=\"relative rounded-none shadow-xs\">\n      <Motion\n        class=\"absolute top-0 h-0.5 w-full bg-primary\"\n        :variants=\"{\n          initial: { scaleX: 0 },\n          animate: { scaleX: 1, transition: { duration: 1, ease: 'easeOut' } },\n        }\"\n      />\n      <UiCardContent>\n        <Motion\n          :variants=\"{\n            initial: { opacity: 0, scale: 0 },\n            animate: {\n              opacity: 1,\n              scale: 1,\n              transition: { type: 'spring', stiffness: 200, damping: 20 },\n            },\n          }\"\n          class=\"inline-flex size-14 items-center justify-center rounded-md bg-linear-to-b from-primary/40 text-primary\"\n        >\n          <Icon name=\"lucide:mail\" class=\"size-6\" />\n        </Motion>\n\n        <Motion as=\"h3\" :variants=\"childVariant\" class=\"mt-8 mb-2 text-2xl font-semibold\"\n          >Weekly newsletter</Motion\n        >\n        <Motion as=\"p\" :variants=\"childVariant\" class=\"mb-6 text-muted-foreground\">\n          No spam. Just the latest releases and tips, interesting articles, and exclusive interviews\n          in your inbox every week.\n        </Motion>\n        <form>\n          <Motion :variants=\"childVariant\" class=\"w-full\">\n            <UiVeeInput required placeholder=\"Enter your email\" aria-label=\"Enter your email\" />\n          </Motion>\n          <Motion as=\"p\" :variants=\"childVariant\" class=\"my-4 text-sm text-muted-foreground\">\n            Read about our privacy policy <a href=\"#\" class=\"text-primary\">here</a>.\n          </Motion>\n          <Motion :variants=\"childVariant\">\n            <UiButton size=\"lg\" class=\"w-full whitespace-nowrap\" type=\"submit\">Subscribe</UiButton>\n          </Motion>\n        </form>\n      </UiCardContent>\n    </UiCard>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 10 },\n    animate: { opacity: 1, y: 0, transition: { type: \"spring\", stiffness: 200, damping: 20 } },\n  };\n</script>\n","category":"Subscribe","path":"Blog/Subscribe/BlockBlogSubscribe2.vue","components":["button","card","cardcontent","veeinput"]},{"name":"Blog Subscribe 3","fileName":"BlockBlogSubscribe3.vue","file":"<template>\n  <Motion\n    as-child\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :variants=\"{\n      initial: { opacity: 0, y: 30 },\n      animate: {\n        opacity: 1,\n        y: 0,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.15),\n          type: 'spring',\n          stiffness: 200,\n          damping: 25,\n        },\n      },\n    }\"\n  >\n    <UiCard class=\"overflow-hidden shadow-xs\">\n      <Motion\n        :variants=\"{\n          initial: { opacity: 0, scale: 0.8 },\n          animate: {\n            opacity: 1,\n            scale: 1,\n            transition: {\n              when: 'beforeChildren',\n            },\n          },\n        }\"\n        class=\"mx-auto flex size-16 items-center justify-center rounded-full bg-radial via-transparent to-primary/40\"\n      >\n        <Motion\n          as-child\n          :variants=\"{\n            initial: { scale: 0, rotate: -180 },\n            animate: {\n              scale: 1,\n              rotate: 0,\n              transition: { type: 'spring', stiffness: 200, damping: 15 },\n            },\n          }\"\n        >\n          <Icon name=\"lucide:mail-open\" class=\"size-6 text-primary dark:text-foreground\" />\n        </Motion>\n      </Motion>\n\n      <UiCardContent class=\"pt-2\">\n        <Motion\n          as=\"h3\"\n          :variants=\"{\n            initial: { opacity: 0, y: 10 },\n            animate: { opacity: 1, y: 0 },\n          }\"\n          class=\"text-center text-2xl font-bold\"\n        >\n          Stay in the loop\n        </Motion>\n        <Motion\n          as=\"p\"\n          :variants=\"{\n            initial: { opacity: 0, y: 10 },\n            animate: { opacity: 1, y: 0 },\n          }\"\n          class=\"mt-2 mb-6 text-center text-muted-foreground\"\n        >\n          Get notified about new articles, tutorials, and exclusive content delivered straight to\n          your inbox.\n        </Motion>\n\n        <form class=\"space-y-4\">\n          <Motion\n            :variants=\"{\n              initial: { opacity: 0, x: -20 },\n              animate: {\n                opacity: 1,\n                x: 0,\n                transition: { type: 'spring', stiffness: 200, damping: 20 },\n              },\n            }\"\n          >\n            <UiVeeInput required placeholder=\"Your email address\" aria-label=\"Email address\" />\n          </Motion>\n          <Motion\n            :variants=\"{\n              initial: { opacity: 0, x: 20 },\n              animate: {\n                opacity: 1,\n                x: 0,\n                transition: { type: 'spring', stiffness: 200, damping: 20 },\n              },\n            }\"\n          >\n            <UiButton size=\"lg\" class=\"w-full\" type=\"submit\">\n              <Icon name=\"lucide:send\" class=\"size-4\" />\n              Subscribe now\n            </UiButton>\n          </Motion>\n        </form>\n\n        <Motion\n          :variants=\"{\n            initial: { opacity: 0, x: -10 },\n            animate: {\n              opacity: 1,\n              x: 0,\n              transition: { type: 'spring', stiffness: 200, damping: 20 },\n            },\n          }\"\n          class=\"mt-4 flex items-center justify-center gap-2 text-xs text-muted-foreground\"\n        >\n          <Icon name=\"lucide:shield-check\" class=\"size-4\" />\n          <span>We respect your privacy. Unsubscribe anytime.</span>\n        </Motion>\n      </UiCardContent>\n    </UiCard>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n</script>\n","category":"Subscribe","path":"Blog/Subscribe/BlockBlogSubscribe3.vue","components":["button","card","cardcontent","veeinput"]},{"name":"Blog Subscribe 4","fileName":"BlockBlogSubscribe4.vue","file":"<template>\n  <Motion\n    as-child\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :variants=\"{\n      initial: { opacity: 0, scale: 0.95, y: 10 },\n      animate: {\n        opacity: 1,\n        scale: 1,\n        y: 0,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n          type: 'keyframes',\n        },\n      },\n    }\"\n  >\n    <UiCard class=\"relative overflow-hidden shadow-xs\">\n      <div class=\"absolute top-0 right-0 size-40 bg-primary/10 blur-3xl\" />\n      <div class=\"absolute bottom-0 left-0 size-52 bg-primary/5 blur-3xl\" />\n\n      <UiCardContent class=\"relative\">\n        <div class=\"mb-6 flex items-start justify-between\">\n          <div>\n            <Motion\n              :variants=\"{\n                initial: { opacity: 0, x: -20 },\n                animate: { opacity: 1, x: 0 },\n              }\"\n            >\n              <UiBadge variant=\"default\" class=\"mb-3\">\n                <Icon name=\"lucide:zap\" class=\"size-3\" />\n                Weekly insights\n              </UiBadge>\n            </Motion>\n            <Motion\n              as=\"h3\"\n              :variants=\"{\n                initial: { opacity: 0, y: 10 },\n                animate: { opacity: 1, y: 0 },\n              }\"\n              class=\"text-2xl font-bold\"\n            >\n              Join our newsletter\n            </Motion>\n          </div>\n          <Motion\n            :variants=\"{\n              initial: { scale: 0, opacity: 0 },\n              animate: {\n                scale: 1,\n                opacity: 1,\n                transition: { type: 'spring', stiffness: 200, damping: 15 },\n              },\n            }\"\n            class=\"flex size-14 shrink-0 items-center justify-center rounded-full bg-radial via-transparent via-40% to-primary/40\"\n          >\n            <Icon name=\"lucide:newspaper\" class=\"size-5 text-primary\" />\n          </Motion>\n        </div>\n\n        <Motion\n          as=\"p\"\n          :variants=\"{\n            initial: { opacity: 0, y: 10 },\n            animate: { opacity: 1, y: 0 },\n          }\"\n          class=\"mb-6 text-muted-foreground\"\n        >\n          Subscribe to receive curated articles, industry news, and expert tips delivered weekly.\n        </Motion>\n\n        <Motion\n          :variants=\"{\n            initial: { opacity: 0, y: 10 },\n            animate: { opacity: 1, y: 0 },\n          }\"\n          class=\"mb-6 space-y-2\"\n        >\n          <div class=\"flex items-center gap-2 text-sm\">\n            <Icon name=\"lucide:check-circle-2\" class=\"size-4 text-primary\" />\n            <span>Exclusive content and early access</span>\n          </div>\n          <div class=\"flex items-center gap-2 text-sm\">\n            <Icon name=\"lucide:check-circle-2\" class=\"size-4 text-primary\" />\n            <span>No spam, unsubscribe anytime</span>\n          </div>\n          <div class=\"flex items-center gap-2 text-sm\">\n            <Icon name=\"lucide:check-circle-2\" class=\"size-4 text-primary\" />\n            <span>Join 10,000+ readers worldwide</span>\n          </div>\n        </Motion>\n\n        <form class=\"space-y-3\">\n          <Motion\n            :variants=\"{\n              initial: { opacity: 0, y: 20 },\n              animate: { opacity: 1, y: 0 },\n            }\"\n          >\n            <UiVeeInput required placeholder=\"Enter your email\" aria-label=\"Email address\" />\n          </Motion>\n          <Motion\n            :variants=\"{\n              initial: { opacity: 0, y: 20 },\n              animate: { opacity: 1, y: 0 },\n            }\"\n          >\n            <UiButton size=\"lg\" class=\"w-full\" type=\"submit\">\n              Get started free\n              <Icon name=\"lucide:arrow-right\" class=\"size-4\" />\n            </UiButton>\n          </Motion>\n        </form>\n      </UiCardContent>\n    </UiCard>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n</script>\n","category":"Subscribe","path":"Blog/Subscribe/BlockBlogSubscribe4.vue","components":["badge","button","card","cardcontent","veeinput"]},{"name":"Blog Subscribe 5","fileName":"BlockBlogSubscribe5.vue","file":"<template>\n  <Motion\n    as-child\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :variants=\"{\n      initial: { opacity: 0, y: 20 },\n      animate: {\n        opacity: 1,\n        y: 0,\n        transition: { when: 'beforeChildren', delayChildren: stagger(0.12), duration: 0.5 },\n      },\n    }\"\n  >\n    <UiCard\n      class=\"border-none shadow-sm ring-1 ring-muted/30 dark:bg-linear-to-br dark:from-primary/10 dark:via-background dark:to-background dark:ring-primary/5\"\n    >\n      <UiCardContent>\n        <div class=\"mb-6 flex items-center gap-4\">\n          <Motion\n            :variants=\"{\n              initial: { scale: 0, opacity: 0 },\n              animate: {\n                scale: 1,\n                opacity: 1,\n                transition: { type: 'spring', stiffness: 200, damping: 20 },\n              },\n            }\"\n            class=\"flex size-12 shrink-0 items-center justify-center rounded-md bg-linear-to-br from-primary/20\"\n          >\n            <Icon name=\"lucide:book-open\" class=\"size-6 text-primary dark:text-foreground\" />\n          </Motion>\n          <div class=\"flex-1\">\n            <Motion\n              as=\"h3\"\n              :variants=\"{\n                initial: { opacity: 0, x: -20 },\n                animate: { opacity: 1, x: 0, transition: { type: 'keyframes' } },\n              }\"\n              class=\"text-lg font-bold\"\n            >\n              Subscribe to our blog\n            </Motion>\n            <Motion\n              as=\"p\"\n              :variants=\"{\n                initial: { opacity: 0, x: -20 },\n                animate: { opacity: 1, x: 0, transition: { type: 'keyframes' } },\n              }\"\n              class=\"text-sm text-muted-foreground\"\n            >\n              Fresh content every week\n            </Motion>\n          </div>\n        </div>\n\n        <Motion\n          as=\"p\"\n          :variants=\"{\n            initial: { opacity: 0, y: 10 },\n            animate: { opacity: 1, y: 0 },\n          }\"\n          class=\"mb-6 text-muted-foreground\"\n        >\n          Don't miss out on our latest posts, tutorials, and industry insights. Get them delivered\n          to your inbox.\n        </Motion>\n\n        <form>\n          <div class=\"flex gap-2\">\n            <Motion\n              :variants=\"{\n                initial: { opacity: 0, scale: 0.9 },\n                animate: { opacity: 1, scale: 1 },\n              }\"\n              class=\"flex-1\"\n            >\n              <UiVeeInput required placeholder=\"you@example.com\" aria-label=\"Email address\" />\n            </Motion>\n            <Motion\n              :variants=\"{\n                initial: { opacity: 0, scale: 0.9 },\n                animate: { opacity: 1, scale: 1 },\n              }\"\n            >\n              <UiButton size=\"default\" type=\"submit\">\n                <Icon name=\"lucide:send\" class=\"size-4\" />\n                <span class=\"hidden sm:inline\">Subscribe</span>\n              </UiButton>\n            </Motion>\n          </div>\n          <Motion\n            as=\"p\"\n            :variants=\"{\n              initial: { opacity: 0 },\n              animate: { opacity: 1 },\n            }\"\n            class=\"mt-3 text-xs text-muted-foreground\"\n          >\n            By subscribing, you agree to our Privacy Policy and consent to receive updates.\n          </Motion>\n        </form>\n\n        <Motion\n          :variants=\"{\n            initial: { opacity: 0, scaleX: 0 },\n            animate: { opacity: 1, scaleX: 1, transition: { delay: 0.5, duration: 0.5 } },\n          }\"\n          class=\"mt-6 h-px origin-left bg-linear-to-r from-primary/50 via-primary/20\"\n        />\n\n        <Motion\n          :variants=\"{\n            initial: { opacity: 0, y: 10 },\n            animate: { opacity: 1, y: 0 },\n          }\"\n          class=\"mt-4 flex items-center justify-center gap-6 text-xs text-muted-foreground\"\n        >\n          <div class=\"flex items-center gap-1.5\">\n            <Icon name=\"lucide:users\" class=\"size-3.5\" />\n            <span>12K+ subscribers</span>\n          </div>\n          <div class=\"flex items-center gap-1.5\">\n            <Icon name=\"lucide:star\" class=\"size-3.5 fill-yellow-500 text-yellow-500\" />\n            <span>Rated 4.9/5</span>\n          </div>\n        </Motion>\n      </UiCardContent>\n    </UiCard>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n</script>\n","category":"Subscribe","path":"Blog/Subscribe/BlockBlogSubscribe5.vue","components":["button","card","cardcontent","veeinput"]},{"name":"Blog Subscribe 6","fileName":"BlockBlogSubscribe6.vue","file":"<template>\n  <Motion\n    as-child\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :variants=\"{\n      initial: { opacity: 0 },\n      animate: {\n        opacity: 1,\n        transition: { when: 'beforeChildren', delayChildren: stagger(0.1), duration: 0.3 },\n      },\n    }\"\n  >\n    <UiCard class=\"border-dashed shadow-md hover:border-primary\">\n      <UiCardContent>\n        <div class=\"mb-6 text-center\">\n          <Motion\n            :variants=\"{\n              initial: { scale: 0, y: 10 },\n              animate: {\n                scale: 1,\n                y: 0,\n                transition: { type: 'spring', stiffness: 400, damping: 20 },\n              },\n            }\"\n            class=\"mx-auto mb-4 inline-flex size-14 items-center justify-center rounded-full bg-radial via-transparent to-primary/40\"\n          >\n            <Motion\n              as-child\n              :variants=\"{\n                initial: {},\n                animate: {\n                  rotate: [0, 15, -15, 15, -15, 0],\n                  transition: {\n                    duration: 0.8,\n                    repeat: Infinity,\n                    repeatDelay: 3,\n                    repeatType: 'loop',\n                  },\n                },\n              }\"\n            >\n              <Icon name=\"lucide:bell-ring\" class=\"size-7 text-primary\" />\n              <span class=\"sr-only\">Notifications</span>\n            </Motion>\n          </Motion>\n          <Motion\n            as=\"h3\"\n            :variants=\"{\n              initial: { opacity: 0, y: 10 },\n              animate: { opacity: 1, y: 0 },\n            }\"\n            class=\"mb-2 text-xl font-bold\"\n          >\n            Never miss an update\n          </Motion>\n          <Motion\n            as=\"p\"\n            :variants=\"{\n              initial: { opacity: 0, y: 10 },\n              animate: { opacity: 1, y: 0 },\n            }\"\n            class=\"text-sm text-muted-foreground\"\n          >\n            Subscribe to get our latest articles and updates\n          </Motion>\n        </div>\n\n        <form class=\"space-y-3\">\n          <Motion\n            :variants=\"{\n              initial: { opacity: 0, x: -30 },\n              animate: { opacity: 1, x: 0 },\n            }\"\n          >\n            <UiVeeInput\n              required\n              placeholder=\"name@company.com\"\n              type=\"email\"\n              aria-label=\"Email address\"\n              icon=\"lucide:mail\"\n            />\n          </Motion>\n\n          <Motion\n            :variants=\"{\n              initial: { opacity: 0, y: 20 },\n              animate: { opacity: 1, y: 0 },\n            }\"\n          >\n            <UiButton size=\"lg\" class=\"w-full\" type=\"submit\">\n              Subscribe to newsletter\n              <Icon name=\"lucide:arrow-right\" class=\"size-4\" />\n            </UiButton>\n          </Motion>\n        </form>\n\n        <Motion\n          :variants=\"{\n            initial: { opacity: 0, scaleX: 0 },\n            animate: { opacity: 1, scaleX: 1, transition: { delay: 0.4, type: 'keyframes' } },\n          }\"\n          class=\"my-5 h-px origin-top bg-border\"\n        />\n\n        <Motion\n          :variants=\"{\n            initial: { opacity: 0 },\n            animate: { opacity: 1 },\n          }\"\n          class=\"flex items-center justify-between text-xs text-muted-foreground\"\n        >\n          <div class=\"flex items-center gap-1.5\">\n            <Icon name=\"lucide:lock\" class=\"size-3.5\" />\n            <span>100% Secure</span>\n          </div>\n          <UiSeparator orientation=\"vertical\" class=\"h-3\" />\n          <div class=\"flex items-center gap-1.5\">\n            <Icon name=\"lucide:check\" class=\"size-3.5\" />\n            <span>No spam</span>\n          </div>\n          <UiSeparator orientation=\"vertical\" class=\"h-3\" />\n          <div class=\"flex items-center gap-1.5\">\n            <Icon name=\"lucide:x-circle\" class=\"size-3.5\" />\n            <span>Easy unsubscribe</span>\n          </div>\n        </Motion>\n      </UiCardContent>\n    </UiCard>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n</script>\n","category":"Subscribe","path":"Blog/Subscribe/BlockBlogSubscribe6.vue","components":["button","card","cardcontent","separator","veeinput"]},{"name":"Blog Subscribe 7","fileName":"BlockBlogSubscribe7.vue","file":"<template>\n  <Motion\n    as-child\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :variants=\"{\n      initial: { opacity: 0, rotateX: -15 },\n      animate: {\n        opacity: 1,\n        rotateX: 0,\n        transition: {\n          when: 'beforeChildren',\n          delayChildren: stagger(0.1),\n        },\n      },\n    }\"\n  >\n    <UiCard class=\"bg-primary text-primary-foreground shadow-2xl\">\n      <UiCardContent>\n        <div class=\"mb-6 flex items-start justify-between\">\n          <div class=\"flex-1\">\n            <Motion\n              :variants=\"{\n                initial: { opacity: 0, y: -10 },\n                animate: { opacity: 1, y: 0 },\n              }\"\n            >\n              <UiBadge\n                variant=\"secondary\"\n                class=\"mb-3 bg-primary-foreground/20 text-primary-foreground\"\n              >\n                <Icon name=\"lucide:trending-up\" class=\"size-3\" />\n                Popular choice\n              </UiBadge>\n            </Motion>\n            <Motion\n              as=\"h3\"\n              :variants=\"{\n                initial: { opacity: 0, x: -20 },\n                animate: { opacity: 1, x: 0 },\n              }\"\n              class=\"mb-2 text-2xl font-bold\"\n            >\n              Get premium content\n            </Motion>\n            <Motion\n              as=\"p\"\n              :variants=\"{\n                initial: { opacity: 0, x: -20 },\n                animate: { opacity: 1, x: 0 },\n              }\"\n              class=\"text-primary-foreground/80\"\n            >\n              Access exclusive articles, in-depth guides, and expert analysis.\n            </Motion>\n          </div>\n          <Motion\n            :variants=\"{\n              initial: { scale: 0, rotate: -180 },\n              animate: {\n                scale: 1,\n                rotate: 0,\n                transition: { type: 'spring', stiffness: 300, damping: 20 },\n              },\n            }\"\n            class=\"flex size-12 shrink-0 items-center justify-center rounded-full bg-primary-foreground/20\"\n          >\n            <Icon name=\"lucide:crown\" class=\"size-6\" />\n          </Motion>\n        </div>\n\n        <Motion\n          :variants=\"{\n            initial: { opacity: 0, y: 10 },\n            animate: { opacity: 1, y: 0 },\n          }\"\n          class=\"mb-6 grid grid-cols-2 gap-3\"\n        >\n          <div class=\"rounded-lg bg-primary-foreground/10 p-3\">\n            <div class=\"mb-1 text-2xl font-bold\">50+</div>\n            <div class=\"text-xs text-primary-foreground/80\">Articles monthly</div>\n          </div>\n          <div class=\"rounded-lg bg-primary-foreground/10 p-3\">\n            <div class=\"mb-1 text-2xl font-bold\">5K+</div>\n            <div class=\"text-xs text-primary-foreground/80\">Active readers</div>\n          </div>\n        </Motion>\n\n        <form class=\"space-y-3\">\n          <Motion\n            :variants=\"{\n              initial: { opacity: 0, y: 20 },\n              animate: { opacity: 1, y: 0 },\n            }\"\n          >\n            <UiVeeInput\n              required\n              placeholder=\"Enter your email\"\n              aria-label=\"Email address\"\n              class=\"border-primary-foreground/20 bg-primary-foreground/10 text-primary-foreground placeholder:text-primary-foreground/60 focus-visible:border-primary-foreground focus-visible:ring-primary-foreground/30\"\n            />\n          </Motion>\n          <Motion\n            :variants=\"{\n              initial: { opacity: 0, y: 20 },\n              animate: { opacity: 1, y: 0 },\n            }\"\n          >\n            <UiButton\n              size=\"lg\"\n              class=\"w-full bg-primary-foreground text-primary hover:bg-primary-foreground/90\"\n              type=\"submit\"\n            >\n              Start reading\n              <Icon name=\"lucide:arrow-right\" class=\"size-4\" />\n            </UiButton>\n          </Motion>\n        </form>\n\n        <Motion\n          :variants=\"{\n            initial: { opacity: 0 },\n            animate: { opacity: 1 },\n          }\"\n          class=\"mt-4 flex items-center justify-center gap-2 text-xs text-primary-foreground\"\n        >\n          <Icon name=\"lucide:shield\" class=\"size-3.5\" />\n          <span>Your data is safe with us. No spam, ever.</span>\n        </Motion>\n      </UiCardContent>\n    </UiCard>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n</script>\n","category":"Subscribe","path":"Blog/Subscribe/BlockBlogSubscribe7.vue","components":["badge","button","card","cardcontent","veeinput"]},{"name":"Team 1","fileName":"BlockTeam1.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"parentVariant\"\n  >\n    <UiContainer>\n      <UiContainer class=\"py-16 text-center lg:py-24\">\n        <slot name=\"headline\">\n          <Motion v-if=\"headline\" as-child :variants=\"childVariant\">\n            <p class=\"font-semibold text-primary\">{{ headline }}</p>\n          </Motion>\n        </slot>\n        <slot name=\"title\">\n          <Motion as-child :variants=\"childVariant\">\n            <h2 class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:mb-6 lg:text-5xl\">{{ title }}</h2>\n          </Motion>\n        </slot>\n        <slot name=\"description\">\n          <Motion as-child :variants=\"childVariant\">\n            <p class=\"mx-auto max-w-[768px] text-lg text-muted-foreground lg:text-xl\">\n              {{ description }}\n            </p>\n          </Motion>\n        </slot>\n        <div class=\"mt-5 flex w-full flex-col-reverse justify-center gap-3 lg:w-auto lg:flex-row\">\n          <slot />\n        </div>\n      </UiContainer>\n      <section\n        class=\"grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3 lg:gap-y-12 xl:grid-cols-4\"\n      >\n        <Motion v-for=\"n in 6\" :key=\"n\" as-child :variants=\"cardVariant\">\n          <div class=\"flex flex-col items-center\">\n            <UiAvatar\n              class=\"mb-5 h-24 w-24 ring-1 ring-ring/20\"\n              :src=\"`https://i.pravatar.cc/150?img=${n + 10}`\"\n            />\n            <p class=\"text-lg font-semibold\">Jane Doe</p>\n            <p class=\"text-primary\">Marketing Manager</p>\n          </div>\n        </Motion>\n      </section>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const headline = \"We're hiring!\";\n  const title = \"Meet our team\";\n  const description =\n    \"Our philosophy is simple — hire a team of diverse, passionate people and foster a culture that empowers you to do your best work.\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const cardVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, scale: 0.9 },\n    animate: {\n      opacity: 1,\n      scale: 1,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n</script>\n","category":"Team","path":"Team/BlockTeam1.vue","components":["avatar","container"]},{"name":"Team 2","fileName":"BlockTeam2.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"parentVariant\"\n  >\n    <UiContainer class=\"pb-10\">\n      <UiContainer class=\"py-16 text-center lg:py-24\">\n        <slot name=\"headline\">\n          <Motion as-child :variants=\"childVariant\">\n            <p class=\"font-semibold text-primary\">{{ headline }}</p>\n          </Motion>\n        </slot>\n        <slot name=\"title\">\n          <Motion as-child :variants=\"childVariant\">\n            <h2 class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:mb-6 lg:text-5xl\">{{ title }}</h2>\n          </Motion>\n        </slot>\n        <slot name=\"description\">\n          <Motion as-child :variants=\"childVariant\">\n            <p class=\"mx-auto max-w-[768px] text-lg text-muted-foreground lg:text-xl\">\n              {{ description }}\n            </p>\n          </Motion>\n        </slot>\n      </UiContainer>\n      <section\n        class=\"grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3 lg:gap-y-12 xl:grid-cols-4\"\n      >\n        <Motion v-for=\"n in 9\" :key=\"n\" as-child :variants=\"cardVariant\">\n          <div class=\"flex flex-col\">\n            <UiAvatar\n              class=\"mb-5 h-24 w-24 ring-1 ring-ring/20\"\n              :src=\"`https://i.pravatar.cc/150?img=${n}`\"\n            />\n            <p class=\"text-lg font-semibold\">Jane Doe</p>\n            <p class=\"text-primary\">Marketing Manager</p>\n            <ul class=\"mt-2 text-muted-foreground\">\n              <li>Former co-founder of Opendoor.</li>\n              <li>Early staff at Spotify and Clearbit.</li>\n            </ul>\n            <div class=\"mt-2 flex items-center gap-3\">\n              <Icon name=\"logos:twitter\" class=\"h-5 w-5 text-muted-foreground\" />\n              <Icon name=\"logos:linkedin-icon\" class=\"h-5 w-5 text-muted-foreground\" />\n              <Icon name=\"logos:dribbble-icon\" class=\"h-5 w-5 text-muted-foreground\" />\n            </div>\n          </div>\n        </Motion>\n      </section>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const headline = \"We're hiring!\";\n  const title = \"Some of the people you'll be working with\";\n  const description = \"We're a 100% remote team spread all across the world. Join us!\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.08),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const cardVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 30 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n</script>\n","category":"Team","path":"Team/BlockTeam2.vue","components":["avatar","container"]},{"name":"Team 3","fileName":"BlockTeam3.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"parentVariant\"\n  >\n    <UiContainer class=\"pb-10\">\n      <UiContainer class=\"py-16 text-center lg:py-24\">\n        <slot name=\"headline\">\n          <Motion as-child :variants=\"childVariant\">\n            <p v-if=\"headline\" class=\"font-semibold text-primary\">{{ headline }}</p>\n          </Motion>\n        </slot>\n        <slot name=\"title\">\n          <Motion as-child :variants=\"childVariant\">\n            <h2 class=\"mt-2 mb-4 text-4xl font-bold lg:mt-3 lg:mb-6 lg:text-5xl\">{{ title }}</h2>\n          </Motion>\n        </slot>\n        <slot name=\"description\">\n          <Motion as-child :variants=\"childVariant\">\n            <p class=\"mx-auto max-w-[768px] text-lg text-muted-foreground lg:text-xl\">\n              {{ description }}\n            </p>\n          </Motion>\n        </slot>\n        <Motion as-child :variants=\"childVariant\">\n          <div class=\"mt-5 flex w-full flex-col-reverse justify-center gap-3 md:w-auto md:flex-row\">\n            <UiButton variant=\"outline\">About us</UiButton>\n            <UiButton>Open positions</UiButton>\n          </div>\n        </Motion>\n      </UiContainer>\n      <section class=\"grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-4 lg:gap-y-12\">\n        <Motion v-for=\"n in 8\" :key=\"n\" as-child :variants=\"cardVariant\">\n          <div class=\"flex flex-col\">\n            <UiAvatar\n              class=\"mb-5 h-72 w-full rounded-md\"\n              :src=\"`https://i.pravatar.cc/450?img=${n + 10}`\"\n            />\n            <p class=\"text-lg font-semibold\">Jane Doe</p>\n            <p class=\"text-primary\">Marketing Manager</p>\n            <p class=\"mt-2 text-muted-foreground\">\n              Lead engineering teams at Figma, Pitch, and Protocol Labs.\n            </p>\n          </div>\n        </Motion>\n      </section>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const headline = \"We're hiring!\";\n  const title = \"Meet our team\";\n  const description =\n    \"Our philosophy is simple — hire a team of diverse, passionate people and foster a culture that empowers you to do your best work.\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const cardVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 30 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n</script>\n","category":"Team","path":"Team/BlockTeam3.vue","components":["avatar","button","container"]},{"name":"Team 4","fileName":"BlockTeam4.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"parentVariant\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <Motion as-child :variants=\"childVariant\">\n        <div class=\"mb-12 text-center\">\n          <p class=\"mb-3 font-semibold text-primary\">Our Leadership</p>\n          <h2 class=\"mb-4 text-4xl font-bold lg:text-5xl\">Meet the team</h2>\n          <p class=\"mx-auto max-w-2xl text-lg text-muted-foreground\">\n            Passionate experts dedicated to building the future of technology\n          </p>\n        </div>\n      </Motion>\n\n      <div class=\"grid gap-8 md:grid-cols-2 lg:grid-cols-3\">\n        <Motion\n          v-for=\"(member, index) in teamMembers\"\n          :key=\"index\"\n          as-child\n          :variants=\"cardVariant\"\n        >\n          <UiCard class=\"overflow-hidden py-0\">\n            <div class=\"aspect-square overflow-hidden\">\n              <img\n                :src=\"`https://i.pravatar.cc/400?img=${index + 20}`\"\n                :alt=\"member.name\"\n                class=\"h-full w-full object-cover transition-transform duration-300 hover:scale-110\"\n              />\n            </div>\n            <div class=\"p-6 pt-0\">\n              <h3 class=\"mb-1 text-xl font-semibold\">{{ member.name }}</h3>\n              <p class=\"mb-3 text-sm text-primary\">{{ member.role }}</p>\n              <p class=\"mb-4 text-sm text-muted-foreground\">{{ member.bio }}</p>\n              <div class=\"flex items-center gap-3\">\n                <a href=\"#\" class=\"text-muted-foreground transition-colors hover:text-primary\">\n                  <Icon name=\"logos:twitter\" class=\"size-5\" />\n                </a>\n                <a href=\"#\" class=\"text-muted-foreground transition-colors hover:text-primary\">\n                  <Icon name=\"logos:linkedin-icon\" class=\"size-5\" />\n                </a>\n                <a href=\"#\" class=\"text-muted-foreground transition-colors hover:text-primary\">\n                  <Icon name=\"logos:whatsapp-icon\" class=\"size-5\" />\n                </a>\n              </div>\n            </div>\n          </UiCard>\n        </Motion>\n      </div>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const teamMembers = [\n    {\n      name: \"Sarah Johnson\",\n      role: \"Chief Executive Officer\",\n      bio: \"Former VP at Google. Passionate about building products that scale.\",\n    },\n    {\n      name: \"Michael Chen\",\n      role: \"Chief Technology Officer\",\n      bio: \"Ex-lead engineer at Meta. Loves solving complex technical challenges.\",\n    },\n    {\n      name: \"Emily Rodriguez\",\n      role: \"Head of Design\",\n      bio: \"Award-winning designer with 10+ years at leading tech companies.\",\n    },\n    {\n      name: \"David Kim\",\n      role: \"VP of Engineering\",\n      bio: \"Previously built engineering teams at Stripe and Uber.\",\n    },\n    {\n      name: \"Lisa Wang\",\n      role: \"Head of Product\",\n      bio: \"Product leader who launched multiple successful B2B SaaS products.\",\n    },\n    {\n      name: \"James Taylor\",\n      role: \"Head of Marketing\",\n      bio: \"Growth expert who scaled startups to unicorn status.\",\n    },\n  ];\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const cardVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 30 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n</script>\n","category":"Team","path":"Team/BlockTeam4.vue","components":["card","container"]},{"name":"Team 5","fileName":"BlockTeam5.vue","file":"<template>\n  <div class=\"bg-muted/30 py-16 lg:py-24\">\n    <Motion\n      initial=\"initial\"\n      while-in-view=\"animate\"\n      :in-view-options=\"{ once: true }\"\n      as-child\n      :variants=\"parentVariant\"\n    >\n      <UiContainer>\n        <div class=\"mb-16 grid gap-8 lg:grid-cols-2 lg:items-center\">\n          <Motion as-child :variants=\"contentVariant\">\n            <div>\n              <p class=\"mb-3 font-semibold text-primary\">Join Our Team</p>\n              <h2 class=\"mb-4 text-4xl font-bold lg:text-5xl\">\n                Work with talented people from around the world\n              </h2>\n              <p class=\"mb-6 text-lg text-muted-foreground\">\n                We're a diverse team of designers, developers, and dreamers building the future\n                together. Remote-first, mission-driven, and always learning.\n              </p>\n              <UiButton size=\"lg\">\n                View Open Positions\n                <Icon class=\"ml-2\" name=\"lucide:arrow-right\" />\n              </UiButton>\n            </div>\n          </Motion>\n\n          <Motion as-child :variants=\"statsVariant\">\n            <div class=\"grid grid-cols-2 gap-6\">\n              <div class=\"rounded-lg border bg-card p-6\">\n                <p class=\"mb-2 text-3xl font-bold\">50+</p>\n                <p class=\"text-sm text-muted-foreground\">Team Members</p>\n              </div>\n              <div class=\"rounded-lg border bg-card p-6\">\n                <p class=\"mb-2 text-3xl font-bold\">15+</p>\n                <p class=\"text-sm text-muted-foreground\">Countries</p>\n              </div>\n              <div class=\"rounded-lg border bg-card p-6\">\n                <p class=\"mb-2 text-3xl font-bold\">100%</p>\n                <p class=\"text-sm text-muted-foreground\">Remote</p>\n              </div>\n              <div class=\"rounded-lg border bg-card p-6\">\n                <p class=\"mb-2 text-3xl font-bold\">4.9★</p>\n                <p class=\"text-sm text-muted-foreground\">Glassdoor Rating</p>\n              </div>\n            </div>\n          </Motion>\n        </div>\n\n        <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n          <Motion v-for=\"n in 8\" :key=\"n\" as-child :variants=\"memberVariant\">\n            <div class=\"group relative overflow-hidden rounded-lg\">\n              <div class=\"aspect-square overflow-hidden\">\n                <img\n                  :src=\"`https://i.pravatar.cc/300?img=${n + 30}`\"\n                  alt=\"Team member\"\n                  class=\"h-full w-full object-cover transition-transform duration-500 group-hover:scale-110\"\n                />\n              </div>\n              <div\n                class=\"absolute inset-x-0 bottom-0 bg-linear-to-t from-black/80 to-transparent p-4 text-white\"\n              >\n                <p class=\"font-semibold\">Jane Doe</p>\n                <p class=\"text-sm opacity-90\">Senior Developer</p>\n              </div>\n            </div>\n          </Motion>\n        </div>\n      </UiContainer>\n    </Motion>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.1),\n      },\n    },\n  };\n\n  const contentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, x: -50 },\n    animate: {\n      opacity: 1,\n      x: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const statsVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, x: 50 },\n    animate: {\n      opacity: 1,\n      x: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n        delay: 0.2,\n      },\n    },\n  };\n\n  const memberVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, scale: 0.9 },\n    animate: {\n      opacity: 1,\n      scale: 1,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n</script>\n","category":"Team","path":"Team/BlockTeam5.vue","components":["button","container"]},{"name":"Team 6","fileName":"BlockTeam6.vue","file":"<template>\n  <Motion\n    initial=\"initial\"\n    while-in-view=\"animate\"\n    :in-view-options=\"{ once: true }\"\n    as-child\n    :variants=\"parentVariant\"\n  >\n    <UiContainer class=\"py-16 lg:py-24\">\n      <Motion as-child :variants=\"childVariant\">\n        <div class=\"mb-12\">\n          <p class=\"mb-3 text-center font-semibold text-primary\">The Team</p>\n          <h2 class=\"mb-4 text-center text-4xl font-bold lg:text-5xl\">\n            Meet the people making it happen\n          </h2>\n        </div>\n      </Motion>\n\n      <div class=\"space-y-16\">\n        <Motion\n          v-for=\"department in departments\"\n          :key=\"department.name\"\n          as-child\n          :variants=\"sectionVariant\"\n        >\n          <div>\n            <h3 class=\"mb-6 text-2xl font-bold\">{{ department.name }}</h3>\n            <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n              <div\n                v-for=\"member in department.members\"\n                :key=\"member.name\"\n                class=\"group flex flex-col items-center text-center\"\n              >\n                <div class=\"relative mb-4\">\n                  <UiAvatar\n                    class=\"h-32 w-32 ring-2 ring-ring/20 transition-all group-hover:ring-4 group-hover:ring-primary/50\"\n                    :src=\"member.avatar\"\n                  />\n                  <div\n                    class=\"absolute -right-2 -bottom-2 rounded-full bg-primary px-3 py-1 text-xs font-semibold text-primary-foreground\"\n                  >\n                    {{ member.badge }}\n                  </div>\n                </div>\n                <p class=\"mb-1 font-semibold\">{{ member.name }}</p>\n                <p class=\"mb-2 text-sm text-primary\">{{ member.role }}</p>\n                <p class=\"text-xs text-muted-foreground\">{{ member.location }}</p>\n              </div>\n            </div>\n          </div>\n        </Motion>\n      </div>\n    </UiContainer>\n  </Motion>\n</template>\n\n<script lang=\"ts\" setup>\n  import { stagger } from \"motion-v\";\n  import type { MotionProps } from \"motion-v\";\n\n  const departments = [\n    {\n      name: \"Leadership\",\n      members: [\n        {\n          name: \"Sarah Johnson\",\n          role: \"CEO\",\n          location: \"San Francisco, US\",\n          badge: \"Founder\",\n          avatar: \"https://i.pravatar.cc/150?img=1\",\n        },\n        {\n          name: \"Michael Chen\",\n          role: \"CTO\",\n          location: \"Singapore, SG\",\n          badge: \"Founder\",\n          avatar: \"https://i.pravatar.cc/150?img=2\",\n        },\n        {\n          name: \"Emily Davis\",\n          role: \"COO\",\n          location: \"London, UK\",\n          badge: \"New\",\n          avatar: \"https://i.pravatar.cc/150?img=3\",\n        },\n        {\n          name: \"David Kim\",\n          role: \"CFO\",\n          location: \"Seoul, KR\",\n          badge: \"New\",\n          avatar: \"https://i.pravatar.cc/150?img=4\",\n        },\n      ],\n    },\n    {\n      name: \"Engineering\",\n      members: [\n        {\n          name: \"Alex Martinez\",\n          role: \"Lead Engineer\",\n          location: \"Barcelona, ES\",\n          badge: \"Team Lead\",\n          avatar: \"https://i.pravatar.cc/150?img=5\",\n        },\n        {\n          name: \"Lisa Wang\",\n          role: \"Senior Developer\",\n          location: \"Toronto, CA\",\n          badge: \"Core\",\n          avatar: \"https://i.pravatar.cc/150?img=6\",\n        },\n        {\n          name: \"James Brown\",\n          role: \"DevOps Engineer\",\n          location: \"Berlin, DE\",\n          badge: \"Core\",\n          avatar: \"https://i.pravatar.cc/150?img=7\",\n        },\n        {\n          name: \"Maria Garcia\",\n          role: \"QA Engineer\",\n          location: \"Mexico City, MX\",\n          badge: \"New\",\n          avatar: \"https://i.pravatar.cc/150?img=8\",\n        },\n      ],\n    },\n  ];\n\n  const parentVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0 },\n    animate: {\n      opacity: 1,\n      transition: {\n        when: \"beforeChildren\",\n        delayChildren: stagger(0.15),\n      },\n    },\n  };\n\n  const childVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 20 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n\n  const sectionVariant: MotionProps[\"variants\"] = {\n    initial: { opacity: 0, y: 30 },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        type: \"spring\",\n        stiffness: 200,\n        damping: 20,\n      },\n    },\n  };\n</script>\n","category":"Team","path":"Team/BlockTeam6.vue","components":["avatar","container"]},{"name":"Testimony 1","fileName":"BlockTestimony1.vue","file":"<template>\n  <UiContainer class=\"py-10 lg:py-16\">\n    <swiper-container grab-cursor loop :autoplay=\"{ delay: 7000 }\" :speed=\"800\">\n      <template v-for=\"(item, index) in reviews\" :key=\"index\">\n        <swiper-slide>\n          <div class=\"py-10 text-center lg:py-16\">\n            <h3 class=\"mx-auto mb-8 max-w-[1024px] text-center text-3xl font-semibold lg:text-4xl\">\n              {{ item.review }}\n            </h3>\n            <div class=\"flex flex-col items-center justify-center\">\n              <UiAvatar\n                class=\"size-16 ring-1\"\n                src=\"https://api.dicebear.com/7.x/lorelei/svg?flip=false\"\n              />\n              <p class=\"mt-4 text-lg font-semibold\">{{ item.user.name }}</p>\n              <p class=\"mt-1 text-muted-foreground\">\n                {{ item.user.position }}, {{ item.user.companyName }}\n              </p>\n              <div class=\"mt-2\">\n                <template v-for=\"s in item.rating\" :key=\"s\">\n                  <Icon\n                    name=\"material-symbols:kid-star\"\n                    class=\"inline h-5 w-5 fill-yellow-400 text-yellow-400\"\n                  />\n                </template>\n              </div>\n            </div>\n          </div>\n        </swiper-slide>\n      </template>\n    </swiper-container>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const reviews = [\n    {\n      review: \"This library has made implementing our UI so much easier. It's intuitive and fast!\",\n      rating: 5,\n      user: {\n        name: \"James P.\",\n        position: \"Frontend Developer\",\n        companyName: \"TechLabs\",\n      },\n    },\n    {\n      review:\n        \"I was able to reduce development time by 40% thanks to the prebuilt components. Highly recommend!\",\n      rating: 4,\n      user: {\n        name: \"Sarah T.\",\n        position: \"UI/UX Designer\",\n        companyName: \"Design Studio\",\n      },\n    },\n    {\n      review:\n        \"Great library, but I think the documentation could use more examples for advanced use cases.\",\n      rating: 3,\n      user: {\n        name: \"Tom R.\",\n        position: \"Senior Software Engineer\",\n        companyName: \"CodeWorks\",\n      },\n    },\n    {\n      review:\n        \"A perfect tool for quick prototyping. The flexibility and performance are fantastic!\",\n      rating: 5,\n      user: {\n        name: \"Emily K.\",\n        position: \"Product Manager\",\n        companyName: \"Creative Solutions\",\n      },\n    },\n    {\n      review:\n        \"Good library overall. It could benefit from more integrations with other popular frameworks.\",\n      rating: 4,\n      user: {\n        name: \"Michael B.\",\n        position: \"Full Stack Developer\",\n        companyName: \"Innovative Tech\",\n      },\n    },\n  ];\n</script>\n","category":"Testimony","path":"Testimony/BlockTestimony1.vue","components":["avatar","container"]},{"name":"Testimony 2","fileName":"BlockTestimony2.vue","file":"<template>\n  <UiContainer class=\"py-10 lg:py-16\">\n    <div class=\"py-10 text-center lg:py-16\">\n      <h3 class=\"mx-auto mb-8 max-w-[1024px] text-center text-3xl font-semibold lg:text-4xl\">\n        Love the simplicity of the service and the prompt customer support. We can't imagine working\n        without it.\n      </h3>\n      <div class=\"flex flex-col items-center justify-center\">\n        <UiAvatar\n          class=\"h-16 w-16 ring-1\"\n          src=\"https://api.dicebear.com/7.x/lorelei/svg?flip=false\"\n        />\n        <p class=\"mt-4 text-lg font-semibold\">Jane Doe</p>\n        <p class=\"mt-1 text-muted-foreground\">Head of Design, Layers</p>\n        <div class=\"mt-2\">\n          <template v-for=\"s in 5\" :key=\"s\">\n            <Icon\n              name=\"material-symbols:kid-star\"\n              class=\"inline h-5 w-5 fill-yellow-400 text-yellow-400\"\n            />\n          </template>\n        </div>\n      </div>\n\n      <div class=\"flex items-center justify-center gap-3\">\n        <template v-for=\"c in companies\" :key=\"c.name\">\n          <Icon :name=\"c.icon\" class=\"mt-10 h-10 w-10\" />\n          <span class=\"sr-only\">{{ c.name }}</span>\n        </template>\n      </div>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const companies = [\n    { name: \"Company One\", icon: \"logos:amazon-chime\" },\n    { name: \"Company Two\", icon: \"logos:amp-icon\" },\n    { name: \"Company Three\", icon: \"logos:amplitude-icon\" },\n    { name: \"Company One\", icon: \"logos:ai\" },\n  ];\n</script>\n","category":"Testimony","path":"Testimony/BlockTestimony2.vue","components":["avatar","container"]},{"name":"Testimony 3","fileName":"BlockTestimony3.vue","file":"<template>\n  <UiContainer class=\"py-10 lg:py-16\">\n    <div class=\"py-10 lg:py-16\">\n      <div class=\"flex flex-col gap-y-6 lg:flex-row lg:gap-x-24\">\n        <img\n          src=\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Testimony user\"\n          class=\"h-[200px] w-[200px] shrink-0 rounded-lg object-cover shadow lg:h-[330px] lg:w-[330px]\"\n        />\n        <div>\n          <div>\n            <template v-for=\"s in 5\" :key=\"s\">\n              <Icon name=\"material-symbols:kid-star\" class=\"inline h-5 w-5 text-yellow-400\" />\n            </template>\n          </div>\n          <h3 class=\"mt-6 mb-8 max-w-[760px] text-2xl font-semibold lg:text-4xl\">\n            Love the simplicity of the service and the prompt customer support. We can't imagine\n            working without it.\n          </h3>\n          <p class=\"mt-4 text-lg font-semibold\">Jane Doe</p>\n          <p class=\"mt-1 text-muted-foreground\">Head of Design, Layers</p>\n        </div>\n      </div>\n    </div>\n  </UiContainer>\n</template>\n","category":"Testimony","path":"Testimony/BlockTestimony3.vue","components":["container"]},{"name":"Testimony 4","fileName":"BlockTestimony4.vue","file":"<template>\n  <UiContainer\n    class=\"relative flex flex-col items-center justify-center gap-10 gap-y-12 py-10 lg:h-[720px] lg:flex-row\"\n  >\n    <div class=\"absolute right-[50%] bottom-5 hidden lg:block\">\n      <div class=\"h-[300px] w-[300px]\">\n        <svg viewBox=\"0 0 360 342\" class=\"fill-primary\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M342.654 174.227C343.704 172.945 345.594 172.756 346.876 173.806C348.158 174.856 348.346 176.746 347.296 178.028L342.654 174.227ZM159.589 141.42L159.868 138.433L159.869 138.434L159.589 141.42ZM184.236 248.724L182.479 246.293L182.479 246.292L184.236 248.724ZM34.9177 108.275C35.017 106.621 36.4382 105.361 38.0921 105.461C39.746 105.56 41.0062 106.981 40.9069 108.635L34.9177 108.275ZM350.512 200.044C350.567 201.7 349.269 203.087 347.613 203.142C345.957 203.197 344.57 201.899 344.515 200.243L350.512 200.044ZM346.66 174.344L346.944 171.357C348.447 171.5 349.609 172.737 349.659 174.245L346.66 174.344ZM320.295 174.307C318.67 173.981 317.619 172.399 317.945 170.775C318.272 169.15 319.854 168.098 321.478 168.425L320.295 174.307ZM344.975 176.127C347.296 178.028 347.295 178.029 347.294 178.03C347.294 178.031 347.292 178.033 347.29 178.035C347.287 178.039 347.283 178.044 347.278 178.051C347.267 178.064 347.251 178.083 347.231 178.107C347.19 178.156 347.131 178.227 347.054 178.32C346.899 178.505 346.672 178.776 346.373 179.125C345.776 179.824 344.897 180.839 343.754 182.117C341.468 184.673 338.125 188.283 333.881 192.526C325.399 201.004 313.281 212.038 298.76 222.223C269.869 242.488 230.675 259.93 191.571 245.779L193.613 240.138C229.851 253.251 266.849 237.278 295.314 217.311C309.471 207.381 321.322 196.595 329.639 188.282C333.795 184.129 337.06 180.601 339.282 178.117C340.392 176.876 341.241 175.896 341.81 175.23C342.094 174.897 342.308 174.642 342.45 174.473C342.52 174.388 342.573 174.325 342.607 174.284C342.624 174.263 342.637 174.248 342.644 174.238C342.648 174.234 342.651 174.23 342.653 174.228C342.653 174.227 342.654 174.227 342.654 174.226C342.654 174.226 342.654 174.227 344.975 176.127ZM191.571 245.779C152.934 231.798 135.393 204.746 132.163 181.185C130.558 169.476 132.484 158.514 137.294 150.563C142.156 142.526 150.052 137.516 159.868 138.433L159.31 144.407C152.19 143.742 146.326 147.224 142.428 153.668C138.478 160.198 136.646 169.707 138.107 180.37C141.011 201.554 156.908 226.855 193.613 240.138L191.571 245.779ZM159.869 138.434C169.254 139.314 178.636 144.72 186.578 152.506C194.556 160.328 201.323 170.778 205.438 182.242C213.68 205.207 211.378 232.813 185.993 251.156L182.479 246.292C205.099 229.948 207.407 205.49 199.79 184.269C195.975 173.64 189.696 163.966 182.377 156.791C175.023 149.58 166.856 145.115 159.309 144.407L159.869 138.434ZM185.993 251.155C173.06 260.503 156.569 261.895 139.593 257.576C122.621 253.258 104.888 243.182 88.9736 229.122C57.1795 201.031 32.0248 156.455 34.9177 108.275L40.9069 108.635C38.1513 154.528 62.1638 197.429 92.9463 224.626C108.321 238.209 125.227 247.73 141.073 251.762C156.915 255.792 171.417 254.288 182.479 246.293L185.993 251.155ZM344.515 200.243L343.662 174.443L349.659 174.245L350.512 200.044L344.515 200.243ZM346.66 174.344C346.377 177.33 346.377 177.33 346.376 177.33C346.376 177.33 346.376 177.33 346.376 177.33C346.375 177.33 346.374 177.33 346.373 177.33C346.37 177.33 346.366 177.329 346.361 177.329C346.351 177.328 346.336 177.327 346.316 177.325C346.276 177.321 346.217 177.315 346.139 177.308C345.985 177.293 345.758 177.271 345.468 177.243C344.888 177.187 344.054 177.106 343.037 177.005C341.005 176.804 338.243 176.524 335.322 176.214C329.566 175.602 322.953 174.842 320.295 174.307L321.478 168.425C323.797 168.892 330.071 169.621 335.957 170.248C338.859 170.556 341.606 170.834 343.629 171.034C344.64 171.134 345.47 171.215 346.046 171.271C346.334 171.299 346.559 171.321 346.712 171.335C346.788 171.343 346.847 171.348 346.886 171.352C346.905 171.354 346.92 171.355 346.93 171.356C346.935 171.356 346.938 171.357 346.941 171.357C346.942 171.357 346.943 171.357 346.943 171.357C346.944 171.357 346.944 171.357 346.944 171.357C346.944 171.357 346.944 171.357 346.66 174.344Z\"\n          />\n        </svg>\n      </div>\n    </div>\n    <div class=\"flex h-full items-center justify-center text-center lg:text-left\">\n      <div>\n        <h3 class=\"text-2xl font-semibold lg:text-4xl\">\n          We've been using {{ COMPANY_NAME }} to kick start every new project and can't imagine\n          working without it.\n        </h3>\n\n        <p class=\"mt-5 text-lg font-semibold\">Jane Doe</p>\n        <p class=\"mt-1 text-muted-foreground\">Head of Design, Layers</p>\n      </div>\n    </div>\n\n    <swiper-container\n      :autoplay=\"{ delay: 4000 }\"\n      :speed=\"800\"\n      loop\n      grab-cursor\n      :slides-per-view=\"1\"\n      :breakpoints=\"{\n        640: { slidesPerView: 1.1, spaceBetween: 20, autoplay: { delay: 7000 } },\n      }\"\n      class=\"h-[450px] w-full bg-[url('https://images.unsplash.com/photo-1620121692029-d088224ddc74?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-no-repeat p-2 md:w-[700px] lg:h-full lg:w-1/2 lg:p-8\"\n    >\n      <swiper-slide v-for=\"(item, index) in reviews\" :key=\"index\" class=\"flex items-end\">\n        <div\n          class=\"border border-white/20 bg-white/10 p-4 text-white backdrop-blur-lg lg:px-5 lg:py-6\"\n        >\n          <p class=\"mb-5 text-xl font-semibold lg:mb-8 lg:text-3xl\">\"{{ item.review }}\"</p>\n          <div class=\"flex items-center justify-between\">\n            <p class=\"text-2xl font-semibold lg:text-3xl\">{{ item.user.name }}</p>\n            <div>\n              <template v-for=\"s in item.rating\" :key=\"s\">\n                <Icon name=\"material-symbols:kid-star\" class=\"inline h-5 w-5 text-white\" />\n              </template>\n            </div>\n          </div>\n          <div class=\"mt-2 lg:mt-3\">\n            <p class=\"text-lg\">{{ item.user.position }}</p>\n            <p>{{ item.user.companyName }}</p>\n          </div>\n        </div>\n      </swiper-slide>\n    </swiper-container>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const reviews = [\n    {\n      review: \"This library has made implementing our UI so much easier. It's intuitive and fast!\",\n      rating: 5,\n      user: {\n        name: \"James P.\",\n        position: \"Frontend Developer\",\n        companyName: \"TechLabs\",\n      },\n    },\n    {\n      review:\n        \"I was able to reduce development time by 40% thanks to the prebuilt components. Highly recommend!\",\n      rating: 4,\n      user: {\n        name: \"Sarah T.\",\n        position: \"UI/UX Designer\",\n        companyName: \"Design Studio\",\n      },\n    },\n    {\n      review:\n        \"Great library, but I think the documentation could use more examples for advanced use cases.\",\n      rating: 3,\n      user: {\n        name: \"Tom R.\",\n        position: \"Senior Software Engineer\",\n        companyName: \"CodeWorks\",\n      },\n    },\n    {\n      review:\n        \"A perfect tool for quick prototyping. The flexibility and performance are fantastic!\",\n      rating: 5,\n      user: {\n        name: \"Emily K.\",\n        position: \"Product Manager\",\n        companyName: \"Creative Solutions\",\n      },\n    },\n    {\n      review:\n        \"Good library overall. It could benefit from more integrations with other popular frameworks.\",\n      rating: 4,\n      user: {\n        name: \"Michael B.\",\n        position: \"Full Stack Developer\",\n        companyName: \"Innovative Tech\",\n      },\n    },\n  ];\n</script>\n","category":"Testimony","path":"Testimony/BlockTestimony4.vue","components":["container"]},{"name":"Testimony 5","fileName":"BlockTestimony5.vue","file":"<template>\n  <UiContainer class=\"py-10 lg:py-20\">\n    <div class=\"mx-auto max-w-3xl text-center\">\n      <h2 class=\"mb-4 text-3xl font-semibold lg:text-4xl\">What our customers say</h2>\n      <p class=\"text-lg text-muted-foreground\">\n        Join thousands of satisfied customers who trust our platform.\n      </p>\n    </div>\n\n    <div class=\"mt-12 grid grid-cols-1 gap-8 lg:mt-16 lg:grid-cols-3\">\n      <template v-for=\"(item, i) in testimonials\" :key=\"i\">\n        <div class=\"rounded-lg border bg-card p-6\">\n          <div class=\"mb-4 flex items-center gap-1\">\n            <template v-for=\"s in item.rating\" :key=\"s\">\n              <Icon name=\"lucide:star\" class=\"size-4 fill-yellow-400 text-yellow-400\" />\n            </template>\n          </div>\n          <p class=\"mb-6 text-lg\">{{ item.quote }}</p>\n          <div class=\"flex items-center gap-3\">\n            <UiAvatar :src=\"item.avatar\" class=\"size-12\" />\n            <div>\n              <p class=\"font-semibold\">{{ item.name }}</p>\n              <p class=\"text-sm text-muted-foreground\">{{ item.title }}</p>\n            </div>\n          </div>\n        </div>\n      </template>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const testimonials = [\n    {\n      quote:\n        \"The best decision we made was switching to this platform. Our productivity has doubled.\",\n      rating: 5,\n      name: \"Alex Johnson\",\n      title: \"CEO, TechStart\",\n      avatar: \"https://api.dicebear.com/7.x/lorelei/svg?seed=alex\",\n    },\n    {\n      quote: \"Amazing support team and great features. Couldn't ask for more!\",\n      rating: 5,\n      name: \"Maria Garcia\",\n      title: \"Product Manager, InnovateCo\",\n      avatar: \"https://api.dicebear.com/7.x/lorelei/svg?seed=maria\",\n    },\n    {\n      quote: \"Simple, powerful, and reliable. Exactly what we needed for our team.\",\n      rating: 5,\n      name: \"David Chen\",\n      title: \"CTO, DevSolutions\",\n      avatar: \"https://api.dicebear.com/7.x/lorelei/svg?seed=david\",\n    },\n  ];\n</script>\n","category":"Testimony","path":"Testimony/BlockTestimony5.vue","components":["avatar","container"]},{"name":"Testimony 6","fileName":"BlockTestimony6.vue","file":"<template>\n  <div class=\"bg-muted/30 py-10 lg:py-20\">\n    <UiContainer>\n      <div class=\"grid grid-cols-1 gap-10 lg:grid-cols-2 lg:gap-16\">\n        <div class=\"flex flex-col justify-center\">\n          <h2 class=\"mb-4 text-3xl font-semibold lg:text-4xl\">Loved by teams worldwide</h2>\n          <p class=\"mb-8 text-lg text-muted-foreground\">\n            See what our customers have to say about their experience with our platform.\n          </p>\n          <div class=\"flex items-center gap-6\">\n            <div>\n              <p class=\"text-3xl font-bold\">4.9/5</p>\n              <div class=\"mt-2 flex gap-1\">\n                <template v-for=\"s in 5\" :key=\"s\">\n                  <Icon name=\"lucide:star\" class=\"size-4 fill-yellow-400 text-yellow-400\" />\n                </template>\n              </div>\n            </div>\n            <div class=\"h-12 w-px bg-border\" />\n            <div>\n              <p class=\"text-3xl font-bold\">2,500+</p>\n              <p class=\"text-sm text-muted-foreground\">Happy customers</p>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"space-y-6\">\n          <template v-for=\"(item, i) in testimonials\" :key=\"i\">\n            <div class=\"rounded-lg border bg-card p-6\">\n              <div class=\"mb-3 flex items-center justify-between\">\n                <div class=\"flex items-center gap-3\">\n                  <UiAvatar :src=\"item.avatar\" class=\"size-10\" />\n                  <div>\n                    <p class=\"font-semibold\">{{ item.name }}</p>\n                    <p class=\"text-xs text-muted-foreground\">{{ item.title }}</p>\n                  </div>\n                </div>\n                <div class=\"flex gap-0.5\">\n                  <template v-for=\"s in item.rating\" :key=\"s\">\n                    <Icon name=\"lucide:star\" class=\"size-3 fill-yellow-400 text-yellow-400\" />\n                  </template>\n                </div>\n              </div>\n              <p class=\"text-sm\">{{ item.quote }}</p>\n            </div>\n          </template>\n        </div>\n      </div>\n    </UiContainer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  const testimonials = [\n    {\n      quote:\n        \"This tool has transformed how our team works. We're more efficient and collaborative than ever before.\",\n      rating: 5,\n      name: \"Sarah Williams\",\n      title: \"Design Lead, Creative Inc\",\n      avatar: \"https://api.dicebear.com/7.x/lorelei/svg?seed=sarah\",\n    },\n    {\n      quote: \"Great value for money. The features are comprehensive and easy to use.\",\n      rating: 5,\n      name: \"Michael Brown\",\n      title: \"Founder, StartupXYZ\",\n      avatar: \"https://api.dicebear.com/7.x/lorelei/svg?seed=michael\",\n    },\n  ];\n</script>\n","category":"Testimony","path":"Testimony/BlockTestimony6.vue","components":["avatar","container"]},{"name":"Testimony 7","fileName":"BlockTestimony7.vue","file":"<template>\n  <UiContainer class=\"py-10 lg:py-20\">\n    <div class=\"rounded-lg border bg-card p-8 lg:p-12\">\n      <div class=\"mb-10 text-center lg:mb-12\">\n        <h2 class=\"mb-3 text-3xl font-semibold lg:text-4xl\">Trusted by industry leaders</h2>\n        <p class=\"text-lg text-muted-foreground\">Here's what our customers have to say about us</p>\n      </div>\n\n      <div class=\"grid grid-cols-1 gap-8 md:grid-cols-2\">\n        <template v-for=\"(item, i) in testimonials\" :key=\"i\">\n          <div class=\"space-y-4\">\n            <div class=\"flex gap-1\">\n              <template v-for=\"s in item.rating\" :key=\"s\">\n                <Icon name=\"lucide:star\" class=\"size-5 fill-yellow-400 text-yellow-400\" />\n              </template>\n            </div>\n            <p class=\"text-lg font-medium\">{{ item.quote }}</p>\n            <div class=\"flex items-center gap-4 pt-4\">\n              <UiAvatar :src=\"item.avatar\" class=\"size-14\" />\n              <div>\n                <p class=\"font-semibold\">{{ item.name }}</p>\n                <p class=\"text-sm text-muted-foreground\">{{ item.title }}</p>\n                <p class=\"text-sm text-muted-foreground\">{{ item.company }}</p>\n              </div>\n            </div>\n          </div>\n        </template>\n      </div>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const testimonials = [\n    {\n      quote:\n        \"Outstanding product with exceptional customer service. Our team productivity has increased significantly since we started using this platform.\",\n      rating: 5,\n      name: \"Emily Rodriguez\",\n      title: \"VP of Engineering\",\n      company: \"TechCorp Global\",\n      avatar: \"https://api.dicebear.com/7.x/lorelei/svg?seed=emily\",\n    },\n    {\n      quote:\n        \"The ROI we've seen has been incredible. This is hands down the best investment we've made in our tech stack this year.\",\n      rating: 5,\n      name: \"James Mitchell\",\n      title: \"Chief Technology Officer\",\n      company: \"Innovation Labs\",\n      avatar: \"https://api.dicebear.com/7.x/lorelei/svg?seed=james\",\n    },\n    {\n      quote:\n        \"Intuitive interface and powerful features. Our team was up and running in no time. Highly recommend to any growing company.\",\n      rating: 5,\n      name: \"Lisa Anderson\",\n      title: \"Product Director\",\n      company: \"Digital Dynamics\",\n      avatar: \"https://api.dicebear.com/7.x/lorelei/svg?seed=lisa\",\n    },\n    {\n      quote:\n        \"Game changer for our workflow. The automation features alone have saved us countless hours every week.\",\n      rating: 5,\n      name: \"Robert Taylor\",\n      title: \"Operations Manager\",\n      company: \"Scale Solutions\",\n      avatar: \"https://api.dicebear.com/7.x/lorelei/svg?seed=robert\",\n    },\n  ];\n</script>\n","category":"Testimony","path":"Testimony/BlockTestimony7.vue","components":["avatar","container"]},{"name":"Testimony 8","fileName":"BlockTestimony8.vue","file":"<template>\n  <UiContainer class=\"py-10 lg:py-20\">\n    <div class=\"text-center\">\n      <h2 class=\"mb-4 text-3xl font-semibold lg:text-4xl\">Don't just take our word for it</h2>\n      <p class=\"mx-auto max-w-2xl text-lg text-muted-foreground\">\n        Hear from some of our amazing customers who are building faster.\n      </p>\n    </div>\n\n    <div class=\"mt-12 columns-1 gap-8 space-y-8 md:columns-2 lg:mt-16 lg:columns-3\">\n      <template v-for=\"(item, i) in testimonials\" :key=\"i\">\n        <div class=\"break-inside-avoid rounded-lg border bg-card p-6\">\n          <div class=\"mb-4 flex items-center justify-between\">\n            <div class=\"flex gap-1\">\n              <template v-for=\"s in item.rating\" :key=\"s\">\n                <Icon name=\"lucide:star\" class=\"size-4 fill-yellow-400 text-yellow-400\" />\n              </template>\n            </div>\n          </div>\n          <p class=\"mb-4 text-sm\">{{ item.quote }}</p>\n          <div class=\"flex items-center gap-3 border-t pt-4\">\n            <UiAvatar :src=\"item.avatar\" class=\"size-10\" />\n            <div>\n              <p class=\"text-sm font-semibold\">{{ item.name }}</p>\n              <p class=\"text-xs text-muted-foreground\">{{ item.title }}</p>\n            </div>\n          </div>\n        </div>\n      </template>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  const testimonials = [\n    {\n      quote: \"Best tool we've ever used. The efficiency gains are remarkable!\",\n      rating: 5,\n      name: \"Sophie Turner\",\n      title: \"Marketing Director\",\n      avatar: \"https://api.dicebear.com/7.x/lorelei/svg?seed=sophie\",\n    },\n    {\n      quote:\n        \"Incredible platform that just works. Our team loves it and we've seen immediate results.\",\n      rating: 5,\n      name: \"Daniel Kim\",\n      title: \"Startup Founder\",\n      avatar: \"https://api.dicebear.com/7.x/lorelei/svg?seed=daniel\",\n    },\n    {\n      quote: \"The customer support is phenomenal. They go above and beyond every time.\",\n      rating: 5,\n      name: \"Rachel Green\",\n      title: \"Customer Success Lead\",\n      avatar: \"https://api.dicebear.com/7.x/lorelei/svg?seed=rachel\",\n    },\n    {\n      quote: \"Simple yet powerful. Exactly what we needed for our growing team.\",\n      rating: 5,\n      name: \"Chris Evans\",\n      title: \"Engineering Manager\",\n      avatar: \"https://api.dicebear.com/7.x/lorelei/svg?seed=chris\",\n    },\n    {\n      quote: \"Game-changing features that have transformed our daily operations.\",\n      rating: 5,\n      name: \"Amanda Walsh\",\n      title: \"Operations Lead\",\n      avatar: \"https://api.dicebear.com/7.x/lorelei/svg?seed=amanda\",\n    },\n    {\n      quote: \"Worth every penny. The ROI has been exceptional.\",\n      rating: 5,\n      name: \"Kevin Hart\",\n      title: \"Business Analyst\",\n      avatar: \"https://api.dicebear.com/7.x/lorelei/svg?seed=kevin\",\n    },\n  ];\n</script>\n","category":"Testimony","path":"Testimony/BlockTestimony8.vue","components":["avatar","container"]},{"name":"Tiptap 1","fileName":"BlockTiptap1.vue","file":"<template>\n  <UiContainer class=\"py-12\">\n    <div class=\"mx-auto max-w-3xl space-y-4\">\n      <div class=\"space-y-2 text-center\">\n        <h2 class=\"text-2xl font-bold tracking-tight\">Rich Text Editor</h2>\n        <p class=\"text-sm text-muted-foreground\">\n          A simple Tiptap editor with grouped icon buttons and tooltips\n        </p>\n      </div>\n\n      <div v-if=\"editor\" class=\"rounded-lg border bg-card\">\n        <!-- Toolbar -->\n        <div class=\"flex flex-wrap items-center gap-2 border-b bg-muted/30 p-2\">\n          <!-- Text Formatting Group -->\n          <div class=\"flex items-center gap-0.5\">\n            <UiTooltip>\n              <UiTooltipTrigger as-child>\n                <UiToggle\n                  size=\"sm\"\n                  :pressed=\"editor.isActive('bold')\"\n                  @click=\"editor.chain().focus().toggleBold().run()\"\n                >\n                  <Icon name=\"lucide:bold\" class=\"size-4\" />\n                </UiToggle>\n              </UiTooltipTrigger>\n              <UiTooltipContent>Bold</UiTooltipContent>\n            </UiTooltip>\n            <UiTooltip>\n              <UiTooltipTrigger as-child>\n                <UiToggle\n                  size=\"sm\"\n                  :pressed=\"editor.isActive('italic')\"\n                  @click=\"editor.chain().focus().toggleItalic().run()\"\n                >\n                  <Icon name=\"lucide:italic\" class=\"size-4\" />\n                </UiToggle>\n              </UiTooltipTrigger>\n              <UiTooltipContent>Italic</UiTooltipContent>\n            </UiTooltip>\n            <UiTooltip>\n              <UiTooltipTrigger as-child>\n                <UiToggle\n                  size=\"sm\"\n                  :pressed=\"editor.isActive('strike')\"\n                  @click=\"editor.chain().focus().toggleStrike().run()\"\n                >\n                  <Icon name=\"lucide:strikethrough\" class=\"size-4\" />\n                </UiToggle>\n              </UiTooltipTrigger>\n              <UiTooltipContent>Strike</UiTooltipContent>\n            </UiTooltip>\n          </div>\n\n          <UiSeparator orientation=\"vertical\" class=\"h-6\" />\n\n          <!-- Heading Group -->\n          <div class=\"flex items-center gap-0.5\">\n            <UiTooltip>\n              <UiTooltipTrigger as-child>\n                <UiToggle\n                  size=\"sm\"\n                  :pressed=\"editor.isActive('heading', { level: 1 })\"\n                  @click=\"editor.chain().focus().toggleHeading({ level: 1 }).run()\"\n                >\n                  <Icon name=\"lucide:heading-1\" class=\"size-4\" />\n                </UiToggle>\n              </UiTooltipTrigger>\n              <UiTooltipContent>Heading 1</UiTooltipContent>\n            </UiTooltip>\n            <UiTooltip>\n              <UiTooltipTrigger as-child>\n                <UiToggle\n                  size=\"sm\"\n                  :pressed=\"editor.isActive('heading', { level: 2 })\"\n                  @click=\"editor.chain().focus().toggleHeading({ level: 2 }).run()\"\n                >\n                  <Icon name=\"lucide:heading-2\" class=\"size-4\" />\n                </UiToggle>\n              </UiTooltipTrigger>\n              <UiTooltipContent>Heading 2</UiTooltipContent>\n            </UiTooltip>\n            <UiTooltip>\n              <UiTooltipTrigger as-child>\n                <UiToggle\n                  size=\"sm\"\n                  :pressed=\"editor.isActive('heading', { level: 3 })\"\n                  @click=\"editor.chain().focus().toggleHeading({ level: 3 }).run()\"\n                >\n                  <Icon name=\"lucide:heading-3\" class=\"size-4\" />\n                </UiToggle>\n              </UiTooltipTrigger>\n              <UiTooltipContent>Heading 3</UiTooltipContent>\n            </UiTooltip>\n          </div>\n\n          <UiSeparator orientation=\"vertical\" class=\"h-6\" />\n\n          <!-- List Group -->\n          <div class=\"flex items-center gap-0.5\">\n            <UiTooltip>\n              <UiTooltipTrigger as-child>\n                <UiToggle\n                  size=\"sm\"\n                  :pressed=\"editor.isActive('bulletList')\"\n                  @click=\"editor.chain().focus().toggleBulletList().run()\"\n                >\n                  <Icon name=\"lucide:list\" class=\"size-4\" />\n                </UiToggle>\n              </UiTooltipTrigger>\n              <UiTooltipContent>Bullet List</UiTooltipContent>\n            </UiTooltip>\n            <UiTooltip>\n              <UiTooltipTrigger as-child>\n                <UiToggle\n                  size=\"sm\"\n                  :pressed=\"editor.isActive('orderedList')\"\n                  @click=\"editor.chain().focus().toggleOrderedList().run()\"\n                >\n                  <Icon name=\"lucide:list-ordered\" class=\"size-4\" />\n                </UiToggle>\n              </UiTooltipTrigger>\n              <UiTooltipContent>Ordered List</UiTooltipContent>\n            </UiTooltip>\n          </div>\n\n          <UiSeparator orientation=\"vertical\" class=\"h-6\" />\n\n          <!-- Block Group -->\n          <div class=\"flex items-center gap-0.5\">\n            <UiTooltip>\n              <UiTooltipTrigger as-child>\n                <UiToggle\n                  size=\"sm\"\n                  :pressed=\"editor.isActive('codeBlock')\"\n                  @click=\"editor.chain().focus().toggleCodeBlock().run()\"\n                >\n                  <Icon name=\"lucide:code\" class=\"size-4\" />\n                </UiToggle>\n              </UiTooltipTrigger>\n              <UiTooltipContent>Code Block</UiTooltipContent>\n            </UiTooltip>\n            <UiTooltip>\n              <UiTooltipTrigger as-child>\n                <UiToggle\n                  size=\"sm\"\n                  :pressed=\"editor.isActive('blockquote')\"\n                  @click=\"editor.chain().focus().toggleBlockquote().run()\"\n                >\n                  <Icon name=\"lucide:quote\" class=\"size-4\" />\n                </UiToggle>\n              </UiTooltipTrigger>\n              <UiTooltipContent>Blockquote</UiTooltipContent>\n            </UiTooltip>\n          </div>\n\n          <UiSeparator orientation=\"vertical\" class=\"h-6\" />\n\n          <!-- Actions Group -->\n          <div class=\"flex items-center gap-0.5\">\n            <UiTooltip>\n              <UiTooltipTrigger as-child>\n                <UiButton\n                  size=\"icon-sm\"\n                  variant=\"ghost\"\n                  :disabled=\"!editor.can().undo()\"\n                  @click=\"editor.chain().focus().undo().run()\"\n                >\n                  <Icon name=\"lucide:undo\" class=\"size-4\" />\n                </UiButton>\n              </UiTooltipTrigger>\n              <UiTooltipContent>Undo</UiTooltipContent>\n            </UiTooltip>\n            <UiTooltip>\n              <UiTooltipTrigger as-child>\n                <UiButton\n                  size=\"icon-sm\"\n                  variant=\"ghost\"\n                  :disabled=\"!editor.can().redo()\"\n                  @click=\"editor.chain().focus().redo().run()\"\n                >\n                  <Icon name=\"lucide:redo\" class=\"size-4\" />\n                </UiButton>\n              </UiTooltipTrigger>\n              <UiTooltipContent>Redo</UiTooltipContent>\n            </UiTooltip>\n          </div>\n        </div>\n\n        <!-- Editor Content -->\n        <EditorContent :editor=\"editor\" class=\"prose prose-sm max-w-none p-4\" />\n      </div>\n    </div>\n  </UiContainer>\n</template>\n\n<script lang=\"ts\" setup>\n  import StarterKit from \"@tiptap/starter-kit\";\n  import { EditorContent, useEditor } from \"@tiptap/vue-3\";\n\n  const editor = useEditor({\n    extensions: [StarterKit],\n    content: `\n      <h2>Welcome to Tiptap</h2>\n      <p>This is a custom editor instance with <strong>grouped icon buttons</strong> and <em>tooltips</em>. Try editing this content!</p>\n      <h3>Features:</h3>\n      <ul>\n        <li>Text formatting (bold, italic, strike)</li>\n        <li>Multiple heading levels</li>\n        <li>Bullet and ordered lists</li>\n        <li>Code blocks and blockquotes</li>\n      </ul>\n      <blockquote>\n        <p>This is a blockquote. Great for highlighting important information.</p>\n      </blockquote>\n      <pre><code>// This is a code block\nconsole.log('Hello, Tiptap!');</code></pre>\n    `,\n    editorProps: {\n      attributes: {\n        class:\n          \"min-h-[300px] focus:outline-none prose-headings:font-bold prose-h1:text-3xl prose-h2:text-2xl prose-h3:text-xl prose-p:my-3 prose-ul:my-3 prose-li:my-1\",\n      },\n    },\n  });\n\n  onBeforeUnmount(() => {\n    editor.value?.destroy();\n  });\n</script>\n\n<style scoped>\n  :deep(.ProseMirror) {\n    outline: none;\n  }\n\n  :deep(.ProseMirror pre) {\n    background: hsl(var(--muted));\n    border-radius: 0.5rem;\n    color: hsl(var(--foreground));\n    font-family: \"JetBrainsMono\", monospace;\n    padding: 0.75rem 1rem;\n  }\n\n  :deep(.ProseMirror code) {\n    background: hsl(var(--muted));\n    border-radius: 0.25rem;\n    color: hsl(var(--foreground));\n    font-size: 0.9rem;\n    padding: 0.25em 0.4em;\n  }\n\n  :deep(.ProseMirror pre code) {\n    background: none;\n    color: inherit;\n    font-size: inherit;\n    padding: 0;\n  }\n\n  :deep(.ProseMirror blockquote) {\n    border-left: 3px solid hsl(var(--border));\n    padding-left: 1rem;\n    color: hsl(var(--muted-foreground));\n  }\n</style>\n","category":"Tiptap","path":"Tiptap/BlockTiptap1.vue","components":["button","container","separator","toggle","tooltip","tooltipcontent","tooltiptrigger"]}]