jeawin-astro 1.0.77 → 1.0.78

package/.nvmrc

@@ -0,0 +1 @@
+20.18.0

package/package.json

@@ -1,70 +1,73 @@
-{
-    "name": "jeawin-astro",
-    "version": "1.0.77",
-    "author": "chaegumi <chaegumi@qq.com>",
-    "description": "",
-    "license": "MIT",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/chaegumi/jeawin-astro.git"
-    },
-    "homepage": "https://www.jeawin.com/",
-    "type": "module",
-    "types": "index.d.ts",
-    "main": "index.ts",
-    "scripts": {
-        "test": "mocha test"
-    },
-    "devDependencies": {
-        "@babel/core": "^7.26.0",
-        "@babel/preset-env": "^7.26.0",
-        "@rollup/plugin-babel": "^6.0.4",
-        "@rollup/plugin-commonjs": "^28.0.1",
-        "@rollup/plugin-json": "^6.1.0",
-        "@rollup/plugin-multi-entry": "^6.0.1",
-        "@rollup/plugin-node-resolve": "^15.3.0",
-        "@rollup/plugin-strip": "^3.0.4",
-        "@rollup/plugin-terser": "^0.4.4",
-        "@rollup/plugin-typescript": "^12.1.1",
-        "@types/lodash": "^4.17.13",
-        "@types/sprintf-js": "^1.1.4",
-        "autoprefixer": "^10.4.20",
-        "chai": "^5.1.2",
-        "mocha": "^10.8.2",
-        "postcss": "^8.4.49",
-        "rollup": "^4.27.4",
-        "rollup-plugin-node-externals": "^7.1.3",
-        "rollup-plugin-postcss": "^4.0.2",
-        "typescript": "^5.7.2"
-    },
-    "dependencies": {
-        "@astrojs/check": "^0.9.4",
-        "@astrojs/cloudflare": "^11.2.0",
-        "@astrojs/rss": "4.0.9",
-        "@astrojs/sitemap": "3.2.1",
-        "@astrojs/tailwind": "5.1.2",
-        "@astrojs/ts-plugin": "^1.10.4",
-        "@astrojs/vue": "4.5.2",
-        "@iconify-json/fa6-brands": "^1.2.3",
-        "@iconify-json/fa6-solid": "^1.2.2",
-        "@iconify/tools": "^4.0.7",
-        "@keyv/compress-brotli": "^2.0.2",
-        "aos": "3.0.0-beta.6",
-        "astro": "^4.16.14",
-        "astro-icon": "^1.1.4",
-        "astro-integration-kit": "^0.16.1",
-        "cheerio": "^1.0.0",
-        "dayjs": "^1.11.13",
-        "fetch-jsonp": "^1.3.0",
-        "glob": "^11.0.0",
-        "keyv": "^5.2.1",
-        "keyv-lru": "^3.0.4",
-        "lodash": "^4.17.21",
-        "photoswipe": "^5.4.4",
-        "smartmenus": "2.0.0-alpha.1",
-        "sprintf-js": "^1.1.3",
-        "string-strip-html": "^13.4.8",
-        "swiper": "^11.1.15",
-        "tslib": "^2.8.1"
-    }
-}
+{
+    "name": "jeawin-astro",
+    "version": "1.0.78",
+    "author": "chaegumi <chaegumi@qq.com>",
+    "description": "",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/chaegumi/jeawin-astro.git"
+    },
+    "homepage": "https://www.jeawin.com/",
+    "type": "module",
+    "types": "index.d.ts",
+    "main": "index.ts",
+    "scripts": {
+        "test": "mocha test"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.26.0",
+        "@babel/preset-env": "^7.26.0",
+        "@rollup/plugin-babel": "^6.0.4",
+        "@rollup/plugin-commonjs": "^28.0.1",
+        "@rollup/plugin-json": "^6.1.0",
+        "@rollup/plugin-multi-entry": "^6.0.1",
+        "@rollup/plugin-node-resolve": "^15.3.0",
+        "@rollup/plugin-strip": "^3.0.4",
+        "@rollup/plugin-terser": "^0.4.4",
+        "@rollup/plugin-typescript": "^12.1.1",
+        "@types/lodash": "^4.17.13",
+        "@types/sprintf-js": "^1.1.4",
+        "autoprefixer": "^10.4.20",
+        "chai": "^5.1.2",
+        "mocha": "^10.8.2",
+        "postcss": "^8.4.49",
+        "rollup": "^4.27.4",
+        "rollup-plugin-node-externals": "^7.1.3",
+        "rollup-plugin-postcss": "^4.0.2",
+        "typescript": "^5.7.2"
+    },
+    "dependencies": {
+        "@astrojs/alpinejs": "^0.4.0",
+        "@astrojs/check": "^0.9.4",
+        "@astrojs/cloudflare": "^11.2.0",
+        "@astrojs/rss": "4.0.9",
+        "@astrojs/sitemap": "3.2.1",
+        "@astrojs/tailwind": "5.1.2",
+        "@astrojs/ts-plugin": "^1.10.4",
+        "@astrojs/vue": "4.5.2",
+        "@iconify-json/fa6-brands": "^1.2.3",
+        "@iconify-json/fa6-solid": "^1.2.2",
+        "@iconify/tools": "^4.0.7",
+        "@keyv/compress-brotli": "^2.0.2",
+        "@types/alpinejs": "^3.13.11",
+        "alpinejs": "^3.14.5",
+        "aos": "3.0.0-beta.6",
+        "astro": "^4.16.14",
+        "astro-icon": "^1.1.4",
+        "astro-integration-kit": "^0.16.1",
+        "cheerio": "^1.0.0",
+        "dayjs": "^1.11.13",
+        "fetch-jsonp": "^1.3.0",
+        "glob": "^11.0.0",
+        "keyv": "^5.2.1",
+        "keyv-lru": "^3.0.4",
+        "lodash": "^4.17.21",
+        "photoswipe": "^5.4.4",
+        "smartmenus": "2.0.0-alpha.1",
+        "sprintf-js": "^1.1.3",
+        "string-strip-html": "^13.4.8",
+        "swiper": "^11.1.15",
+        "tslib": "^2.8.1"
+    }
+}

package/src/components/blocks/block11.astro

@@ -0,0 +1,61 @@
+---
+import { Icon } from "astro-icon/components";
+import SectionContainer from "../section_container.astro";
+import JeawinImage from "../image.astro";
+import DefaultImage from "../default_image.astro";
+
+interface Props {
+  bgcolor?: any;
+  max_width_screen?: any;
+  block_title?: any;
+  block_subtitle?: any;
+  block_items?: any[];
+}
+
+const {
+  bgcolor = "bg-white",
+  max_width_screen = "max-w-screen-2xl",
+  block_title,
+  block_subtitle,
+  block_items = [],
+} = Astro.props;
+---
+
+<SectionContainer bgcolor={bgcolor} max_width_screen={max_width_screen}>
+  <div class="text-center py-8 mx-auto max-w-3xl">
+    <div class="text-5xl font-bold mb-6">{block_title}</div>
+    <div class="text-xl text-[#666] leading-7">
+      <Fragment set:html={block_subtitle} />
+    </div>
+  </div>
+
+  <section class="grid grid-cols-1 md:grid-cols-2 gap-8 p-8 mx-auto max-w-7xl">
+    {
+      block_items.map((itm: any) => (
+        <a
+          href={itm.link_url}
+          class="group relative overflow-hidden rounded-lg no-underline hover:no-underline text-white aspect-video"
+        >
+          <div class="absolute inset-0">
+            {itm.img_html ? (
+              <JeawinImage
+                img_html={itm.img_html}
+                alt={itm.title}
+                add_classes="w-full h-full object-cover transition-transform duration-300 ease group-hover:scale-105"
+              />
+            ) : (
+              <DefaultImage class="w-full h-full object-cover transition-transform duration-300 ease group-hover:scale-105" />
+            )}
+          </div>
+          <div class="relative z-[1] bg-gradient-to-b from-[rgba(0, 0, 0, 0.3)] to-[rgba(0, 0, 0, 0.7)] h-full p-8 flex flex-col justify-between">
+            <div class="text-2xl font-bold">{itm.title}</div>
+            <Icon
+              name="fa6-solid:arrow-right"
+              class="text-xl opacity-0 group-hover:opacity-100 -translate-x-80 group-hover:translate-x-0 transition-all duration-300 ease"
+            />
+          </div>
+        </a>
+      ))
+    }
+  </section>
+</SectionContainer>

package/src/components/cta/cta4.astro

@@ -1,8 +1,7 @@
 ---
-import type { HTMLAttributes } from "astro/types";
 import SectionContainer from "../section_container.astro";
 
-interface Props extends HTMLAttributes<"div"> {
+interface Props extends astroHTML.JSX.HTMLAttributes {
   bgcolor?: any;
   max_width_screen?: any;
   top_title?: any;

package/src/components/cta/cta5.astro

@@ -1,7 +1,6 @@
 ---
-import type { HTMLAttributes } from "astro/types";
 import SectionContainer from "../section_container.astro";
-interface Props extends HTMLAttributes<"div"> {
+interface Props extends astroHTML.JSX.HTMLAttributes {
   bgcolor?: any;
   max_width_screen?: any;
   block_title?: any;

package/src/components/default_image.astro

@@ -10,17 +10,27 @@
  * @email		chaegumi@jeawin.com
  * @filesource
  */
-import { Image } from "astro:assets";
-
+import { render_value } from "../scripts/util.js";
 import defaultimg from "../assets/images/default.png";
+
+let classList = "";
+let alt = "No Image";
+if (render_value(Astro.props, "class")) {
+  classList = Astro.props.class;
+}
+if (render_value(Astro.props, "alt")) {
+  alt = Astro.props.alt;
+}
 ---
 
-<Image
-  class="mx-auto rounded-xl transition duration-500 ease-in-out group-hover:scale-105"
-  src={defaultimg}
-  alt="No Image"
-  title="No Image"
+<img
+  class:list={[
+    "mx-auto rounded-xl transition duration-500 ease-in-out group-hover:scale-105",
+    classList,
+  ]}
+  src={defaultimg.src}
+  alt={alt}
+  title={alt}
   decoding="async"
   loading="lazy"
-  {...Astro.props}
 />

package/src/components/features-navs/features-navs1.astro

@@ -0,0 +1,234 @@
+---
+import SectionContainer from "../section_container.astro";
+import JeawinImage from "../image.astro";
+import DefaultImage from "../default_image.astro";
+interface Props {
+  bgcolor?: any;
+  max_width_screen?: any;
+  block_title?: any;
+  block_title_tag?: any;
+  block_items?: any[];
+}
+
+const {
+  bgcolor = "bg-white",
+  max_width_screen = "max-w-screen-2xl",
+  block_title = `Fully customizable rules to match your unique needs`,
+  block_title_tag = "h2",
+  block_items = [
+    {
+      title: "Advanced tools",
+      desc: `Use Preline thoroughly thought and automated libraries to
+                    manage your businesses.`,
+      img_html: `<img 
+                      src="https://images.unsplash.com/photo-1605629921711-2f6b00c6bbf4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=560&h=720&q=80"
+                      alt="Features Image"
+                    />`,
+    },
+    {
+      title: "Smart dashboards",
+      desc: `Quickly Preline sample components, copy-paste codes, and
+                    start right off.`,
+
+      img_html: `<img 
+                      src="https://images.unsplash.com/photo-1665686306574-1ace09918530?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=560&h=720&q=80"
+                      alt="Features Image"
+                    />`,
+    },
+    {
+      title: "Powerful features",
+      desc: `Reduce time and effort on building modern look design with
+                    Preline only.`,
+
+      img_html: `<img 
+                      src="https://images.unsplash.com/photo-1598929213452-52d72f63e307?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=560&h=720&q=80"
+                      alt="Features Image"
+                    />`,
+    },
+  ],
+} = Astro.props;
+
+const BlockTitleTag = block_title_tag;
+---
+
+<SectionContainer bgcolor={bgcolor} max_width_screen={max_width_screen}>
+  <!-- Features -->
+  <div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
+    <div class="relative p-6 md:p-16">
+      <!-- Grid -->
+      <div
+        class="relative z-10 lg:grid lg:grid-cols-12 lg:gap-16 lg:items-center"
+        x-data="{activeTabIndex:0}"
+      ><span x-html="activeTabIndex"></span>
+        <div class="mb-10 lg:mb-0 lg:col-span-6 lg:col-start-8 lg:order-2">
+          <BlockTitleTag
+            class="text-2xl text-gray-800 font-bold sm:text-3xl dark:text-neutral-200"
+          >
+            {block_title}
+          </BlockTitleTag>
+
+          <!-- Tab Navs -->
+          <nav
+            class="grid gap-4 mt-5 md:mt-10"
+            aria-label="Tabs"
+            role="tablist"
+            aria-orientation="vertical"
+          >
+            {
+              block_items.map((itm: any, idx: number) => (
+                <button
+                  type="button"
+                  :class={`{
+                     'bg-white': activeTabIndex == ${idx},
+                     'shadow-md': activeTabIndex == ${idx},
+                    'hover:border-transparent': activeTabIndex == ${idx},
+                    'text-start':true, 
+                    'hover:bg-gray-200':true, 
+                    'focus:outline-none':true, 
+                    'focus:bg-gray-200':true, 
+                    'p-4':true, 
+                    'md:p-5':true, 
+                    'rounded-xl':true,
+                    'dark:bg-neutral-700': activeTabIndex == ${idx},
+                    'dark:hover:bg-neutral-700':true, 
+                    'dark:focus:bg-neutral-700':true
+                  }`}
+                  aria-selected={idx > 0 ? false : true}
+                  role="tab" x-on:click={`activeTabIndex = ${idx}`}
+                >
+                  <span class="flex gap-x-6">
+                    <svg
+                      :class={`{
+                        'shrink-0':true, 
+                        'mt-2':true, 
+                        'size-6':true, 
+                        'md:size-7':true,
+                        'text-blue-600': activeTabIndex == ${idx},
+                        'text-gray-800': activeTabIndex != ${idx},
+                        'dark:text-blue-500': activeTabIndex == ${idx},
+                        'dark:text-neutral-200': activeTabIndex != ${idx}
+                      }`}
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    >
+                        <path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z" />
+                        <path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z" />
+                        <path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z" />
+                        <path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z" />
+                        <path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z" />
+                      
+                    </svg>
+                    <span class="grow">
+                      <span
+                        :class={`{
+                          'block':true, 
+                        'text-lg':true, 
+                        'font-semibold':true,
+                        'text-blue-600': activeTabIndex == ${idx},
+                        'text-gray-800': activeTabIndex != ${idx},
+                        'dark:text-blue-500': activeTabIndex == ${idx},
+                        'dark:text-neutral-200': activeTabIndex != ${idx}
+                      }`}
+                      >
+                        {itm.title}
+                      </span>
+                      <span
+                        :class={`{
+                          'block':true, 
+                          'mt-1':true, 
+                          'text-gray-800': true, 
+                          'dark:text-gray-200': activeTabIndex==${idx},
+                          'dark:text-neutral-200': activeTabIndex!=${idx}
+                        }`}
+                      >
+                        {itm.desc}
+                      </span>
+                    </span>
+                  </span>
+                </button>
+              ))
+            }
+          </nav>
+          <!-- End Tab Navs -->
+        </div>
+        <!-- End Col -->
+
+        <div class="lg:col-span-6">
+          <div class="relative">
+            <!-- Tab Content -->
+            <div>
+              {
+                block_items.map((itm: any, idx: number) => (
+                  <div
+                    role="tabpanel" class:list={[{'hidden':idx>0}]}
+                    :class={`{hidden:${idx} != activeTabIndex}`}
+                  >
+                    {itm.img_html ? (
+                      <JeawinImage
+                        img_html={itm.img_html}
+                        add_classes="shadow-xl shadow-gray-200 rounded-xl dark:shadow-gray-900/20"
+                      />
+                    ) : (
+                      <DefaultImage class="shadow-xl shadow-gray-200 rounded-xl dark:shadow-gray-900/20" />
+                    )}
+                  </div>
+                ))
+              }
+            </div>
+            <!-- End Tab Content -->
+
+            <!-- SVG Element -->
+            <div
+              class="hidden absolute top-0 end-0 translate-x-20 md:block lg:translate-x-20"
+            >
+              <svg
+                class="w-16 h-auto text-orange-500"
+                width="121"
+                height="135"
+                viewBox="0 0 121 135"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M5 16.4754C11.7688 27.4499 21.2452 57.3224 5 89.0164"
+                  stroke="currentColor"
+                  stroke-width="10"
+                  stroke-linecap="round"></path>
+                <path
+                  d="M33.6761 112.104C44.6984 98.1239 74.2618 57.6776 83.4821 5"
+                  stroke="currentColor"
+                  stroke-width="10"
+                  stroke-linecap="round"></path>
+                <path
+                  d="M50.5525 130C68.2064 127.495 110.731 117.541 116 78.0874"
+                  stroke="currentColor"
+                  stroke-width="10"
+                  stroke-linecap="round"></path>
+              </svg>
+            </div>
+            <!-- End SVG Element -->
+          </div>
+        </div>
+        <!-- End Col -->
+      </div>
+      <!-- End Grid -->
+
+      <!-- Background Color -->
+      <div class="absolute inset-0 grid grid-cols-12 size-full">
+        <div
+          class="col-span-full lg:col-span-7 lg:col-start-6 bg-gray-100 w-full h-5/6 rounded-xl sm:h-3/4 lg:h-full dark:bg-neutral-800"
+        >
+        </div>
+      </div>
+      <!-- End Background Color -->
+    </div>
+  </div>
+  <!-- End Features -->
+</SectionContainer>

package/src/components/features-navs/features-navs2.astro

@@ -0,0 +1,153 @@
+---
+import SectionContainer from "../section_container.astro";
+import JeawinImage from "../image.astro";
+import DefaultImage from "../default_image.astro";
+interface Props {
+  bgcolor?: any;
+  max_width_screen?: any;
+  block_title?: any;
+  block_title_tag?: any;
+  block_items?: any[];
+}
+
+const {
+  bgcolor = "bg-white",
+  max_width_screen = "max-w-screen-2xl",
+  block_title = `Fully customizable rules to match your unique needs`,
+  block_title_tag = "h2",
+  block_items = [
+    {
+      title: "All-in-one workspace",
+      desc: `Create a business, whether you've got a fresh idea.`,
+      img_html: `<img 
+                      src="https://images.unsplash.com/photo-1605629921711-2f6b00c6bbf4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=560&h=720&q=80"
+                      alt="Features Image"
+                    />`,
+    },
+    {
+      title: "Automation on a whole new level",
+      desc: `Use automation to scale campaigns profitably and save time doing it.`,
+      img_html: `<img 
+                      src="https://images.unsplash.com/photo-1665686306574-1ace09918530?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=560&h=720&q=80"
+                      alt="Features Image"
+                    />`,
+    },
+    {
+      title: "Solving probleams for every team",
+      desc: `One tool for your company to share knowledge and ship projects.`,
+      img_html: `<img 
+                      src="https://images.unsplash.com/photo-1598929213452-52d72f63e307?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=560&h=720&q=80"
+                      alt="Features Image"
+                    />`,
+    },
+  ],
+} = Astro.props;
+---
+
+<SectionContainer bgcolor={bgcolor} max_width_screen={max_width_screen}>
+  <!-- Features -->
+  <div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto" x-data="{activeTabIndex:0}">
+    <!-- Tab Nav -->
+    <nav
+      class="max-w-6xl mx-auto flex flex-col sm:flex-row gap-y-px sm:gap-y-0 sm:gap-x-4"
+      aria-label="Tabs"
+      role="tablist"
+      aria-orientation="horizontal"
+    >
+      {
+        block_items.map((itm: any, idx:number) => (
+          <button
+            type="button"
+            :class={`{
+              'bg-gray-100':activeTabIndex==${idx}, 
+              'hover:border-transparent':activeTabIndex==${idx}, 
+              'w-full':true, 
+              'flex':true, 
+              'flex-col':true, 
+              'text-start':true, 
+              'hover:bg-gray-100':true, 
+              'focus:outline-none':true, 
+              'focus:bg-gray-100':true, 
+              'p-3':true, 
+              'md:p-5':true, 
+              'rounded-xl':true, 
+              'dark:bg-neutral-800':activeTabIndex==${idx}, 
+              'dark:hover:bg-neutral-800':true, 
+              'dark:focus:bg-neutral-800':true}`} 
+            aria-selected={idx ==0 ? true : false} 
+            role="tab" x-on:click={`activeTabIndex = ${idx}`}
+          >
+            <svg
+              :class={`{
+                'shrink-0':true, 
+                'hidden':true, 
+                'sm:block':true, 
+                'size-7':true, 
+                'text-blue-600':activeTabIndex==${idx}, 
+                'text-gray-800':activeTabIndex!=${idx}, 
+                'dark:text-blue-500':activeTabIndex==${idx}, 
+                'dark:text-white':activeTabIndex!=${idx}
+              }`}
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+                <path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z" />
+                <path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z" />
+                <path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z" />
+                <path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z" />
+                <path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z" />
+              
+            </svg>
+            <span class="mt-5">
+              <span :class={`{
+                'text-blue-600':activeTabIndex==${idx},
+                'block':true,
+                'font-semibold':true,
+                'text-gray-800':activeTabIndex!=${idx},
+                'dark:text-blue-500':activeTabIndex==${idx},
+                'dark:text-neutral-200':true
+              }`}>
+                {itm.title}
+              </span>
+              <span class="hidden lg:block mt-2 text-gray-800 dark:text-neutral-200">
+                {itm.desc}
+              </span>
+            </span>
+          </button>
+        ))
+      }
+    </nav>
+    <!-- End Tab Nav -->
+
+    <!-- Tab Content -->
+    <div class="mt-12 md:mt-16">
+      {block_items.map((itm: any, idx: number) => (
+       <div 
+        role="tabpanel" class:list={[{"hidden":idx>0}]} :class={`{hidden:${idx} != activeTabIndex}`}
+      >
+        <!-- Devices -->
+        <div class="">
+          {itm.img_html ? (
+                      <JeawinImage
+                        img_html={itm.img_html}
+                        add_classes="mx-auto shadow-xl shadow-gray-200 rounded-xl dark:shadow-gray-900/20"
+                      />
+                    ) : (
+                      <DefaultImage class="mx-auto shadow-xl shadow-gray-200 rounded-xl dark:shadow-gray-900/20" />
+                    )}
+        </div>
+        <!-- End Devices -->
+      </div> 
+      ))}
+    </div>
+    <!-- End Tab Content -->
+  </div>
+  <!-- End Features -->
+</SectionContainer>