iceholidays-frontend 0.3.0 → 0.5.0

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.
Files changed (108) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/stylesheets/iceholidays/frontend/actiontext.scss +119 -0
  3. data/app/assets/stylesheets/iceholidays/frontend/application.sass.scss +2194 -0
  4. data/app/assets/stylesheets/iceholidays/frontend/common.scss +317 -0
  5. data/app/assets/stylesheets/iceholidays/frontend/layout.scss +281 -0
  6. data/app/assets/stylesheets/iceholidays/frontend/utils/_antd_overrides.scss +122 -0
  7. data/app/assets/stylesheets/iceholidays/frontend/utils/_variables.scss +4 -0
  8. data/app/assets/stylesheets/iceholidays/frontend/widgets/filter_pills.scss +52 -0
  9. data/app/assets/stylesheets/iceholidays/frontend/widgets/search_bar.scss +116 -0
  10. data/app/controllers/iceholidays/frontend/posts_controller.rb +14 -0
  11. data/app/controllers/iceholidays/frontend/site_controller.rb +32 -0
  12. data/app/javascript/api-services/agents-api.service.ts +33 -0
  13. data/app/javascript/api-services/banners-api.service.ts +28 -0
  14. data/app/javascript/api-services/locations-api.service.ts +71 -0
  15. data/app/javascript/api-services/search-api.service.ts +16 -0
  16. data/app/javascript/api-services/series-api.service.ts +64 -0
  17. data/app/javascript/api-services/testimonials-api.service.ts +27 -0
  18. data/app/javascript/interfaces/agent.interface.ts +11 -0
  19. data/app/javascript/interfaces/banner.interface.ts +10 -0
  20. data/app/javascript/interfaces/country.interface.ts +19 -0
  21. data/app/javascript/interfaces/itinerary.interface.ts +111 -0
  22. data/app/javascript/interfaces/testimonial.interface.ts +6 -0
  23. data/app/javascript/react/App.tsx +32 -0
  24. data/app/javascript/react/components/Destinations.tsx +84 -143
  25. data/app/javascript/react/components/PriceDetails.tsx +146 -0
  26. data/app/javascript/react/components/Testimonials.tsx +68 -61
  27. data/app/javascript/react/components/shared/ContactAgentsForm.tsx +44 -0
  28. data/app/javascript/react/components/shared/Headline.tsx +30 -0
  29. data/app/javascript/react/components/shared/LocationDropdown.tsx +34 -0
  30. data/app/javascript/react/components/shared/LocationPostcards.tsx +52 -0
  31. data/app/javascript/react/components/shared/RibbonSection.tsx +21 -0
  32. data/app/javascript/react/index.js +3 -5
  33. data/app/javascript/react/layouts/MainFooter.tsx +97 -0
  34. data/app/javascript/react/layouts/MainHeader.tsx +83 -0
  35. data/app/javascript/react/layouts/MainLayout.tsx +21 -0
  36. data/app/javascript/react/pages/AboutUsPage.tsx +95 -0
  37. data/app/javascript/react/pages/BlogPage.tsx +81 -0
  38. data/app/javascript/react/pages/BlogShowPage.tsx +43 -0
  39. data/app/javascript/react/pages/ContactAgentsPage.tsx +185 -0
  40. data/app/javascript/react/pages/ContactUsPage.tsx +122 -0
  41. data/app/javascript/react/pages/CountriesPage.tsx +57 -0
  42. data/app/javascript/react/pages/Homepage.tsx +100 -0
  43. data/app/javascript/react/pages/ListingPage.tsx +292 -0
  44. data/app/javascript/react/pages/ShowPage.tsx +402 -0
  45. data/app/javascript/react/widgets/FilterPills.tsx +111 -0
  46. data/app/javascript/react/widgets/SearchBarWidget.tsx +58 -0
  47. data/app/views/iceholidays/frontend/posts/index.html.erb +9 -0
  48. data/app/views/iceholidays/frontend/posts/show.html.erb +2 -0
  49. data/app/views/iceholidays/frontend/site/index.html.erb +1 -24
  50. data/app/views/layouts/iceholidays/frontend/application.html.erb +2 -6
  51. data/config/routes.rb +10 -0
  52. data/lib/iceholidays/frontend/version.rb +1 -1
  53. data/public/iceholidays-assets/application.css +2638 -0
  54. data/public/iceholidays-assets/application.js +212 -651
  55. data/public/iceholidays-assets/application.js.map +4 -4
  56. data/public/iceholidays-assets/images/about-us_logo_mobile.png +0 -0
  57. data/public/iceholidays-assets/images/about_us.png +0 -0
  58. data/public/iceholidays-assets/images/about_us2.png +0 -0
  59. data/public/iceholidays-assets/images/blog.png +0 -0
  60. data/public/iceholidays-assets/images/blog1.png +0 -0
  61. data/public/iceholidays-assets/images/certificate1.png +0 -0
  62. data/public/iceholidays-assets/images/certificate2.png +0 -0
  63. data/public/iceholidays-assets/images/china_southern_airlines.png +0 -0
  64. data/public/iceholidays-assets/images/china_southern_airlines_icon.png +0 -0
  65. data/public/iceholidays-assets/images/competitiveness.png +0 -0
  66. data/public/iceholidays-assets/images/contact_agents.png +0 -0
  67. data/public/iceholidays-assets/images/contact_us.png +0 -0
  68. data/public/iceholidays-assets/images/contact_us_form.png +0 -0
  69. data/public/iceholidays-assets/images/destinations_logo.png +0 -0
  70. data/public/iceholidays-assets/images/ethical.png +0 -0
  71. data/public/iceholidays-assets/images/footer-bg_mobile.png +0 -0
  72. data/public/iceholidays-assets/images/hw_logo.png +0 -0
  73. data/public/iceholidays-assets/images/innovative.png +0 -0
  74. data/public/iceholidays-assets/images/logo_mobile.png +0 -0
  75. data/public/iceholidays-assets/images/plane.png +0 -0
  76. data/public/iceholidays-assets/images/social/ico_fb.png +0 -0
  77. data/public/iceholidays-assets/images/social/ico_ig.png +0 -0
  78. data/public/iceholidays-assets/images/social/ico_twitter.png +0 -0
  79. data/public/iceholidays-assets/images/social/ico_yt.png +0 -0
  80. data/public/iceholidays-assets/images/social.png +0 -0
  81. metadata +74 -71
  82. data/app/assets/stylesheets/iceholidays/frontend/application.scss +0 -904
  83. data/app/javascript/react/components/Homepage.tsx +0 -15
  84. data/app/javascript/react/components/HomepageBanner.tsx +0 -62
  85. data/app/views/layouts/iceholidays/frontend/shared/_footer.html.erb +0 -42
  86. data/app/views/layouts/iceholidays/frontend/shared/_header.html.erb +0 -20
  87. data/public/iceholidays-assets/images/Frame71.png +0 -0
  88. data/public/iceholidays-assets/images/africa.png +0 -0
  89. data/public/iceholidays-assets/images/banner1.png +0 -0
  90. data/public/iceholidays-assets/images/banner2.png +0 -0
  91. data/public/iceholidays-assets/images/china.png +0 -0
  92. data/public/iceholidays-assets/images/china2.png +0 -0
  93. data/public/iceholidays-assets/images/guangzhou.png +0 -0
  94. data/public/iceholidays-assets/images/guilin.png +0 -0
  95. data/public/iceholidays-assets/images/harbin.png +0 -0
  96. data/public/iceholidays-assets/images/hongkong.png +0 -0
  97. data/public/iceholidays-assets/images/inner_mongolia.png +0 -0
  98. data/public/iceholidays-assets/images/jiangxi.png +0 -0
  99. data/public/iceholidays-assets/images/kenya.png +0 -0
  100. data/public/iceholidays-assets/images/kenya2.png +0 -0
  101. data/public/iceholidays-assets/images/kunming.png +0 -0
  102. data/public/iceholidays-assets/images/slikroad.png +0 -0
  103. data/public/iceholidays-assets/images/southafrica.png +0 -0
  104. data/public/iceholidays-assets/images/tanzania.png +0 -0
  105. data/public/iceholidays-assets/images/uganda.png +0 -0
  106. /data/public/iceholidays-assets/images/{Group_71.png → about-us_logo.png} +0 -0
  107. /data/public/iceholidays-assets/images/{chongqing.png → china_listings_cover.png} +0 -0
  108. /data/public/iceholidays-assets/images/{logo_container.png → logo.png} +0 -0
@@ -1,904 +0,0 @@
1
- /*
2
- * This is a manifest file that'll be compiled into application.css, which will include all the files
3
- * listed below.
4
- *
5
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
6
- * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
7
- *
8
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
9
- * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
10
- * files in this directory. Styles in this file should be added after the last require_* statement.
11
- * It is generally better to create a new file per style scope.
12
- *
13
- *= require_tree .
14
- *= require_self
15
- */
16
-
17
- @import url("//fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,200;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,200;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
18
- // @import "font-awesome.css";
19
-
20
- $font-default: Poppins, san-serif;
21
-
22
- .ant-tabs >.ant-tabs-nav{
23
- margin: 0;
24
- }
25
-
26
- .ant-tabs-nav {
27
- width: 100% !important;
28
- }
29
-
30
- .ant-tabs-card.ant-tabs-top >.ant-tabs-nav {
31
- .ant-tabs-tab {
32
- display: block; // centers text inside tabs
33
- flex: 1;
34
- text-align: center;
35
- justify-content: center;
36
- background: #FAFAFA;
37
- border-color: #EBEBEB;
38
- border-bottom-color: #DCB062;
39
-
40
- &+.ant-tabs-tab{
41
- margin:0;
42
- }
43
-
44
- .ant-tabs-tab-btn {
45
- text-transform: uppercase;
46
- font-family: $font-default;
47
- font-size: 20px;
48
- font-weight: 400;
49
- line-height: 30px;
50
- letter-spacing: 0.05em;
51
- text-align: center;
52
- text-underline-position: from-font;
53
- text-decoration-skip-ink: none;
54
- color: #DCB062;
55
- }
56
-
57
- &.ant-tabs-tab-active{
58
- background: linear-gradient(360deg, #F9E298 -1.58%, #DCB062 92.51%);
59
- z-index: 1;
60
- border-bottom-color: #DCB062;
61
- .ant-tabs-tab-btn {
62
- color: white !important;
63
- }
64
- }
65
- }
66
- }
67
-
68
- .ant-tabs-nav > div:nth-of-type(1) {
69
- display: unset !important;
70
- width: 100% !important;
71
- }
72
-
73
-
74
- [class~='ant-carousel'] {
75
- [class~='slick-dots'] {
76
- bottom: 30px;
77
-
78
- li {
79
- width: 15px !important;
80
-
81
- button{
82
- width: 13px;
83
- height: 13px;
84
- border-radius: 100%;
85
- background-color: transparent;
86
- border: 1px solid #FFFFFF;
87
- opacity: 1;
88
- }
89
-
90
- &.slick-active {
91
- button {
92
- width: 13px;
93
- height: 13px;
94
- border-radius: 100%;
95
- background-color: white;
96
- }
97
- }
98
- }
99
- }
100
-
101
- .slick-prev,
102
- .slick-next{
103
- width: unset;
104
- height: unset;
105
-
106
- &::after{
107
- display: none;
108
- }
109
- }
110
-
111
- }
112
-
113
- body{
114
- margin: 0;
115
- background: #F2F2F2;
116
- font-family: Poppins, sans-serif;
117
- }
118
-
119
- #header{
120
- position: relative;
121
- background: linear-gradient(241.37deg, #D1AC6E -108.33%, #D1AC6E -14.72%, #F9E298 -2.73%, #B68B31 108.18%);
122
- width: 100%;
123
- height: 50px;
124
- display: flex;
125
- align-items: center;
126
- justify-content: space-around;
127
- }
128
-
129
- #header>div{
130
- display: flex;
131
- align-items: center;
132
- justify-content: space-around;
133
- }
134
-
135
- .nav-menu{
136
- /* position: absolute; */
137
- display: grid;
138
- grid-template-columns: auto auto auto auto;
139
- }
140
-
141
- .nav-menu a{
142
- color: white;
143
- text-transform: uppercase;
144
- font-family: $font-default;
145
- font-size: 16px;
146
- font-weight: 500;
147
- line-height: 24px;
148
- letter-spacing: 0.05em;
149
- text-align: left;
150
- text-underline-position: from-font;
151
- text-decoration-skip-ink: none;
152
-
153
- }
154
-
155
- #left-menu{
156
- top: 13px;
157
- left: 183px;
158
- gap: 35px;
159
- opacity: 0px;
160
- }
161
-
162
- .logo{
163
- width: 304px;
164
- height: 66px;
165
- left: 568px;
166
- gap: 0px;
167
- opacity: 0px;
168
- z-index: 2;
169
- }
170
-
171
- #right-menu{
172
- top: 13px;
173
- left: 877px;
174
- gap: 35px;
175
- opacity: 0px;
176
- }
177
-
178
- #get-brochure{
179
- position: absolute;
180
- width: 152px;
181
- /* height: 35px; */
182
- top: 4px;
183
- left: 1247px;
184
- padding: 7px 8px 7px 8px;
185
- gap: 7px;
186
- border-radius: 20px;
187
- border: 1px 0px 0px 0px;
188
- opacity: 0px;
189
- background: linear-gradient(287.63deg, #D1AC6E -19.9%, #D1AC6E 10.87%, #F9E298 26.63%, #B68B31 93.91%);
190
- border: 1px solid;
191
- border-image-source: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(42, 42, 42, 0.5) 100%);
192
- box-shadow: 0px 3px 10px 0px #AA853E80;
193
- box-shadow: 0px 4px 4px 0px #F9F6F31A inset;
194
- text-align: center;
195
- text-transform: uppercase;
196
- }
197
-
198
- #get-brochure span{
199
- font-family: $font-default;
200
- font-size: 14px;
201
- font-weight: 500;
202
- line-height: 21px;
203
- letter-spacing: 0.05em;
204
- text-align: left;
205
- text-underline-position: from-font;
206
- text-decoration-skip-ink: none;
207
- }
208
-
209
- #search-bar{
210
- width: 738px;
211
- height: 84px;
212
- top: 50px;
213
- left: 349px;
214
- gap: 0px;
215
- opacity: 0px;
216
- position: absolute;
217
- display: flex;
218
- justify-content: center;
219
- z-index: 1;
220
- }
221
-
222
- #search-bar-widget{
223
- width: 427px;
224
- height: 60px;
225
- padding: 10px 0px 15px 0px;
226
- gap: 7px;
227
- opacity: 0px;
228
- background: #F7F4EB;
229
-
230
- .ant-space{
231
- justify-content: center;
232
- width: 100%;
233
- }
234
-
235
- .ant-form-item{
236
- margin: 0;
237
-
238
- .ant-form-item-label{
239
- padding-bottom: 3px;
240
-
241
- label{
242
- font-family: Poppins;
243
- font-size: 12px;
244
- font-weight: 400;
245
- line-height: 16.5px;
246
- letter-spacing: 0.05em;
247
- text-align: left;
248
- text-underline-position: from-font;
249
- text-decoration-skip-ink: none;
250
- }
251
- }
252
- }
253
-
254
- .search-button{
255
- background: #AA853E;
256
- border-radius: 20px;
257
-
258
- span{
259
- font-family: Poppins;
260
- font-size: 12px;
261
- font-weight: 600;
262
- line-height: 18px;
263
- text-align: center;
264
- text-underline-position: from-font;
265
- text-decoration-skip-ink: none;
266
-
267
- }
268
- }
269
-
270
- .ant-picker .ant-picker-input span.ant-picker-suffix {
271
- margin-left: 1px;
272
- margin-right: 10px;
273
- order: -1;
274
- color: #AA853E;
275
- }
276
- }
277
-
278
-
279
- .flip{
280
- -webkit-transform: scaleX(-1);
281
- transform: scaleX(-1);
282
- }
283
-
284
- #homepage-banner{
285
- width: 1440px;
286
- height: 760px;
287
- gap: 0px;
288
- border-radius: 0px 0px 50px 50px;
289
- opacity: 0px;
290
- /* position: relative; */
291
-
292
-
293
-
294
- [class~='ant-carousel'] {
295
- .slick-prev{
296
- inset-inline-start: 115px;
297
- }
298
- .slick-next{
299
- inset-inline-end: 115px;
300
- }
301
-
302
- }
303
-
304
-
305
- }
306
-
307
- #tagline{
308
- width: 989.63px;
309
- height: 108.42px;
310
- top: 304px;
311
- left: 223.69px;
312
- gap: 0px;
313
- opacity: 0px;
314
- position: absolute;
315
- text-align: center;
316
- }
317
-
318
- #tagline span{
319
- font-family: $font-default;
320
- font-size: 45px;
321
- font-weight: 600;
322
- line-height: 69px;
323
- letter-spacing: 0.01em;
324
- text-align: center;
325
- text-underline-position: from-font;
326
- text-decoration-skip-ink: none;
327
- color: #FFFFFF;
328
- text-transform: uppercase;
329
-
330
- }
331
-
332
- #popular-destinations{
333
- margin: auto;
334
- width: 80%;
335
- }
336
-
337
- #popular-destinations h1{
338
- font-family: $font-default;
339
- font-size: 45px;
340
- font-weight: 200;
341
- line-height: 67.5px;
342
- text-align: center;
343
- text-underline-position: from-font;
344
- text-decoration-skip-ink: none;
345
- text-transform: uppercase;
346
- color: #545047;
347
- }
348
-
349
-
350
- .top-cities h2{
351
- font-family: $font-default;
352
- font-size: 30px;
353
- font-weight: 600;
354
- line-height: 45px;
355
- letter-spacing: 0.05em;
356
- text-align: left;
357
- text-underline-position: from-font;
358
- text-decoration-skip-ink: none;
359
-
360
- }
361
-
362
- #city-group{
363
- display: grid;
364
- grid-template-columns: repeat(2, 1fr);
365
- grid-template-rows: repeat(2, 1fr);
366
- gap: 20px;
367
- }
368
-
369
- .top-cities .city-cover{
370
- border-radius: 20px;
371
- overflow: hidden;
372
- }
373
-
374
- .city-cover{
375
- width: 540px;
376
-
377
- img{
378
- width: 100%;
379
- height: 230.5px;
380
- gap: 0px;
381
- opacity: 0px;
382
- border-top-left-radius: 20px;
383
- border-top-right-radius: 20px;
384
- display: block;
385
- object-fit: cover;
386
- object-position: top center;
387
- transition: transform 0.4s ease;
388
- transform-origin: 50% 100%;
389
- &:hover{
390
- transform: scale(1.2);
391
- width: 100%;
392
- }
393
- }
394
-
395
- }
396
-
397
- .top-cities .city-details{
398
- /* width: Fill (540px)px;
399
- height: Hug (54px)px; */
400
- padding: 12px 20px 12px 20px;
401
- gap: 0px;
402
- border: 1px 0px 0px 0px;
403
- justify-content: space-between;
404
- align-items: center;
405
- opacity: 0px;
406
- background: #DCB062;
407
- display: flex;;
408
- border-bottom-left-radius: 20px;
409
- border-bottom-right-radius: 20px;
410
- }
411
-
412
- .city-details .city-name{
413
- font-family: $font-default;
414
- font-size: 20px;
415
- font-weight: 400;
416
- line-height: 30px;
417
- letter-spacing: 0.05em;
418
- text-align: left;
419
- text-underline-position: from-font;
420
- text-decoration-skip-ink: none;
421
- text-transform: uppercase;
422
- color: #FFFFFF;
423
- }
424
-
425
- .city-details .tour-count{
426
- font-family: $font-default;
427
- font-size: 14px;
428
- font-weight: 400;
429
- line-height: 21px;
430
- letter-spacing: 0.05em;
431
- text-align: right;
432
- text-underline-position: from-font;
433
- text-decoration-skip-ink: none;
434
- color: #FFFFFF;
435
- cursor: pointer;
436
-
437
- }
438
-
439
- .country-info {
440
- position: relative;
441
-
442
- .country-image{
443
- width: 100%;
444
- height: 392px;
445
- object-fit: cover;
446
- object-position: center;
447
- border-width: 5px 0px 5px 0px;
448
- border-style: solid;
449
- border-color: #DCB062;
450
- border-radius: 20px;
451
- }
452
-
453
- .country-name{
454
- width: 160px;
455
- height: 71px;
456
- top: 58px;
457
- left: 45px;
458
- gap: 0px;
459
- opacity: 0px;
460
- position: absolute;
461
- }
462
-
463
- .bottom-logo{
464
- position: absolute;
465
- bottom: -40px;
466
- border-color: #F2F2F2;
467
- left: 0;
468
- width: 100%;
469
- }
470
- }
471
- #testimonial{
472
- background: #F7F4EB;
473
- margin-top: 100px;
474
-
475
- }
476
-
477
- #testimonial #testimonial-header{
478
- height: 138px;
479
- gap: 0px;
480
- opacity: 0px;
481
- text-align: center;
482
- position: relative;
483
- }
484
-
485
- #testimonial #testimonial-header>span{
486
- font-family: $font-default;
487
- font-size: 45px;
488
- font-weight: 200;
489
- line-height: 67.5px;
490
- letter-spacing: 0.06em;
491
- text-underline-position: from-font;
492
- text-decoration-skip-ink: none;
493
- color: #5B4713;
494
- text-transform: uppercase;
495
-
496
- position: absolute;
497
- bottom: 20px;
498
- left: 50%;
499
- transform: translate(-50%, 20px);
500
- }
501
-
502
- #testimonials{
503
- // display: grid;
504
- // gap: 20px;
505
- // grid-template-columns: auto auto auto;
506
- max-width: 1099px;
507
- margin: auto;
508
- padding: 50px 170px 70px 170px;
509
- // gap: 20px;
510
-
511
-
512
- [class~='ant-carousel'] {
513
- .slick-prev,
514
- .slick-next{
515
- color: #959492;
516
-
517
- &:hover{
518
- color: #DFB163;
519
- }
520
- }
521
- }
522
- }
523
- .testimonial{
524
- height: 383px;
525
- padding: 10px 18px 20px 18px;
526
- // gap: 15px;
527
- border-radius: 20px;
528
- opacity: 0px;
529
- background: #FFFFFF;
530
- box-shadow: 0px 5px 20px 0px #E1B65B33;
531
- text-align: center;
532
- display: grid !important;
533
- }
534
-
535
- .stars-icon{
536
- width: 92px;
537
- height: 32px;
538
- gap: 0px;
539
- opacity: 0px;
540
- margin: auto;
541
-
542
- }
543
-
544
- .itinerary-summary{
545
- width: 100%;
546
- height: 56px;
547
- padding: 10px;
548
- gap: 10px;
549
- border-radius: 10px;
550
- opacity: 0px;
551
- background: linear-gradient(270deg, #F9E298 0%, #FFFDF5 117.76%);
552
- box-shadow: 0px 7px 16.7px 0px #E1B65B80;
553
- box-sizing: border-box;
554
- display: inline-flex;
555
- align-items: center;
556
-
557
-
558
- }
559
- .itinerary-summary img{
560
- width: 28.46px;
561
- height: 26.5px;
562
-
563
- }
564
- .itinerary-summary span{
565
- font-family: $font-default;
566
- font-size: 12px;
567
- font-weight: 500;
568
- line-height: 18px;
569
- text-align: left;
570
- text-underline-position: from-font;
571
- text-decoration-skip-ink: none;
572
- color: #AA853E;
573
- width: 100%;
574
- display: block;
575
-
576
-
577
- }
578
-
579
- .comment span{
580
- font-family: $font-default;
581
- font-size: 14px;
582
- font-style: italic;
583
- font-weight: 200;
584
- line-height: 21px;
585
- text-align: center;
586
- text-underline-position: from-font;
587
- text-decoration-skip-ink: none;
588
-
589
- }
590
-
591
- .customer-name {
592
- display: inline-flex;
593
- align-items: center;
594
- justify-content: center;
595
- gap: 10px;
596
-
597
- .author-icon{
598
- color: rgba(0, 0, 0, 0.8);
599
- width: 20px;
600
- height: 20px;
601
- }
602
- span{
603
- font-family: $font-default;
604
- font-size: 20px;
605
- font-weight: 400;
606
- line-height: 30px;
607
- letter-spacing: 0.05em;
608
- text-align: left;
609
- text-underline-position: from-font;
610
- text-decoration-skip-ink: none;
611
-
612
- }
613
- }
614
- .more-cities h2{
615
- font-family: $font-default;
616
- font-size: 30px;
617
- font-weight: 600;
618
- line-height: 45px;
619
- letter-spacing: 0.05em;
620
- text-align: left;
621
- text-underline-position: from-font;
622
- text-decoration-skip-ink: none;
623
-
624
- }
625
-
626
- .other-destinations{
627
- display: inline-flex;
628
- gap: 10px;
629
-
630
- a{
631
- font-family: $font-default;
632
- font-size: 18px;
633
- font-weight: 400;
634
- line-height: 27px;
635
- letter-spacing: 0.05em;
636
- text-align: left;
637
- text-underline-position: from-font;
638
- text-decoration-skip-ink: none;
639
- background: linear-gradient(360deg, #DCB062 5.04%, #F9E298 99.13%);
640
- color: #836848;
641
-
642
- width: auto;
643
- padding: 5px 15px;
644
- gap: 4px;
645
- border-radius: 20px;
646
- opacity: 0px;
647
-
648
- }
649
- }
650
-
651
- .other-tours{
652
- display: inline-flex;
653
- gap: 10px;
654
- margin-top: 30px;
655
-
656
- .tour-story{
657
- width: 220px;
658
- height: 352px;
659
- padding: 15px 0px 0px 0px;
660
- gap: 0px;
661
- border-radius: 20px;
662
- opacity: 0px;
663
- object-fit: cover;
664
- position: relative;
665
- background-size: cover;
666
- position: relative;
667
- background-position: top;
668
- background-color: linear-gradient(
669
- rgba(0, 0, 0, 0.5),
670
- rgba(0, 0, 0, 0.5)
671
- );
672
-
673
- .tour-detail{
674
- position: absolute;
675
- display: flex;
676
- justify-content: space-between;
677
- align-items: flex-end;
678
- bottom: 10px;
679
- width: 80%;
680
- left: 20px;
681
- }
682
-
683
- .city-name{
684
- font-family: $font-default;
685
- font-size: 20px;
686
- font-weight: 400;
687
- line-height: 30px;
688
- letter-spacing: 0.05em;
689
- text-align: left;
690
- text-underline-position: from-font;
691
- text-decoration-skip-ink: none;
692
- color: #F9E298;
693
- }
694
-
695
- .tour-count{
696
- width: 45px;
697
- font-family: $font-default;
698
- font-size: 12px;
699
- font-weight: 400;
700
- line-height: 21px;
701
- letter-spacing: 0.05em;
702
- text-align: right;
703
- text-underline-position: from-font;
704
- text-decoration-skip-ink: none;
705
- color: #FFFFFF;
706
- }
707
-
708
- }
709
- }
710
- #about-signature-tours{
711
- width: 1440px;
712
- height: 597px;
713
- gap: 0px;
714
- opacity: 0px;
715
- display: flex;
716
- flex-direction: column;
717
- align-items: center;
718
- }
719
- #about-signature-tours > div{
720
- max-width: 970px;
721
- }
722
-
723
- #about-signature-tours h1{
724
- font-family: $font-default;
725
- font-size: 45px;
726
- font-weight: 200;
727
- line-height: 67.5px;
728
- letter-spacing: 0.06em;
729
- text-align: center;
730
- text-underline-position: from-font;
731
- text-decoration-skip-ink: none;
732
- color: #545047;
733
- margin-top: 55px;
734
-
735
- }
736
-
737
- #about-st-feature{
738
- display: flex;
739
- align-items: center;
740
- justify-content: space-between;
741
- }
742
- #feature> img{
743
- width: 419px;
744
- height: 183.24px;
745
- gap: 0px;
746
- border-radius: 20px;
747
- opacity: 0px;
748
- border: 3px solid #FFFFFF;
749
-
750
- object-fit: cover;
751
- object-position: 50% 33%;
752
- display: block;
753
- box-sizing: border-box;
754
- }
755
-
756
- #st-brand{
757
- display: flex;
758
- justify-content: space-between;
759
- align-items: center;
760
- }
761
-
762
- #st-brand span{
763
- font-family: $font-default;
764
- font-size: 20px;
765
- font-weight: 400;
766
- line-height: 30px;
767
- letter-spacing: 0.05em;
768
- text-align: left;
769
- text-underline-position: from-font;
770
- text-decoration-skip-ink: none;
771
-
772
- }
773
- #st-brand #st-logo{
774
- width: 47px;
775
- height: 43.76px;
776
- gap: 0px;
777
- opacity: 0px;
778
- }
779
-
780
- #about-signature-tours #feature{
781
- width: 419px;
782
- height: 246px;
783
- gap: 0px;
784
- border-radius: 20px;
785
- opacity: 0px;
786
- background: #FFFFFF;
787
- box-shadow: 0px 5px 20px 0px #00000026;
788
- }
789
-
790
- #about-signature-tours p{
791
- font-family: $font-default;
792
- font-size: 18px;
793
- font-weight: 200;
794
- line-height: 27px;
795
- letter-spacing: 0.05em;
796
- text-align: left;
797
- text-underline-position: from-font;
798
- text-decoration-skip-ink: none;
799
- color: #545047;
800
- margin: 20px 0;
801
- display: block;
802
-
803
- }
804
-
805
- #st-brand{
806
- padding: 5px 23px 0px 12px;
807
- }
808
-
809
- #footer{
810
- width: 1440px;
811
- height: 321px;
812
- gap: 0px;
813
- opacity: 0px;
814
- background: linear-gradient(270deg, #AA853E 0%, #F9E298 33.5%, #FFF3A6 50%, #F9E298 65.5%, #E1B65B 100%),
815
- linear-gradient(4.08deg, rgba(170, 133, 62, 0.5) -2.54%, rgba(249, 225, 151, 0.5) 7.02%);
816
- position: relative;
817
- }
818
-
819
- #footer .link-group-title{
820
- font-family: $font-default;
821
- font-size: 15px;
822
- font-weight: 400;
823
- line-height: 22.5px;
824
- letter-spacing: 0.05em;
825
- text-align: left;
826
- text-underline-position: from-font;
827
- text-decoration-skip-ink: none;
828
- color: #5B4713;
829
- height: 37px;
830
- grid-row-start: 2 span;
831
- }
832
-
833
- #footer-links{
834
- margin: auto;
835
- height: 196px;
836
- width: 70%;
837
- display: flex;
838
- align-items: center;
839
- justify-content: space-between;
840
- padding: 38px 0;
841
- }
842
-
843
- #footer-links > div{
844
- height: 100%;
845
- display: flex;
846
- flex-direction: column;
847
- justify-content: space-between;
848
- }
849
-
850
- #footer-links div:has(> a+a){
851
- display: grid;
852
- grid-template-columns: repeat(2, 1fr);
853
- grid-template-rows: repeat(4, 1fr);
854
- column-gap: 34px;
855
- }
856
-
857
- #footer-links a{
858
- font-family: $font-default;
859
- font-size: 18px;
860
- font-weight: 500;
861
- line-height: 36px;
862
- letter-spacing: 0.05em;
863
- text-align: left;
864
- text-underline-position: from-font;
865
- text-decoration-skip-ink: none;
866
- color: #AA853E;
867
- text-transform: uppercase;
868
-
869
-
870
- }
871
-
872
- #footer hr{
873
- width: 1120px;
874
- height: 0px;
875
- top: 258.34px;
876
- left: 160px;
877
- gap: 0px;
878
- border: 1px 0px 0px 0px;
879
- opacity: 0px;
880
- border: 1px solid #DFB16380;
881
- position: absolute;
882
- }
883
-
884
- #copyright{
885
- height: 17px;
886
- top: 282.28px;
887
- left: 592px;
888
- gap: 0px;
889
- opacity: 0px;
890
- position: absolute;
891
- }
892
- #copyright span{
893
- font-family: $font-default;
894
- font-size: 14px;
895
- font-weight: 400;
896
- line-height: 16.93px;
897
- letter-spacing: 0.05em;
898
- text-align: left;
899
- text-underline-position: from-font;
900
- text-decoration-skip-ink: none;
901
- color: #AA853E;
902
-
903
-
904
- }