jeawin-astro 1.0.76 → 1.0.78
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.nvmrc +1 -0
- package/package.json +73 -70
- package/src/components/blocks/block11.astro +61 -0
- package/src/components/common_card.astro +56 -13
- package/src/components/cta/cta4.astro +1 -2
- package/src/components/cta/cta5.astro +1 -2
- package/src/components/default_image.astro +18 -8
- package/src/components/features-navs/features-navs1.astro +234 -0
- package/src/components/features-navs/features-navs2.astro +153 -0
- package/src/components/hero/hero1.astro +78 -129
- package/src/components/hero/hero10.astro +88 -0
- package/src/components/hero/hero2.astro +40 -27
- package/src/components/hero/hero3.astro +92 -0
- package/src/components/hero/hero4.astro +79 -0
- package/src/components/hero/hero5.astro +95 -0
- package/src/components/hero/hero6.astro +61 -0
- package/src/components/hero/hero7.astro +115 -0
- package/src/components/hero/hero8.astro +108 -0
- package/src/components/hero/hero9.astro +162 -0
- package/src/components/logo.astro +2 -3
- package/src/components/search_result.astro +1 -2
- package/src/components/section_container.astro +1 -2
- package/src/components/star.astro +1 -1
- package/src/components/teams/team13.astro +83 -0
- package/src/components/teams/team14.astro +84 -0
- package/src/components/teams/team15.astro +60 -0
- package/src/components/teams/team16.astro +82 -0
- package/src/components/teams/team17.astro +82 -0
- package/src/components/teams/team18.astro +58 -0
- package/src/env.d.ts +1 -0
- package/src/layouts/Layout.astro +5 -1
- package/src/scripts/consts.js +2 -1
package/.nvmrc
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
20.18.0
|
package/package.json
CHANGED
|
@@ -1,70 +1,73 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "jeawin-astro",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"author": "chaegumi <chaegumi@qq.com>",
|
|
5
|
-
"description": "",
|
|
6
|
-
"license": "MIT",
|
|
7
|
-
"repository": {
|
|
8
|
-
"type": "git",
|
|
9
|
-
"url": "https://github.com/chaegumi/jeawin-astro.git"
|
|
10
|
-
},
|
|
11
|
-
"homepage": "https://www.jeawin.com/",
|
|
12
|
-
"type": "module",
|
|
13
|
-
"types": "index.d.ts",
|
|
14
|
-
"main": "index.ts",
|
|
15
|
-
"scripts": {
|
|
16
|
-
"test": "mocha test"
|
|
17
|
-
},
|
|
18
|
-
"devDependencies": {
|
|
19
|
-
"@babel/core": "^7.26.0",
|
|
20
|
-
"@babel/preset-env": "^7.26.0",
|
|
21
|
-
"@rollup/plugin-babel": "^6.0.4",
|
|
22
|
-
"@rollup/plugin-commonjs": "^28.0.1",
|
|
23
|
-
"@rollup/plugin-json": "^6.1.0",
|
|
24
|
-
"@rollup/plugin-multi-entry": "^6.0.1",
|
|
25
|
-
"@rollup/plugin-node-resolve": "^15.3.0",
|
|
26
|
-
"@rollup/plugin-strip": "^3.0.4",
|
|
27
|
-
"@rollup/plugin-terser": "^0.4.4",
|
|
28
|
-
"@rollup/plugin-typescript": "^12.1.1",
|
|
29
|
-
"@types/lodash": "^4.17.13",
|
|
30
|
-
"@types/sprintf-js": "^1.1.4",
|
|
31
|
-
"autoprefixer": "^10.4.20",
|
|
32
|
-
"chai": "^5.1.2",
|
|
33
|
-
"mocha": "^10.8.2",
|
|
34
|
-
"postcss": "^8.4.49",
|
|
35
|
-
"rollup": "^4.27.4",
|
|
36
|
-
"rollup-plugin-node-externals": "^7.1.3",
|
|
37
|
-
"rollup-plugin-postcss": "^4.0.2",
|
|
38
|
-
"typescript": "^5.7.2"
|
|
39
|
-
},
|
|
40
|
-
"dependencies": {
|
|
41
|
-
"@astrojs/
|
|
42
|
-
"@astrojs/
|
|
43
|
-
"@astrojs/
|
|
44
|
-
"@astrojs/
|
|
45
|
-
"@astrojs/
|
|
46
|
-
"@astrojs/
|
|
47
|
-
"@astrojs/
|
|
48
|
-
"@
|
|
49
|
-
"@iconify-json/fa6-
|
|
50
|
-
"@iconify/
|
|
51
|
-
"@
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
"
|
|
64
|
-
"
|
|
65
|
-
"
|
|
66
|
-
"
|
|
67
|
-
"
|
|
68
|
-
"
|
|
69
|
-
|
|
70
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "jeawin-astro",
|
|
3
|
+
"version": "1.0.78",
|
|
4
|
+
"author": "chaegumi <chaegumi@qq.com>",
|
|
5
|
+
"description": "",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "https://github.com/chaegumi/jeawin-astro.git"
|
|
10
|
+
},
|
|
11
|
+
"homepage": "https://www.jeawin.com/",
|
|
12
|
+
"type": "module",
|
|
13
|
+
"types": "index.d.ts",
|
|
14
|
+
"main": "index.ts",
|
|
15
|
+
"scripts": {
|
|
16
|
+
"test": "mocha test"
|
|
17
|
+
},
|
|
18
|
+
"devDependencies": {
|
|
19
|
+
"@babel/core": "^7.26.0",
|
|
20
|
+
"@babel/preset-env": "^7.26.0",
|
|
21
|
+
"@rollup/plugin-babel": "^6.0.4",
|
|
22
|
+
"@rollup/plugin-commonjs": "^28.0.1",
|
|
23
|
+
"@rollup/plugin-json": "^6.1.0",
|
|
24
|
+
"@rollup/plugin-multi-entry": "^6.0.1",
|
|
25
|
+
"@rollup/plugin-node-resolve": "^15.3.0",
|
|
26
|
+
"@rollup/plugin-strip": "^3.0.4",
|
|
27
|
+
"@rollup/plugin-terser": "^0.4.4",
|
|
28
|
+
"@rollup/plugin-typescript": "^12.1.1",
|
|
29
|
+
"@types/lodash": "^4.17.13",
|
|
30
|
+
"@types/sprintf-js": "^1.1.4",
|
|
31
|
+
"autoprefixer": "^10.4.20",
|
|
32
|
+
"chai": "^5.1.2",
|
|
33
|
+
"mocha": "^10.8.2",
|
|
34
|
+
"postcss": "^8.4.49",
|
|
35
|
+
"rollup": "^4.27.4",
|
|
36
|
+
"rollup-plugin-node-externals": "^7.1.3",
|
|
37
|
+
"rollup-plugin-postcss": "^4.0.2",
|
|
38
|
+
"typescript": "^5.7.2"
|
|
39
|
+
},
|
|
40
|
+
"dependencies": {
|
|
41
|
+
"@astrojs/alpinejs": "^0.4.0",
|
|
42
|
+
"@astrojs/check": "^0.9.4",
|
|
43
|
+
"@astrojs/cloudflare": "^11.2.0",
|
|
44
|
+
"@astrojs/rss": "4.0.9",
|
|
45
|
+
"@astrojs/sitemap": "3.2.1",
|
|
46
|
+
"@astrojs/tailwind": "5.1.2",
|
|
47
|
+
"@astrojs/ts-plugin": "^1.10.4",
|
|
48
|
+
"@astrojs/vue": "4.5.2",
|
|
49
|
+
"@iconify-json/fa6-brands": "^1.2.3",
|
|
50
|
+
"@iconify-json/fa6-solid": "^1.2.2",
|
|
51
|
+
"@iconify/tools": "^4.0.7",
|
|
52
|
+
"@keyv/compress-brotli": "^2.0.2",
|
|
53
|
+
"@types/alpinejs": "^3.13.11",
|
|
54
|
+
"alpinejs": "^3.14.5",
|
|
55
|
+
"aos": "3.0.0-beta.6",
|
|
56
|
+
"astro": "^4.16.14",
|
|
57
|
+
"astro-icon": "^1.1.4",
|
|
58
|
+
"astro-integration-kit": "^0.16.1",
|
|
59
|
+
"cheerio": "^1.0.0",
|
|
60
|
+
"dayjs": "^1.11.13",
|
|
61
|
+
"fetch-jsonp": "^1.3.0",
|
|
62
|
+
"glob": "^11.0.0",
|
|
63
|
+
"keyv": "^5.2.1",
|
|
64
|
+
"keyv-lru": "^3.0.4",
|
|
65
|
+
"lodash": "^4.17.21",
|
|
66
|
+
"photoswipe": "^5.4.4",
|
|
67
|
+
"smartmenus": "2.0.0-alpha.1",
|
|
68
|
+
"sprintf-js": "^1.1.3",
|
|
69
|
+
"string-strip-html": "^13.4.8",
|
|
70
|
+
"swiper": "^11.1.15",
|
|
71
|
+
"tslib": "^2.8.1"
|
|
72
|
+
}
|
|
73
|
+
}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
---
|
|
2
|
+
import { Icon } from "astro-icon/components";
|
|
3
|
+
import SectionContainer from "../section_container.astro";
|
|
4
|
+
import JeawinImage from "../image.astro";
|
|
5
|
+
import DefaultImage from "../default_image.astro";
|
|
6
|
+
|
|
7
|
+
interface Props {
|
|
8
|
+
bgcolor?: any;
|
|
9
|
+
max_width_screen?: any;
|
|
10
|
+
block_title?: any;
|
|
11
|
+
block_subtitle?: any;
|
|
12
|
+
block_items?: any[];
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const {
|
|
16
|
+
bgcolor = "bg-white",
|
|
17
|
+
max_width_screen = "max-w-screen-2xl",
|
|
18
|
+
block_title,
|
|
19
|
+
block_subtitle,
|
|
20
|
+
block_items = [],
|
|
21
|
+
} = Astro.props;
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
<SectionContainer bgcolor={bgcolor} max_width_screen={max_width_screen}>
|
|
25
|
+
<div class="text-center py-8 mx-auto max-w-3xl">
|
|
26
|
+
<div class="text-5xl font-bold mb-6">{block_title}</div>
|
|
27
|
+
<div class="text-xl text-[#666] leading-7">
|
|
28
|
+
<Fragment set:html={block_subtitle} />
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<section class="grid grid-cols-1 md:grid-cols-2 gap-8 p-8 mx-auto max-w-7xl">
|
|
33
|
+
{
|
|
34
|
+
block_items.map((itm: any) => (
|
|
35
|
+
<a
|
|
36
|
+
href={itm.link_url}
|
|
37
|
+
class="group relative overflow-hidden rounded-lg no-underline hover:no-underline text-white aspect-video"
|
|
38
|
+
>
|
|
39
|
+
<div class="absolute inset-0">
|
|
40
|
+
{itm.img_html ? (
|
|
41
|
+
<JeawinImage
|
|
42
|
+
img_html={itm.img_html}
|
|
43
|
+
alt={itm.title}
|
|
44
|
+
add_classes="w-full h-full object-cover transition-transform duration-300 ease group-hover:scale-105"
|
|
45
|
+
/>
|
|
46
|
+
) : (
|
|
47
|
+
<DefaultImage class="w-full h-full object-cover transition-transform duration-300 ease group-hover:scale-105" />
|
|
48
|
+
)}
|
|
49
|
+
</div>
|
|
50
|
+
<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">
|
|
51
|
+
<div class="text-2xl font-bold">{itm.title}</div>
|
|
52
|
+
<Icon
|
|
53
|
+
name="fa6-solid:arrow-right"
|
|
54
|
+
class="text-xl opacity-0 group-hover:opacity-100 -translate-x-80 group-hover:translate-x-0 transition-all duration-300 ease"
|
|
55
|
+
/>
|
|
56
|
+
</div>
|
|
57
|
+
</a>
|
|
58
|
+
))
|
|
59
|
+
}
|
|
60
|
+
</section>
|
|
61
|
+
</SectionContainer>
|
|
@@ -10,34 +10,77 @@
|
|
|
10
10
|
* @email chaegumi@jeawin.com
|
|
11
11
|
* @filesource
|
|
12
12
|
*/
|
|
13
|
-
import {
|
|
13
|
+
import {
|
|
14
|
+
render_url,
|
|
15
|
+
render_value,
|
|
16
|
+
truncate,
|
|
17
|
+
render_date,
|
|
18
|
+
} from "../scripts/util.js";
|
|
14
19
|
import DefaultImage from "./default_image.astro";
|
|
15
20
|
import RenderImage from "./image.astro";
|
|
16
21
|
|
|
17
22
|
const { node, title_tag } = Astro.props;
|
|
23
|
+
const { siteinfo } = Astro.locals;
|
|
18
24
|
|
|
19
25
|
const TitleTag = title_tag || "div";
|
|
26
|
+
|
|
27
|
+
let final_content = "";
|
|
28
|
+
|
|
29
|
+
if (render_value(node, "content")) {
|
|
30
|
+
final_content = truncate(node.content, {
|
|
31
|
+
length: 300,
|
|
32
|
+
separator: " ",
|
|
33
|
+
});
|
|
34
|
+
}
|
|
20
35
|
---
|
|
21
36
|
|
|
22
|
-
<
|
|
37
|
+
<div
|
|
23
38
|
class="group rounded-xl outline-none ring-zinc-500 transition duration-300 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none flex flex-col justify-between h-full"
|
|
24
|
-
href={render_url(node.node_url)}
|
|
25
|
-
title={node.node_title}
|
|
26
39
|
>
|
|
27
40
|
<div
|
|
28
41
|
class="relative overflow-hidden rounded-sm h-full flex items-center justify-center"
|
|
29
42
|
>
|
|
30
|
-
{
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
43
|
+
<a href={render_url(node.node_url)} title={node.node_title}>
|
|
44
|
+
{
|
|
45
|
+
node.node_picurl ? (
|
|
46
|
+
<RenderImage img_html={node.node_picurl_html} />
|
|
47
|
+
) : (
|
|
48
|
+
<DefaultImage />
|
|
49
|
+
)
|
|
50
|
+
}</a
|
|
51
|
+
>
|
|
37
52
|
</div>
|
|
38
53
|
<div class="mt-7">
|
|
39
54
|
<TitleTag class="text-center font-bold">
|
|
40
|
-
{node.node_title}
|
|
55
|
+
<a href={render_url(node.node_url)} title={node.node_title}
|
|
56
|
+
>{node.node_title}</a
|
|
57
|
+
>
|
|
41
58
|
</TitleTag>
|
|
42
59
|
</div>
|
|
43
|
-
|
|
60
|
+
{
|
|
61
|
+
node.channel_id == 17 ? (
|
|
62
|
+
<div class="text-center">
|
|
63
|
+
{render_value(node, "linkurl") ? (
|
|
64
|
+
<div class="mt-2">{render_value(node, "linkurl")}</div>
|
|
65
|
+
) : null}
|
|
66
|
+
{render_value(node, "link_title") ? (
|
|
67
|
+
<div class="mt-2">
|
|
68
|
+
<a
|
|
69
|
+
href={render_url(render_value(node, "linkurl"))}
|
|
70
|
+
title={render_value(node, "link_title")}
|
|
71
|
+
target="_blank"
|
|
72
|
+
>
|
|
73
|
+
{render_value(node, "link_title")}
|
|
74
|
+
</a>
|
|
75
|
+
</div>
|
|
76
|
+
) : null}
|
|
77
|
+
{final_content ? <div class="mt-2">{final_content}</div> : null}
|
|
78
|
+
{node.publish_time ? (
|
|
79
|
+
<div class="mt-2">
|
|
80
|
+
{render_date(siteinfo.language_id, node.publish_time)}
|
|
81
|
+
</div>
|
|
82
|
+
) : null}
|
|
83
|
+
</div>
|
|
84
|
+
) : null
|
|
85
|
+
}
|
|
86
|
+
</div>
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
---
|
|
2
|
-
import type { HTMLAttributes } from "astro/types";
|
|
3
2
|
import SectionContainer from "../section_container.astro";
|
|
4
3
|
|
|
5
|
-
interface Props extends HTMLAttributes
|
|
4
|
+
interface Props extends astroHTML.JSX.HTMLAttributes {
|
|
6
5
|
bgcolor?: any;
|
|
7
6
|
max_width_screen?: any;
|
|
8
7
|
top_title?: any;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
---
|
|
2
|
-
import type { HTMLAttributes } from "astro/types";
|
|
3
2
|
import SectionContainer from "../section_container.astro";
|
|
4
|
-
interface Props extends HTMLAttributes
|
|
3
|
+
interface Props extends astroHTML.JSX.HTMLAttributes {
|
|
5
4
|
bgcolor?: any;
|
|
6
5
|
max_width_screen?: any;
|
|
7
6
|
block_title?: any;
|
|
@@ -10,17 +10,27 @@
|
|
|
10
10
|
* @email chaegumi@jeawin.com
|
|
11
11
|
* @filesource
|
|
12
12
|
*/
|
|
13
|
-
import {
|
|
14
|
-
|
|
13
|
+
import { render_value } from "../scripts/util.js";
|
|
15
14
|
import defaultimg from "../assets/images/default.png";
|
|
15
|
+
|
|
16
|
+
let classList = "";
|
|
17
|
+
let alt = "No Image";
|
|
18
|
+
if (render_value(Astro.props, "class")) {
|
|
19
|
+
classList = Astro.props.class;
|
|
20
|
+
}
|
|
21
|
+
if (render_value(Astro.props, "alt")) {
|
|
22
|
+
alt = Astro.props.alt;
|
|
23
|
+
}
|
|
16
24
|
---
|
|
17
25
|
|
|
18
|
-
<
|
|
19
|
-
class=
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
26
|
+
<img
|
|
27
|
+
class:list={[
|
|
28
|
+
"mx-auto rounded-xl transition duration-500 ease-in-out group-hover:scale-105",
|
|
29
|
+
classList,
|
|
30
|
+
]}
|
|
31
|
+
src={defaultimg.src}
|
|
32
|
+
alt={alt}
|
|
33
|
+
title={alt}
|
|
23
34
|
decoding="async"
|
|
24
35
|
loading="lazy"
|
|
25
|
-
{...Astro.props}
|
|
26
36
|
/>
|
|
@@ -0,0 +1,234 @@
|
|
|
1
|
+
---
|
|
2
|
+
import SectionContainer from "../section_container.astro";
|
|
3
|
+
import JeawinImage from "../image.astro";
|
|
4
|
+
import DefaultImage from "../default_image.astro";
|
|
5
|
+
interface Props {
|
|
6
|
+
bgcolor?: any;
|
|
7
|
+
max_width_screen?: any;
|
|
8
|
+
block_title?: any;
|
|
9
|
+
block_title_tag?: any;
|
|
10
|
+
block_items?: any[];
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
const {
|
|
14
|
+
bgcolor = "bg-white",
|
|
15
|
+
max_width_screen = "max-w-screen-2xl",
|
|
16
|
+
block_title = `Fully customizable rules to match your unique needs`,
|
|
17
|
+
block_title_tag = "h2",
|
|
18
|
+
block_items = [
|
|
19
|
+
{
|
|
20
|
+
title: "Advanced tools",
|
|
21
|
+
desc: `Use Preline thoroughly thought and automated libraries to
|
|
22
|
+
manage your businesses.`,
|
|
23
|
+
img_html: `<img
|
|
24
|
+
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"
|
|
25
|
+
alt="Features Image"
|
|
26
|
+
/>`,
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
title: "Smart dashboards",
|
|
30
|
+
desc: `Quickly Preline sample components, copy-paste codes, and
|
|
31
|
+
start right off.`,
|
|
32
|
+
|
|
33
|
+
img_html: `<img
|
|
34
|
+
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"
|
|
35
|
+
alt="Features Image"
|
|
36
|
+
/>`,
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
title: "Powerful features",
|
|
40
|
+
desc: `Reduce time and effort on building modern look design with
|
|
41
|
+
Preline only.`,
|
|
42
|
+
|
|
43
|
+
img_html: `<img
|
|
44
|
+
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"
|
|
45
|
+
alt="Features Image"
|
|
46
|
+
/>`,
|
|
47
|
+
},
|
|
48
|
+
],
|
|
49
|
+
} = Astro.props;
|
|
50
|
+
|
|
51
|
+
const BlockTitleTag = block_title_tag;
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
<SectionContainer bgcolor={bgcolor} max_width_screen={max_width_screen}>
|
|
55
|
+
<!-- Features -->
|
|
56
|
+
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
|
57
|
+
<div class="relative p-6 md:p-16">
|
|
58
|
+
<!-- Grid -->
|
|
59
|
+
<div
|
|
60
|
+
class="relative z-10 lg:grid lg:grid-cols-12 lg:gap-16 lg:items-center"
|
|
61
|
+
x-data="{activeTabIndex:0}"
|
|
62
|
+
><span x-html="activeTabIndex"></span>
|
|
63
|
+
<div class="mb-10 lg:mb-0 lg:col-span-6 lg:col-start-8 lg:order-2">
|
|
64
|
+
<BlockTitleTag
|
|
65
|
+
class="text-2xl text-gray-800 font-bold sm:text-3xl dark:text-neutral-200"
|
|
66
|
+
>
|
|
67
|
+
{block_title}
|
|
68
|
+
</BlockTitleTag>
|
|
69
|
+
|
|
70
|
+
<!-- Tab Navs -->
|
|
71
|
+
<nav
|
|
72
|
+
class="grid gap-4 mt-5 md:mt-10"
|
|
73
|
+
aria-label="Tabs"
|
|
74
|
+
role="tablist"
|
|
75
|
+
aria-orientation="vertical"
|
|
76
|
+
>
|
|
77
|
+
{
|
|
78
|
+
block_items.map((itm: any, idx: number) => (
|
|
79
|
+
<button
|
|
80
|
+
type="button"
|
|
81
|
+
:class={`{
|
|
82
|
+
'bg-white': activeTabIndex == ${idx},
|
|
83
|
+
'shadow-md': activeTabIndex == ${idx},
|
|
84
|
+
'hover:border-transparent': activeTabIndex == ${idx},
|
|
85
|
+
'text-start':true,
|
|
86
|
+
'hover:bg-gray-200':true,
|
|
87
|
+
'focus:outline-none':true,
|
|
88
|
+
'focus:bg-gray-200':true,
|
|
89
|
+
'p-4':true,
|
|
90
|
+
'md:p-5':true,
|
|
91
|
+
'rounded-xl':true,
|
|
92
|
+
'dark:bg-neutral-700': activeTabIndex == ${idx},
|
|
93
|
+
'dark:hover:bg-neutral-700':true,
|
|
94
|
+
'dark:focus:bg-neutral-700':true
|
|
95
|
+
}`}
|
|
96
|
+
aria-selected={idx > 0 ? false : true}
|
|
97
|
+
role="tab" x-on:click={`activeTabIndex = ${idx}`}
|
|
98
|
+
>
|
|
99
|
+
<span class="flex gap-x-6">
|
|
100
|
+
<svg
|
|
101
|
+
:class={`{
|
|
102
|
+
'shrink-0':true,
|
|
103
|
+
'mt-2':true,
|
|
104
|
+
'size-6':true,
|
|
105
|
+
'md:size-7':true,
|
|
106
|
+
'text-blue-600': activeTabIndex == ${idx},
|
|
107
|
+
'text-gray-800': activeTabIndex != ${idx},
|
|
108
|
+
'dark:text-blue-500': activeTabIndex == ${idx},
|
|
109
|
+
'dark:text-neutral-200': activeTabIndex != ${idx}
|
|
110
|
+
}`}
|
|
111
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
112
|
+
width="24"
|
|
113
|
+
height="24"
|
|
114
|
+
viewBox="0 0 24 24"
|
|
115
|
+
fill="none"
|
|
116
|
+
stroke="currentColor"
|
|
117
|
+
stroke-width="2"
|
|
118
|
+
stroke-linecap="round"
|
|
119
|
+
stroke-linejoin="round"
|
|
120
|
+
>
|
|
121
|
+
<path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z" />
|
|
122
|
+
<path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z" />
|
|
123
|
+
<path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z" />
|
|
124
|
+
<path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z" />
|
|
125
|
+
<path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z" />
|
|
126
|
+
|
|
127
|
+
</svg>
|
|
128
|
+
<span class="grow">
|
|
129
|
+
<span
|
|
130
|
+
:class={`{
|
|
131
|
+
'block':true,
|
|
132
|
+
'text-lg':true,
|
|
133
|
+
'font-semibold':true,
|
|
134
|
+
'text-blue-600': activeTabIndex == ${idx},
|
|
135
|
+
'text-gray-800': activeTabIndex != ${idx},
|
|
136
|
+
'dark:text-blue-500': activeTabIndex == ${idx},
|
|
137
|
+
'dark:text-neutral-200': activeTabIndex != ${idx}
|
|
138
|
+
}`}
|
|
139
|
+
>
|
|
140
|
+
{itm.title}
|
|
141
|
+
</span>
|
|
142
|
+
<span
|
|
143
|
+
:class={`{
|
|
144
|
+
'block':true,
|
|
145
|
+
'mt-1':true,
|
|
146
|
+
'text-gray-800': true,
|
|
147
|
+
'dark:text-gray-200': activeTabIndex==${idx},
|
|
148
|
+
'dark:text-neutral-200': activeTabIndex!=${idx}
|
|
149
|
+
}`}
|
|
150
|
+
>
|
|
151
|
+
{itm.desc}
|
|
152
|
+
</span>
|
|
153
|
+
</span>
|
|
154
|
+
</span>
|
|
155
|
+
</button>
|
|
156
|
+
))
|
|
157
|
+
}
|
|
158
|
+
</nav>
|
|
159
|
+
<!-- End Tab Navs -->
|
|
160
|
+
</div>
|
|
161
|
+
<!-- End Col -->
|
|
162
|
+
|
|
163
|
+
<div class="lg:col-span-6">
|
|
164
|
+
<div class="relative">
|
|
165
|
+
<!-- Tab Content -->
|
|
166
|
+
<div>
|
|
167
|
+
{
|
|
168
|
+
block_items.map((itm: any, idx: number) => (
|
|
169
|
+
<div
|
|
170
|
+
role="tabpanel" class:list={[{'hidden':idx>0}]}
|
|
171
|
+
:class={`{hidden:${idx} != activeTabIndex}`}
|
|
172
|
+
>
|
|
173
|
+
{itm.img_html ? (
|
|
174
|
+
<JeawinImage
|
|
175
|
+
img_html={itm.img_html}
|
|
176
|
+
add_classes="shadow-xl shadow-gray-200 rounded-xl dark:shadow-gray-900/20"
|
|
177
|
+
/>
|
|
178
|
+
) : (
|
|
179
|
+
<DefaultImage class="shadow-xl shadow-gray-200 rounded-xl dark:shadow-gray-900/20" />
|
|
180
|
+
)}
|
|
181
|
+
</div>
|
|
182
|
+
))
|
|
183
|
+
}
|
|
184
|
+
</div>
|
|
185
|
+
<!-- End Tab Content -->
|
|
186
|
+
|
|
187
|
+
<!-- SVG Element -->
|
|
188
|
+
<div
|
|
189
|
+
class="hidden absolute top-0 end-0 translate-x-20 md:block lg:translate-x-20"
|
|
190
|
+
>
|
|
191
|
+
<svg
|
|
192
|
+
class="w-16 h-auto text-orange-500"
|
|
193
|
+
width="121"
|
|
194
|
+
height="135"
|
|
195
|
+
viewBox="0 0 121 135"
|
|
196
|
+
fill="none"
|
|
197
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
198
|
+
>
|
|
199
|
+
<path
|
|
200
|
+
d="M5 16.4754C11.7688 27.4499 21.2452 57.3224 5 89.0164"
|
|
201
|
+
stroke="currentColor"
|
|
202
|
+
stroke-width="10"
|
|
203
|
+
stroke-linecap="round"></path>
|
|
204
|
+
<path
|
|
205
|
+
d="M33.6761 112.104C44.6984 98.1239 74.2618 57.6776 83.4821 5"
|
|
206
|
+
stroke="currentColor"
|
|
207
|
+
stroke-width="10"
|
|
208
|
+
stroke-linecap="round"></path>
|
|
209
|
+
<path
|
|
210
|
+
d="M50.5525 130C68.2064 127.495 110.731 117.541 116 78.0874"
|
|
211
|
+
stroke="currentColor"
|
|
212
|
+
stroke-width="10"
|
|
213
|
+
stroke-linecap="round"></path>
|
|
214
|
+
</svg>
|
|
215
|
+
</div>
|
|
216
|
+
<!-- End SVG Element -->
|
|
217
|
+
</div>
|
|
218
|
+
</div>
|
|
219
|
+
<!-- End Col -->
|
|
220
|
+
</div>
|
|
221
|
+
<!-- End Grid -->
|
|
222
|
+
|
|
223
|
+
<!-- Background Color -->
|
|
224
|
+
<div class="absolute inset-0 grid grid-cols-12 size-full">
|
|
225
|
+
<div
|
|
226
|
+
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"
|
|
227
|
+
>
|
|
228
|
+
</div>
|
|
229
|
+
</div>
|
|
230
|
+
<!-- End Background Color -->
|
|
231
|
+
</div>
|
|
232
|
+
</div>
|
|
233
|
+
<!-- End Features -->
|
|
234
|
+
</SectionContainer>
|