Skip to content

Commit d01ffb0

Browse files
amars29amars29
committed
feat: updated banner
1 parent 5712739 commit d01ffb0

File tree

2 files changed

+113
-55
lines changed

2 files changed

+113
-55
lines changed

‎layouts/index.tsx

+88-44
Original file line numberDiff line numberDiff line change
@@ -173,8 +173,7 @@ function Layout({
173173
<Script
174174
async
175175
src="https://www.googletagmanager.com/gtag/js?id=G-DBP9QMTGR1"
176-
>
177-
</Script>
176+
></Script>
178177
<Script id="gTagScript">
179178
{`
180179
window.dataLayer = window.dataLayer || [];
@@ -196,23 +195,31 @@ function Layout({
196195
<Modal.CloseButton />
197196
<Modal.Body p="9">
198197
<HStack mb="6" alignItems="center" justifyContent="flex">
199-
<AlertIcon/>
200-
<Heading fontSize='xl' textAlign="left" ml="1.5">
198+
<AlertIcon />
199+
<Heading fontSize="xl" textAlign="left" ml="1.5">
201200
IMPORTANT MESSAGE
202201
</Heading>
203202
</HStack>
204203
{/* @ts-ignore*/}
205204
<Box gap={5}>
206-
<Box flexDirection='row'>
207-
<Icon size={18} color='black'>
208-
<Svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
209-
<Path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6"/>
210-
<Path d="m21 3-9 9"/>
211-
<Path d="M15 3h6v6"/>
205+
<Box flexDirection="row">
206+
<Icon size={18} color="black">
207+
<Svg
208+
viewBox="0 0 24 24"
209+
fill="none"
210+
stroke="currentColor"
211+
stroke-width="2"
212+
stroke-linecap="round"
213+
stroke-linejoin="round"
214+
>
215+
<Path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6" />
216+
<Path d="m21 3-9 9" />
217+
<Path d="M15 3h6v6" />
212218
</Svg>
213219
</Icon>
214-
<Box w='92%' maxW='100%' ml="2">
215-
<Heading fontSize='md'>Upgrade to gluestack-ui</Heading>
220+
<Box w="92%" maxW="100%" ml="2">
221+
<Heading fontSize="md">Upgrade to gluestack-ui</Heading>
222+
216223
<Text
217224
fontSize="sm"
218225
textAlign="left"
@@ -221,35 +228,62 @@ function Layout({
221228
color: "muted.200",
222229
}}
223230
>
224-
If you are starting a new project with NativeBase, we recommend
225-
using <Link href="https://gluestack.io/" fontWeight="bold">gluestack-ui</Link>
231+
If you are starting a new project with NativeBase, we
232+
recommend using{" "}
233+
<Link href="https://gluestack.io/" fontWeight="bold">
234+
gluestack-ui
235+
</Link>
236+
</Text>
237+
<Text
238+
fontSize="sm"
239+
textAlign="left"
240+
color="muted.800"
241+
_dark={{
242+
color: "muted.200",
243+
}}
244+
>
245+
Please opt in to our enterprise plan (coming soon) for
246+
priority support with NativeBase.
226247
</Text>
227248
</Box>
228249
</Box>
229250

230-
<Divider thickness={1}/>
251+
<Divider thickness={1} />
231252

232-
<Box flexDirection='row'>
233-
<Icon size={18} color='black'>
234-
<Svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
235-
<Path d="m21 16-4 4-4-4"/>
236-
<Path d="M17 20V4"/>
237-
<Path d="m3 8 4-4 4 4"/>
238-
<Path d="M7 4v16"/>
253+
<Box flexDirection="row">
254+
<Icon size={18} color="black">
255+
<Svg
256+
viewBox="0 0 24 24"
257+
fill="none"
258+
stroke="currentColor"
259+
stroke-width="2"
260+
stroke-linecap="round"
261+
stroke-linejoin="round"
262+
>
263+
<Path d="m21 16-4 4-4-4" />
264+
<Path d="M17 20V4" />
265+
<Path d="m3 8 4-4 4 4" />
266+
<Path d="M7 4v16" />
239267
</Svg>
240268
</Icon>
241-
<Box w='93%' maxW='100%' ml="2">
242-
<Heading fontSize='md'>Migrate to gluestack-ui</Heading>
269+
<Box w="93%" maxW="100%" ml="2">
270+
<Heading fontSize="md">Migrate to gluestack-ui</Heading>
243271
<Text
244272
fontSize="sm"
245273
textAlign="left"
246274
color="muted.800"
247275
_dark={{
248276
color: "muted.200",
249277
}}
278+
>
279+
If you are working on a project with NativeBase, we
280+
recommend using{" "}
281+
<Link
282+
href="https://gluestack.io/ui/docs/migration/native-base-to-gluestack-ui"
283+
fontWeight="bold"
250284
>
251-
If you are working on a project with NativeBase, we recommend
252-
using <Link href="https://gluestack.io/ui/docs/migration/native-base-to-gluestack-ui" fontWeight="bold">@gluestack-ui/themed-native-base</Link>
285+
@gluestack-ui/themed-native-base
286+
</Link>
253287
</Text>
254288
</Box>
255289
</Box>
@@ -335,29 +369,39 @@ function Layout({
335369
// maxW='1056'
336370
fontSize="sm"
337371
fontWeight="medium"
338-
alignSelf='flex'
339-
flexDirection='row'
372+
alignSelf="flex"
373+
flexDirection="row"
340374
alignItems={{ md: "center" }}
341375
justifyContent={{ md: "center" }}
342376
width="100%"
343377
>
344-
<AlertIcon height={18} width={18}/>
378+
<AlertIcon height={18} width={18} />
345379
<Text ml="1">
346-
If you are starting a new project, we recommend using {" "}
347-
<a href="https://ui.gluestack.io/" target="_blank">
348-
<Text fontWeight="semibold" textDecorationLine="underline">
349-
gluestack-ui
350-
</Text>
351-
</a>
352-
{". "}
353-
For your existing projects, you can utilize{" "}
354-
<a href="https://gluestack.io/ui/docs/migration/native-base-to-gluestack-ui" target="_blank">
355-
<Text fontWeight="semibold" textDecorationLine="underline">
356-
@gluestack-ui/themed-native-base
357-
</Text>
358-
</a>
359-
{" "}
360-
(beta).
380+
Please opt in to our enterprise plan (coming soon) for
381+
priority support with NativeBase. If you are starting a
382+
new project, we recommend using{" "}
383+
<a href="https://ui.gluestack.io/" target="_blank">
384+
<Text
385+
fontWeight="semibold"
386+
textDecorationLine="underline"
387+
>
388+
gluestack-ui
389+
</Text>
390+
</a>
391+
{". "}
392+
For your existing projects, you can utilize{" "}
393+
<a
394+
href="https://gluestack.io/ui/docs/migration/native-base-to-gluestack-ui"
395+
target="_blank"
396+
>
397+
<Text
398+
fontWeight="semibold"
399+
textDecorationLine="underline"
400+
>
401+
@gluestack-ui/themed-native-base
402+
</Text>
403+
</a>{" "}
404+
(beta).
361405
</Text>
362406
</Box>
363407
</Stack>

‎src/components/GettingStartedHero.tsx

+25-11
Original file line numberDiff line numberDiff line change
@@ -30,26 +30,29 @@ export function GettingStartedHero() {
3030
NativeBase is a component library that enables devs to build
3131
universal design systems. It is built on top of React Native,
3232
allowing you to develop apps for Android, iOS and the Web.
33-
<br/>
34-
<br/>
33+
<br />
34+
<br />
35+
Please opt in to our enterprise plan (coming soon) for priority
36+
support with NativeBase.
37+
<br />
3538
IMPORTANT MESSAGE — If you are starting a new project with
3639
NativeBase, we recommend using{" "}
3740
<a href="https://ui.gluestack.io/" target="_blank">
3841
<Text fontWeight="semibold" textDecorationLine="underline">
3942
gluestack-ui
4043
</Text>
41-
</a>
42-
{" "}
43-
instead. However, if you are already working on a NativeBase project, we recommend using{" "}
44-
<a href="https://gluestack.io/ui/docs/migration/native-base-to-gluestack-ui" target="_blank">
44+
</a>{" "}
45+
instead. However, if you are already working on a NativeBase
46+
project, we recommend using{" "}
47+
<a
48+
href="https://gluestack.io/ui/docs/migration/native-base-to-gluestack-ui"
49+
target="_blank"
50+
>
4551
<Text fontWeight="semibold" textDecorationLine="underline">
4652
@gluestack-ui/themed-native-base
4753
</Text>
48-
</a>
49-
{" "}
50-
instead.
51-
{" "}
52-
54+
</a>{" "}
55+
instead.{" "}
5356
<a
5457
href="https://nativebase.io/blogs/road-ahead-with-gluestack-ui"
5558
target="_blank"
@@ -60,6 +63,17 @@ export function GettingStartedHero() {
6063
</a>
6164
.
6265
</Text>
66+
<Text
67+
fontSize="sm"
68+
textAlign="left"
69+
color="muted.800"
70+
_dark={{
71+
color: "muted.200",
72+
}}
73+
>
74+
Please opt in to our enterprise plan (coming soon) for priority
75+
support with NativeBase.
76+
</Text>
6377
<Stack direction={{ lg: "row" }} space="4">
6478
<TileLink
6579
title="Installation Guide"

0 commit comments

Comments
 (0)