create-vite-taro 0.5.7 → 0.5.9
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/package.json +1 -1
- package/templates/default/index.html +1 -1
- package/templates/default/package.json +1 -1
- package/templates/default/src/app.css +138 -2
- package/templates/default/src/components/navigation-bar/navigation-bar.tsx +8 -4
- package/templates/default/src/pages/index/index.tsx +138 -104
package/package.json
CHANGED
|
@@ -15,8 +15,144 @@ button::after {
|
|
|
15
15
|
border: none;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
+
/* biome-ignore lint/correctness/noUnknownTypeSelector: WeChat Mini Program uses page as its document root. */
|
|
19
|
+
page,
|
|
18
20
|
body {
|
|
19
21
|
margin: 0;
|
|
20
|
-
background: #
|
|
21
|
-
color: #
|
|
22
|
+
background: #fbfaf1;
|
|
23
|
+
color: #315f44;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
button {
|
|
27
|
+
line-height: inherit;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.brand-serif {
|
|
31
|
+
font-family: Georgia, "Times New Roman", serif;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.starter-canvas {
|
|
35
|
+
background:
|
|
36
|
+
radial-gradient(ellipse at 12% 5%, rgba(101, 190, 119, 0.11), rgba(101, 190, 119, 0.04) 28%, transparent 62%),
|
|
37
|
+
radial-gradient(ellipse at 90% 18%, rgba(234, 139, 115, 0.08), rgba(234, 139, 115, 0.03) 32%, transparent 68%);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.botanical-sprig {
|
|
41
|
+
position: absolute;
|
|
42
|
+
z-index: 0;
|
|
43
|
+
width: 15rem;
|
|
44
|
+
height: 10rem;
|
|
45
|
+
opacity: 0.68;
|
|
46
|
+
pointer-events: none;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.botanical-sprig-top {
|
|
50
|
+
top: -2.25rem;
|
|
51
|
+
left: -4.25rem;
|
|
52
|
+
transform: rotate(-7deg);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.botanical-sprig-side {
|
|
56
|
+
right: -5rem;
|
|
57
|
+
bottom: -1.75rem;
|
|
58
|
+
opacity: 0.42;
|
|
59
|
+
transform: scaleX(-1) rotate(-11deg);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.botanical-sprig-cta {
|
|
63
|
+
z-index: 0;
|
|
64
|
+
right: -3rem;
|
|
65
|
+
bottom: -2.5rem;
|
|
66
|
+
opacity: 0.18;
|
|
67
|
+
transform: scale(1.15) rotate(-8deg);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.botanical-stem {
|
|
71
|
+
position: absolute;
|
|
72
|
+
top: 7rem;
|
|
73
|
+
left: 0.5rem;
|
|
74
|
+
width: 14rem;
|
|
75
|
+
height: 0.3rem;
|
|
76
|
+
border-radius: 999px;
|
|
77
|
+
background: #237648;
|
|
78
|
+
transform: rotate(-24deg);
|
|
79
|
+
transform-origin: left center;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.botanical-leaf {
|
|
83
|
+
position: absolute;
|
|
84
|
+
width: 3.2rem;
|
|
85
|
+
height: 1.55rem;
|
|
86
|
+
border-radius: 72% 28% 70% 30%;
|
|
87
|
+
background: linear-gradient(145deg, #9cd88b, #43a760);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.botanical-leaf-one {
|
|
91
|
+
top: 5.65rem;
|
|
92
|
+
left: 3rem;
|
|
93
|
+
transform: rotate(28deg);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.botanical-leaf-two {
|
|
97
|
+
top: 3.95rem;
|
|
98
|
+
left: 6.1rem;
|
|
99
|
+
transform: rotate(-20deg);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.botanical-leaf-three {
|
|
103
|
+
top: 2.55rem;
|
|
104
|
+
left: 9.1rem;
|
|
105
|
+
transform: rotate(25deg);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.botanical-leaf-four {
|
|
109
|
+
top: 0.85rem;
|
|
110
|
+
left: 11.8rem;
|
|
111
|
+
transform: rotate(-17deg);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.botanical-flower {
|
|
115
|
+
position: absolute;
|
|
116
|
+
top: 4.9rem;
|
|
117
|
+
left: 4.35rem;
|
|
118
|
+
width: 2.8rem;
|
|
119
|
+
height: 2.8rem;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.botanical-petal,
|
|
123
|
+
.botanical-flower-center {
|
|
124
|
+
position: absolute;
|
|
125
|
+
top: 50%;
|
|
126
|
+
left: 50%;
|
|
127
|
+
border-radius: 999px;
|
|
128
|
+
transform: translate(-50%, -50%);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.botanical-petal {
|
|
132
|
+
width: 1.05rem;
|
|
133
|
+
height: 1.55rem;
|
|
134
|
+
background: #ef977f;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.botanical-petal-one {
|
|
138
|
+
transform: translate(-50%, -100%);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.botanical-petal-two {
|
|
142
|
+
transform: translate(0, -50%) rotate(90deg);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.botanical-petal-three {
|
|
146
|
+
transform: translate(-50%, 0);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.botanical-petal-four {
|
|
150
|
+
transform: translate(-100%, -50%) rotate(90deg);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.botanical-flower-center {
|
|
154
|
+
z-index: 1;
|
|
155
|
+
width: 0.7rem;
|
|
156
|
+
height: 0.7rem;
|
|
157
|
+
background: #fff1bd;
|
|
22
158
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { View } from 'virtual:taro/components'
|
|
1
|
+
import { Text, View } from 'virtual:taro/components'
|
|
2
2
|
import type { CSSProperties } from 'react'
|
|
3
3
|
import { useNavigationBar } from './use-navigation-bar.ts'
|
|
4
4
|
|
|
@@ -18,12 +18,16 @@ export function NavigationBar({ title }: NavigationBarProps) {
|
|
|
18
18
|
const sideStyle: CSSProperties = { flexBasis: px(menuInfo.width), width: px(menuInfo.width) }
|
|
19
19
|
|
|
20
20
|
return (
|
|
21
|
-
<View
|
|
21
|
+
<View
|
|
22
|
+
className="flex w-full flex-col border-b border-[#1e663d]/10 bg-[#fbfaf1] text-[#17673d]"
|
|
23
|
+
style={containerStyle}
|
|
24
|
+
>
|
|
22
25
|
<View className="shrink-0" style={statusBarStyle} />
|
|
23
26
|
<View className="flex w-full flex-1 flex-row items-center" style={contentStyle}>
|
|
24
27
|
<View className="flex h-full shrink-0" style={sideStyle} />
|
|
25
|
-
<View className="flex h-full min-w-0 flex-1 flex-row items-center justify-center
|
|
26
|
-
{title}
|
|
28
|
+
<View className="flex h-full min-w-0 flex-1 flex-row items-center justify-center gap-2 text-center">
|
|
29
|
+
<Text className="brand-serif text-xl font-semibold tracking-[0.12em]">{title}</Text>
|
|
30
|
+
<View className="h-1.5 w-1.5 rounded-full bg-[#e98a72]" />
|
|
27
31
|
</View>
|
|
28
32
|
<View className="flex h-full shrink-0" style={sideStyle} />
|
|
29
33
|
</View>
|
|
@@ -3,160 +3,194 @@ import { Button, ScrollView, Text, View } from 'virtual:taro/components'
|
|
|
3
3
|
import { useState } from 'react'
|
|
4
4
|
import { NavigationBar } from '../../components/navigation-bar/navigation-bar.tsx'
|
|
5
5
|
|
|
6
|
-
const
|
|
6
|
+
const featureCards = [
|
|
7
7
|
{
|
|
8
8
|
number: '01',
|
|
9
|
-
title: '
|
|
10
|
-
description: '
|
|
9
|
+
title: 'Vite-speed feedback',
|
|
10
|
+
description: 'Save a React component and see the smallest possible update in WeChat DevTools or the browser.',
|
|
11
|
+
tiltClass: 'rotate-[-0.35deg]'
|
|
11
12
|
},
|
|
12
13
|
{
|
|
13
14
|
number: '02',
|
|
14
|
-
title: 'One React
|
|
15
|
-
description: 'Share components and state between
|
|
15
|
+
title: 'One React tree',
|
|
16
|
+
description: 'Share components, hooks and application state between WeChat Mini Program and H5.',
|
|
17
|
+
tiltClass: 'translate-y-1 rotate-[0.25deg]'
|
|
16
18
|
},
|
|
17
19
|
{
|
|
18
20
|
number: '03',
|
|
19
|
-
title: 'Native
|
|
20
|
-
description: '
|
|
21
|
+
title: 'Native when needed',
|
|
22
|
+
description: 'Use familiar Taro components and APIs without stepping away from a modern frontend workflow.',
|
|
23
|
+
tiltClass: 'rotate-[0.4deg]'
|
|
21
24
|
}
|
|
22
|
-
]
|
|
25
|
+
] as const
|
|
26
|
+
|
|
27
|
+
interface BotanicalSprigProps {
|
|
28
|
+
className: string
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
function BotanicalSprig({ className }: BotanicalSprigProps) {
|
|
32
|
+
return (
|
|
33
|
+
<View className={`botanical-sprig ${className}`} aria-hidden="true">
|
|
34
|
+
<View className="botanical-stem" />
|
|
35
|
+
<View className="botanical-leaf botanical-leaf-one" />
|
|
36
|
+
<View className="botanical-leaf botanical-leaf-two" />
|
|
37
|
+
<View className="botanical-leaf botanical-leaf-three" />
|
|
38
|
+
<View className="botanical-leaf botanical-leaf-four" />
|
|
39
|
+
<View className="botanical-flower">
|
|
40
|
+
<View className="botanical-petal botanical-petal-one" />
|
|
41
|
+
<View className="botanical-petal botanical-petal-two" />
|
|
42
|
+
<View className="botanical-petal botanical-petal-three" />
|
|
43
|
+
<View className="botanical-petal botanical-petal-four" />
|
|
44
|
+
<View className="botanical-flower-center" />
|
|
45
|
+
</View>
|
|
46
|
+
</View>
|
|
47
|
+
)
|
|
48
|
+
}
|
|
23
49
|
|
|
24
50
|
function IndexPage() {
|
|
51
|
+
// This local state intentionally demonstrates that VPT preserves React state during hot updates.
|
|
25
52
|
const [count, setCount] = useState(0)
|
|
26
53
|
|
|
27
54
|
return (
|
|
28
|
-
<View className="flex h-screen flex-col overflow-hidden bg-
|
|
29
|
-
<NavigationBar title="
|
|
30
|
-
<ScrollView scrollY className="flex min-h-0 flex-1 flex-col bg-
|
|
31
|
-
<View className="relative flex shrink-0 flex-col items-center overflow-hidden
|
|
32
|
-
<
|
|
33
|
-
|
|
34
|
-
<View className="flex flex-row items-center gap-2 rounded-full border border-slate-700 bg-slate-900 px-3 py-2">
|
|
35
|
-
<Text className="text-xs leading-none text-emerald-400">●</Text>
|
|
36
|
-
<Text className="text-xs font-semibold tracking-widest text-slate-300">
|
|
37
|
-
VITE × TARO
|
|
38
|
-
</Text>
|
|
39
|
-
</View>
|
|
40
|
-
</View>
|
|
55
|
+
<View className="flex h-screen flex-col overflow-hidden bg-[#fbfaf1] text-[#315f44]">
|
|
56
|
+
<NavigationBar title="VPT" />
|
|
57
|
+
<ScrollView scrollY className="starter-canvas flex min-h-0 flex-1 flex-col bg-[#fbfaf1]">
|
|
58
|
+
<View className="relative flex shrink-0 flex-col items-center overflow-hidden px-5 pb-12 pt-10">
|
|
59
|
+
<BotanicalSprig className="botanical-sprig-top" />
|
|
60
|
+
<BotanicalSprig className="botanical-sprig-side" />
|
|
41
61
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
<
|
|
62
|
+
<View className="relative z-10 flex w-full max-w-4xl flex-col items-center text-center">
|
|
63
|
+
<View className="flex flex-row items-center gap-2 rounded-full border border-[#1e663d]/15 bg-white/70 px-4 py-2">
|
|
64
|
+
<View className="h-2 w-2 rounded-full bg-[#63bd74]" />
|
|
65
|
+
<Text className="text-xs font-bold tracking-widest text-[#207344]">
|
|
66
|
+
VITE × REACT × TARO
|
|
67
|
+
</Text>
|
|
45
68
|
</View>
|
|
46
69
|
|
|
47
|
-
<Text className="
|
|
48
|
-
|
|
49
|
-
|
|
70
|
+
<Text className="brand-serif mt-7 block text-[7rem] font-semibold leading-none tracking-[-0.08em] text-[#17673d] sm:text-[9rem]">
|
|
71
|
+
VPT
|
|
72
|
+
</Text>
|
|
73
|
+
<Text className="mt-5 block max-w-2xl text-2xl font-bold leading-tight text-[#174f32] sm:text-3xl">
|
|
74
|
+
Build naturally. Ship everywhere.
|
|
75
|
+
</Text>
|
|
76
|
+
<Text className="mt-4 block max-w-xl text-sm leading-7 text-[#64786a] sm:text-base">
|
|
77
|
+
A botanical little starter for building polished WeChat Mini Programs and Web apps with one
|
|
78
|
+
modern React codebase.
|
|
50
79
|
</Text>
|
|
51
80
|
|
|
52
|
-
<View className="flex flex-row gap-3">
|
|
53
|
-
<View className="
|
|
54
|
-
<Text className="text-sm font-bold text-
|
|
81
|
+
<View className="mt-7 flex flex-row flex-wrap items-center justify-center gap-3">
|
|
82
|
+
<View className="rounded-full border border-[#1e663d]/15 bg-white/75 px-4 py-2">
|
|
83
|
+
<Text className="text-sm font-bold text-[#17673d]">Vite 8</Text>
|
|
55
84
|
</View>
|
|
56
|
-
<
|
|
57
|
-
|
|
85
|
+
<Text className="text-[#e98a72]">✿</Text>
|
|
86
|
+
<View className="rounded-full border border-[#1e663d]/15 bg-white/75 px-4 py-2">
|
|
87
|
+
<Text className="text-sm font-bold text-[#17673d]">React 19</Text>
|
|
88
|
+
</View>
|
|
89
|
+
<Text className="text-[#e98a72]">✿</Text>
|
|
90
|
+
<View className="rounded-full border border-[#1e663d]/15 bg-white/75 px-4 py-2">
|
|
91
|
+
<Text className="text-sm font-bold text-[#17673d]">Tailwind 4</Text>
|
|
58
92
|
</View>
|
|
59
93
|
</View>
|
|
60
94
|
</View>
|
|
61
95
|
</View>
|
|
62
96
|
|
|
63
97
|
<View className="relative z-10 flex shrink-0 flex-col items-center px-5">
|
|
64
|
-
<View className="
|
|
65
|
-
<View className="flex w-
|
|
66
|
-
<
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
98
|
+
<View className="flex w-full max-w-4xl flex-col gap-5 overflow-hidden rounded-3xl border border-[#1e663d]/15 bg-white/85 p-6 shadow-xl sm:flex-row sm:items-center sm:p-8">
|
|
99
|
+
<View className="flex min-w-0 flex-1 flex-col">
|
|
100
|
+
<Text className="text-xs font-bold tracking-widest text-[#e17f68]">
|
|
101
|
+
STATE-PRESERVING HMR
|
|
102
|
+
</Text>
|
|
103
|
+
<Text className="brand-serif mt-2 block text-3xl font-semibold text-[#174f32]">
|
|
104
|
+
Edit. Save. Stay in flow.
|
|
105
|
+
</Text>
|
|
106
|
+
<Text className="mt-3 block text-sm leading-6 text-[#64786a]">
|
|
107
|
+
Change this counter, then edit src/pages/index/index.tsx. Your state stays exactly where
|
|
108
|
+
you left it.
|
|
109
|
+
</Text>
|
|
110
|
+
</View>
|
|
111
|
+
|
|
112
|
+
<View className="flex shrink-0 flex-col rounded-2xl bg-[#edf5e8] p-4 sm:w-64">
|
|
113
|
+
<Text className="text-center text-xs font-bold tracking-widest text-[#315f44]">
|
|
114
|
+
SHARED COUNTER
|
|
115
|
+
</Text>
|
|
116
|
+
<View className="mt-3 flex h-14 w-full flex-row overflow-hidden rounded-xl border border-[#1e663d]/15 bg-white">
|
|
117
|
+
<View className="flex h-full w-14 shrink-0">
|
|
118
|
+
<Button
|
|
119
|
+
className="m-0 flex h-full w-full items-center justify-center rounded-none bg-white p-0 text-lg font-bold leading-none text-[#315f44] after:border-0"
|
|
120
|
+
onClick={() => setCount((currentCount) => currentCount - 1)}
|
|
121
|
+
>
|
|
122
|
+
<Text>−</Text>
|
|
123
|
+
</Button>
|
|
77
124
|
</View>
|
|
78
|
-
<View className="flex items-center justify-center
|
|
79
|
-
<Text className="text-3xl font-
|
|
125
|
+
<View className="flex min-w-0 flex-1 items-center justify-center border-x border-[#1e663d]/10 bg-[#f8fbf4]">
|
|
126
|
+
<Text className="brand-serif text-3xl font-semibold text-[#197342]">{count}</Text>
|
|
80
127
|
</View>
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
<
|
|
87
|
-
|
|
88
|
-
onClick={() => setCount((currentCount) => currentCount - 1)}
|
|
89
|
-
>
|
|
90
|
-
Decrease
|
|
91
|
-
</Button>
|
|
92
|
-
</View>
|
|
93
|
-
<View className="flex flex-1">
|
|
94
|
-
<Button
|
|
95
|
-
className="flex w-full items-center justify-center rounded-xl bg-blue-600 px-4 py-3 text-sm font-semibold text-white after:border-0"
|
|
96
|
-
onClick={() => setCount((currentCount) => currentCount + 1)}
|
|
97
|
-
>
|
|
98
|
-
Increase
|
|
99
|
-
</Button>
|
|
100
|
-
</View>
|
|
128
|
+
<View className="flex h-full w-14 shrink-0">
|
|
129
|
+
<Button
|
|
130
|
+
className="m-0 flex h-full w-full items-center justify-center rounded-none bg-[#197342] p-0 text-lg font-bold leading-none text-white after:border-0"
|
|
131
|
+
onClick={() => setCount((currentCount) => currentCount + 1)}
|
|
132
|
+
>
|
|
133
|
+
<Text>+</Text>
|
|
134
|
+
</Button>
|
|
101
135
|
</View>
|
|
102
|
-
<Button
|
|
103
|
-
className="flex w-full items-center justify-center rounded-xl bg-slate-100 px-4 py-3 text-sm font-semibold text-slate-600 after:border-0"
|
|
104
|
-
onClick={() => Taro.showToast({ title: 'Hello from Taro!' })}
|
|
105
|
-
>
|
|
106
|
-
Show toast
|
|
107
|
-
</Button>
|
|
108
136
|
</View>
|
|
109
137
|
</View>
|
|
110
138
|
</View>
|
|
111
139
|
</View>
|
|
112
140
|
|
|
113
|
-
<View className="flex shrink-0 flex-col items-center px-5 pb-
|
|
114
|
-
<View className="flex w-full max-w-4xl flex-col
|
|
115
|
-
<View className="flex flex-col
|
|
116
|
-
<Text className="
|
|
117
|
-
|
|
141
|
+
<View className="flex shrink-0 flex-col items-center px-5 pb-12 pt-14">
|
|
142
|
+
<View className="flex w-full max-w-4xl flex-col">
|
|
143
|
+
<View className="flex flex-col items-center text-center">
|
|
144
|
+
<Text className="text-xs font-bold tracking-widest text-[#207344]">
|
|
145
|
+
A SMALL START, A MODERN FOUNDATION
|
|
146
|
+
</Text>
|
|
147
|
+
<Text className="brand-serif mt-3 block text-4xl font-semibold text-[#174f32]">
|
|
148
|
+
Everything is ready to grow.
|
|
118
149
|
</Text>
|
|
119
|
-
<Text className="block text-
|
|
120
|
-
|
|
150
|
+
<Text className="mt-3 block max-w-xl text-sm leading-7 text-[#64786a]">
|
|
151
|
+
Keep the pieces you need, replace the rest, and let VPT handle the cross-platform build.
|
|
121
152
|
</Text>
|
|
122
153
|
</View>
|
|
123
154
|
|
|
124
|
-
<View className="
|
|
125
|
-
{
|
|
155
|
+
<View className="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-3">
|
|
156
|
+
{featureCards.map((feature) => (
|
|
126
157
|
<View
|
|
127
158
|
key={feature.number}
|
|
128
|
-
className={`flex
|
|
159
|
+
className={`flex min-h-52 flex-col rounded-3xl border border-[#1e663d]/15 bg-white/80 p-6 shadow-lg ${feature.tiltClass}`}
|
|
129
160
|
>
|
|
130
|
-
<View className="flex
|
|
131
|
-
|
|
132
|
-
</View>
|
|
133
|
-
<View className="flex min-w-0 flex-1 flex-col gap-1">
|
|
134
|
-
<Text className="block text-base font-bold text-slate-950">
|
|
135
|
-
{feature.title}
|
|
136
|
-
</Text>
|
|
137
|
-
<Text className="block text-sm leading-6 text-slate-500">
|
|
138
|
-
{feature.description}
|
|
139
|
-
</Text>
|
|
161
|
+
<View className="brand-serif flex h-11 w-11 items-center justify-center rounded-2xl bg-[#e3f4df] text-base font-bold text-[#197342]">
|
|
162
|
+
{feature.number}
|
|
140
163
|
</View>
|
|
164
|
+
<Text className="mt-5 block text-lg font-bold text-[#174f32]">{feature.title}</Text>
|
|
165
|
+
<Text className="mt-3 block text-sm leading-6 text-[#64786a]">
|
|
166
|
+
{feature.description}
|
|
167
|
+
</Text>
|
|
141
168
|
</View>
|
|
142
169
|
))}
|
|
143
170
|
</View>
|
|
144
171
|
|
|
145
|
-
<View className="flex flex-col
|
|
146
|
-
<
|
|
147
|
-
|
|
148
|
-
<Text className="
|
|
149
|
-
|
|
172
|
+
<View className="relative mt-8 flex flex-col overflow-hidden rounded-3xl bg-[#17673d] p-7 text-white sm:flex-row sm:items-center sm:justify-between sm:p-9">
|
|
173
|
+
<BotanicalSprig className="botanical-sprig-cta" />
|
|
174
|
+
<View className="relative z-10 flex max-w-lg flex-col">
|
|
175
|
+
<Text className="text-xs font-bold tracking-widest text-[#a9e2b4]">TARO API READY</Text>
|
|
176
|
+
<Text className="brand-serif mt-2 block text-3xl font-semibold text-white">
|
|
177
|
+
Make this starter yours.
|
|
178
|
+
</Text>
|
|
179
|
+
<Text className="mt-3 block text-sm leading-6 text-[#d5ead9]">
|
|
180
|
+
Add pages, connect your data and ship the same experience to WeChat and H5.
|
|
150
181
|
</Text>
|
|
151
182
|
</View>
|
|
152
|
-
<
|
|
153
|
-
|
|
154
|
-
|
|
183
|
+
<Button
|
|
184
|
+
className="relative z-10 mt-6 flex items-center justify-center self-start rounded-full bg-[#78dc91] px-6 py-3 text-sm font-bold text-[#0d2b18] after:border-0 sm:mt-0"
|
|
185
|
+
onClick={() => Taro.showToast({ title: 'Hello from VPT!' })}
|
|
186
|
+
>
|
|
187
|
+
Try a Taro toast →
|
|
188
|
+
</Button>
|
|
155
189
|
</View>
|
|
156
190
|
|
|
157
|
-
<View className="flex flex-col px-2 pt-
|
|
158
|
-
<Text className="
|
|
159
|
-
|
|
191
|
+
<View className="flex flex-col items-center px-2 pb-2 pt-9">
|
|
192
|
+
<Text className="text-center text-xs font-bold tracking-widest text-[#819185]">
|
|
193
|
+
VPT · OPEN SOURCE · MIT
|
|
160
194
|
</Text>
|
|
161
195
|
</View>
|
|
162
196
|
</View>
|