@mirai/core 0.3.94 → 0.3.96
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/public/App.Container.jsx +1 -4
- package/public/index.html +1 -1
- package/public/routes/Deals.jsx +4 -3
- package/public/routes/Home.jsx +91 -25
- package/public/routes/NotFound.jsx +1 -1
- package/public/routes/Profile.jsx +4 -3
- package/public/routes/Signup.jsx +4 -3
- package/public/routes/Step1-Rates.jsx +2 -3
- package/public/routes/routes.module.css +156 -16
- package/public/themes/monalisa.theme.css +7 -1
- package/public/components/Benefits/Benefits.jsx +0 -66
- package/public/components/Benefits/Benefits.module.css +0 -66
- package/public/components/Benefits/index.js +0 -1
- package/public/components/index.js +0 -1
package/package.json
CHANGED
package/public/App.Container.jsx
CHANGED
|
@@ -82,9 +82,6 @@ export const Container = ({ children }) => {
|
|
|
82
82
|
|
|
83
83
|
<View>
|
|
84
84
|
<Text bold>Reservation</Text>
|
|
85
|
-
<Action inline small onPress={() => setLocation('/step0-accommodations')}>
|
|
86
|
-
0. accommodations
|
|
87
|
-
</Action>
|
|
88
85
|
<Action inline small onPress={() => setLocation('/step1-rates')}>
|
|
89
86
|
1. rates
|
|
90
87
|
</Action>
|
|
@@ -122,7 +119,7 @@ export const Container = ({ children }) => {
|
|
|
122
119
|
<Text bold headline level={2} className={style.textBrand}>
|
|
123
120
|
Monalisa
|
|
124
121
|
</Text>{' '}
|
|
125
|
-
©
|
|
122
|
+
© 1980-2024 Monalisa Hotel Group Santa Engracia 120. 28003 Madrid, Spain
|
|
126
123
|
</Text>
|
|
127
124
|
</View>
|
|
128
125
|
</>
|
package/public/index.html
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
<body>
|
|
11
11
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
12
12
|
<!-- hotel example -->
|
|
13
|
-
<div data-mirai-id="100379008" data-locale="en-GB" data-currency="
|
|
13
|
+
<div data-mirai-id="100379008" data-locale="en-GB" data-currency="EUR"></div>
|
|
14
14
|
<!-- chain example -->
|
|
15
15
|
<!-- <div data-mirai-id="501404" data-hotel="88737419" data-type="chain" data-locale="en-GB" _hidden></div> -->
|
|
16
16
|
|
package/public/routes/Deals.jsx
CHANGED
|
@@ -5,11 +5,12 @@ import * as style from './routes.module.css';
|
|
|
5
5
|
|
|
6
6
|
export const Deals = () => (
|
|
7
7
|
<>
|
|
8
|
-
<View tag="section" className={[style.section, style.box, style.
|
|
8
|
+
<View tag="section" className={[style.section, style.box, style.accent]}>
|
|
9
9
|
<View className={style.wrapper}>
|
|
10
|
-
<Text bold headline level={
|
|
11
|
-
|
|
10
|
+
<Text bold headline level={1} className={style.textBrand}>
|
|
11
|
+
Deals
|
|
12
12
|
</Text>
|
|
13
|
+
<Text>Discover exclusive hotel offers tailored just for you.</Text>
|
|
13
14
|
</View>
|
|
14
15
|
</View>
|
|
15
16
|
<View className={[style.wrapper, style.box]}>
|
package/public/routes/Home.jsx
CHANGED
|
@@ -1,36 +1,102 @@
|
|
|
1
1
|
/* eslint-disable react/prop-types */
|
|
2
|
-
import { Button, Text, View } from '@mirai/ui';
|
|
2
|
+
import { Button, ScrollView, Slider, Text, useDevice, View } from '@mirai/ui';
|
|
3
3
|
import React from 'react';
|
|
4
4
|
|
|
5
5
|
import * as style from './routes.module.css';
|
|
6
6
|
|
|
7
|
-
export const Home = () =>
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
<
|
|
7
|
+
export const Home = () => {
|
|
8
|
+
const { isMobile } = useDevice();
|
|
9
|
+
|
|
10
|
+
return (
|
|
11
|
+
<>
|
|
12
|
+
<View tag="section" className={[style.section, style.content, style.home]}>
|
|
13
|
+
<View className={[style.wrapper, style.centered]}>
|
|
14
|
+
<Text bold className={[style.slogan, style.text, style.textBrand]}>
|
|
15
|
+
Discover the Serenity of a Perfect Stay
|
|
16
|
+
</Text>
|
|
17
|
+
<Text headline={!isMobile} level={3} className={[style.pitch, style.text]}>
|
|
18
|
+
Experience the calming atmosphere of our serene guest rooms, each designed with your comfort in mind.
|
|
19
|
+
</Text>
|
|
20
|
+
{!isMobile && <Button large>Reserve Your Room</Button>}
|
|
18
21
|
</View>
|
|
22
|
+
<View className={style.backgroundImage} />
|
|
19
23
|
</View>
|
|
20
|
-
</View>
|
|
21
24
|
|
|
22
|
-
|
|
25
|
+
<View data-mirai-component="finder" id="finder" className={style.inHome} />
|
|
26
|
+
|
|
27
|
+
<View row={!isMobile} tag="section" className={[style.section, style.spaceBetween, style.wrapper]}>
|
|
28
|
+
<View className={style.texts}>
|
|
29
|
+
<Text headline level={1} className={style.textBrand}>
|
|
30
|
+
Welcome to Monalisa
|
|
31
|
+
</Text>
|
|
32
|
+
|
|
33
|
+
<Text lighten headline={!isMobile}>
|
|
34
|
+
Welcome to Monalisa, where Monalisa and convenience converge in the heart of the city. Our hotel is located
|
|
35
|
+
in the bustling city center, just steps away from the best shopping, dining, and entertainment that the city
|
|
36
|
+
has to offer.
|
|
37
|
+
</Text>
|
|
38
|
+
<Text lighten headline={!isMobile}>
|
|
39
|
+
One of our greatest strengths is our location. We are situated in the middle of the city center, which means
|
|
40
|
+
that our guests can easily explore all the sights and sounds of this vibrant metropolis. Plus, we are just a
|
|
41
|
+
stone's throw away from the train station, making it incredibly easy for our guests to arrive and depart
|
|
42
|
+
from our hotel.
|
|
43
|
+
</Text>
|
|
44
|
+
<Text lighten headline={!isMobile}>
|
|
45
|
+
So why wait? Book your stay at Monalisa today and experience the perfect blend of Monalisa, convenience, and
|
|
46
|
+
comfort in the heart of the city.
|
|
47
|
+
</Text>
|
|
48
|
+
</View>
|
|
23
49
|
|
|
24
|
-
|
|
50
|
+
<View className={[style.image, style.square]} />
|
|
51
|
+
</View>
|
|
52
|
+
|
|
53
|
+
<View row tag="section" className={[style.section, style.wrapper, style.centered]}>
|
|
54
|
+
<View data-mirai-component="benefits" />
|
|
55
|
+
</View>
|
|
25
56
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
57
|
+
<View row={!isMobile} tag="section" className={[style.section, style.accent, style.testimonials]}>
|
|
58
|
+
<View>
|
|
59
|
+
<Text headline level={1} className={style.textBrand}>
|
|
60
|
+
Testimonials
|
|
61
|
+
</Text>
|
|
62
|
+
<Text>See what our guests are saying about their serene and tranquil experiences at Monalisa.</Text>
|
|
63
|
+
</View>
|
|
64
|
+
|
|
65
|
+
<ScrollView horizontal snap={!isMobile} className={style.cards}>
|
|
66
|
+
{Array.from({ length: 8 }).map((_, index) => (
|
|
67
|
+
<View key={index} className={style.card}>
|
|
68
|
+
<Text action>
|
|
69
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae deleniti aliquam quam soluta! Eius,
|
|
70
|
+
necessitatibus amet? Quas tempore modi eligendi unde soluta, illo, nam eos dolore ipsa sequi, magnam
|
|
71
|
+
dicta.
|
|
72
|
+
</Text>
|
|
73
|
+
<Text accent action>
|
|
74
|
+
★★★★
|
|
75
|
+
</Text>
|
|
76
|
+
|
|
77
|
+
<View row>
|
|
78
|
+
<View className={style.avatar} />
|
|
79
|
+
<View>
|
|
80
|
+
<Text action>Name Lastname</Text>
|
|
81
|
+
<Text lighten small>
|
|
82
|
+
Job Possition
|
|
83
|
+
</Text>
|
|
84
|
+
</View>
|
|
85
|
+
</View>
|
|
86
|
+
</View>
|
|
87
|
+
))}
|
|
88
|
+
</ScrollView>
|
|
89
|
+
</View>
|
|
90
|
+
|
|
91
|
+
<View row tag="section" className={[style.section, style.border, style.centered]}>
|
|
92
|
+
<View>
|
|
93
|
+
<Text>FIND BEST HOTEL FOR LEAVING</Text>
|
|
94
|
+
<Text bold headline level={1} className={style.textBrand}>
|
|
95
|
+
Find the Best Hotel in Your Next Vacation
|
|
96
|
+
</Text>
|
|
97
|
+
</View>
|
|
98
|
+
<Button large>BOOK NOW</Button>
|
|
32
99
|
</View>
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
);
|
|
100
|
+
</>
|
|
101
|
+
);
|
|
102
|
+
};
|
|
@@ -8,7 +8,7 @@ export const NotFound = () => {
|
|
|
8
8
|
const [, setLocation] = useLocation();
|
|
9
9
|
|
|
10
10
|
return (
|
|
11
|
-
<View tag="section" className={[style.section, style.
|
|
11
|
+
<View tag="section" className={[style.section, style.border, style.home]}>
|
|
12
12
|
<View className={[style.wrapper, style.centered]}>
|
|
13
13
|
<Text bold className={style.slogan}>
|
|
14
14
|
Oops! Something went wrong.
|
|
@@ -5,11 +5,12 @@ import * as style from './routes.module.css';
|
|
|
5
5
|
|
|
6
6
|
export const Profile = () => (
|
|
7
7
|
<>
|
|
8
|
-
<View tag="section" className={[style.section, style.box, style.
|
|
8
|
+
<View tag="section" className={[style.section, style.box, style.accent]}>
|
|
9
9
|
<View className={style.wrapper}>
|
|
10
|
-
<Text bold headline level={
|
|
11
|
-
|
|
10
|
+
<Text bold headline level={1} className={style.textBrand}>
|
|
11
|
+
Your profile
|
|
12
12
|
</Text>
|
|
13
|
+
<Text>Explore and manage your personal profile settings here.</Text>
|
|
13
14
|
</View>
|
|
14
15
|
</View>
|
|
15
16
|
|
package/public/routes/Signup.jsx
CHANGED
|
@@ -5,11 +5,12 @@ import * as style from './routes.module.css';
|
|
|
5
5
|
|
|
6
6
|
export const Signup = () => (
|
|
7
7
|
<>
|
|
8
|
-
<View tag="section" className={[style.section, style.box, style.
|
|
8
|
+
<View tag="section" className={[style.section, style.box, style.accent]}>
|
|
9
9
|
<View className={style.wrapper}>
|
|
10
|
-
<Text bold headline level={
|
|
11
|
-
|
|
10
|
+
<Text bold headline level={1} className={style.textBrand}>
|
|
11
|
+
Signup
|
|
12
12
|
</Text>
|
|
13
|
+
<Text>Join Club Monalisa for free and enjoy exclusive benefits</Text>
|
|
13
14
|
</View>
|
|
14
15
|
</View>
|
|
15
16
|
<View className={[style.wrapper, style.box]}>
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { View } from '@mirai/ui';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
|
|
4
|
-
import { Benefits } from '../components';
|
|
5
|
-
|
|
6
4
|
export const Step1 = () => (
|
|
7
5
|
<>
|
|
8
6
|
<View data-mirai-component="rates">
|
|
9
|
-
<
|
|
7
|
+
<View data-mirai-component="benefits" data-content />
|
|
8
|
+
{/* <h1 data-content>hola mundo</h1> */}
|
|
10
9
|
</View>
|
|
11
10
|
</>
|
|
12
11
|
);
|
|
@@ -1,15 +1,21 @@
|
|
|
1
1
|
.section {
|
|
2
|
-
|
|
2
|
+
gap: var(--mirai-ui-space-M);
|
|
3
3
|
}
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
/* colors */
|
|
6
|
+
.section.border {
|
|
6
7
|
background-color: var(--mirai-ui-content-border);
|
|
7
8
|
}
|
|
8
9
|
|
|
9
|
-
.section.
|
|
10
|
+
.section.content {
|
|
10
11
|
background-color: var(--mirai-ui-content);
|
|
11
12
|
}
|
|
12
13
|
|
|
14
|
+
.section.accent {
|
|
15
|
+
background-color: var(--mirai-ui-accent);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* layout */
|
|
13
19
|
.section.centered {
|
|
14
20
|
justify-content: center;
|
|
15
21
|
gap: var(--mirai-ui-space-L);
|
|
@@ -19,10 +25,28 @@
|
|
|
19
25
|
padding-bottom: calc(var(--mirai-ui-space-XXL) + var(--mirai-ui-space-L));
|
|
20
26
|
}
|
|
21
27
|
|
|
28
|
+
.section.spaceBetween {
|
|
29
|
+
justify-content: space-between;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.texts {
|
|
33
|
+
align-self: flex-start;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.image {
|
|
37
|
+
background-color: var(--mirai-ui-content-background);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.image.square {
|
|
41
|
+
min-height: var(--mirai-ui-breakpoint-S);
|
|
42
|
+
min-width: var(--mirai-ui-breakpoint-S);
|
|
43
|
+
}
|
|
44
|
+
|
|
22
45
|
.wrapper {
|
|
23
46
|
align-self: center;
|
|
24
47
|
max-width: var(--mirai-ui-breakpoint-content);
|
|
25
48
|
width: 100%;
|
|
49
|
+
gap: var(--mirai-ui-space-S);
|
|
26
50
|
}
|
|
27
51
|
|
|
28
52
|
.wrapper.box {
|
|
@@ -43,18 +67,34 @@
|
|
|
43
67
|
}
|
|
44
68
|
|
|
45
69
|
/* -- home --------------------------------------------------------------- */
|
|
46
|
-
.home
|
|
47
|
-
|
|
70
|
+
.home {
|
|
71
|
+
position: relative;
|
|
72
|
+
justify-content: center;
|
|
48
73
|
}
|
|
49
74
|
|
|
50
|
-
.home .
|
|
51
|
-
|
|
52
|
-
|
|
75
|
+
.home .wrapper {
|
|
76
|
+
z-index: 1;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.home .backgroundImage {
|
|
80
|
+
background-position: center;
|
|
81
|
+
background-size: cover;
|
|
82
|
+
bottom: 0;
|
|
83
|
+
left: 0;
|
|
84
|
+
opacity: 0.66;
|
|
85
|
+
position: absolute;
|
|
86
|
+
right: 0;
|
|
87
|
+
top: 0;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.home .text {
|
|
91
|
+
color: var(--mirai-ui-base);
|
|
53
92
|
text-align: center;
|
|
93
|
+
text-shadow: 0 0 var(--mirai-ui-space-M) rgba(0, 0, 0, 0.33);
|
|
54
94
|
}
|
|
55
95
|
|
|
56
|
-
.
|
|
57
|
-
|
|
96
|
+
.testimonials > :first-child {
|
|
97
|
+
max-width: var(--mirai-ui-breakpoint-S);
|
|
58
98
|
}
|
|
59
99
|
|
|
60
100
|
[data-mirai-component='finder'].inHome {
|
|
@@ -62,37 +102,137 @@
|
|
|
62
102
|
box-shadow: var(--mirai-ui-shadow);
|
|
63
103
|
border-radius: var(--mirai-ui-border-radius);
|
|
64
104
|
margin: 0 auto;
|
|
65
|
-
|
|
105
|
+
z-index: 1;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.cards {
|
|
109
|
+
gap: var(--mirai-ui-space-L);
|
|
110
|
+
width: 100%;
|
|
111
|
+
flex: 1;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.card {
|
|
115
|
+
background-color: var(--mirai-ui-base);
|
|
116
|
+
border-radius: var(--mirai-ui-border-radius);
|
|
117
|
+
gap: var(--mirai-ui-space-S);
|
|
118
|
+
height: 320px;
|
|
119
|
+
min-width: 256px;
|
|
120
|
+
padding: var(--mirai-ui-space-L) var(--mirai-ui-space-L);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.card .avatar {
|
|
124
|
+
background-color: var(--mirai-ui-content-border);
|
|
125
|
+
border-radius: 50%;
|
|
126
|
+
height: var(--mirai-ui-space-XL);
|
|
127
|
+
width: var(--mirai-ui-space-XL);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.card .avatar + * {
|
|
131
|
+
margin-bottom: calc(var(--mirai-ui-space-XS) / 2);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.card > :last-child {
|
|
135
|
+
align-items: flex-end;
|
|
136
|
+
flex: 1;
|
|
137
|
+
gap: var(--mirai-ui-space-S);
|
|
66
138
|
}
|
|
67
139
|
|
|
68
140
|
@media only screen and (max-width: 430px) {
|
|
141
|
+
.section {
|
|
142
|
+
padding: var(--mirai-ui-space-XL) var(--mirai-ui-space-M);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.section.accent.testimonials {
|
|
146
|
+
gap: var(--mirai-ui-space-L);
|
|
147
|
+
padding: var(--mirai-ui-space-XL) 0;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.testimonials > :first-child {
|
|
151
|
+
padding: 0 var(--mirai-ui-space-M);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.cards > :first-child {
|
|
155
|
+
margin-left: var(--mirai-ui-space-M);
|
|
156
|
+
}
|
|
157
|
+
|
|
69
158
|
.home {
|
|
70
159
|
padding: var(--mirai-ui-space-XXL) var(--mirai-ui-space-M) calc(var(--mirai-ui-space-XXL) * 2)
|
|
71
160
|
var(--mirai-ui-space-M);
|
|
72
161
|
}
|
|
73
162
|
|
|
163
|
+
.home .wrapper {
|
|
164
|
+
gap: var(--mirai-ui-space-L);
|
|
165
|
+
}
|
|
166
|
+
|
|
74
167
|
.home .slogan {
|
|
75
|
-
font-size: calc(var(--mirai-ui-font-size-headline-1) * 1.
|
|
76
|
-
line-height: calc(var(--mirai-ui-line-height-headline-1) * 1.
|
|
168
|
+
font-size: calc(var(--mirai-ui-font-size-headline-1) * 1.66);
|
|
169
|
+
line-height: calc(var(--mirai-ui-line-height-headline-1) * 1.66);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.home .backgroundImage {
|
|
173
|
+
background-image: url('https://framerusercontent.com/images/wMnYXmJb2xSPIDf60AukEywhD8A.jpg?scale-down-to=960');
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.texts {
|
|
177
|
+
gap: var(--mirai-ui-space-M);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.image.square {
|
|
181
|
+
min-height: 90svw;
|
|
182
|
+
min-width: 90svw;
|
|
77
183
|
}
|
|
78
184
|
|
|
79
185
|
[data-mirai-component='finder'].inHome {
|
|
186
|
+
margin-top: calc(var(--mirai-ui-space-XXL) * -1);
|
|
80
187
|
padding: var(--mirai-ui-space-M);
|
|
81
188
|
width: 90vw;
|
|
82
189
|
}
|
|
83
190
|
}
|
|
84
191
|
|
|
85
192
|
@media only screen and (min-width: 431px) {
|
|
193
|
+
.section {
|
|
194
|
+
padding: var(--mirai-ui-space-XXL) var(--mirai-ui-space-M);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.section.accent.testimonials {
|
|
198
|
+
gap: var(--mirai-ui-space-XXL);
|
|
199
|
+
padding: var(--mirai-ui-space-XXL) 0 var(--mirai-ui-space-XXL) var(--mirai-ui-space-XXL);
|
|
200
|
+
}
|
|
201
|
+
|
|
86
202
|
.home {
|
|
87
|
-
|
|
203
|
+
min-height: 66svh;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.home .wrapper {
|
|
207
|
+
gap: var(--mirai-ui-space-XL);
|
|
88
208
|
}
|
|
89
209
|
|
|
90
210
|
.home .slogan {
|
|
91
|
-
font-size: calc(var(--mirai-ui-font-size-headline-1) *
|
|
92
|
-
line-height: calc(var(--mirai-ui-line-height-headline-1) *
|
|
211
|
+
font-size: calc(var(--mirai-ui-font-size-headline-1) * 3);
|
|
212
|
+
line-height: calc(var(--mirai-ui-line-height-headline-1) * 3);
|
|
213
|
+
max-width: calc(var(--mirai-ui-breakpoint-content) * 0.8);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.home .backgroundImage {
|
|
217
|
+
background-image: url('https://framerusercontent.com/images/wMnYXmJb2xSPIDf60AukEywhD8A.jpg?scale-down-to=1920');
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.home .pitch {
|
|
221
|
+
max-width: 50%;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.texts {
|
|
225
|
+
gap: var(--mirai-ui-space-L);
|
|
226
|
+
max-width: 50%;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.image.square {
|
|
230
|
+
min-height: var(--mirai-ui-breakpoint-S);
|
|
231
|
+
min-width: var(--mirai-ui-breakpoint-S);
|
|
93
232
|
}
|
|
94
233
|
|
|
95
234
|
[data-mirai-component='finder'].inHome {
|
|
235
|
+
margin-top: calc(var(--mirai-ui-space-XL) * -1);
|
|
96
236
|
padding: var(--mirai-ui-space-L);
|
|
97
237
|
}
|
|
98
238
|
}
|
|
@@ -11,13 +11,19 @@
|
|
|
11
11
|
--mirai-ui-font-brand-weight: 700;
|
|
12
12
|
|
|
13
13
|
/* palette */
|
|
14
|
-
--mirai-ui-accent: #c5a880;
|
|
14
|
+
/* --mirai-ui-accent: #c5a880; */
|
|
15
|
+
/* --mirai-ui-accent: #ffc20e; */
|
|
16
|
+
--mirai-ui-accent: #f0a42b;
|
|
17
|
+
/* --mirai-ui-accent: #1607f2; */
|
|
15
18
|
|
|
16
19
|
/* border */
|
|
20
|
+
/* --mirai-ui-border-radius: var(--mirai-ui-space-XS); */
|
|
17
21
|
--mirai-ui-border-radius: var(--mirai-ui-space-XS);
|
|
18
22
|
|
|
19
23
|
/* Button */
|
|
20
24
|
--mirai-ui-button-font-weight: 600;
|
|
25
|
+
/* --mirai-ui-button-color: var(--mirai-ui-content); */
|
|
26
|
+
/* --mirai-ui-button-color-hover: var(--mirai-ui-base); */
|
|
21
27
|
}
|
|
22
28
|
|
|
23
29
|
body {
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import { Icon, Text, useDevice, View } from '@mirai/ui';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import React from 'react';
|
|
4
|
-
|
|
5
|
-
import * as style from './Benefits.module.css';
|
|
6
|
-
import { ICON } from '../../../src/components/helpers';
|
|
7
|
-
|
|
8
|
-
const Benefits = ({ ...others }) => {
|
|
9
|
-
const { isMobile } = useDevice();
|
|
10
|
-
|
|
11
|
-
const item = { row: isMobile };
|
|
12
|
-
const icon = { accent: true, headline: true, level: isMobile ? 2 : 1 };
|
|
13
|
-
const text = { action: !isMobile, small: isMobile };
|
|
14
|
-
|
|
15
|
-
return (
|
|
16
|
-
<View {...others} row={!isMobile} className={style.container}>
|
|
17
|
-
<View className={style.highlight}>
|
|
18
|
-
<Text bold headline level={isMobile ? 2 : 1} className={[style.logo, style.text]}>
|
|
19
|
-
Monalisa
|
|
20
|
-
</Text>
|
|
21
|
-
<Text action={isMobile} className={style.text}>
|
|
22
|
-
Choose CLUB MEMBER rate, join and enjoy Web Bonus, special benefits for members!
|
|
23
|
-
</Text>
|
|
24
|
-
</View>
|
|
25
|
-
|
|
26
|
-
<view>
|
|
27
|
-
<View row={!isMobile} className={style.list}>
|
|
28
|
-
<View {...item}>
|
|
29
|
-
<Icon {...icon} value={ICON.PERSON} />
|
|
30
|
-
<Text {...text}>Always up to 10% off in all your bookings</Text>
|
|
31
|
-
</View>
|
|
32
|
-
|
|
33
|
-
<View {...item}>
|
|
34
|
-
<Icon {...icon} value={ICON.OFFER} />
|
|
35
|
-
<Text {...text}>5 D$ reward on your web bookings guaranteed</Text>
|
|
36
|
-
</View>
|
|
37
|
-
|
|
38
|
-
<View {...item}>
|
|
39
|
-
<Icon {...icon} value={ICON.CALENDAR_EDIT} />
|
|
40
|
-
<Text {...text}>Free late check-out on Sundays upon request</Text>
|
|
41
|
-
</View>
|
|
42
|
-
|
|
43
|
-
<View {...item}>
|
|
44
|
-
<Icon {...icon} value={ICON.BED_DOUBLE} />
|
|
45
|
-
<Text {...text}>Choose your room for free</Text>
|
|
46
|
-
</View>
|
|
47
|
-
</View>
|
|
48
|
-
|
|
49
|
-
<Text small={isMobile}>
|
|
50
|
-
You will be able to login or sign up in the next step of the booking process.{' '}
|
|
51
|
-
<Text accent tiny={isMobile}>
|
|
52
|
-
More information
|
|
53
|
-
</Text>
|
|
54
|
-
</Text>
|
|
55
|
-
</view>
|
|
56
|
-
</View>
|
|
57
|
-
);
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
Benefits.propTypes = {
|
|
61
|
-
dangerousChildren: PropTypes.any,
|
|
62
|
-
dataSource: PropTypes.shape({}),
|
|
63
|
-
increments: PropTypes.shape({}),
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
export { Benefits };
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
.container {
|
|
2
|
-
align-items: normal;
|
|
3
|
-
background-color: var(--mirai-ui-base);
|
|
4
|
-
border-radius: var(--mirai-ui-border-radius);
|
|
5
|
-
border: solid 1px var(--mirai-ui-accent);
|
|
6
|
-
overflow: hidden;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.highlight {
|
|
10
|
-
background-color: var(--mirai-ui-accent);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.highlight .logo {
|
|
14
|
-
font-family: var(--mirai-ui-font-brand);
|
|
15
|
-
font-weight: var(--mirai-ui-font-brand-weight);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.highlight .text {
|
|
19
|
-
color: var(--mirai-ui-base);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.list {
|
|
23
|
-
align-items: flex-start;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.list > * {
|
|
27
|
-
flex: 1;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
/* S */
|
|
31
|
-
@media only screen and (max-width: 430px) {
|
|
32
|
-
.container > * {
|
|
33
|
-
gap: var(--mirai-ui-space-XS);
|
|
34
|
-
padding: var(--mirai-ui-space-S);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.list {
|
|
38
|
-
gap: calc(var(--mirai-ui-space-XS) / 2);
|
|
39
|
-
margin-bottom: var(--mirai-ui-space-S);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.list > * {
|
|
43
|
-
gap: var(--mirai-ui-space-XS);
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
/* M & L */
|
|
48
|
-
@media only screen and (min-width: 431px) {
|
|
49
|
-
.container > * {
|
|
50
|
-
gap: var(--mirai-ui-space-M);
|
|
51
|
-
padding: var(--mirai-ui-space-L);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.highlight {
|
|
55
|
-
max-width: 33%;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.list {
|
|
59
|
-
gap: var(--mirai-ui-space-L);
|
|
60
|
-
margin-bottom: var(--mirai-ui-space-L);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.list > * {
|
|
64
|
-
gap: var(--mirai-ui-space-S);
|
|
65
|
-
}
|
|
66
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './Benefits';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './Benefits';
|