diy-template-components 0.2.80 → 0.2.82

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 (5) hide show
  1. package/build/index.es.js +968 -1075
  2. package/build/index.es.js.map +1 -1
  3. package/build/index.js +968 -1075
  4. package/build/index.js.map +1 -1
  5. package/package.json +3 -3
package/build/index.js CHANGED
@@ -371,7 +371,7 @@ const buttonStyles = createUseStyles(theme => ({
371
371
  } = {}) => disabled ? colorMixer(theme?.palette?.primary.main, 0.5).color : theme?.palette?.primary?.main,
372
372
  border: ({
373
373
  disabled
374
- } = {}) => disabled ? `1px solid ${colorMixer(theme.palette.primary.main, 0.5).color}` : `1px solid ${theme?.palette?.primary?.main}`,
374
+ } = {}) => disabled ? `1px solid ${colorMixer(theme.palette.primary.main, 0.5).color}` : `1px solid ${theme.palette.primary.main}`,
375
375
  textDecoration: 'none',
376
376
  cursor: ({
377
377
  disabled
@@ -594,7 +594,7 @@ var menu = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20v
594
594
 
595
595
  var clpLogo = "478367302082f28d.svg";
596
596
 
597
- var videoPlay = "data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%200.5C3.86%200.5%200.5%203.86%200.5%208C0.5%2012.14%203.86%2015.5%208%2015.5C12.14%2015.5%2015.5%2012.14%2015.5%208C15.5%203.86%2012.14%200.5%208%200.5ZM6.5%2011.375V4.625L11%208L6.5%2011.375Z%22%20fill%3D%22%234E93FF%22%2F%3E%3C%2Fsvg%3E";
597
+ var videoPlay = "data:image/svg+xml,%3Csvg%20width%3D%2297%22%20height%3D%2266%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20%3E%3Cpath%20d%3D%22M8%200.5C3.86%200.5%200.5%203.86%200.5%208C0.5%2012.14%203.86%2015.5%208%2015.5C12.14%2015.5%2015.5%2012.14%2015.5%208C15.5%203.86%2012.14%200.5%208%200.5ZM6.5%2011.375V4.625L11%208L6.5%2011.375Z%22%20fill%3D%22%234E93FF%22%2F%3E%3C%2Fsvg%3E";
598
598
 
599
599
  var stockGrowth = "data:image/svg+xml,%3Csvg%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M44%205.5H4C3.18%205.5%202.5%204.82%202.5%204C2.5%203.18%203.18%202.5%204%202.5H44C44.82%202.5%2045.5%203.18%2045.5%204C45.5%204.82%2044.82%205.5%2044%205.5Z%22%20fill%3D%22%23549BF6%22%2F%3E%3Cpath%20d%3D%22M33.34%2044.68C33.08%2045.2%2032.54%2045.5%2032%2045.5C31.78%2045.5%2031.54%2045.44%2031.34%2045.34L24%2041.68L16.66%2045.34C16.46%2045.44%2016.22%2045.5%2016%2045.5C15.46%2045.5%2014.92%2045.2%2014.66%2044.68C14.28%2043.92%2014.58%2043.02%2015.34%2042.66L22.5%2039.08V34H25.5V39.08L32.66%2042.66C33.42%2043.02%2033.72%2043.92%2033.34%2044.68Z%22%20fill%3D%22%23549BF6%22%2F%3E%3Cpath%20d%3D%22M6%204V28.2C6%2032%208%2034%2011.8%2034H36.2C40%2034%2042%2032%2042%2028.2V4H6ZM33.96%2017.16L27.66%2022.42C27.08%2022.9%2026.34%2023.1%2025.64%2022.98C24.92%2022.86%2024.3%2022.42%2023.92%2021.78L21.82%2018.28L15.96%2023.16C15.68%2023.4%2015.34%2023.5%2015%2023.5C14.58%2023.5%2014.14%2023.32%2013.84%2022.96C13.3%2022.32%2013.4%2021.38%2014.04%2020.84L20.34%2015.58C20.92%2015.1%2021.66%2014.9%2022.36%2015.02C23.08%2015.14%2023.7%2015.58%2024.08%2016.22L26.18%2019.72L32.04%2014.84C32.68%2014.3%2033.62%2014.4%2034.16%2015.04C34.68%2015.68%2034.6%2016.62%2033.96%2017.16Z%22%20fill%3D%22%23549BF6%22%2F%3E%3C%2Fsvg%3E";
600
600
 
@@ -1927,99 +1927,20 @@ const palettes = {
1927
1927
  rust: rustPalette
1928
1928
  };
1929
1929
 
1930
- const baseFactor = 8;
1931
- const mobileMargin = {
1932
- tiny: baseFactor * 2,
1933
- small: baseFactor * 2,
1934
- regular: baseFactor * 3,
1935
- medium: baseFactor * 6
1936
- };
1937
- const margin = {
1938
- tiny: baseFactor * 4,
1939
- small: baseFactor * 4 * 2,
1940
- regular: baseFactor * 4 * 4,
1941
- medium: baseFactor * 4 * 6,
1942
- large: baseFactor * 4 * 8,
1943
- xLarge: baseFactor * 4 * 12
1944
- };
1945
- const mobilePadding = {
1946
- tiny: baseFactor * 2,
1947
- // 16px
1948
- small: baseFactor * 2,
1949
- //16px
1950
- regular: baseFactor * 3,
1951
- // 24px
1952
- medium: baseFactor * 6 // 48px
1953
- };
1954
-
1955
- const padding = {
1956
- minute: baseFactor * 2,
1957
- // 16px
1958
- tiny: baseFactor * 4,
1959
- // 32px
1960
- small: baseFactor * 4 * 2,
1961
- // 64px
1962
- xSmall: baseFactor * 3 * 3,
1963
- // 72px
1964
- regular: baseFactor * 4 * 3,
1965
- // 96 px
1966
- medium: baseFactor * 4 * 4,
1967
- // 128 px
1968
- large: baseFactor * 4 * 5,
1969
- // 160px
1970
- xLarge: baseFactor * 4 * 6 // 192px
1971
- };
1972
-
1973
- const fontSize = {
1974
- h1: 72,
1975
- h2: 56,
1976
- h3: 40,
1977
- h4: 32,
1978
- h5: 24,
1979
- h6: 20,
1980
- subHead: 16,
1981
- body: 14
1982
- };
1983
- const fontSizeMob = {
1984
- h1: 40,
1985
- h2: 20,
1986
- h3: 32,
1987
- h4: 16,
1988
- h5: 16,
1989
- h6: 14,
1990
- subHead: 14,
1991
- body: 14
1992
- };
1993
- const fontWeight = {
1994
- light: 300,
1995
- regular: 400,
1996
- medium: 500,
1997
- semiBold: 600,
1998
- bold: 700,
1999
- superBold: 900
2000
- };
2001
-
2002
- function getTheme(colorTheme = 'blue', fontFamily = 'Arial', isMobile) {
1930
+ function getTheme(colorTheme = 'blue', fontFamily = 'Arial') {
2003
1931
  const palette = palettes[colorTheme] || palettes['blue'];
2004
1932
  const typography = {
2005
- fontFamily: `"${fontFamily}", "Roboto", "Helvetica", "Arial", "sans-serif"`,
2006
- fontSize: isMobile ? fontSizeMob : fontSize,
2007
- fontWeight
1933
+ fontFamily: `"${fontFamily}", "Roboto", "Helvetica", "Arial", "sans-serif"`
2008
1934
  };
2009
1935
  const shape = {
2010
1936
  borderRadius
2011
1937
  };
2012
- const spacing = {
2013
- padding: isMobile ? mobilePadding : padding,
2014
- margin: isMobile ? mobileMargin : margin
2015
- };
2016
1938
  return {
2017
1939
  palette,
2018
1940
  shape,
2019
1941
  typography,
2020
1942
  shadows: generateShadows(palette),
2021
- borders: generateBorders(palette),
2022
- spacing
1943
+ borders: generateBorders(palette)
2023
1944
  };
2024
1945
  }
2025
1946
 
@@ -2223,22 +2144,17 @@ function PageRenderer$1({
2223
2144
  const useSectionStyles$8 = createUseStyles(theme => ({
2224
2145
  bannerCarouselRightSection: {
2225
2146
  position: 'relative',
2226
- padding: ({
2227
- isMobile
2228
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
2229
- backgroundColor: theme?.palette?.background?.primary,
2230
2147
  '&, & *, & *:before, & *:after': {
2231
2148
  fontFamily: theme?.typography?.fontFamily,
2232
2149
  boxSizing: 'border-box'
2150
+ },
2151
+ '& h2,& h3': {
2152
+ fontWeight: '500',
2153
+ '& b,& strong': {
2154
+ fontWeight: '700'
2155
+ }
2233
2156
  }
2234
- // '& h2,& h3': {
2235
- // fontWeight: '500',
2236
- // '& b,& strong': {
2237
- // fontWeight: '700'
2238
- // }
2239
- // }
2240
2157
  },
2241
-
2242
2158
  sectionContainer: {
2243
2159
  margin: '0 auto',
2244
2160
  maxWidth: ({
@@ -2251,19 +2167,24 @@ const useSectionStyles$8 = createUseStyles(theme => ({
2251
2167
  justifyContent: 'center',
2252
2168
  position: 'relative'
2253
2169
  },
2170
+ partialBackground: {
2171
+ width: '61%',
2172
+ position: 'absolute',
2173
+ backgroundColor: theme?.palette?.background?.primary,
2174
+ height: '100%',
2175
+ top: '0',
2176
+ left: '0'
2177
+ },
2254
2178
  contentContainer: {
2255
2179
  position: 'relative',
2256
2180
  width: '100%',
2257
2181
  zIndex: '1',
2258
- // display: 'grid',
2259
- // gridTemplateColumns: 'repeat(2,minmax(0, 1fr))',
2260
- display: 'flex',
2261
- flexDirection: 'row',
2262
- alignItems: 'center',
2263
- maxWidth: '100%',
2264
- gap: '72px'
2182
+ display: 'grid',
2183
+ gridTemplateColumns: 'repeat(2,minmax(0, 1fr))',
2184
+ maxWidth: '100%'
2265
2185
  },
2266
2186
  textContainer: {
2187
+ padding: '140px 18%',
2267
2188
  textAlign: 'left',
2268
2189
  margin: '0 auto',
2269
2190
  maxWidth: '100%'
@@ -2271,30 +2192,23 @@ const useSectionStyles$8 = createUseStyles(theme => ({
2271
2192
  imageContainer: {
2272
2193
  width: '100%',
2273
2194
  position: 'relative',
2274
- height: '100%',
2275
- display: 'flex',
2276
- justifyContent: 'center',
2277
- alignItems: 'center',
2278
- borderRadius: '8px',
2279
- overflow: 'hidden'
2195
+ height: '90%'
2280
2196
  },
2281
2197
  subTitleHeading: {
2282
2198
  marginBottom: '8px',
2283
- fontSize: theme.typography.fontSize.subHead,
2284
- color: theme?.palette?.font?.default,
2199
+ fontSize: '16px',
2200
+ color: theme?.palette?.font?.tertiary,
2285
2201
  wordBreak: 'break-word',
2286
2202
  maxWidth: '100%'
2287
2203
  },
2288
2204
  heading: {
2289
2205
  margin: '0',
2290
- fontSize: theme.typography.fontSize.h1,
2206
+ fontSize: '72px',
2291
2207
  color: theme?.palette?.font?.default,
2292
- wordBreak: 'break-word',
2293
- fontWeight: theme.typography.fontWeight.bold,
2294
- lineHeight: 'normal'
2208
+ wordBreak: 'break-word'
2295
2209
  },
2296
2210
  description: {
2297
- margin: `${theme.spacing.margin.tiny}px 0px`,
2211
+ margin: '40px 0',
2298
2212
  color: theme?.palette?.font?.primary,
2299
2213
  lineHeight: '24px',
2300
2214
  wordBreak: 'break-word'
@@ -2309,24 +2223,30 @@ const useSectionStyles$8 = createUseStyles(theme => ({
2309
2223
  display: 'flex',
2310
2224
  gap: '20px',
2311
2225
  justifyContent: 'center',
2312
- marginTop: theme.spacing.margin.tiny,
2226
+ bottom: '25px',
2227
+ position: 'absolute',
2313
2228
  width: '100%'
2314
2229
  },
2315
- partialBackground: {
2316
- display: 'none'
2317
- },
2318
2230
  '@media screen and (max-width: 767px)': {
2319
2231
  partialBackground: {
2320
2232
  display: 'none'
2321
2233
  },
2234
+ sectionContainer: {
2235
+ paddingBottom: '50px'
2236
+ },
2322
2237
  contentContainer: {
2323
2238
  display: 'flex',
2324
- flexFlow: 'column',
2325
- paddingBottom: '48px',
2326
- gap: '24px'
2239
+ flexFlow: 'column-reverse',
2240
+ paddingBottom: '20px'
2327
2241
  },
2328
2242
  textContainer: {
2329
- textAlign: 'center'
2243
+ padding: '20px 20px 0'
2244
+ },
2245
+ heading: {
2246
+ fontSize: '40px'
2247
+ },
2248
+ description: {
2249
+ margin: '16px 0'
2330
2250
  },
2331
2251
  linkButton: {
2332
2252
  padding: '12px 16px'
@@ -2359,7 +2279,7 @@ const useCarouselStyles = createUseStyles(theme => ({
2359
2279
  '& .slick-dots': {
2360
2280
  bottom: ({
2361
2281
  buttonContainerClass
2362
- } = {}) => !!buttonContainerClass ? '10px' : 'unset',
2282
+ } = {}) => !!buttonContainerClass ? '20px' : 'unset',
2363
2283
  position: ({
2364
2284
  buttonContainerClass
2365
2285
  } = {}) => !!buttonContainerClass ? 'absolute' : 'inherit',
@@ -2369,7 +2289,7 @@ const useCarouselStyles = createUseStyles(theme => ({
2369
2289
  textAlign: 'center',
2370
2290
  paddingBottom: '0',
2371
2291
  '& ul': {
2372
- margin: theme.spacing.margin.regular,
2292
+ margin: '0',
2373
2293
  padding: '0',
2374
2294
  '& li': {
2375
2295
  width: 'unset',
@@ -2393,7 +2313,7 @@ const useCarouselStyles = createUseStyles(theme => ({
2393
2313
  display: 'flex',
2394
2314
  gap: '20px',
2395
2315
  justifyContent: 'center',
2396
- marginTop: theme.spacing.margin.tiny
2316
+ marginTop: '40px'
2397
2317
  },
2398
2318
  dots: {
2399
2319
  width: '4px',
@@ -2410,15 +2330,6 @@ const useCarouselStyles = createUseStyles(theme => ({
2410
2330
  background: ({
2411
2331
  inverted
2412
2332
  } = {}) => !!inverted ? theme?.palette?.font?.invertedDefault : theme.palette.primary.main
2413
- },
2414
- '@media screen and (max-width: 767px)': {
2415
- sliderClass: {
2416
- '& .slick-dots': {
2417
- '& ul': {
2418
- margin: '0px'
2419
- }
2420
- }
2421
- }
2422
2333
  }
2423
2334
  }));
2424
2335
 
@@ -2578,8 +2489,7 @@ function Section$4({
2578
2489
  isCustomWebsite
2579
2490
  } = React.useContext(PageContext);
2580
2491
  const classes = useSectionStyles$8({
2581
- isCustomWebsite,
2582
- isMobile
2492
+ isCustomWebsite
2583
2493
  });
2584
2494
  return /*#__PURE__*/React__default["default"].createElement("div", {
2585
2495
  className: classes.centerData
@@ -2628,14 +2538,12 @@ function BannerCarouselRight({
2628
2538
  sectionIndex
2629
2539
  }) {
2630
2540
  const {
2631
- isMobile,
2632
2541
  layout: {
2633
2542
  containerWidth
2634
2543
  }
2635
2544
  } = React.useContext(PageContext);
2636
2545
  const classes = useSectionStyles$8({
2637
- containerWidth,
2638
- isMobile
2546
+ containerWidth
2639
2547
  });
2640
2548
  const [{
2641
2549
  bannerCarousel
@@ -2664,9 +2572,7 @@ var index$l = /*#__PURE__*/Object.freeze({
2664
2572
  const useSectionStyles$7 = createUseStyles(theme => ({
2665
2573
  section: {
2666
2574
  width: '100%',
2667
- padding: ({
2668
- isMobile
2669
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
2575
+ padding: '70px 0',
2670
2576
  display: 'flex',
2671
2577
  justifyContent: 'center',
2672
2578
  flexDirection: 'column',
@@ -2677,7 +2583,10 @@ const useSectionStyles$7 = createUseStyles(theme => ({
2677
2583
  boxSizing: 'border-box'
2678
2584
  },
2679
2585
  '& h2,& h3': {
2680
- marginTop: '0'
2586
+ fontWeight: '500',
2587
+ '& b,& strong': {
2588
+ fontWeight: '700'
2589
+ }
2681
2590
  }
2682
2591
  },
2683
2592
  sectionContainer: {
@@ -2688,19 +2597,16 @@ const useSectionStyles$7 = createUseStyles(theme => ({
2688
2597
  },
2689
2598
  subTitleHeading: {
2690
2599
  marginBottom: '8px',
2691
- fontSize: theme.typography.fontSize.subHead,
2692
- color: theme?.palette?.font?.default,
2600
+ fontSize: '16px',
2601
+ color: theme?.palette?.font?.tertiary,
2693
2602
  alignItems: 'center',
2694
2603
  textAlign: 'center',
2695
- wordBreak: 'break-word',
2696
- letterSpacing: '3px',
2697
- textTransform: 'uppercase'
2604
+ wordBreak: 'break-word'
2698
2605
  },
2699
2606
  heading: {
2700
- marginBottom: theme.spacing.margin.tiny,
2701
- fontSize: theme.typography.fontSize.h2,
2607
+ margin: '0',
2608
+ fontSize: '72px',
2702
2609
  color: theme?.palette?.font?.default,
2703
- fontWeight: theme.typography.fontWeight.bold,
2704
2610
  textAlign: 'center',
2705
2611
  wordBreak: 'break-word'
2706
2612
  },
@@ -2721,7 +2627,7 @@ const useSectionStyles$7 = createUseStyles(theme => ({
2721
2627
  borderRadius: theme?.shape?.borderRadius?.regular,
2722
2628
  overflow: 'hidden',
2723
2629
  minHeight: 200,
2724
- marginBottom: theme.spacing.margin.small,
2630
+ margin: '16px 0',
2725
2631
  position: 'relative',
2726
2632
  '&:nth-child(2n)': {
2727
2633
  alignSelf: 'flex-end',
@@ -2729,7 +2635,7 @@ const useSectionStyles$7 = createUseStyles(theme => ({
2729
2635
  right: '0'
2730
2636
  },
2731
2637
  '& $contentText': {
2732
- marginRight: '170px'
2638
+ marginRight: '200px'
2733
2639
  }
2734
2640
  },
2735
2641
  '&:nth-child(2n+1)': {
@@ -2738,7 +2644,7 @@ const useSectionStyles$7 = createUseStyles(theme => ({
2738
2644
  left: '0'
2739
2645
  },
2740
2646
  '& $contentText': {
2741
- marginLeft: '170px'
2647
+ marginLeft: '200px'
2742
2648
  }
2743
2649
  },
2744
2650
  '&:nth-child(7n+1) $contentNumber': {
@@ -2772,31 +2678,42 @@ const useSectionStyles$7 = createUseStyles(theme => ({
2772
2678
  display: 'flex',
2773
2679
  alignItems: 'center',
2774
2680
  justifyContent: 'center',
2775
- padding: '48px',
2776
2681
  height: '100%',
2777
2682
  color: theme?.palette?.font?.default,
2683
+ width: '200px',
2778
2684
  wordBreak: 'break-word'
2779
2685
  },
2780
2686
  contentText: {
2781
- padding: theme.spacing.padding.tiny
2687
+ padding: '20px 0'
2782
2688
  },
2783
2689
  contentHeading: {
2784
2690
  fontStyle: 'normal',
2785
- fontSize: theme.typography.fontSize.h5,
2786
- fontWeight: theme.typography.fontWeight.bold,
2691
+ fontSize: '24px',
2787
2692
  lineHeight: '32px',
2788
- marginBottom: '8px',
2789
2693
  color: theme?.palette?.font?.default,
2694
+ margin: '0 48px',
2790
2695
  wordBreak: 'break-word'
2791
2696
  },
2792
2697
  contentPara: {
2793
2698
  fontStyle: 'normal',
2794
- fontSize: theme.typography.fontSize.subHead,
2699
+ fontSize: '16px',
2795
2700
  lineHeight: '32px',
2796
2701
  color: theme?.palette?.font?.primary,
2702
+ margin: '20px 48px 0 48px',
2797
2703
  wordBreak: 'break-word'
2798
2704
  },
2799
2705
  '@media screen and (max-width: 767px)': {
2706
+ section: {
2707
+ padding: '70px 20px'
2708
+ },
2709
+ textContainer: {
2710
+ padding: '20px',
2711
+ width: '100%'
2712
+ },
2713
+ heading: {
2714
+ fontSize: '24px',
2715
+ margin: '4px 0 12px 0'
2716
+ },
2800
2717
  contentContainer: {
2801
2718
  width: '100%'
2802
2719
  },
@@ -2804,31 +2721,36 @@ const useSectionStyles$7 = createUseStyles(theme => ({
2804
2721
  display: 'flex',
2805
2722
  flexDirection: 'column',
2806
2723
  borderRadius: theme.shape.borderRadius.large,
2724
+ margin: '20px 0 10px 0',
2807
2725
  width: '100%',
2808
2726
  height: 'auto',
2809
2727
  '&:nth-child(2n)': {
2810
2728
  marginLeft: '0',
2811
2729
  '& $contentText': {
2812
2730
  marginRight: '0',
2813
- alignSelf: 'flex-start'
2814
- // padding: '0'
2731
+ alignSelf: 'flex-start',
2732
+ padding: '0'
2815
2733
  }
2816
2734
  },
2817
-
2818
2735
  '&:nth-child(2n+1)': {
2819
2736
  marginRight: '0',
2820
2737
  '& $contentText': {
2821
2738
  marginLeft: '0',
2822
- alignSelf: 'flex-start'
2823
- // padding: '0'
2739
+ alignSelf: 'flex-start',
2740
+ padding: '0'
2824
2741
  }
2825
2742
  }
2826
2743
  },
2827
-
2828
2744
  contentNumber: {
2829
2745
  width: '100%',
2830
- padding: '24px',
2746
+ padding: '40px 0',
2831
2747
  position: 'static'
2748
+ },
2749
+ contentHeading: {
2750
+ margin: '20px 20px 0 20px'
2751
+ },
2752
+ contentPara: {
2753
+ margin: '16px 20px 24px 20px'
2832
2754
  }
2833
2755
  }
2834
2756
  }));
@@ -2839,12 +2761,10 @@ function List({
2839
2761
  const {
2840
2762
  layout: {
2841
2763
  containerWidth
2842
- },
2843
- isMobile
2764
+ }
2844
2765
  } = React.useContext(PageContext);
2845
2766
  const classes = useSectionStyles$7({
2846
- containerWidth,
2847
- isMobile
2767
+ containerWidth
2848
2768
  });
2849
2769
  const [nodeData] = sectionData.components;
2850
2770
  const getNumber = val => {
@@ -2908,33 +2828,29 @@ const useSectionStyles$6 = createUseStyles(theme => ({
2908
2828
  '&, & *, & *:before, & *:after': {
2909
2829
  fontFamily: theme?.typography?.fontFamily,
2910
2830
  boxSizing: 'border-box'
2831
+ },
2832
+ '& h2,& h3': {
2833
+ fontWeight: '500',
2834
+ '& b,& strong': {
2835
+ fontWeight: '700'
2836
+ }
2911
2837
  }
2912
- // '& h2,& h3': {
2913
- // fontWeight: '500',
2914
- // '& b,& strong': {
2915
- // fontWeight: '700'
2916
- // }
2917
- // }
2918
2838
  },
2919
-
2920
2839
  sectionContainer: {
2840
+ margin: '0 auto',
2921
2841
  width: '100%',
2922
2842
  // maxWidth: ({ containerWidth } = {}) => containerWidth,
2923
2843
  position: 'absolute',
2924
- zIndex: '9',
2925
- height: '100%'
2844
+ zIndex: '9'
2926
2845
  },
2927
2846
  absoluteButtons: {
2928
2847
  display: 'flex',
2929
2848
  gap: '20px',
2930
2849
  justifyContent: 'center',
2931
- bottom: '10%',
2850
+ bottom: '25px',
2932
2851
  position: 'absolute',
2933
2852
  width: '100%'
2934
2853
  },
2935
- buttonClass: {
2936
- margin: `${theme.spacing.margin.tiny}px 0px`
2937
- },
2938
2854
  contentContainer: {
2939
2855
  // padding: '100px 0',
2940
2856
  // height: '100%',
@@ -2970,33 +2886,27 @@ const useSectionStyles$6 = createUseStyles(theme => ({
2970
2886
  height: '100%'
2971
2887
  },
2972
2888
  textContainer: {
2973
- padding: `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
2974
- // margin: `0px ${theme.spacing.padding.medium} 0px ${theme.spacing.padding.medium}`,
2975
- width: '100%',
2976
- height: '100%',
2977
- display: 'flex',
2978
- justifyContent: 'center',
2979
- alignItems: 'center',
2980
- flexDirection: 'column'
2889
+ padding: '100px 0',
2890
+ margin: '0 auto',
2891
+ width: '80%'
2981
2892
  },
2982
2893
  subTitleHeading: {
2983
2894
  color: theme?.palette?.font?.invertedDefault,
2984
2895
  marginBottom: '8px',
2985
- fontSize: theme.typography.fontSize.subHead,
2896
+ fontSize: '16px',
2986
2897
  wordBreak: 'break-word'
2987
2898
  },
2988
2899
  heading: {
2989
2900
  margin: '0',
2990
- fontSize: theme.typography.fontSize.h1,
2901
+ fontSize: '62px',
2991
2902
  color: theme?.palette?.font?.invertedDefault,
2992
2903
  wordBreak: 'break-word'
2993
2904
  },
2994
2905
  description: {
2995
- margin: `${theme.spacing.margin.tiny}px 0px`,
2906
+ margin: '40px 0',
2996
2907
  color: theme?.palette?.font?.invertedDefault,
2997
2908
  lineHeight: '24px',
2998
- wordBreak: 'break-word',
2999
- fontSize: theme.typography.fontSize.subHead
2909
+ wordBreak: 'break-word'
3000
2910
  },
3001
2911
  sideBannerImage: {
3002
2912
  width: '100%',
@@ -3014,19 +2924,22 @@ const useSectionStyles$6 = createUseStyles(theme => ({
3014
2924
  justifyContent: 'center',
3015
2925
  padding: '0px'
3016
2926
  },
3017
- // textContainer: {
3018
- // padding: '20px 20px',
3019
- // height: '100%',
3020
- // width: '100%'
3021
- // // backgroundColor: theme?.palette?.background?.primary
3022
- // },
2927
+ textContainer: {
2928
+ padding: '20px 20px',
2929
+ height: '100%',
2930
+ width: '100%'
2931
+ // backgroundColor: theme?.palette?.background?.primary
2932
+ },
2933
+
3023
2934
  subTitleHeading: {
3024
2935
  color: theme?.palette?.font?.tertiary
3025
2936
  },
3026
2937
  heading: {
2938
+ fontSize: '40px',
3027
2939
  color: theme?.palette?.font?.default
3028
2940
  },
3029
2941
  description: {
2942
+ margin: '16px 0',
3030
2943
  color: theme?.palette?.font?.primary
3031
2944
  },
3032
2945
  centerBgImageContainer: {
@@ -3093,14 +3006,12 @@ const Section$3 = ({
3093
3006
  dangerouslySetInnerHTML: {
3094
3007
  __html: nodeData.description.metadata.value
3095
3008
  }
3096
- }) : null, nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React__default["default"].createElement("div", {
3097
- className: classes.buttonClass
3098
- }, /*#__PURE__*/React__default["default"].createElement(Button, {
3009
+ }) : null, nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React__default["default"].createElement(Button, {
3099
3010
  ref: nodeData?.cta?.refSetter,
3100
3011
  data: nodeData.cta.metadata,
3101
3012
  type: nodeData?.cta?.metadata?.type,
3102
3013
  size: isMobile ? 'small' : 'medium'
3103
- }))) : null), /*#__PURE__*/React__default["default"].createElement("div", {
3014
+ })) : null), /*#__PURE__*/React__default["default"].createElement("div", {
3104
3015
  className: classes?.centerBgImageContainer
3105
3016
  }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
3106
3017
  src: nodeData.image.metadata.value,
@@ -3142,21 +3053,18 @@ var index$j = /*#__PURE__*/Object.freeze({
3142
3053
  const useSectionStyles$5 = createUseStyles(theme => {
3143
3054
  return {
3144
3055
  section: {
3145
- padding: ({
3146
- isMobile
3147
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
3056
+ paddingBottom: '70px',
3148
3057
  '&, & *, & *:before, & *:after': {
3149
3058
  fontFamily: theme?.typography?.fontFamily,
3150
3059
  boxSizing: 'border-box'
3060
+ },
3061
+ '& h2,& h3': {
3062
+ fontWeight: '500',
3063
+ '& b,& strong': {
3064
+ fontWeight: '700'
3065
+ }
3151
3066
  }
3152
- // '& h2,& h3': {
3153
- // fontWeight: theme?.typography?.fontWeight?.medium,
3154
- // '& b,& strong': {
3155
- // fontWeight: theme?.typography?.fontWeight?.bold
3156
- // }
3157
- // }
3158
3067
  },
3159
-
3160
3068
  sectionContainer: {
3161
3069
  margin: '0 auto',
3162
3070
  maxWidth: ({
@@ -3166,11 +3074,9 @@ const useSectionStyles$5 = createUseStyles(theme => {
3166
3074
  centerData: {
3167
3075
  display: 'flex',
3168
3076
  alignItems: 'center',
3169
- justifyContent: 'center'
3170
-
3171
- // padding: `${theme?.spacing?.padding?.regular}px ${theme?.spacing?.padding?.medium}px 0px ${theme?.spacing?.padding?.medium}px`
3077
+ justifyContent: 'center',
3078
+ padding: '140px 70px 0'
3172
3079
  },
3173
-
3174
3080
  imageContainerDiv: {
3175
3081
  width: '50%',
3176
3082
  position: 'relative'
@@ -3204,28 +3110,25 @@ const useSectionStyles$5 = createUseStyles(theme => {
3204
3110
  objectFit: 'cover'
3205
3111
  },
3206
3112
  textContainer: {
3207
- marginLeft: '72px',
3113
+ padding: '0 60px',
3208
3114
  textAlign: 'left',
3209
3115
  margin: '0 auto',
3210
3116
  width: '50%'
3211
3117
  },
3212
3118
  subTitleHeading: {
3213
3119
  marginBottom: '8px',
3214
- fontSize: theme?.typography?.fontSize?.subHead,
3215
- color: theme?.palette?.font?.default,
3120
+ fontSize: '16px',
3121
+ color: theme?.palette?.font?.tertiary,
3216
3122
  wordBreak: 'break-word'
3217
3123
  },
3218
3124
  heading: {
3219
3125
  margin: '0',
3220
- fontSize: theme?.typography?.fontSize?.h1,
3126
+ fontSize: '72px',
3221
3127
  color: theme?.palette?.font?.default,
3222
- wordBreak: 'break-word',
3223
- fontWeight: theme?.typography?.fontWeight?.bold,
3224
- lineHeight: 'normal'
3128
+ wordBreak: 'break-word'
3225
3129
  },
3226
3130
  description: {
3227
- marginTop: theme.spacing.margin.tiny,
3228
- marginBottom: theme.spacing.margin.tiny,
3131
+ margin: '40px 0',
3229
3132
  color: theme?.palette?.font?.primary,
3230
3133
  lineHeight: '24px',
3231
3134
  wordBreak: 'break-word'
@@ -3235,9 +3138,9 @@ const useSectionStyles$5 = createUseStyles(theme => {
3235
3138
  padding: '0 0 40px'
3236
3139
  },
3237
3140
  centerData: {
3238
- flexDirection: 'column-reverse',
3141
+ flexDirection: 'column',
3239
3142
  width: '100%',
3240
- padding: `${theme?.spacing?.padding?.medium}px ${theme?.spacing?.padding?.regular}px`
3143
+ padding: '0'
3241
3144
  },
3242
3145
  imageContainer: {
3243
3146
  height: 'unset !important',
@@ -3257,11 +3160,11 @@ const useSectionStyles$5 = createUseStyles(theme => {
3257
3160
  height: 'unset !important'
3258
3161
  },
3259
3162
  textContainer: {
3260
- padding: `${theme?.spacing?.padding?.regular}px 0px`,
3163
+ padding: '20px 20px',
3261
3164
  width: 'unset'
3262
3165
  },
3263
3166
  heading: {
3264
- fontSize: `${theme?.typography?.fontSize?.h3}px`
3167
+ fontSize: '40px'
3265
3168
  },
3266
3169
  description: {
3267
3170
  margin: '16px 0'
@@ -3282,8 +3185,7 @@ function Section$2({
3282
3185
  isCustomWebsite
3283
3186
  } = React.useContext(PageContext);
3284
3187
  const classes = useSectionStyles$5({
3285
- isCustomWebsite,
3286
- isMobile
3188
+ isCustomWebsite
3287
3189
  });
3288
3190
  return /*#__PURE__*/React__default["default"].createElement("div", {
3289
3191
  className: classes.centerData
@@ -3296,6 +3198,8 @@ function Section$2({
3296
3198
  ref: nodeData?.image?.refSetter,
3297
3199
  className: classes.sideBannerImage,
3298
3200
  sectionIndex: sectionIndex
3201
+ }), /*#__PURE__*/React__default["default"].createElement("div", {
3202
+ className: classes.imageBorder
3299
3203
  }))), /*#__PURE__*/React__default["default"].createElement("div", {
3300
3204
  className: classes.textContainer
3301
3205
  }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -3366,15 +3270,16 @@ const useSectionStyles$4 = createUseStyles(theme => ({
3366
3270
  width: '100%',
3367
3271
  alignItems: 'center',
3368
3272
  justifyContent: 'center',
3369
- padding: ({
3370
- isMobile
3371
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
3273
+ padding: '60px 70px',
3372
3274
  '&, & *, & *:before, & *:after': {
3373
3275
  fontFamily: theme?.typography?.fontFamily,
3374
3276
  boxSizing: 'border-box'
3375
3277
  },
3376
3278
  '& h2,& h3': {
3377
- marginTop: '0'
3279
+ fontWeight: '500',
3280
+ '& b,& strong': {
3281
+ fontWeight: '700'
3282
+ }
3378
3283
  }
3379
3284
  },
3380
3285
  newsLetterContainer: {
@@ -3395,16 +3300,15 @@ const useSectionStyles$4 = createUseStyles(theme => ({
3395
3300
  backgroundColor: theme?.palette?.background?.default,
3396
3301
  boxShadow: theme?.shadows?.secondary,
3397
3302
  borderRadius: theme?.shape?.borderRadius?.regular,
3398
- padding: theme.spacing.padding.small,
3303
+ padding: '40px 80px',
3399
3304
  position: 'relative'
3400
3305
  },
3401
3306
  cardHeading: {
3402
- fontSize: theme.typography.fontSize.h2,
3403
- fontWeight: theme.typography.fontWeight.bold,
3307
+ fontSize: '56px',
3404
3308
  lineHeight: '71px',
3405
3309
  letterSpacing: '-3px',
3406
3310
  color: theme?.palette?.font?.secondary,
3407
- marginBottom: theme.spacing.padding.tiny,
3311
+ margin: '0 0 32px 0',
3408
3312
  wordBreak: 'break-word'
3409
3313
  },
3410
3314
  contentContainer: {
@@ -3413,9 +3317,10 @@ const useSectionStyles$4 = createUseStyles(theme => ({
3413
3317
  justifyContent: 'space-between'
3414
3318
  },
3415
3319
  title: {
3416
- fontSize: theme.typography.fontSize.h6,
3320
+ fontSize: '20px',
3417
3321
  lineHeight: '32px',
3418
3322
  color: theme?.palette?.font?.primary,
3323
+ margin: '0 80px 0 0',
3419
3324
  width: 'calc(50% - 80px)',
3420
3325
  wordBreak: 'break-word'
3421
3326
  },
@@ -3453,44 +3358,42 @@ const useSectionStyles$4 = createUseStyles(theme => ({
3453
3358
  section: {
3454
3359
  display: 'flex',
3455
3360
  flexDirection: 'column',
3456
- alignItems: 'center'
3361
+ alignItems: 'center',
3362
+ padding: '30px 20px'
3457
3363
  },
3458
3364
  sectionContainer: {
3459
- borderRadius: theme?.shape?.borderRadius?.large,
3460
- textAlign: 'center',
3461
- display: 'flex',
3462
- alignItems: 'center',
3463
- flexDirection: 'column'
3365
+ padding: '30px 20px',
3366
+ borderRadius: theme?.shape?.borderRadius?.large
3464
3367
  },
3465
3368
  partialBackground: {
3466
3369
  height: '150px'
3467
3370
  },
3468
3371
  title: {
3469
3372
  width: '100%',
3470
- lineHeight: '22px',
3471
- margin: '0px 0px 16px 0px'
3373
+ margin: '0',
3374
+ fontSize: '20px',
3375
+ lineHeight: '32px'
3472
3376
  },
3473
3377
  cardHeading: {
3378
+ fontSize: '24px',
3474
3379
  lineHeight: '32px',
3475
3380
  letterSpacing: '-1px',
3476
- width: '50%',
3477
- lineHeight: 'normal'
3381
+ marginBottom: '20px'
3478
3382
  },
3479
3383
  contentContainer: {
3480
3384
  display: 'flex',
3481
3385
  flexDirection: 'column',
3482
- justifyContent: 'flex-start',
3483
- textAlign: 'center'
3386
+ justifyContent: 'flex-start'
3484
3387
  },
3485
3388
  inputContainer: {
3486
3389
  display: 'block',
3487
3390
  width: '100%',
3391
+ margin: '24px 16px 0 16px',
3488
3392
  position: 'initial'
3489
3393
  },
3490
3394
  btnContainer: {
3491
3395
  right: 'unset',
3492
- position: 'initial',
3493
- marginTop: '4px'
3396
+ position: 'initial'
3494
3397
  }
3495
3398
  }
3496
3399
  }));
@@ -3635,8 +3538,7 @@ function SubscribeToNewsletter({
3635
3538
  } = React.useContext(PageContext);
3636
3539
  const [nodeData] = sectionData.components;
3637
3540
  const classes = useSectionStyles$4({
3638
- containerWidth,
3639
- isMobile
3541
+ containerWidth
3640
3542
  });
3641
3543
  let formInitialValue = nodeData?.inputField?.metadata?.value;
3642
3544
  const [inputVal, setInputVal] = React.useState(formInitialValue);
@@ -3749,176 +3651,171 @@ var index$h = /*#__PURE__*/Object.freeze({
3749
3651
  'default': SubscribeToNewsletter
3750
3652
  });
3751
3653
 
3752
- const useTestimonialStyles = createUseStyles(theme => ({
3753
- testimonialContainer: {
3754
- background: theme?.palette?.background?.primary,
3755
- overflow: 'hidden',
3756
- padding: `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
3757
- '&, & *, & *:before, & *:after': {
3758
- fontFamily: theme?.typography?.fontFamily,
3759
- boxSizing: 'border-box'
3760
- },
3761
- '& h3,& p': {
3762
- marginTop: '0'
3763
- }
3764
- },
3765
- sectionContainer: {
3766
- margin: '0 auto',
3767
- maxWidth: ({
3768
- containerWidth
3769
- } = {}) => containerWidth
3770
- },
3771
- testimonialText: {
3772
- color: theme?.palette?.font?.default,
3773
- fontSize: theme.typography.fontSize.subHead,
3774
- wordBreak: 'break-word',
3775
- textTransform: 'uppercase'
3776
- },
3777
- testimonialHeader: {
3778
- fontSize: theme.typography.fontSize.h2,
3779
- color: theme?.palette?.font?.default,
3780
- fontWeight: theme.typography.fontWeight.bold,
3781
- marginBottom: theme.spacing.margin.tiny,
3782
- marginTop: '8px',
3783
- overflow: 'hidden',
3784
- wordBreak: 'break-word',
3785
- // whiteSpace: 'nowrap',
3786
- textOverflow: 'ellipsis'
3787
- },
3788
- sliderContainer: {
3789
- marginRight: `-${theme.spacing.margin.regular}px`
3790
- },
3791
- singleCard: {
3792
- // margin: '6px 12px',
3793
- position: 'relative',
3794
- height: 'calc(100% - 12px)',
3795
- width: 'calc(100% - 24px)',
3796
- background: theme?.palette?.background?.default,
3797
- boxShadow: theme?.shadows?.primary,
3798
- borderRadius: theme?.shape?.borderRadius?.regular
3799
- },
3800
- contentRow: {
3801
- display: 'grid',
3802
- gridTemplateColumns: ({
3803
- slidesToShow
3804
- } = {}) => `repeat(${slidesToShow},minmax(0, 1fr))`
3805
- },
3806
- cardDetails: {
3807
- height: '100%',
3808
- display: 'flex',
3809
- flexDirection: 'column',
3810
- justifyContent: 'space-between',
3811
- padding: '48px',
3812
- alignItems: 'flex-start'
3813
- },
3814
- quoteIcon: {
3815
- position: 'absolute',
3816
- right: '20px'
3817
- },
3818
- reviewText: {
3819
- // padding: '48px 41px 0 48px',
3820
- marginBottom: theme.spacing.margin.tiny,
3821
- fontSize: theme.typography.fontSize.subHead,
3822
- wordBreak: 'break-word',
3823
- color: theme?.palette?.font?.primary,
3824
- lineHeight: '22px'
3825
- },
3826
- userContainer: {
3827
- display: 'flex',
3828
- gap: '16px',
3829
- alignItems: 'center'
3830
- },
3831
- userImageContainer: {
3832
- width: '64px',
3833
- height: '64px',
3834
- position: 'relative',
3835
- // paddingBottom: '55px',
3836
- objectFit: 'cover'
3837
- },
3838
- userImageDummy: {
3839
- width: '64px',
3840
- height: '64px',
3841
- borderRadius: '32px',
3842
- background: '#666666',
3843
- marginRight: '16px',
3844
- flexShrink: '0'
3845
- },
3846
- userImage: {
3847
- width: '64px',
3848
- height: '64px',
3849
- borderRadius: '32px',
3850
- marginRight: '16px'
3851
- },
3852
- userName: {
3853
- color: theme?.palette?.font?.default,
3854
- margin: '0',
3855
- fontSize: theme.typography.fontSize.h5,
3856
- // paddingTop: '16px',
3857
- overflow: 'hidden',
3858
- whiteSpace: 'nowrap',
3859
- textOverflow: 'ellipsis'
3860
- },
3861
- buttonContainer: {
3862
- display: 'flex',
3863
- gap: '20px',
3864
- justifyContent: 'center',
3865
- // paddingRight: theme.spacing.padding.medium,
3866
- marginTop: theme.spacing.margin.tiny
3867
- },
3868
- '@media (max-width: 768px)': {
3654
+ const useTestimonialStyles = createUseStyles(theme => {
3655
+ return {
3869
3656
  testimonialContainer: {
3870
- padding: `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px`
3871
- },
3872
- // testimonialCardAndText: {
3873
- // margin: '0 20px'
3874
- // },
3875
-
3876
- // testimonialHeader: {
3877
- // fontSize: '24px',
3878
- // color: theme?.palette?.font?.default,
3879
- // margin: '4px 0 12px 0',
3880
- // overflow: 'hidden',
3881
- // // whiteSpace: 'nowrap',
3882
- // wordBreak: 'break-word',
3883
- // textOverflow: 'ellipsis'
3884
- // },
3885
- userImageDummy: {
3886
- width: '48px',
3887
- height: '48px',
3888
- borderRadius: '24px',
3889
- marginRight: '16px'
3657
+ background: theme?.palette?.background?.primary,
3658
+ overflow: 'hidden',
3659
+ padding: '70px',
3660
+ '&, & *, & *:before, & *:after': {
3661
+ fontFamily: theme?.typography?.fontFamily,
3662
+ boxSizing: 'border-box'
3663
+ },
3664
+ '& h2,& h3': {
3665
+ fontWeight: '500',
3666
+ '& b,& strong': {
3667
+ fontWeight: '700'
3668
+ }
3669
+ }
3890
3670
  },
3891
- userImage: {
3892
- width: '48px',
3893
- height: '48px',
3894
- borderRadius: '24px',
3895
- marginRight: '16px'
3671
+ sectionContainer: {
3672
+ margin: '0 auto',
3673
+ maxWidth: ({
3674
+ containerWidth
3675
+ } = {}) => containerWidth
3896
3676
  },
3897
- reviewText: {
3898
- marginBottom: '16px'
3677
+ testimonialCardAndText: {
3678
+ marginTop: '70px'
3899
3679
  },
3900
- singleCard: {
3901
- margin: '6px 2px',
3902
- width: 'calc(100% - 14px)'
3680
+ testimonialText: {
3681
+ color: theme?.palette?.font?.secondary,
3682
+ fontSize: '16px',
3683
+ marginLeft: '10px',
3684
+ wordBreak: 'break-word'
3903
3685
  },
3904
- userName: {
3905
- // paddingTop: '8px',
3686
+ testimonialHeader: {
3687
+ fontSize: '56px',
3688
+ color: theme?.palette?.font?.default,
3689
+ margin: '10px 0 40px 10px',
3906
3690
  overflow: 'hidden',
3907
- whiteSpace: 'nowrap',
3691
+ wordBreak: 'break-word',
3692
+ // whiteSpace: 'nowrap',
3908
3693
  textOverflow: 'ellipsis'
3909
3694
  },
3910
- userImageContainer: {
3911
- width: '48px',
3912
- height: '48px'
3695
+ sliderContainer: {
3696
+ marginRight: '-20px'
3697
+ },
3698
+ singleCard: {
3699
+ margin: '6px 12px',
3700
+ position: 'relative',
3701
+ height: 'calc(100% - 12px)',
3702
+ width: 'calc(100% - 24px)',
3703
+ background: theme?.palette?.background?.default,
3704
+ boxShadow: theme?.shadows?.primary,
3705
+ borderRadius: theme?.shape?.borderRadius?.regular
3706
+ },
3707
+ contentRow: {
3708
+ display: 'grid',
3709
+ gridTemplateColumns: ({
3710
+ slidesToShow
3711
+ } = {}) => `repeat(${slidesToShow},minmax(0, 1fr))`
3913
3712
  },
3914
3713
  cardDetails: {
3915
- padding: '16px'
3714
+ height: '100%',
3715
+ display: 'flex',
3716
+ flexDirection: 'column',
3717
+ justifyContent: 'space-between'
3718
+ },
3719
+ quoteIcon: {
3720
+ position: 'absolute',
3721
+ right: '20px'
3722
+ },
3723
+ reviewText: {
3724
+ padding: '48px 41px 0 48px',
3725
+ marginBottom: '48px',
3726
+ fontSize: '18px',
3727
+ wordBreak: 'break-word',
3728
+ color: theme?.palette?.font?.primary
3729
+ },
3730
+ userContainer: {
3731
+ display: 'flex',
3732
+ gap: '15px',
3733
+ padding: '0 0 29px 48px'
3734
+ },
3735
+ userImageContainer: {
3736
+ width: '64px',
3737
+ height: '64px',
3738
+ position: 'relative',
3739
+ // paddingBottom: '55px',
3740
+ objectFit: 'cover'
3741
+ },
3742
+ userImageDummy: {
3743
+ width: '64px',
3744
+ height: '64px',
3745
+ borderRadius: '32px',
3746
+ background: '#666666',
3747
+ marginRight: '16px',
3748
+ flexShrink: '0'
3749
+ },
3750
+ userImage: {
3751
+ width: '64px',
3752
+ height: '64px',
3753
+ borderRadius: '32px',
3754
+ marginRight: '16px'
3755
+ },
3756
+ userName: {
3757
+ color: theme?.palette?.font?.default,
3758
+ margin: '0',
3759
+ fontSize: '24px',
3760
+ paddingTop: '16px',
3761
+ overflow: 'hidden',
3762
+ whiteSpace: 'nowrap',
3763
+ textOverflow: 'ellipsis'
3764
+ },
3765
+ buttonContainer: {
3766
+ display: 'flex',
3767
+ width: '120px',
3768
+ justifyContent: 'space-between',
3769
+ margin: '36px auto 81px auto'
3770
+ },
3771
+ '@media (max-width: 768px)': {
3772
+ testimonialContainer: {
3773
+ padding: '60px 0'
3774
+ },
3775
+ testimonialCardAndText: {
3776
+ margin: '0 20px'
3777
+ },
3778
+ testimonialHeader: {
3779
+ fontSize: '24px',
3780
+ color: theme?.palette?.font?.default,
3781
+ margin: '4px 0 12px 0',
3782
+ overflow: 'hidden',
3783
+ // whiteSpace: 'nowrap',
3784
+ wordBreak: 'break-word',
3785
+ textOverflow: 'ellipsis'
3786
+ },
3787
+ userImageDummy: {
3788
+ width: '48px',
3789
+ height: '48px',
3790
+ borderRadius: '24px',
3791
+ marginRight: '16px'
3792
+ },
3793
+ userImage: {
3794
+ width: '48px',
3795
+ height: '48px',
3796
+ borderRadius: '24px',
3797
+ marginRight: '16px'
3798
+ },
3799
+ reviewText: {
3800
+ marginBottom: '40px'
3801
+ },
3802
+ singleCard: {
3803
+ margin: '6px 2px',
3804
+ width: 'calc(100% - 4px)'
3805
+ },
3806
+ userName: {
3807
+ paddingTop: '8px',
3808
+ overflow: 'hidden',
3809
+ whiteSpace: 'nowrap',
3810
+ textOverflow: 'ellipsis'
3811
+ },
3812
+ userImageContainer: {
3813
+ width: '48px',
3814
+ height: '48px'
3815
+ }
3916
3816
  }
3917
- // sliderContainer: {
3918
- // marginRight: '-24px'
3919
- // },
3920
- }
3921
- }));
3817
+ };
3818
+ });
3922
3819
 
3923
3820
  function QuotesComponent() {
3924
3821
  const theme = useTheme();
@@ -3946,14 +3843,13 @@ function Section$1({
3946
3843
  const classes = useTestimonialStyles({
3947
3844
  containerWidth,
3948
3845
  cardsCount,
3949
- slidesToShow,
3950
- isMobile
3846
+ slidesToShow
3951
3847
  });
3952
3848
  const settings = {
3953
3849
  className: classes.sliderContainer,
3954
3850
  slidesToShow,
3955
3851
  centerMode: true,
3956
- centerPadding: isMobile ? '0px 0 0' : '80px 0 0'
3852
+ centerPadding: isMobile ? '10px 0 0' : '80px 0 0'
3957
3853
  };
3958
3854
  const carouselContent = carouselList.map((el, idx) =>
3959
3855
  /*#__PURE__*/
@@ -4160,7 +4056,8 @@ const useVideoStyles$1 = createUseStyles(theme => {
4160
4056
  height: '100%',
4161
4057
  width: '100%',
4162
4058
  objectFit: 'cover',
4163
- objectPosition: 'top'
4059
+ objectPosition: 'top',
4060
+ opacity: '0.8'
4164
4061
  },
4165
4062
  '@media (max-width: 767px)': {
4166
4063
  iframe: {
@@ -4195,7 +4092,10 @@ function VideoPlayer(props) {
4195
4092
  }
4196
4093
  }
4197
4094
  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !isLoaded && /*#__PURE__*/React__default["default"].createElement("div", {
4198
- className: classes.imgContainer
4095
+ className: classes.imgContainer,
4096
+ onClick: () => {
4097
+ setIsEnableed(true);
4098
+ }
4199
4099
  }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
4200
4100
  src: imageUrl,
4201
4101
  sectionIndex: props?.sectionIndex,
@@ -4224,20 +4124,20 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
4224
4124
  videoTestimonialSuperContainer: {
4225
4125
  display: 'flex',
4226
4126
  justifyContent: 'center',
4227
- padding: ({
4228
- isMobile
4229
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
4127
+ padding: '70px',
4230
4128
  '&, & *, & *:before, & *:after': {
4231
- fontFamily: theme?.typography?.fontFamily
4232
- // boxSizing: 'border-box'
4129
+ fontFamily: theme?.typography?.fontFamily,
4130
+ boxSizing: 'border-box'
4233
4131
  },
4234
-
4235
- '& h2,& h3,& p': {
4236
- marginTop: '0'
4132
+ '& h2,& h3': {
4133
+ fontWeight: '500',
4134
+ '& b,& strong': {
4135
+ fontWeight: '700'
4136
+ }
4237
4137
  }
4238
4138
  },
4239
4139
  sectionContainer: {
4240
- // margin: '0 auto',
4140
+ margin: '0 auto',
4241
4141
  maxWidth: ({
4242
4142
  containerWidth
4243
4143
  } = {}) => containerWidth
@@ -4248,28 +4148,29 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
4248
4148
  fontFamily: theme?.typography?.fontFamily
4249
4149
  },
4250
4150
  videoTestimonialHeading: {
4251
- fontSize: theme.typography.fontSize.subHead,
4151
+ fontSize: '16px',
4252
4152
  lineHeight: '20px',
4253
4153
  letterSpacing: '3px',
4254
4154
  textTransform: 'uppercase',
4255
- color: theme.palette.font.default,
4256
- wordBreak: 'break-word',
4257
- marginBottom: '8px'
4155
+ color: theme.palette.font.tertiary,
4156
+ wordBreak: 'break-word'
4258
4157
  },
4259
4158
  videoTestimonialTitle: {
4260
- fontSize: theme.typography.fontSize.h1,
4261
- // lineHeight: '71px',
4159
+ fontSize: '56px',
4160
+ lineHeight: '71px',
4262
4161
  letterSpacing: '-3px',
4263
- fontWeight: theme.typography.fontWeight.bold,
4264
- marginBottom: theme.spacing.margin.tiny,
4162
+ margin: '0',
4265
4163
  color: theme.palette.font.default,
4266
4164
  wordBreak: 'break-word'
4267
4165
  },
4166
+ videoCarouselContainer: {
4167
+ marginTop: '16px'
4168
+ },
4268
4169
  videoCarousel: {
4269
4170
  display: 'flex',
4270
4171
  alignItems: 'center',
4271
4172
  justifyContent: 'flex-start',
4272
- gap: theme.spacing.margin.small
4173
+ gap: '60px'
4273
4174
  },
4274
4175
  iframeSuperContainer: {
4275
4176
  height: '100%',
@@ -4291,49 +4192,57 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
4291
4192
  videoDetails: {
4292
4193
  width: '100%',
4293
4194
  display: 'flex',
4294
- gap: '24px',
4295
4195
  flexDirection: 'column',
4296
4196
  alignItems: 'flex-start'
4297
4197
  },
4298
4198
  videoDetailsHeading: {
4299
- fontSize: theme.typography.fontSize.h3,
4199
+ fontSize: '40px',
4300
4200
  lineHeight: '48px',
4301
4201
  margin: '0',
4302
4202
  letterSpacing: '-1px',
4303
4203
  wordBreak: 'break-word',
4304
- color: theme.palette.font.default,
4305
- fontWeight: theme.typography.fontWeight.bold
4204
+ color: theme.palette.font.default
4306
4205
  },
4307
4206
  videoDetailsContent: {
4308
- fontSize: theme.typography.fontSize.subHead,
4207
+ fontSize: '16px',
4309
4208
  lineHeight: '24px',
4310
4209
  wordBreak: 'break-word',
4311
- color: theme.palette.font.primary
4210
+ color: theme.palette.font.primary,
4211
+ margin: '10px 0 20px'
4312
4212
  },
4313
4213
  videoDetailsSubContent: {
4314
- fontSize: theme.typography.fontSize.subHead,
4214
+ fontSize: '16px',
4315
4215
  lineHeight: '24px',
4316
4216
  margin: '0',
4317
4217
  color: theme.palette.font.primary,
4318
4218
  wordBreak: 'break-word'
4319
4219
  },
4320
4220
  '@media (max-width: 767px)': {
4221
+ videoTestimonialSuperContainer: {
4222
+ padding: '70px 10px 60px 20px'
4223
+ },
4321
4224
  videoCarousel: {
4322
- flexDirection: 'column'
4225
+ flexDirection: 'column',
4226
+ gap: '20px'
4323
4227
  },
4324
4228
  videoCarouselContainer: {
4325
- height: 'max-content'
4229
+ height: 'max-content',
4230
+ paddingRight: '10px'
4326
4231
  },
4327
4232
  videoDetails: {
4328
- width: '100%',
4329
- gap: '16px'
4233
+ width: '100%'
4330
4234
  },
4331
4235
  videoDetailsHeading: {
4236
+ fontSize: '16px',
4332
4237
  lineHeight: '20px'
4333
4238
  },
4334
4239
  videoTestimonialTitle: {
4240
+ fontSize: '24px',
4335
4241
  lineHeight: '36px',
4336
4242
  letterSpacing: '-1px'
4243
+ },
4244
+ videoDetailsContent: {
4245
+ marginTop: '4px'
4337
4246
  }
4338
4247
  }
4339
4248
  };
@@ -4388,11 +4297,11 @@ function VideoTestimonial({
4388
4297
  layout: {
4389
4298
  containerWidth
4390
4299
  },
4391
- isMobile
4300
+ countryCode,
4301
+ currencySymbol
4392
4302
  } = React.useContext(PageContext);
4393
4303
  const classes = useVideoTestimonialStyles({
4394
- containerWidth,
4395
- isMobile
4304
+ containerWidth
4396
4305
  });
4397
4306
  const [videoData] = sectionData.components;
4398
4307
  const Wrapper = videoData.videoCarousel.components.length > 1 ? Carousel : React.Fragment;
@@ -4419,7 +4328,9 @@ function VideoTestimonial({
4419
4328
  })), /*#__PURE__*/React__default["default"].createElement(Wrapper, null, videoData.videoCarousel.components.map((data, index) => /*#__PURE__*/React__default["default"].createElement(SingleVideoSlide$2, {
4420
4329
  data: data,
4421
4330
  key: index,
4422
- sectionIndex: sectionIndex
4331
+ sectionIndex: sectionIndex,
4332
+ countryCode: countryCode,
4333
+ currencySymbol: currencySymbol
4423
4334
  }))))));
4424
4335
  }
4425
4336
 
@@ -4431,16 +4342,17 @@ var index$f = /*#__PURE__*/Object.freeze({
4431
4342
  const useVideoStyles = createUseStyles(theme => {
4432
4343
  return {
4433
4344
  videoSuperContainer: {
4434
- padding: ({
4435
- isMobile
4436
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
4345
+ padding: '70px',
4437
4346
  backgroundColor: theme?.palette?.background?.primary,
4438
4347
  '&, & *, & *:before, & *:after': {
4439
4348
  fontFamily: theme?.typography?.fontFamily,
4440
4349
  boxSizing: 'border-box'
4441
4350
  },
4442
- '& h3': {
4443
- marginTop: '0'
4351
+ '& h2,& h3': {
4352
+ fontWeight: '500',
4353
+ '& b,& strong': {
4354
+ fontWeight: '700'
4355
+ }
4444
4356
  }
4445
4357
  },
4446
4358
  sectionContainer: {
@@ -4449,30 +4361,28 @@ const useVideoStyles = createUseStyles(theme => {
4449
4361
  containerWidth
4450
4362
  } = {}) => containerWidth
4451
4363
  },
4452
- // videoContainer: {
4453
- // marginTop: '70px'
4454
- // },
4455
-
4364
+ videoContainer: {
4365
+ marginTop: '70px'
4366
+ },
4456
4367
  videoHeading: {
4457
- fontSize: theme.typography.fontSize.subHead,
4458
- textTransform: 'uppercase',
4368
+ fontSize: '16px',
4459
4369
  lineHeight: '20px',
4460
- color: theme?.palette?.font?.default,
4370
+ marginBottom: '4px',
4461
4371
  letterSpacing: '3px',
4372
+ color: theme?.palette?.font?.primary,
4462
4373
  wordBreak: 'break-word'
4463
4374
  },
4464
4375
  videoTitle: {
4465
- fontSize: theme.typography.fontSize.h2,
4466
- fontWeight: theme.typography.fontWeight.bold,
4376
+ fontSize: '56px',
4467
4377
  lineHeight: '71px',
4468
4378
  letterSpacing: '-3px',
4469
- marginBottom: theme.spacing.margin.tiny,
4470
- marginTop: '8px',
4379
+ marginBottom: '20px',
4380
+ marginTop: '0',
4471
4381
  color: theme?.palette?.font?.default,
4472
4382
  wordBreak: 'break-word'
4473
4383
  },
4474
4384
  sliderContainer: {
4475
- marginRight: `-${theme.spacing.padding.medium}px`
4385
+ marginRight: '-35px'
4476
4386
  },
4477
4387
  singleSlideContainer: {
4478
4388
  backgroundColor: theme?.palette?.background?.default,
@@ -4480,7 +4390,7 @@ const useVideoStyles = createUseStyles(theme => {
4480
4390
  width: 'calc(100% - 40px)',
4481
4391
  height: 'calc(100% - 40px)',
4482
4392
  borderRadius: theme?.shape?.borderRadius?.regular,
4483
- padding: '48px',
4393
+ padding: '40px',
4484
4394
  boxShadow: theme?.shadows?.primary
4485
4395
  },
4486
4396
  contentRow: {
@@ -4493,7 +4403,6 @@ const useVideoStyles = createUseStyles(theme => {
4493
4403
  width: '100%',
4494
4404
  borderRadius: theme?.shape?.borderRadius?.regular,
4495
4405
  position: 'relative',
4496
- overflow: 'hidden',
4497
4406
  paddingBottom: '56.25%'
4498
4407
  },
4499
4408
  iframe: {
@@ -4508,32 +4417,43 @@ const useVideoStyles = createUseStyles(theme => {
4508
4417
  margin: '12px 12px 0'
4509
4418
  },
4510
4419
  videoDetailsHeading: {
4511
- fontSize: theme.typography.fontSize.h5,
4512
- fontWeight: theme.typography.fontWeight.bold,
4420
+ fontSize: '24px',
4513
4421
  lineHeight: '32px',
4514
- marginBottom: '8px',
4422
+ margin: '0',
4515
4423
  color: theme?.palette?.font?.default,
4516
4424
  wordBreak: 'break-word'
4517
4425
  },
4518
4426
  videoDetailsSubHeading: {
4519
- fontSize: theme.typography.fontSize.subHead,
4427
+ fontSize: '16px',
4520
4428
  lineHeight: '24px',
4521
4429
  wordBreak: 'break-word',
4522
4430
  color: theme?.palette?.font?.primary
4523
4431
  },
4524
4432
  '@media (max-width: 767px)': {
4433
+ videoSuperContainer: {
4434
+ padding: '70px 20px 60px'
4435
+ },
4525
4436
  videoHeading: {
4526
- lineHeight: '20px'
4437
+ fontSize: '16px',
4438
+ lineHeight: '20px',
4439
+ letterSpacing: '3px'
4440
+ },
4441
+ videoTitle: {
4442
+ fontSize: '24px',
4443
+ lineHeight: '36px',
4444
+ letterSpacing: '-1px',
4445
+ marginBottom: '0',
4446
+ marginTop: '0'
4527
4447
  },
4528
4448
  videoContainer: {
4529
4449
  margin: '0'
4530
4450
  },
4531
4451
  sliderContainer: {
4532
- // marginLeft: '-6px',
4533
- marginRight: '0px'
4452
+ marginLeft: '-6px',
4453
+ marginRight: '-20px'
4534
4454
  },
4535
4455
  singleSlideContainer: {
4536
- padding: '16px',
4456
+ padding: '0',
4537
4457
  width: 'calc(100% - 12px)',
4538
4458
  height: 'calc(100% - 24px)',
4539
4459
  margin: '12px 6px'
@@ -4545,28 +4465,14 @@ const useVideoStyles = createUseStyles(theme => {
4545
4465
  textAlign: 'left',
4546
4466
  margin: '12px 12px 0'
4547
4467
  },
4548
- videoTitle: {
4549
- display: 'flex',
4550
- justifyContent: 'center',
4551
- textAlign: 'center',
4552
- lineHeight: '36px',
4553
- letterSpacing: '-1px'
4468
+ videoDetailsHeading: {
4469
+ fontSize: '18px',
4470
+ margin: '0'
4554
4471
  },
4555
- videoHeading: {
4556
- display: 'flex',
4557
- justifyContent: 'center',
4558
- textAlign: 'center'
4472
+ videoDetailsSubHeading: {
4473
+ fontSize: '12px',
4474
+ paddingBottom: '20px'
4559
4475
  }
4560
-
4561
- // videoDetailsHeading: {
4562
- // fontSize: '18px',
4563
- // margin: '0'
4564
- // },
4565
-
4566
- // videoDetailsSubHeading: {
4567
- // fontSize: '12px',
4568
- // paddingBottom: '20px'
4569
- // }
4570
4476
  }
4571
4477
  };
4572
4478
  });
@@ -4580,7 +4486,10 @@ const SingleSlide$1 = props => {
4580
4486
  className: classes.singleSlideContainer
4581
4487
  }, /*#__PURE__*/React__default["default"].createElement("div", {
4582
4488
  ref: data?.videoFrame?.refSetter,
4583
- className: classes.iframeContainer
4489
+ className: classes.iframeContainer,
4490
+ style: {
4491
+ background: 'linear-gradient(#333333,rgb(0 0 0))'
4492
+ }
4584
4493
  }, /*#__PURE__*/React__default["default"].createElement(VideoPlayer, {
4585
4494
  imageUrl: data.videoFrame.metadata?.thumbnail,
4586
4495
  videoUrl: data.videoFrame.metadata?.value
@@ -4616,13 +4525,12 @@ function Video({
4616
4525
  const classes = useVideoStyles({
4617
4526
  containerWidth,
4618
4527
  cardsCount,
4619
- slidesToShow,
4620
- isMobile
4528
+ slidesToShow
4621
4529
  });
4622
4530
  const settings = {
4623
4531
  className: classes.sliderContainer,
4624
4532
  slidesToShow,
4625
- centerPadding: isMobile ? '0px' : '100px 0 0',
4533
+ centerPadding: isMobile ? '40px 0 0' : '100px 0 0',
4626
4534
  centerMode: true
4627
4535
  };
4628
4536
  const carouselContent = videoData.videoCarousel.components.map((data, index) => /*#__PURE__*/React__default["default"].createElement(SingleSlide$1, {
@@ -4665,20 +4573,19 @@ var index$e = /*#__PURE__*/Object.freeze({
4665
4573
  const useSectionStyles$3 = createUseStyles(theme => ({
4666
4574
  section: {
4667
4575
  position: 'relative',
4668
- padding: `${theme?.spacing?.padding?.regular}px 0px ${theme?.spacing?.padding?.regular}px ${theme?.spacing?.padding?.medium}px`,
4576
+ padding: '70px 0',
4669
4577
  backgroundColor: theme?.palette?.background?.default,
4670
4578
  '&, & *, & *:before, & *:after': {
4671
4579
  fontFamily: theme?.typography?.fontFamily,
4672
4580
  boxSizing: 'border-box'
4581
+ },
4582
+ '& h2,& h3': {
4583
+ fontWeight: '500',
4584
+ '& b,& strong': {
4585
+ fontWeight: '700'
4586
+ }
4673
4587
  }
4674
- // '& h2,& h3': {
4675
- // fontWeight: '500',
4676
- // '& b,& strong': {
4677
- // fontWeight: '700'
4678
- // }
4679
- // }
4680
4588
  },
4681
-
4682
4589
  sectionContainer: {
4683
4590
  margin: '0 auto',
4684
4591
  maxWidth: ({
@@ -4689,25 +4596,26 @@ const useSectionStyles$3 = createUseStyles(theme => ({
4689
4596
  position: 'absolute',
4690
4597
  top: '0',
4691
4598
  left: '0',
4692
- height: '50%',
4599
+ height: '350px',
4693
4600
  background: theme?.palette?.background?.primary,
4694
4601
  width: '100%'
4695
4602
  },
4696
4603
  content: {
4697
- position: 'relative'
4604
+ position: 'relative',
4605
+ margin: '0 70px'
4698
4606
  },
4699
4607
  subTitleHeading: {
4700
4608
  width: '100%',
4701
- fontSize: theme.typography.fontSize.subHead,
4702
- color: theme?.palette?.font?.default,
4609
+ fontSize: '16px',
4610
+ color: theme?.palette?.font?.tertiary,
4703
4611
  textAlign: 'left',
4704
4612
  lineHeight: '20px',
4705
4613
  letterSpacing: '3px',
4706
4614
  wordBreak: 'break-word'
4707
4615
  },
4708
4616
  heading: {
4709
- margin: `8px 0 ${theme.spacing.margin.tiny}px`,
4710
- fontSize: theme.typography.fontSize.h2,
4617
+ margin: '8px 0 20px',
4618
+ fontSize: '56px',
4711
4619
  width: '100%',
4712
4620
  lineHeight: '70px',
4713
4621
  color: theme?.palette?.font?.default,
@@ -4729,17 +4637,16 @@ const useSectionStyles$3 = createUseStyles(theme => ({
4729
4637
  height: 'calc(100% - 12px)'
4730
4638
  },
4731
4639
  cardContent: {
4732
- padding: theme.spacing.padding.tiny,
4640
+ padding: '32px',
4733
4641
  height: '100%',
4734
4642
  display: 'flex',
4735
4643
  flexDirection: 'column'
4736
4644
  },
4737
4645
  cardHeading: {
4738
- fontSize: theme.typography.fontSize.h5,
4646
+ fontSize: '24px',
4739
4647
  lineHeight: '32px',
4740
- fontWeight: theme.typography.fontWeight.bold,
4741
4648
  color: theme?.palette?.font?.default,
4742
- margin: `${theme.spacing.margin.tiny}px 0px`,
4649
+ margin: '32px 0 16px',
4743
4650
  wordBreak: 'break-word'
4744
4651
  },
4745
4652
  imageContainer: {
@@ -4751,16 +4658,8 @@ const useSectionStyles$3 = createUseStyles(theme => ({
4751
4658
  borderRadius: '50%',
4752
4659
  background: theme?.palette?.background?.primary
4753
4660
  },
4754
- buttonContainerClass: {
4755
- marginRight: theme.spacing.margin.regular,
4756
- display: 'flex',
4757
- gap: '20px',
4758
- alignItems: 'center',
4759
- justifyContent: 'center',
4760
- marginTop: theme.spacing.margin.tiny
4761
- },
4762
4661
  cardPara: {
4763
- fontSize: theme.typography.fontSize.subHead,
4662
+ fontSize: '16px',
4764
4663
  lineHeight: '24px',
4765
4664
  color: theme?.palette?.font?.primary,
4766
4665
  margin: '0',
@@ -4776,10 +4675,13 @@ const useSectionStyles$3 = createUseStyles(theme => ({
4776
4675
  '@media screen and (max-width: 767px)': {
4777
4676
  heading: {
4778
4677
  fontSize: '24px',
4779
- margin: `4px 0 ${theme.spacing.margin.tiny}px`,
4678
+ margin: '4px 0 12px',
4780
4679
  lineHeight: '36px',
4781
4680
  padding: '0'
4782
4681
  },
4682
+ content: {
4683
+ margin: '0 20px'
4684
+ },
4783
4685
  sliderContainer: {
4784
4686
  marginLeft: '-6px',
4785
4687
  marginRight: '-20px'
@@ -4794,6 +4696,12 @@ const useSectionStyles$3 = createUseStyles(theme => ({
4794
4696
  slidesToShow,
4795
4697
  cardsCount
4796
4698
  } = {}) => cardsCount > slidesToShow ? `6px 2px 6px 6px` : `6px 0 6px 0`
4699
+ },
4700
+ cardContent: {
4701
+ padding: '20px'
4702
+ },
4703
+ cardHeading: {
4704
+ margin: '14px 0'
4797
4705
  }
4798
4706
  }
4799
4707
  }));
@@ -4877,8 +4785,7 @@ function Info({
4877
4785
  }
4878
4786
  })), cardsCount > slidesToShow ? /*#__PURE__*/React__default["default"].createElement(Carousel, {
4879
4787
  hideArrow: isMobile,
4880
- settings: settings,
4881
- buttonContainerClass: classes.buttonContainerClass
4788
+ settings: settings
4882
4789
  }, carouselContent) : /*#__PURE__*/React__default["default"].createElement("div", {
4883
4790
  className: classes.contentRow
4884
4791
  }, carouselContent))));
@@ -4891,56 +4798,67 @@ var index$d = /*#__PURE__*/Object.freeze({
4891
4798
 
4892
4799
  const useSectionStyles$2 = createUseStyles(theme => ({
4893
4800
  section: {
4894
- padding: ({
4895
- isMobile
4896
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
4801
+ padding: '70px',
4897
4802
  backgroundColor: theme?.palette?.background?.default,
4898
4803
  '&, & *, & *:before, & *:after': {
4899
4804
  fontFamily: theme?.typography?.fontFamily,
4900
4805
  boxSizing: 'border-box'
4901
4806
  },
4902
- '& h2,& h3,& p': {
4903
- margin: '0'
4807
+ '& h2,& h3': {
4808
+ fontWeight: '500',
4809
+ '& b,& strong': {
4810
+ fontWeight: '700'
4811
+ }
4904
4812
  }
4905
4813
  },
4906
4814
  sectionContainer: {
4815
+ margin: '0 auto',
4907
4816
  maxWidth: ({
4908
4817
  containerWidth
4909
4818
  } = {}) => containerWidth
4910
4819
  },
4911
4820
  subHeading: {
4912
- fontSize: theme.typography.fontSize.subHead,
4821
+ fontSize: '20px',
4913
4822
  marginBottom: '8px',
4914
- color: theme?.palette?.font?.default,
4915
- wordBreak: 'break-word',
4916
- textTransform: 'uppercase',
4917
- letterSpacing: '3px'
4823
+ color: theme?.palette?.font?.tertiary,
4824
+ wordBreak: 'break-word'
4918
4825
  },
4919
4826
  title: {
4920
- fontSize: theme.typography.fontSize.h2,
4921
- fontWeight: theme.typography.fontWeight.bold,
4922
- lineHeight: 'normal',
4827
+ fontSize: '56px',
4828
+ lineHeight: '70px',
4923
4829
  margin: '0',
4924
4830
  color: theme?.palette?.font?.default,
4925
- wordBreak: 'break-word',
4926
- marginBottom: theme.spacing.margin.tiny
4831
+ wordBreak: 'break-word'
4927
4832
  },
4928
4833
  textContent: {
4929
4834
  display: 'grid',
4930
4835
  gridTemplateColumns: '1fr 1fr',
4931
- gap: '48px',
4932
- padding: '48px 0px'
4836
+ gap: '80px'
4933
4837
  },
4934
4838
  textPara: {
4839
+ margin: '20px 0 0 0',
4935
4840
  lineHeight: '24px',
4936
4841
  color: theme?.palette?.font?.primary,
4937
- wordBreak: 'break-word',
4938
- fontSize: theme.typography.fontSize.subHead
4842
+ wordBreak: 'break-word'
4939
4843
  },
4940
4844
  '@media screen and (max-width: 767px)': {
4845
+ section: {
4846
+ padding: '60px 20px'
4847
+ },
4848
+ subHeading: {
4849
+ fontSize: '16px',
4850
+ lineHeight: '20px',
4851
+ marginBottom: '4px'
4852
+ },
4853
+ title: {
4854
+ fontSize: '24px',
4855
+ lineHeight: '36px'
4856
+ },
4941
4857
  textContent: {
4942
- gap: '16px',
4943
- padding: '16px 0px'
4858
+ display: 'block'
4859
+ },
4860
+ textPara: {
4861
+ marginTop: '12px'
4944
4862
  }
4945
4863
  }
4946
4864
  }));
@@ -4951,12 +4869,10 @@ const TextSection = ({
4951
4869
  const {
4952
4870
  layout: {
4953
4871
  containerWidth
4954
- },
4955
- isMobile
4872
+ }
4956
4873
  } = React.useContext(PageContext);
4957
4874
  const classes = useSectionStyles$2({
4958
- containerWidth,
4959
- isMobile
4875
+ containerWidth
4960
4876
  });
4961
4877
  const [nodeData] = sectionData.components;
4962
4878
  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("section", {
@@ -5003,21 +4919,18 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
5003
4919
  return {
5004
4920
  container: {
5005
4921
  background: theme?.palette?.background?.default,
5006
- padding: ({
5007
- isMobile
5008
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px 0px ${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
4922
+ padding: '70px',
5009
4923
  '&, & *, & *:before, & *:after': {
5010
4924
  fontFamily: theme?.typography?.fontFamily,
5011
4925
  boxSizing: 'border-box'
4926
+ },
4927
+ '& h2,& h3': {
4928
+ fontWeight: '500',
4929
+ '& b,& strong': {
4930
+ fontWeight: '700'
4931
+ }
5012
4932
  }
5013
- // '& h2,& h3': {
5014
- // fontWeight: '500',
5015
- // '& b,& strong': {
5016
- // fontWeight: '700'
5017
- // }
5018
- // }
5019
4933
  },
5020
-
5021
4934
  sectionContainer: {
5022
4935
  margin: '0 auto',
5023
4936
  maxWidth: ({
@@ -5025,16 +4938,14 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
5025
4938
  } = {}) => containerWidth
5026
4939
  },
5027
4940
  cardHeading: {
5028
- color: theme?.palette?.font?.default,
5029
- fontSize: theme.typography.fontSize.subHead,
4941
+ color: theme?.palette?.font?.secondary,
4942
+ fontSize: '16px',
5030
4943
  letterSpacing: '3px',
5031
- wordBreak: 'break-word',
5032
- textTransform: 'uppercase'
4944
+ wordBreak: 'break-word'
4945
+ },
4946
+ sliderContainer: {
4947
+ marginRight: '-70px'
5033
4948
  },
5034
- // sliderContainer: {
5035
- // marginRight: '-70px'
5036
- // },
5037
-
5038
4949
  singleCard: {
5039
4950
  margin: '0 1px',
5040
4951
  width: 'calc(100% - 2px)',
@@ -5057,26 +4968,24 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
5057
4968
  height: '100%'
5058
4969
  },
5059
4970
  title: {
5060
- fontSize: theme.typography.fontSize.h2,
4971
+ fontSize: '56px',
5061
4972
  lineHeight: '70px',
5062
4973
  letterSpacing: '-3px',
5063
4974
  color: theme?.palette?.font?.default,
5064
- marginTop: '8px',
5065
- marginBottom: theme.spacing.margin.tiny,
4975
+ margin: '8px 0 20px',
5066
4976
  overflow: 'hidden',
5067
4977
  whiteSpace: 'nowrap',
5068
4978
  textOverflow: 'ellipsis'
5069
4979
  },
5070
4980
  '@media (max-width: 768px)': {
5071
- // container: {
5072
- // padding: '60px 20px'
5073
- // },
5074
-
5075
- // cardHeading: {
5076
- // marginLeft: '3px'
5077
- // },
5078
-
4981
+ container: {
4982
+ padding: '60px 20px'
4983
+ },
4984
+ cardHeading: {
4985
+ marginLeft: '3px'
4986
+ },
5079
4987
  title: {
4988
+ fontSize: '24px',
5080
4989
  lineHeight: '36px',
5081
4990
  letterSpacing: '-1px',
5082
4991
  color: theme?.palette?.font?.default,
@@ -5084,11 +4993,10 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
5084
4993
  overflow: 'hidden',
5085
4994
  whiteSpace: 'nowrap',
5086
4995
  textOverflow: 'ellipsis'
4996
+ },
4997
+ sliderContainer: {
4998
+ marginRight: '-20px'
5087
4999
  }
5088
-
5089
- // sliderContainer: {
5090
- // marginRight: '-20px'
5091
- // }
5092
5000
  }
5093
5001
  };
5094
5002
  });
@@ -5110,12 +5018,11 @@ function PhotoGallery({
5110
5018
  const classes = usePhotoGalleryStyles({
5111
5019
  containerWidth,
5112
5020
  cardsCount,
5113
- slidesToShow,
5114
- isMobile
5021
+ slidesToShow
5115
5022
  });
5116
5023
  const settings = {
5117
5024
  className: classes.sliderContainer,
5118
- dots: isMobile,
5025
+ dots: false,
5119
5026
  infinite: true,
5120
5027
  speed: 500,
5121
5028
  slidesToShow,
@@ -5169,69 +5076,64 @@ var index$b = /*#__PURE__*/Object.freeze({
5169
5076
  const useFaqListStyles = createUseStyles(theme => ({
5170
5077
  section: {
5171
5078
  width: '100%',
5172
- padding: ({
5173
- isMobile
5174
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
5079
+ padding: '70px',
5175
5080
  backgroundColor: theme?.palette?.background?.primary,
5176
5081
  '&, & *, & *:before, & *:after': {
5177
5082
  fontFamily: theme?.typography?.fontFamily,
5178
5083
  boxSizing: 'border-box'
5179
5084
  },
5180
5085
  '& h2,& h3': {
5181
- marginTop: '0'
5086
+ fontWeight: '500',
5087
+ '& b,& strong': {
5088
+ fontWeight: '700'
5089
+ }
5182
5090
  }
5183
5091
  },
5184
5092
  sectionContainer: {
5093
+ margin: '0 auto',
5185
5094
  maxWidth: ({
5186
5095
  containerWidth
5187
5096
  } = {}) => containerWidth
5188
5097
  },
5189
5098
  sectionSubheading: {
5190
- color: theme?.palette?.font.default,
5191
- fontSize: theme.typography.fontSize.subHead,
5099
+ color: theme?.palette?.font.tertiary,
5100
+ fontSize: '16px',
5192
5101
  marginBottom: '8px',
5193
5102
  wordBreak: 'break-word'
5194
5103
  },
5195
5104
  sectionHeading: {
5196
- fontSize: theme.typography.fontSize.h2,
5197
- fontWeight: theme.typography.fontWeight.bold,
5105
+ fontSize: '56px',
5106
+ margin: '0 0 20px',
5198
5107
  wordBreak: 'break-word',
5199
- marginBottom: `${theme.spacing.margin.tiny}px`
5108
+ lineHeight: '71px'
5200
5109
  },
5201
5110
  container: {
5202
5111
  boxShadow: theme?.shadows?.secondary,
5203
5112
  borderRadius: '8px',
5204
- backgroundColor: theme?.palette?.background?.default
5113
+ backgroundColor: theme?.palette?.background?.default,
5114
+ padding: '40px 60px 60px'
5205
5115
  },
5206
5116
  basicCardContainer: {
5207
- borderBottom: theme?.borders?.secondary,
5208
- padding: `${theme.spacing.padding.tiny}px`
5209
- },
5210
- innerContainer: {
5211
- display: 'flex',
5212
- flexDirection: 'column',
5213
- gap: ({
5214
- isSelected
5215
- } = {}) => isSelected ? '16px' : '0'
5216
- },
5217
- arrowButton: {
5218
- marginLeft: theme.spacing.margin.tiny
5117
+ borderBottom: theme?.borders?.secondary
5219
5118
  },
5220
5119
  header: {
5221
5120
  display: 'flex',
5222
5121
  justifyContent: 'space-between',
5223
- alignItems: 'center'
5122
+ alignItems: 'center',
5123
+ padding: '20px 0'
5224
5124
  },
5225
5125
  title: {
5226
5126
  color: theme?.palette?.font.default,
5227
- fontSize: theme.typography.fontSize.h5,
5228
- fontWeight: theme.typography.fontWeight.bold,
5127
+ fontSize: '24px',
5229
5128
  margin: '0',
5230
5129
  wordBreak: 'break-word'
5231
5130
  },
5232
5131
  content: {
5132
+ margin: ({
5133
+ isSelected
5134
+ } = {}) => isSelected ? '0 0 20px 0' : '0',
5233
5135
  color: theme?.palette?.font.primary,
5234
- fontSize: theme.typography.fontSize.subHead,
5136
+ fontSize: '16px',
5235
5137
  lineHeight: '24px',
5236
5138
  maxHeight: ({
5237
5139
  isSelected
@@ -5240,12 +5142,28 @@ const useFaqListStyles = createUseStyles(theme => ({
5240
5142
  overflow: 'hidden'
5241
5143
  },
5242
5144
  '@media screen and (max-width: 767px)': {
5145
+ section: {
5146
+ padding: '60px 20px'
5147
+ },
5148
+ sectionHeading: {
5149
+ fontSize: '36px'
5150
+ },
5151
+ header: {
5152
+ padding: '20px 0'
5153
+ },
5154
+ title: {
5155
+ fontSize: '18px'
5156
+ },
5243
5157
  content: {
5244
5158
  lineHeight: '20px'
5245
5159
  },
5160
+ container: {
5161
+ padding: '0 20px'
5162
+ },
5246
5163
  basicCardContainer: {
5247
5164
  '&:last-child': {
5248
- borderBottom: 'none'
5165
+ borderBottom: 'none',
5166
+ paddingBottom: '1px'
5249
5167
  }
5250
5168
  }
5251
5169
  }
@@ -5258,13 +5176,11 @@ const FAQListing = ({
5258
5176
  const {
5259
5177
  layout: {
5260
5178
  containerWidth
5261
- },
5262
- isMobile
5179
+ }
5263
5180
  } = React.useContext(PageContext);
5264
5181
  const classes = useFaqListStyles({
5265
5182
  selectedIndex,
5266
- containerWidth,
5267
- isMobile
5183
+ containerWidth
5268
5184
  });
5269
5185
  const [nodeData] = sectionData.components;
5270
5186
  return /*#__PURE__*/React__default["default"].createElement("section", {
@@ -5307,8 +5223,7 @@ const Accordion = ({
5307
5223
  return /*#__PURE__*/React__default["default"].createElement("div", {
5308
5224
  className: classes.basicCardContainer
5309
5225
  }, /*#__PURE__*/React__default["default"].createElement("div", {
5310
- onClick: onClick,
5311
- className: classes.innerContainer
5226
+ onClick: onClick
5312
5227
  }, /*#__PURE__*/React__default["default"].createElement("div", {
5313
5228
  className: classes.header
5314
5229
  }, /*#__PURE__*/React__default["default"].createElement("h3", {
@@ -5317,9 +5232,7 @@ const Accordion = ({
5317
5232
  dangerouslySetInnerHTML: {
5318
5233
  __html: item.question.metadata.value
5319
5234
  }
5320
- }), /*#__PURE__*/React__default["default"].createElement("div", {
5321
- className: classes.arrowButton
5322
- }, /*#__PURE__*/React__default["default"].createElement(ArrowButton, {
5235
+ }), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(ArrowButton, {
5323
5236
  down: isSelected,
5324
5237
  up: !isSelected,
5325
5238
  size: "small"
@@ -5339,26 +5252,19 @@ var index$a = /*#__PURE__*/Object.freeze({
5339
5252
 
5340
5253
  const useTextGridStyles = createUseStyles(theme => ({
5341
5254
  section: {
5342
- padding: ({
5343
- isMobile
5344
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
5345
- // backgroundColor: theme?.palette?.background?.primary,
5346
-
5255
+ padding: '70px',
5256
+ backgroundColor: theme?.palette?.background?.primary,
5347
5257
  '&, & *, & *:before, & *:after': {
5348
5258
  fontFamily: theme?.typography?.fontFamily,
5349
5259
  boxSizing: 'border-box'
5350
5260
  },
5351
- '& h2,& h3,& p': {
5352
- marginTop: '0'
5261
+ '& h2,& h3': {
5262
+ fontWeight: '500',
5263
+ '& b,& strong': {
5264
+ fontWeight: '700'
5265
+ }
5353
5266
  }
5354
- // '& h2,& h3': {
5355
- // fontWeight: '500',
5356
- // '& b,& strong': {
5357
- // fontWeight: '700'
5358
- // }
5359
- // }
5360
5267
  },
5361
-
5362
5268
  sectionContainer: {
5363
5269
  margin: '0 auto',
5364
5270
  maxWidth: ({
@@ -5366,28 +5272,25 @@ const useTextGridStyles = createUseStyles(theme => ({
5366
5272
  } = {}) => containerWidth
5367
5273
  },
5368
5274
  subheading: {
5369
- color: theme?.palette?.font.default,
5370
- fontSize: theme.typography.fontSize.subHead,
5275
+ color: theme?.palette?.font.tertiary,
5276
+ fontSize: '16px',
5371
5277
  lineHeight: '20px',
5372
5278
  letterSpacing: '3px',
5373
- wordBreak: 'break-word',
5374
- textTransform: 'uppercase',
5375
- marginBottom: '8px'
5279
+ wordBreak: 'break-word'
5376
5280
  },
5377
5281
  heading: {
5378
- fontSize: theme.typography.fontSize.h2,
5379
- lineHeight: 'normal',
5380
- fontWeight: theme.typography.fontWeight.bold,
5282
+ fontSize: '56px',
5283
+ lineHeight: '70px',
5381
5284
  letterSpacing: '-3px',
5382
- marginBottom: theme.spacing.margin.tiny,
5285
+ margin: '8px 0 16px',
5383
5286
  wordBreak: 'break-word'
5384
5287
  },
5385
5288
  sliderContainer: {
5386
5289
  margin: '0 -10px'
5387
5290
  },
5388
5291
  node: {
5389
- margin: '0 16px',
5390
- padding: '48px',
5292
+ margin: '6px 10px',
5293
+ padding: '40px',
5391
5294
  position: 'relative',
5392
5295
  height: 'calc(100% - 12px)',
5393
5296
  background: theme?.palette?.background?.default,
@@ -5395,17 +5298,17 @@ const useTextGridStyles = createUseStyles(theme => ({
5395
5298
  borderRadius: theme?.shape?.borderRadius?.regular
5396
5299
  },
5397
5300
  nodeTitle: {
5398
- color: theme?.palette?.font.default,
5399
- fontSize: theme.typography.fontSize.h3,
5400
- fontWeight: theme.typography.fontWeight.bold,
5401
- lineHeight: 'normal',
5301
+ color: theme?.palette?.font.secondary,
5302
+ fontSize: '40px',
5303
+ lineHeight: '48px',
5402
5304
  margin: '0 0 20px',
5403
5305
  wordBreak: 'break-word'
5404
5306
  },
5405
5307
  nodePara: {
5406
5308
  color: theme?.palette?.font.tertiary,
5407
- fontSize: theme.typography.fontSize.subHead,
5309
+ fontSize: '16px',
5408
5310
  lineHeight: '24px',
5311
+ margin: '20px 0',
5409
5312
  wordBreak: 'break-word'
5410
5313
  },
5411
5314
  contentRow: {
@@ -5415,21 +5318,27 @@ const useTextGridStyles = createUseStyles(theme => ({
5415
5318
  } = {}) => `repeat(${slidesToShow},minmax(0, 1fr))`
5416
5319
  },
5417
5320
  '@media screen and (max-width: 767px)': {
5321
+ section: {
5322
+ padding: '60px 20px'
5323
+ },
5324
+ heading: {
5325
+ fontSize: '24px',
5326
+ lineHeight: '36px',
5327
+ letterSpacing: '-1px',
5328
+ margin: '4px 0 6px'
5329
+ },
5418
5330
  sliderContainer: {
5419
5331
  margin: '0 -20px 0 -10px'
5420
5332
  },
5421
5333
  node: {
5422
- padding: '16px',
5423
- margin: '0 6px'
5334
+ padding: '20px'
5424
5335
  },
5425
5336
  nodeTitle: {
5426
- marginBottom: '0px'
5337
+ fontSize: '24px',
5338
+ lineHeight: '36px'
5427
5339
  },
5428
5340
  nodePara: {
5429
- margin: '16px 0'
5430
- },
5431
- heading: {
5432
- letterSpacing: '-1px'
5341
+ margin: '12px 0'
5433
5342
  }
5434
5343
  }
5435
5344
  }));
@@ -5449,8 +5358,7 @@ const TextGrid = ({
5449
5358
  const classes = useTextGridStyles({
5450
5359
  containerWidth,
5451
5360
  cardsCount,
5452
- slidesToShow,
5453
- isMobile
5361
+ slidesToShow
5454
5362
  });
5455
5363
  const settings = {
5456
5364
  className: classes.sliderContainer,
@@ -5511,46 +5419,39 @@ const useCourseStyles = createUseStyles(theme => {
5511
5419
  return {
5512
5420
  coursesContainer: {
5513
5421
  overflow: 'hidden',
5514
- padding: ({
5515
- isMobile
5516
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
5517
5422
  '&, & *, & *:before, & *:after': {
5518
5423
  fontFamily: theme?.typography?.fontFamily,
5519
5424
  boxSizing: 'border-box'
5425
+ },
5426
+ '& h2,& h3': {
5427
+ fontWeight: '500',
5428
+ '& b,& strong': {
5429
+ fontWeight: '700'
5430
+ }
5520
5431
  }
5521
- // '& h2,& h3': {
5522
- // fontWeight: '500',
5523
- // '& b,& strong': {
5524
- // fontWeight: '700'
5525
- // }
5526
- // }
5527
5432
  },
5528
-
5529
5433
  sectionContainer: {
5530
5434
  margin: '0 auto',
5531
5435
  maxWidth: ({
5532
5436
  containerWidth
5533
5437
  } = {}) => containerWidth
5534
5438
  },
5535
- // coursesCardAndText: {
5536
- // padding: '70px'
5537
- // },
5538
-
5439
+ coursesCardAndText: {
5440
+ padding: '70px'
5441
+ },
5539
5442
  coursesText: {
5540
5443
  color: theme?.palette?.font?.secondary,
5541
5444
  fontWeight: '400',
5542
- fontSize: theme.typography.fontSize.subHead,
5445
+ fontSize: '16px',
5543
5446
  lineHeight: '20px',
5544
5447
  textAlign: 'center',
5545
- textTransform: 'uppercase',
5546
5448
  wordBreak: 'break-word'
5547
5449
  },
5548
5450
  coursesHeader: {
5549
- fontSize: theme.typography.fontSize.h2,
5451
+ fontSize: '56px',
5550
5452
  lineHeight: '70px',
5551
5453
  color: theme?.palette?.font?.default,
5552
- marginTop: '8px',
5553
- marginBottom: theme.spacing.margin.tiny,
5454
+ margin: '10px 0 40px 10px',
5554
5455
  overflow: 'hidden',
5555
5456
  whiteSpace: 'nowrap',
5556
5457
  textOverflow: 'ellipsis',
@@ -5625,7 +5526,7 @@ const useCourseStyles = createUseStyles(theme => {
5625
5526
  courseCardName: {
5626
5527
  color: theme?.palette?.font?.default,
5627
5528
  fontWeight: '700',
5628
- fontSize: theme.typography.fontSize.h5,
5529
+ fontSize: '24px',
5629
5530
  lineHeight: '32px',
5630
5531
  wordBreak: 'break-word',
5631
5532
  padding: '12px 0px',
@@ -5640,7 +5541,7 @@ const useCourseStyles = createUseStyles(theme => {
5640
5541
  display: 'flex',
5641
5542
  justifyContent: 'flex-start',
5642
5543
  alignItems: 'center',
5643
- fontSize: theme.typography.fontSize.subHead,
5544
+ fontSize: '16px',
5644
5545
  color: theme?.palette?.font?.primary,
5645
5546
  '& img': {
5646
5547
  marginRight: '5px'
@@ -5652,10 +5553,10 @@ const useCourseStyles = createUseStyles(theme => {
5652
5553
  display: 'flex',
5653
5554
  justifyContent: 'space-between',
5654
5555
  alignItems: 'center',
5655
- padding: '12px 0 0 4px'
5556
+ padding: '13px 0 0 4px'
5656
5557
  },
5657
5558
  courseCardPrice: {
5658
- fontSize: theme.typography.fontSize.h5,
5559
+ fontSize: '24px',
5659
5560
  fontWeight: '700'
5660
5561
  },
5661
5562
  coursesAnchorTag: {
@@ -5676,8 +5577,7 @@ const useCourseStyles = createUseStyles(theme => {
5676
5577
  cursor: 'pointer',
5677
5578
  background: theme?.palette?.primary?.main,
5678
5579
  color: theme?.palette?.font?.invertedDefault,
5679
- padding: '8px 16px',
5680
- fontWeight: theme.typography.fontWeight.bold,
5580
+ padding: '12px 16px',
5681
5581
  cursor: 'pointer',
5682
5582
  borderRadius: theme.shape.borderRadius.regular
5683
5583
  },
@@ -5722,7 +5622,7 @@ const useCourseStyles = createUseStyles(theme => {
5722
5622
  //background: theme?.palette?.background?.primary
5723
5623
  },
5724
5624
  coursesCardAndText: {
5725
- // padding: '70px 30px'
5625
+ padding: '70px 30px'
5726
5626
  },
5727
5627
  singleCardContainer: {
5728
5628
  gridTemplateColumns: '1fr'
@@ -5731,7 +5631,7 @@ const useCourseStyles = createUseStyles(theme => {
5731
5631
  margin: '0'
5732
5632
  },
5733
5633
  coursesHeader: {
5734
- // fontSize: '24px',
5634
+ fontSize: '24px',
5735
5635
  lineHeight: '36px',
5736
5636
  color: theme?.palette?.font?.default,
5737
5637
  margin: '4px 0 12px 0',
@@ -5740,8 +5640,8 @@ const useCourseStyles = createUseStyles(theme => {
5740
5640
  textOverflow: 'ellipsis'
5741
5641
  },
5742
5642
  singleCard: {
5743
- margin: '6px 2px'
5744
- // width: 'calc(100% - 12px)'
5643
+ margin: '6px 2px',
5644
+ width: 'calc(100% - 4px)'
5745
5645
  }
5746
5646
  }
5747
5647
  };
@@ -5906,8 +5806,7 @@ function courses({
5906
5806
  const [fallBackImages, setFallbackImages] = React.useState([]);
5907
5807
  const [showShimmer, setShowShimmer] = React.useState(true);
5908
5808
  const classes = useCourseStyles({
5909
- containerWidth,
5910
- isMobile
5809
+ containerWidth
5911
5810
  });
5912
5811
  const [nodeData] = sectionData?.components;
5913
5812
  const handleApiCall = () => {
@@ -5959,7 +5858,7 @@ function courses({
5959
5858
  const settings = {
5960
5859
  className: classes.slickContainer,
5961
5860
  infinite: false,
5962
- slidesToShow: isMobile ? 1 : 3.5
5861
+ slidesToShow: isMobile ? 1.1 : 3.25
5963
5862
  };
5964
5863
  const Wrapper = (cardList?.length || fallBackImages?.length) > settings.slidesToShow ? Carousel : SimpleCardsContainer;
5965
5864
  const wrapperProps = (cardList?.length || fallBackImages?.length) > settings.slidesToShow ? {
@@ -6035,17 +5934,17 @@ var index$8 = /*#__PURE__*/Object.freeze({
6035
5934
  const useTeamStyles = createUseStyles(theme => {
6036
5935
  return {
6037
5936
  teamSuperContainer: {
6038
- padding: ({
6039
- isMobile
6040
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
6041
- // backgroundColor: theme?.palette?.background?.primary,
6042
-
5937
+ padding: '60px',
5938
+ backgroundColor: theme?.palette?.background?.primary,
6043
5939
  '&, & *, & *:before, & *:after': {
6044
5940
  fontFamily: theme?.typography?.fontFamily,
6045
5941
  boxSizing: 'border-box'
6046
5942
  },
6047
5943
  '& h2,& h3': {
6048
- margin: '0'
5944
+ fontWeight: '500',
5945
+ '& b,& strong': {
5946
+ fontWeight: '700'
5947
+ }
6049
5948
  }
6050
5949
  },
6051
5950
  sectionContainer: {
@@ -6055,31 +5954,20 @@ const useTeamStyles = createUseStyles(theme => {
6055
5954
  } = {}) => containerWidth
6056
5955
  },
6057
5956
  teamHeading: {
6058
- fontSize: theme.typography.fontSize.subHead,
6059
- textTransform: 'uppercase',
5957
+ fontSize: '16px',
6060
5958
  lineHeight: '20px',
6061
5959
  letterSpacing: '3px',
6062
- marginBottom: '8px',
6063
- color: theme?.palette?.font?.default,
6064
- wordBreak: 'break-word',
6065
- position: 'relative'
6066
- },
6067
- partialBackground: {
6068
- position: 'absolute',
6069
- top: '0',
6070
- left: '0',
6071
- height: '50%',
6072
- background: theme?.palette?.background?.primary,
6073
- width: '100%'
5960
+ margin: '0 0 8px',
5961
+ color: theme?.palette?.font?.primary,
5962
+ wordBreak: 'break-word'
6074
5963
  },
6075
5964
  teamTitle: {
6076
- fontSize: theme.typography.fontSize.h2,
6077
- fontWeight: theme.typography.fontWeight.bold,
5965
+ fontSize: '56px',
6078
5966
  lineHeight: '70px',
6079
5967
  letterSpacing: '-3px',
6080
5968
  wordBreak: 'break-word',
6081
- color: theme?.palette?.font?.default,
6082
- position: 'relative'
5969
+ margin: '0 ',
5970
+ color: theme?.palette?.font?.default
6083
5971
  },
6084
5972
  sliderContainer: {
6085
5973
  margin: '0 -20px'
@@ -6093,11 +5981,10 @@ const useTeamStyles = createUseStyles(theme => {
6093
5981
  singleSlideContainer: {
6094
5982
  backgroundColor: theme?.palette?.background?.default,
6095
5983
  margin: '20px',
6096
- width: 'calc(100% - 32px)',
6097
- // height: 'calc(100% - 40px)',
6098
- border: '3px solid #D8E0F0',
5984
+ width: 'calc(100% - 40px)',
5985
+ height: 'calc(100% - 40px)',
6099
5986
  borderRadius: theme?.shape?.borderRadius?.regular,
6100
- padding: theme.spacing.padding.tiny,
5987
+ padding: '32px',
6101
5988
  boxShadow: theme?.shadows?.primary
6102
5989
  },
6103
5990
  imageContainer: {
@@ -6122,28 +6009,32 @@ const useTeamStyles = createUseStyles(theme => {
6122
6009
  overflowWrap: 'break-word'
6123
6010
  },
6124
6011
  teamDetailsHeading: {
6125
- fontSize: theme.typography.fontSize.h5,
6126
- fontWeight: theme.typography.fontWeight.bold,
6012
+ fontSize: '24px',
6127
6013
  lineHeight: '32px',
6128
6014
  margin: '0',
6129
6015
  color: theme?.palette?.font?.default
6130
6016
  },
6131
6017
  teamDetailsSubHeading: {
6132
- fontSize: theme.typography.fontSize.subHead,
6018
+ fontSize: '16px',
6133
6019
  lineHeight: '24px',
6134
6020
  margin: '12px 0 0',
6135
6021
  color: theme?.palette?.font?.primary
6136
6022
  },
6137
6023
  '@media (max-width: 767px)': {
6138
- // teamSuperContainer: {
6139
- // padding: '60px 20px'
6140
- // },
6024
+ teamSuperContainer: {
6025
+ padding: '60px 20px'
6026
+ },
6141
6027
  teamHeading: {
6142
- lineHeight: '20px'
6028
+ fontSize: '16px',
6029
+ lineHeight: '20px',
6030
+ letterSpacing: '3px',
6031
+ margin: '0'
6143
6032
  },
6144
6033
  teamTitle: {
6034
+ fontSize: '24px',
6145
6035
  lineHeight: '36px',
6146
- letterSpacing: '-1px'
6036
+ letterSpacing: '-1px',
6037
+ margin: '0'
6147
6038
  },
6148
6039
  sliderContainer: {
6149
6040
  margin: '0 -4px'
@@ -6153,17 +6044,18 @@ const useTeamStyles = createUseStyles(theme => {
6153
6044
  margin: '12px 4px'
6154
6045
  },
6155
6046
  teamDetailsContainer: {
6156
- textAlign: 'center'
6157
- // margin: '15px 0 0',
6158
- // paddingBottom: '0'
6047
+ textAlign: 'center',
6048
+ margin: '15px 0 0',
6049
+ paddingBottom: '0'
6159
6050
  },
6160
-
6161
6051
  teamDetailsHeading: {
6052
+ fontSize: '16px',
6162
6053
  lineHeight: '24px',
6163
6054
  margin: '0',
6164
6055
  color: theme?.palette?.font?.default
6165
6056
  },
6166
6057
  teamDetailsSubHeading: {
6058
+ fontSize: '16px',
6167
6059
  color: theme?.palette?.font?.primary
6168
6060
  }
6169
6061
  }
@@ -6218,8 +6110,7 @@ function TeamCard({
6218
6110
  const classes = useTeamStyles({
6219
6111
  containerWidth,
6220
6112
  cardsCount,
6221
- slidesToShow,
6222
- isMobile
6113
+ slidesToShow
6223
6114
  });
6224
6115
  const settings = {
6225
6116
  className: classes.sliderContainer,
@@ -6241,8 +6132,6 @@ function TeamCard({
6241
6132
  }, /*#__PURE__*/React__default["default"].createElement("div", {
6242
6133
  className: classes.sectionContainer
6243
6134
  }, /*#__PURE__*/React__default["default"].createElement("div", {
6244
- className: classes.partialBackground
6245
- }), /*#__PURE__*/React__default["default"].createElement("div", {
6246
6135
  className: classes.teamHeading
6247
6136
  }, /*#__PURE__*/React__default["default"].createElement("span", {
6248
6137
  ref: teamData?.teamHeading?.refSetter,
@@ -6278,21 +6167,17 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6278
6167
  flexDirection: 'column',
6279
6168
  alignItems: 'center',
6280
6169
  backgroundColor: theme?.palette?.background?.default,
6281
- padding: ({
6282
- isMobile
6283
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
6284
6170
  '&, & *, & *:before, & *:after': {
6285
6171
  fontFamily: theme?.typography?.fontFamily,
6286
6172
  boxSizing: 'border-box'
6173
+ },
6174
+ '& h2,& h3': {
6175
+ fontWeight: '500',
6176
+ '& b,& strong': {
6177
+ fontWeight: '700'
6178
+ }
6287
6179
  }
6288
- // '& h2,& h3': {
6289
- // fontWeight: '500',
6290
- // '& b,& strong': {
6291
- // fontWeight: '700'
6292
- // }
6293
- // }
6294
6180
  },
6295
-
6296
6181
  formContainer: {
6297
6182
  margin: '0 auto',
6298
6183
  maxWidth: ({
@@ -6311,14 +6196,14 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6311
6196
  backgroundColor: theme?.palette?.background?.default,
6312
6197
  boxShadow: theme?.shadows?.secondary,
6313
6198
  borderRadius: theme?.shape?.borderRadius?.regular,
6314
- padding: '48px',
6199
+ margin: '60px 10%',
6200
+ padding: '40px 80px',
6315
6201
  position: 'relative'
6316
6202
  },
6317
6203
  title: {
6318
6204
  margin: '0',
6319
- fontSize: theme.typography.fontSize.h2,
6205
+ fontSize: '56px',
6320
6206
  color: theme?.palette?.font?.secondary,
6321
- fontWeight: theme.typography.fontWeight.bold,
6322
6207
  lineHeight: '71px',
6323
6208
  letterSpacing: '-3px',
6324
6209
  textAlign: 'left',
@@ -6326,19 +6211,16 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6326
6211
  },
6327
6212
  contentContainer: {
6328
6213
  width: '100%',
6329
- display: 'flex'
6330
- // alignItems: 'flex-start',
6214
+ display: 'flex',
6215
+ alignItems: 'flex-start',
6216
+ marginTop: '32px'
6331
6217
  },
6332
-
6333
6218
  leftContainer: {
6334
- width: '65%',
6335
- display: 'flex',
6336
- flexDirection: 'column',
6337
- justifyContent: 'space-between'
6219
+ width: '65%'
6338
6220
  },
6339
6221
  subtitle: {
6340
- // margin: '0 0 40px 0',
6341
- fontSize: theme.typography.fontSize.h6,
6222
+ margin: '0 0 40px 0',
6223
+ fontSize: '20px',
6342
6224
  color: theme?.palette?.font?.primary,
6343
6225
  lineHeight: '32px',
6344
6226
  wordBreak: 'break-word'
@@ -6360,16 +6242,13 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6360
6242
  padding: '4px 8px 0 0'
6361
6243
  },
6362
6244
  addressText: {
6363
- fontSize: theme.typography.fontSize.subHead,
6245
+ fontSize: '16px',
6364
6246
  color: theme?.palette?.font?.default,
6365
6247
  lineHeight: '24px'
6366
6248
  },
6367
6249
  rightContainer: {
6368
6250
  width: '50%',
6369
- padding: '0 0 0 80px',
6370
- display: 'flex',
6371
- flexDirection: 'column',
6372
- justifyContent: 'space-between'
6251
+ padding: '0 0 0 80px'
6373
6252
  },
6374
6253
  inputDiv: {
6375
6254
  margin: '0 0 20px 0',
@@ -6383,8 +6262,8 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6383
6262
  alignItems: 'center'
6384
6263
  },
6385
6264
  sectionContainer: {
6386
- // margin: '26px 16px',
6387
- padding: '16px'
6265
+ margin: '26px 16px',
6266
+ padding: '32px 16px'
6388
6267
  },
6389
6268
  partialBackground: {
6390
6269
  height: '150px'
@@ -6394,32 +6273,26 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6394
6273
  marginTop: '8px'
6395
6274
  },
6396
6275
  leftContainer: {
6397
- width: '100%'
6398
- // padding: '0 16ox'
6276
+ width: '100%',
6277
+ padding: '0 16ox'
6399
6278
  },
6400
-
6401
6279
  rightContainer: {
6402
6280
  width: '100%',
6403
6281
  padding: '0'
6404
6282
  },
6405
6283
  title: {
6406
- // fontSize: '24px',
6284
+ fontSize: '24px',
6407
6285
  lineHeight: '32px',
6408
- letterSpacing: 'initial',
6409
- margin: '0 0 16px 0',
6410
- textAlign: 'center'
6286
+ letterSpacing: 'initial'
6411
6287
  },
6412
6288
  subtitle: {
6413
- margin: '0 0 16px 0',
6414
- lineHeight: '26px',
6415
- textAlign: 'center'
6289
+ margin: '0 0 12px 0'
6416
6290
  },
6417
6291
  inputDiv: {
6418
- margin: '0 0 16px 0'
6292
+ margin: '0 0 10px 0'
6419
6293
  },
6420
6294
  addressRow: {
6421
- padding: '0px',
6422
- margin: '0 0 16px 0'
6295
+ padding: '12px 0'
6423
6296
  }
6424
6297
  }
6425
6298
  }));
@@ -6438,8 +6311,7 @@ function FormEnquiry({
6438
6311
  isEdit
6439
6312
  } = React.useContext(PageContext);
6440
6313
  const classes = useSectionStyles$1({
6441
- containerWidth,
6442
- isMobile
6314
+ containerWidth
6443
6315
  });
6444
6316
  const [nodeData] = sectionData.components;
6445
6317
  const theme = useTheme();
@@ -6498,10 +6370,6 @@ function FormEnquiry({
6498
6370
  className: classes.partialBackground
6499
6371
  }), /*#__PURE__*/React__default["default"].createElement("div", {
6500
6372
  className: classes.sectionContainer
6501
- }, /*#__PURE__*/React__default["default"].createElement("div", {
6502
- className: classes.contentContainer
6503
- }, /*#__PURE__*/React__default["default"].createElement("div", {
6504
- className: classes.leftContainer
6505
6373
  }, /*#__PURE__*/React__default["default"].createElement("h2", {
6506
6374
  className: classes.title
6507
6375
  }, /*#__PURE__*/React__default["default"].createElement("span", {
@@ -6510,6 +6378,10 @@ function FormEnquiry({
6510
6378
  __html: nodeData?.title?.metadata?.value
6511
6379
  }
6512
6380
  })), /*#__PURE__*/React__default["default"].createElement("div", {
6381
+ className: classes.contentContainer
6382
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
6383
+ className: classes.leftContainer
6384
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
6513
6385
  ref: nodeData?.subtitle?.refSetter,
6514
6386
  className: classes.subtitle,
6515
6387
  dangerouslySetInnerHTML: {
@@ -6649,7 +6521,7 @@ function FormEnquiry({
6649
6521
  messageValid: 1
6650
6522
  });
6651
6523
  }
6652
- })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(Button, {
6524
+ })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React__default["default"].createElement(Button, {
6653
6525
  ref: nodeData?.cta?.refSetter,
6654
6526
  data: btnDisabled && validData?.messageValid && validData?.emailValid && validData?.nameValid && validData?.phoneValid ? {
6655
6527
  value: 'Submitted'
@@ -6660,7 +6532,7 @@ function FormEnquiry({
6660
6532
  type: nodeData?.cta?.metadata?.type,
6661
6533
  size: isMobile ? 'small' : 'medium',
6662
6534
  disabled: btnDisabled
6663
- })))))));
6535
+ }))))));
6664
6536
  }
6665
6537
 
6666
6538
  var index$6 = /*#__PURE__*/Object.freeze({
@@ -6676,24 +6548,20 @@ const useSectionStyles = createUseStyles(theme => ({
6676
6548
  justifyContent: 'center',
6677
6549
  flexDirection: 'column',
6678
6550
  alignItems: 'center',
6679
- padding: ({
6680
- isMobile
6681
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
6682
6551
  backgroundColor: theme?.palette?.background?.default,
6683
6552
  '&, & *, & *:before, & *:after': {
6684
6553
  fontFamily: theme?.typography?.fontFamily,
6685
6554
  boxSizing: 'border-box'
6555
+ },
6556
+ '& h2,& h3': {
6557
+ fontWeight: '500',
6558
+ '& b,& strong': {
6559
+ fontWeight: '700'
6560
+ }
6686
6561
  }
6687
- // '& h2,& h3': {
6688
- // fontWeight: '500',
6689
- // '& b,& strong': {
6690
- // fontWeight: '700'
6691
- // }
6692
- // }
6693
6562
  },
6694
-
6695
6563
  contactContainer: {
6696
- width: '100%',
6564
+ width: '80%',
6697
6565
  margin: '0 auto',
6698
6566
  maxWidth: ({
6699
6567
  containerWidth
@@ -6711,12 +6579,13 @@ const useSectionStyles = createUseStyles(theme => ({
6711
6579
  backgroundColor: theme?.palette?.background?.default,
6712
6580
  boxShadow: theme?.shadows?.secondary,
6713
6581
  borderRadius: theme?.shape?.borderRadius?.regular,
6714
- padding: '48px',
6582
+ margin: '60px',
6583
+ padding: '40px 80px',
6715
6584
  position: 'relative'
6716
6585
  },
6717
6586
  title: {
6718
6587
  margin: '0',
6719
- fontSize: theme.typography.fontSize.h2,
6588
+ fontSize: '56px',
6720
6589
  color: theme?.palette?.font?.secondary,
6721
6590
  lineHeight: '71px',
6722
6591
  letterSpacing: '-3px',
@@ -6726,37 +6595,36 @@ const useSectionStyles = createUseStyles(theme => ({
6726
6595
  contentContainer: {
6727
6596
  width: '100%',
6728
6597
  display: 'flex',
6729
- justifyContent: 'space-between',
6598
+ alignItems: 'flex-start',
6599
+ marginTop: '32px',
6730
6600
  wordBreak: 'break-word'
6731
6601
  },
6732
6602
  leftContainer: {
6733
- width: '50%',
6734
- display: 'flex',
6735
- flexDirection: 'column',
6736
- justifyContent: 'space-between'
6603
+ width: '50%'
6737
6604
  },
6738
6605
  subtitle: {
6739
- margin: '0 0 auto 0',
6740
- fontSize: theme.typography.fontSize.h6,
6606
+ margin: '0 0 58px 0',
6607
+ fontSize: '20px',
6741
6608
  color: theme?.palette?.font?.primary,
6742
- lineHeight: '32px',
6743
- margin: '20px 0px'
6609
+ lineHeight: '32px'
6744
6610
  },
6745
6611
  addressContainer: {
6746
6612
  display: 'flex',
6747
6613
  alignItems: 'flex-start',
6748
6614
  flexDirection: 'column',
6749
- width: '100%',
6750
- position: 'relative'
6615
+ width: '85%',
6616
+ position: 'relative',
6617
+ paddingBottom: '55%'
6618
+ // '& img': {
6619
+ // width: '80%'
6620
+ // }
6751
6621
  },
6622
+
6752
6623
  telephoneImage: {
6753
6624
  width: '80%'
6754
6625
  },
6755
6626
  rightContainer: {
6756
6627
  width: '50%',
6757
- display: 'flex',
6758
- flexDirection: 'column',
6759
- justifyContent: 'space-between',
6760
6628
  padding: '0 0 0 80px'
6761
6629
  },
6762
6630
  inputDiv: {
@@ -6770,16 +6638,16 @@ const useSectionStyles = createUseStyles(theme => ({
6770
6638
  background: theme?.palette?.background?.default,
6771
6639
  border: `1px solid ${theme?.palette?.border?.secondary}`,
6772
6640
  borderRadius: theme?.shape?.borderRadius?.regular,
6773
- // padding: '14px 12px',
6641
+ padding: '14px 12px',
6774
6642
  display: 'flex',
6775
6643
  fontWeight: '400',
6776
- fontSize: theme.typography.fontSize.subHead,
6644
+ fontSize: '16px',
6777
6645
  lineHeight: '20px',
6778
6646
  fontFamily: 'inherit',
6779
6647
  resize: 'none',
6780
6648
  '&::placeholder': {
6781
6649
  fontWeight: '400',
6782
- fontSize: theme.typography.fontSize.subHead,
6650
+ fontSize: '16px',
6783
6651
  lineHeight: '20px',
6784
6652
  color: theme?.palette?.font?.primary,
6785
6653
  fontFamily: theme?.typography?.fontFamily
@@ -6809,7 +6677,8 @@ const useSectionStyles = createUseStyles(theme => ({
6809
6677
  alignItems: 'center'
6810
6678
  },
6811
6679
  sectionContainer: {
6812
- padding: '16px'
6680
+ margin: '26px 16px',
6681
+ padding: '32px 16px'
6813
6682
  },
6814
6683
  partialBackground: {
6815
6684
  height: '150px'
@@ -6827,17 +6696,15 @@ const useSectionStyles = createUseStyles(theme => ({
6827
6696
  padding: '0'
6828
6697
  },
6829
6698
  title: {
6830
- lineHeight: '26px',
6831
- letterSpacing: 'initial',
6832
- textAlign: 'center'
6699
+ fontSize: '24px',
6700
+ lineHeight: '32px',
6701
+ letterSpacing: 'initial'
6833
6702
  },
6834
6703
  subtitle: {
6835
- margin: '0 0 12px 0',
6836
- textAlign: 'center',
6837
- lineHeight: '26px'
6704
+ margin: '0 0 12px 0'
6838
6705
  },
6839
6706
  addressRow: {
6840
- // padding: '12px 0'
6707
+ padding: '12px 0'
6841
6708
  },
6842
6709
  addressContainer: {
6843
6710
  '& img': {
@@ -6845,7 +6712,7 @@ const useSectionStyles = createUseStyles(theme => ({
6845
6712
  }
6846
6713
  },
6847
6714
  inputDiv: {
6848
- // margin: '0 0 10px 0'
6715
+ margin: '0 0 10px 0'
6849
6716
  },
6850
6717
  inputField: {
6851
6718
  width: '100%',
@@ -6877,8 +6744,7 @@ function Contact({
6877
6744
  let [btnDisabled, setBtnDisabled] = React.useState(false);
6878
6745
  const [nodeData] = sectionData.components;
6879
6746
  const classes = useSectionStyles({
6880
- containerWidth,
6881
- isMobile
6747
+ containerWidth
6882
6748
  });
6883
6749
  let formInitialValue = {
6884
6750
  name: nodeData?.nameField?.metadata?.value,
@@ -6934,10 +6800,6 @@ function Contact({
6934
6800
  className: classes.partialBackground
6935
6801
  }), /*#__PURE__*/React__default["default"].createElement("div", {
6936
6802
  className: classes.sectionContainer
6937
- }, /*#__PURE__*/React__default["default"].createElement("div", {
6938
- className: classes.contentContainer
6939
- }, /*#__PURE__*/React__default["default"].createElement("div", {
6940
- className: classes.leftContainer
6941
6803
  }, /*#__PURE__*/React__default["default"].createElement("h2", {
6942
6804
  className: classes.title
6943
6805
  }, /*#__PURE__*/React__default["default"].createElement("span", {
@@ -6946,6 +6808,10 @@ function Contact({
6946
6808
  __html: nodeData?.title?.metadata?.value
6947
6809
  }
6948
6810
  })), /*#__PURE__*/React__default["default"].createElement("div", {
6811
+ className: classes.contentContainer
6812
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
6813
+ className: classes.leftContainer
6814
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
6949
6815
  ref: nodeData?.subtitle?.refSetter,
6950
6816
  className: classes.subtitle,
6951
6817
  dangerouslySetInnerHTML: {
@@ -7048,9 +6914,7 @@ function Contact({
7048
6914
  messageValid: 1
7049
6915
  });
7050
6916
  }
7051
- })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React__default["default"].createElement("div", {
7052
- className: classes.btnContainer
7053
- }, /*#__PURE__*/React__default["default"].createElement(Button, {
6917
+ })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React__default["default"].createElement(Button, {
7054
6918
  ref: nodeData?.cta?.refSetter,
7055
6919
  data: btnDisabled && validData?.messageValid && validData?.emailValid && validData?.nameValid && validData?.phoneValid ? {
7056
6920
  value: 'Submitted'
@@ -7062,7 +6926,7 @@ function Contact({
7062
6926
  size: isMobile ? 'small' : 'medium',
7063
6927
  disabled: btnDisabled,
7064
6928
  name: "button"
7065
- })))))));
6929
+ }))))));
7066
6930
  }
7067
6931
 
7068
6932
  var index$5 = /*#__PURE__*/Object.freeze({
@@ -7075,15 +6939,16 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7075
6939
  webinarSuperContainer: {
7076
6940
  display: 'flex',
7077
6941
  justifyContent: 'center',
7078
- padding: ({
7079
- isMobile
7080
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
6942
+ padding: '70px',
7081
6943
  '&, & *, & *:before, & *:after': {
7082
6944
  fontFamily: theme?.typography?.fontFamily,
7083
6945
  boxSizing: 'border-box'
7084
6946
  },
7085
- '& h2,& h3,& p': {
7086
- margin: '0'
6947
+ '& h2,& h3': {
6948
+ fontWeight: '500',
6949
+ '& b,& strong': {
6950
+ fontWeight: '700'
6951
+ }
7087
6952
  }
7088
6953
  },
7089
6954
  sectionContainer: {
@@ -7097,34 +6962,30 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7097
6962
  maxWidth: '1440px',
7098
6963
  fontFamily: theme?.typography?.fontFamily
7099
6964
  },
7100
- // videoTestimonialHeading: {
7101
- // fontSize: theme.typography.fontSize.subHead,
7102
- // lineHeight: '20px',
7103
- // letterSpacing: '3px',
7104
- // textTransform: 'uppercase',
7105
- // color: theme.palette.font.tertiary,
7106
- // wordBreak: 'break-word',
7107
- // fontWeight: theme.typography.fontWeight.bold,
7108
- // },
7109
-
7110
- // videoTestimonialTitle: {
7111
- // fontSize: theme.typography.fontSize.h2,
7112
- // lineHeight: '71px',
7113
- // fontWeight: theme.typography.fontWeight.bold,
7114
- // letterSpacing: '-3px',
7115
- // margin: '0',
7116
- // color: theme.palette.font.default,
7117
- // wordBreak: 'break-word'
7118
- // },
7119
-
7120
- // videoCarouselContainer: {
7121
- // marginTop: '16px'
7122
- // },
7123
-
6965
+ videoTestimonialHeading: {
6966
+ fontSize: '16px',
6967
+ lineHeight: '20px',
6968
+ letterSpacing: '3px',
6969
+ textTransform: 'uppercase',
6970
+ color: theme.palette.font.tertiary,
6971
+ wordBreak: 'break-word',
6972
+ fontWeight: '700'
6973
+ },
6974
+ videoTestimonialTitle: {
6975
+ fontSize: '56px',
6976
+ lineHeight: '71px',
6977
+ letterSpacing: '-3px',
6978
+ margin: '0',
6979
+ color: theme.palette.font.default,
6980
+ wordBreak: 'break-word'
6981
+ },
6982
+ videoCarouselContainer: {
6983
+ marginTop: '16px'
6984
+ },
7124
6985
  webinarCarousel: {
7125
6986
  display: 'flex',
7126
6987
  justifyContent: 'flex-start',
7127
- gap: '32px'
6988
+ gap: '20px'
7128
6989
  },
7129
6990
  '@media screen and (max-width: 767px)': {
7130
6991
  webinarCarousel: {
@@ -7139,21 +7000,18 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7139
7000
  alignItems: 'center'
7140
7001
  },
7141
7002
  iframeContainer: {
7142
- width: '100%',
7003
+ width: '90%',
7143
7004
  position: 'relative',
7144
7005
  paddingBottom: '56.25%',
7145
7006
  // top: "6%",
7146
- // left: '5%'
7147
- borderRadius: '8px',
7148
- overflow: 'hidden'
7007
+ left: '5%'
7149
7008
  },
7150
7009
  offerText: {
7151
7010
  textAlign: 'center',
7152
- color: theme.palette.font.primary,
7153
- marginBottom: '5%'
7011
+ color: theme.palette.font.primary
7154
7012
  },
7155
7013
  offerPrice: {
7156
- fontSize: theme.typography.fontSize.h5,
7014
+ fontSize: '28px',
7157
7015
  fontWeight: '600'
7158
7016
  },
7159
7017
  priceContainer: {
@@ -7172,10 +7030,9 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7172
7030
  bottomContainer: {
7173
7031
  display: 'flex',
7174
7032
  justifyContent: 'space-between',
7175
- marginTop: '5%'
7176
- // padding: '0px 5% 0px 5%'
7033
+ marginTop: '5%',
7034
+ padding: '0px 5% 0px 5%'
7177
7035
  },
7178
-
7179
7036
  iframe: {
7180
7037
  position: 'absolute',
7181
7038
  width: '100%',
@@ -7186,12 +7043,10 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7186
7043
  width: '100%',
7187
7044
  display: 'flex',
7188
7045
  flexDirection: 'column',
7189
- alignItems: 'flex-start',
7190
- gap: '20px'
7046
+ alignItems: 'flex-start'
7191
7047
  },
7192
7048
  videoDetailsHeading: {
7193
- fontSize: theme.typography.fontSize.h3,
7194
- fontWeight: theme.typography.fontWeight.bold,
7049
+ fontSize: '40px',
7195
7050
  lineHeight: '48px',
7196
7051
  margin: '0',
7197
7052
  letterSpacing: '-1px',
@@ -7205,7 +7060,7 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7205
7060
  display: 'flex',
7206
7061
  flexDirection: 'column',
7207
7062
  justifyContent: 'start',
7208
- padding: '24px',
7063
+ paddingTop: '20px',
7209
7064
  borderRadius: '10px'
7210
7065
  },
7211
7066
  bannerContainer: {
@@ -7218,12 +7073,14 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7218
7073
  position: 'relative',
7219
7074
  fontSize: '18px',
7220
7075
  transform: 'rotate(180deg)',
7221
- clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 calc(100% - 10px), 15px calc(50% - 10px/2))'
7076
+ clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 calc(100% - 10px), 15px calc(50% - 10px/2))',
7077
+ marginBottom: '16px'
7222
7078
  },
7223
7079
  bannerContainerText: {
7224
7080
  transform: 'rotate(180deg)'
7225
7081
  },
7226
7082
  courseDetailsTags: {
7083
+ marginTop: '16px',
7227
7084
  display: 'flex'
7228
7085
  },
7229
7086
  courseDetailTag: {
@@ -7231,22 +7088,23 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7231
7088
  alignItems: 'center',
7232
7089
  marginRight: '20px',
7233
7090
  '& div': {
7234
- fontSize: theme.typography.fontSize.subHead,
7091
+ fontSize: '14px',
7235
7092
  marginLeft: '10px'
7236
7093
  }
7237
7094
  },
7238
7095
  courseDetailContent: {
7239
- fontSize: theme.typography.fontSize.subHead,
7096
+ marginTop: '16px',
7097
+ fontSize: '16px',
7240
7098
  wordBreak: 'break-word',
7241
7099
  color: theme.palette.font.primary,
7242
- whiteSpace: 'pre-wrap',
7243
- width: '80%'
7100
+ margin: '10px 0 20px',
7101
+ whiteSpace: 'pre-wrap'
7244
7102
  },
7245
7103
  courseDetailViewFullDetails: {
7246
7104
  cursor: 'pointer',
7247
- fontSize: theme.typography.fontSize.subHead,
7105
+ fontSize: '16px',
7248
7106
  lineHeight: '24px',
7249
- marginTop: '-20px',
7107
+ margin: '0',
7250
7108
  color: '#00ADE7',
7251
7109
  wordBreak: 'break-word'
7252
7110
  },
@@ -7254,10 +7112,9 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7254
7112
  color: '#EB5757',
7255
7113
  fontWeight: '600'
7256
7114
  },
7257
- // webinarButtonContainer: {
7258
- // marginBottom: '20px'
7259
- // },
7260
-
7115
+ webinarButtonContainer: {
7116
+ marginBottom: '20px'
7117
+ },
7261
7118
  iconBackground: {
7262
7119
  display: 'flex',
7263
7120
  width: '36px',
@@ -7289,10 +7146,11 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7289
7146
  width: '100%'
7290
7147
  },
7291
7148
  videoDetailsHeading: {
7149
+ fontSize: '16px',
7292
7150
  lineHeight: '20px'
7293
7151
  },
7294
7152
  videoTestimonialTitle: {
7295
- // fontSize: '24px',
7153
+ fontSize: '24px',
7296
7154
  lineHeight: '36px',
7297
7155
  letterSpacing: '-1px'
7298
7156
  },
@@ -7322,7 +7180,9 @@ const SingleVideoSlide$1 = props => {
7322
7180
  const {
7323
7181
  data,
7324
7182
  webinarCtaClick,
7325
- conversions = 0
7183
+ conversions = 0,
7184
+ countryCode,
7185
+ currencySymbol
7326
7186
  } = props;
7327
7187
  const renderer = ({
7328
7188
  days,
@@ -7332,11 +7192,14 @@ const SingleVideoSlide$1 = props => {
7332
7192
  completed
7333
7193
  }) => {
7334
7194
  if (days === 0 && hours < 24) {
7195
+ if (countryCode === 'kr') {
7196
+ return /*#__PURE__*/React__default["default"].createElement("span", null, hours, " \uC2DC\uAC04 ", minutes, " \uBD84 ", seconds, "\uCD08");
7197
+ }
7335
7198
  return /*#__PURE__*/React__default["default"].createElement("span", null, hours, "h ", minutes, "m ", seconds, "s");
7336
7199
  } else {
7337
7200
  let given = moment__default["default"](props.data.offerPriceEndDate);
7338
7201
  let current = moment__default["default"]().startOf('day');
7339
- return /*#__PURE__*/React__default["default"].createElement("span", null, Math.floor(moment__default["default"].duration(given.diff(current)).asDays()), " day(s)");
7202
+ return /*#__PURE__*/React__default["default"].createElement("span", null, Math.floor(moment__default["default"].duration(given.diff(current)).asDays()), ' ', countryCode === 'kr' ? '날' : 'day(s)');
7340
7203
  }
7341
7204
  };
7342
7205
  const checkIfOfferIsValid = () => moment__default["default"]().diff(moment__default["default"](props.data.offerPriceEndDate)) < 0;
@@ -7368,6 +7231,44 @@ const SingleVideoSlide$1 = props => {
7368
7231
  return (discount / price * 100).toFixed(2);
7369
7232
  };
7370
7233
  const classes = useWebinarPromotionPage();
7234
+ const effectivePrice = formatCurrency(countryCode, data?.effectivePrice, currencySymbol);
7235
+ const renderHurryUpBannerText = () => {
7236
+ let count = data.offerPriceValidFor - conversions;
7237
+ if (countryCode === 'KR') {
7238
+ if (count > 1) {
7239
+ return `서두르세요! 현재 신청 가능 인원은 ${count}명 입니다.`;
7240
+ } else {
7241
+ return `서두르세요! ${count}명까지만 신청 가능이 가능합니다.`;
7242
+ }
7243
+ } else {
7244
+ return `Hurry up! Offer left for ${count} ${count > 1 ? 'users now' : 'user only'}`;
7245
+ }
7246
+ };
7247
+ const limitedPeriodOfferText = countryCode === 'KR' ? '기간 한정 딜이므로 서두르세요!' : 'Hurry up! Offer for limited period only';
7248
+ const renderOfferEndsInText = () => {
7249
+ if (countryCode === 'KR') {
7250
+ return /*#__PURE__*/React__default["default"].createElement("p", {
7251
+ className: classes.offerText
7252
+ }, /*#__PURE__*/React__default["default"].createElement("span", {
7253
+ className: classes.courseDetailTime
7254
+ }, /*#__PURE__*/React__default["default"].createElement(Countdown__default["default"], {
7255
+ renderer: renderer,
7256
+ date: data.offerPriceEndDate
7257
+ })), ' ', "\uD6C4\xA0\uC2E0\uCCAD\xA0\uB9C8\uAC10\xA0\uC608\uC815");
7258
+ } else {
7259
+ return /*#__PURE__*/React__default["default"].createElement("p", {
7260
+ className: classes.offerText
7261
+ }, "Offer Ends in", ' ', /*#__PURE__*/React__default["default"].createElement("span", {
7262
+ className: classes.courseDetailTime
7263
+ }, /*#__PURE__*/React__default["default"].createElement(Countdown__default["default"], {
7264
+ renderer: renderer,
7265
+ date: data.offerPriceEndDate
7266
+ })));
7267
+ }
7268
+ };
7269
+ const finalPrice = formatCurrency(countryCode, data?.price, currencySymbol);
7270
+ const buyNowText = countryCode === 'KR' ? '이 강좌를 수강하세요.' : 'BUY NOW';
7271
+ const registerNowText = countryCode === 'KR' ? '지금 신청하기' : 'REGISTER NOW';
7371
7272
  return /*#__PURE__*/React__default["default"].createElement("div", {
7372
7273
  className: classes.videoCarouselContainer
7373
7274
  }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -7380,11 +7281,11 @@ const SingleVideoSlide$1 = props => {
7380
7281
  className: classes.bannerContainer
7381
7282
  }, /*#__PURE__*/React__default["default"].createElement("div", {
7382
7283
  className: classes.bannerContainerText
7383
- }, "Hurry up! Offer left for", ' ', data.offerPriceValidFor - conversions, ' ', data.offerPriceValidFor - conversions > 1 ? 'users now' : 'user only')) : checkIfOfferIsValid() && data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : /*#__PURE__*/React__default["default"].createElement("div", {
7284
+ }, renderHurryUpBannerText())) : checkIfOfferIsValid() && data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : /*#__PURE__*/React__default["default"].createElement("div", {
7384
7285
  className: classes.bannerContainer
7385
7286
  }, /*#__PURE__*/React__default["default"].createElement("div", {
7386
7287
  className: classes.bannerContainerText
7387
- }, "Hurry up! Offer for limited period only"))), /*#__PURE__*/React__default["default"].createElement("h3", {
7288
+ }, limitedPeriodOfferText))), /*#__PURE__*/React__default["default"].createElement("h3", {
7388
7289
  ref: data?.videoTextHeading?.refSetter,
7389
7290
  className: classes.videoDetailsHeading,
7390
7291
  dangerouslySetInnerHTML: {
@@ -7424,14 +7325,7 @@ const SingleVideoSlide$1 = props => {
7424
7325
  }
7425
7326
  }))), /*#__PURE__*/React__default["default"].createElement("div", {
7426
7327
  className: classes.courseViewContainer
7427
- }, data.isPaid !== 0 && checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && /*#__PURE__*/React__default["default"].createElement("p", {
7428
- className: classes.offerText
7429
- }, "Offer Ends in", ' ', /*#__PURE__*/React__default["default"].createElement("span", {
7430
- className: classes.courseDetailTime
7431
- }, /*#__PURE__*/React__default["default"].createElement(Countdown__default["default"], {
7432
- renderer: renderer,
7433
- date: data.offerPriceEndDate
7434
- }))), /*#__PURE__*/React__default["default"].createElement("div", {
7328
+ }, data.isPaid !== 0 && checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && renderOfferEndsInText(), /*#__PURE__*/React__default["default"].createElement("div", {
7435
7329
  ref: data?.videoFrame?.refSetter,
7436
7330
  className: classes.iframeContainer
7437
7331
  }, /*#__PURE__*/React__default["default"].createElement(VideoPlayer, {
@@ -7448,13 +7342,14 @@ const SingleVideoSlide$1 = props => {
7448
7342
  className: classes.priceContainer
7449
7343
  }, /*#__PURE__*/React__default["default"].createElement("div", {
7450
7344
  className: classes.offerPrice
7451
- }, "\u20B9", data?.effectivePrice), checkForShowDiscount() && (data.offerPriceEndDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React__default["default"].createElement("p", {
7345
+ }, effectivePrice), checkForShowDiscount() && (data.offerPriceEndDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React__default["default"].createElement("p", {
7452
7346
  style: {
7453
- fontSize: '20px'
7347
+ fontSize: '20px',
7348
+ marginTop: '0px'
7454
7349
  }
7455
7350
  }, /*#__PURE__*/React__default["default"].createElement("span", {
7456
7351
  className: classes.originalPrice
7457
- }, "\u20B9", data?.price), ' ', /*#__PURE__*/React__default["default"].createElement("span", {
7352
+ }, finalPrice), ' ', /*#__PURE__*/React__default["default"].createElement("span", {
7458
7353
  className: classes.offerDiscount
7459
7354
  }, `${data && discount(data)}%`))) : null, /*#__PURE__*/React__default["default"].createElement("div", {
7460
7355
  className: classes.webinarButtonContainer
@@ -7466,7 +7361,7 @@ const SingleVideoSlide$1 = props => {
7466
7361
  data: {
7467
7362
  // link: 'headerData?.loginCtaLink',
7468
7363
  // isLink: 1,
7469
- value: data.isPaid ? 'BUY NOW' : 'REGISTER NOW'
7364
+ value: data.isPaid ? buyNowText : registerNowText
7470
7365
  // isExternal: 1
7471
7366
  },
7472
7367
 
@@ -7484,14 +7379,14 @@ function CoursePromotionPage$1({
7484
7379
  sectionIndex
7485
7380
  }) {
7486
7381
  const {
7487
- isMobile,
7488
7382
  layout: {
7489
7383
  containerWidth
7490
- }
7384
+ },
7385
+ countryCode,
7386
+ currencySymbol
7491
7387
  } = React.useContext(PageContext);
7492
7388
  const classes = useWebinarPromotionPage({
7493
- containerWidth,
7494
- isMobile
7389
+ containerWidth
7495
7390
  });
7496
7391
  return /*#__PURE__*/React__default["default"].createElement("div", {
7497
7392
  className: classes.webinarSuperContainer
@@ -7503,7 +7398,9 @@ function CoursePromotionPage$1({
7503
7398
  data: sectionData.components[0].metadata,
7504
7399
  webinarCtaClick: extraProps.webinarCtaClick,
7505
7400
  conversions: extraProps.conversions,
7506
- sectionIndex: sectionIndex
7401
+ sectionIndex: sectionIndex,
7402
+ countryCode: countryCode,
7403
+ currencySymbol: currencySymbol
7507
7404
  }))));
7508
7405
  }
7509
7406
 
@@ -7513,26 +7410,22 @@ var index$4 = /*#__PURE__*/Object.freeze({
7513
7410
  });
7514
7411
 
7515
7412
  const useCoursePromotionPage = createUseStyles(theme => {
7516
- debugger;
7517
7413
  return {
7518
7414
  courseSuperContainer: {
7519
7415
  display: 'flex',
7520
7416
  justifyContent: 'center',
7521
- padding: ({
7522
- isMobile
7523
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
7417
+ padding: '70px ',
7524
7418
  '&, & *, & *:before, & *:after': {
7525
7419
  fontFamily: theme?.typography?.fontFamily,
7526
7420
  boxSizing: 'border-box'
7421
+ },
7422
+ '& h2,& h3': {
7423
+ fontWeight: '500',
7424
+ '& b,& strong': {
7425
+ fontWeight: '700'
7426
+ }
7527
7427
  }
7528
- // '& h2,& h3': {
7529
- // fontWeight: '500',
7530
- // '& b,& strong': {
7531
- // fontWeight: '700'
7532
- // }
7533
- // }
7534
7428
  },
7535
-
7536
7429
  sectionContainer: {
7537
7430
  margin: '0 auto',
7538
7431
  maxWidth: ({
@@ -7545,7 +7438,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
7545
7438
  fontFamily: theme?.typography?.fontFamily
7546
7439
  },
7547
7440
  videoTestimonialHeading: {
7548
- fontSize: theme.typography.fontSize.subHead,
7441
+ fontSize: '16px',
7549
7442
  lineHeight: '20px',
7550
7443
  letterSpacing: '3px',
7551
7444
  textTransform: 'uppercase',
@@ -7554,7 +7447,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
7554
7447
  fontWeight: '700'
7555
7448
  },
7556
7449
  videoTestimonialTitle: {
7557
- fontSize: theme.typography.fontSize.h2,
7450
+ fontSize: '56px',
7558
7451
  lineHeight: '71px',
7559
7452
  letterSpacing: '-3px',
7560
7453
  margin: '0',
@@ -7562,12 +7455,12 @@ const useCoursePromotionPage = createUseStyles(theme => {
7562
7455
  wordBreak: 'break-word'
7563
7456
  },
7564
7457
  videoCarouselContainer: {
7565
- // marginTop: '16px'
7458
+ marginTop: '16px'
7566
7459
  },
7567
7460
  coursePageCarousel: {
7568
7461
  display: 'flex',
7569
7462
  justifyContent: 'flex-start',
7570
- gap: '32px'
7463
+ gap: '20px'
7571
7464
  },
7572
7465
  '@media screen and (max-width: 767px)': {
7573
7466
  coursePageCarousel: {
@@ -7582,19 +7475,18 @@ const useCoursePromotionPage = createUseStyles(theme => {
7582
7475
  alignItems: 'center'
7583
7476
  },
7584
7477
  iframeContainer: {
7585
- width: '100%',
7478
+ width: '90%',
7586
7479
  position: 'relative',
7587
- paddingBottom: '56.25%'
7480
+ paddingBottom: '56.25%',
7588
7481
  // top: "6%",
7589
- // left: '5%'
7482
+ left: '5%'
7590
7483
  },
7591
-
7592
7484
  offerText: {
7593
7485
  textAlign: 'center',
7594
7486
  color: theme.palette.font.primary
7595
7487
  },
7596
7488
  offerPrice: {
7597
- fontSize: theme.typography.fontSize.h4,
7489
+ fontSize: '28px',
7598
7490
  fontWeight: '700'
7599
7491
  },
7600
7492
  priceContainer: {
@@ -7612,7 +7504,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
7612
7504
  fontWeight: '600'
7613
7505
  },
7614
7506
  bottomContainer: {
7615
- width: '100%',
7507
+ width: '90%',
7616
7508
  marginLeft: 'auto',
7617
7509
  marginRight: 'auto',
7618
7510
  display: 'flex',
@@ -7629,11 +7521,10 @@ const useCoursePromotionPage = createUseStyles(theme => {
7629
7521
  width: '100%',
7630
7522
  display: 'flex',
7631
7523
  flexDirection: 'column',
7632
- alignItems: 'flex-start',
7633
- gap: '20px'
7524
+ alignItems: 'flex-start'
7634
7525
  },
7635
7526
  videoDetailsHeading: {
7636
- fontSize: theme.typography.fontSize.h3,
7527
+ fontSize: '40px',
7637
7528
  lineHeight: '48px',
7638
7529
  margin: '0',
7639
7530
  letterSpacing: '-1px',
@@ -7644,13 +7535,11 @@ const useCoursePromotionPage = createUseStyles(theme => {
7644
7535
  width: '445px',
7645
7536
  backgroundColor: '#f4f9ff',
7646
7537
  display: 'flex',
7647
- padding: '24px',
7648
7538
  flexDirection: 'column',
7649
- borderRadius: '10px'
7650
- // paddingBottom: '10px',
7651
- // paddingTop: '10px'
7539
+ borderRadius: '10px',
7540
+ paddingBottom: '10px',
7541
+ paddingTop: '10px'
7652
7542
  },
7653
-
7654
7543
  bannerContainer: {
7655
7544
  width: '100%',
7656
7545
  background: '#EB5757',
@@ -7659,12 +7548,11 @@ const useCoursePromotionPage = createUseStyles(theme => {
7659
7548
  padding: '10px 10px 23px 40px',
7660
7549
  wordWrap: 'break-word',
7661
7550
  position: 'relative',
7662
- fontSize: theme.typography.fontSize.subHead,
7551
+ fontSize: '18px',
7663
7552
  transform: 'rotate(180deg)',
7664
- clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 calc(100% - 10px), 15px calc(50% - 10px/2))'
7665
- // marginBottom: '16px'
7553
+ clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 calc(100% - 10px), 15px calc(50% - 10px/2))',
7554
+ marginBottom: '16px'
7666
7555
  },
7667
-
7668
7556
  bannerContainerText: {
7669
7557
  transform: 'rotate(180deg)'
7670
7558
  },
@@ -7675,15 +7563,16 @@ const useCoursePromotionPage = createUseStyles(theme => {
7675
7563
  },
7676
7564
  courseEmblem: {
7677
7565
  background: '#F0F4F8',
7678
- fontSize: theme.typography.fontSize.subHead,
7679
7566
  borderRadius: '2.00337px',
7680
7567
  padding: '8px',
7681
7568
  display: 'flex',
7682
7569
  alignItems: 'center',
7683
- justifyContent: 'center'
7570
+ justifyContent: 'center',
7571
+ marginTop: '20px',
7572
+ marginBottom: '20px'
7684
7573
  },
7685
7574
  courseDetailsTags: {
7686
- // marginTop: '16px',
7575
+ marginTop: '16px',
7687
7576
  display: 'flex',
7688
7577
  flexWrap: 'wrap'
7689
7578
  },
@@ -7693,14 +7582,13 @@ const useCoursePromotionPage = createUseStyles(theme => {
7693
7582
  alignItems: 'center',
7694
7583
  marginRight: '20px',
7695
7584
  '& div': {
7696
- fontSize: theme.typography.fontSize.subHead,
7697
- fontWeight: theme.typography.fontWeight.semiBold,
7585
+ fontSize: '14px',
7698
7586
  marginLeft: '10px'
7699
7587
  }
7700
7588
  },
7701
7589
  courseDetailContent: {
7702
- // marginTop: '16px',
7703
- fontSize: theme.typography.fontSize.subHead,
7590
+ marginTop: '16px',
7591
+ fontSize: '16px',
7704
7592
  lineHeight: '24px',
7705
7593
  wordBreak: 'break-word',
7706
7594
  color: theme.palette.font.primary,
@@ -7709,9 +7597,9 @@ const useCoursePromotionPage = createUseStyles(theme => {
7709
7597
  },
7710
7598
  courseDetailViewFullDetails: {
7711
7599
  cursor: 'pointer',
7712
- fontSize: theme.typography.fontSize.subHead,
7600
+ fontSize: '16px',
7713
7601
  lineHeight: '24px',
7714
- marginTop: '-24px',
7602
+ margin: '0',
7715
7603
  color: '#00ADE7',
7716
7604
  wordBreak: 'break-word'
7717
7605
  },
@@ -7758,34 +7646,33 @@ const useCoursePromotionPage = createUseStyles(theme => {
7758
7646
  },
7759
7647
  '@media (max-width: 767px)': {
7760
7648
  bannerContainerText: {
7761
- // fontSize: '16px'
7649
+ fontSize: '16px'
7762
7650
  },
7763
7651
  courseViewContainer: {
7764
7652
  width: '100%',
7765
7653
  paddingBottom: '10px'
7766
7654
  },
7767
- // courseSuperContainer: {
7768
- // padding: '20px 10px 60px 20px'
7769
- // },
7655
+ courseSuperContainer: {
7656
+ padding: '20px 10px 60px 20px'
7657
+ },
7770
7658
  videoCarousel: {
7771
7659
  flexDirection: 'column-reverse',
7772
7660
  gap: '20px'
7773
7661
  },
7774
7662
  videoCarouselContainer: {
7775
- height: 'max-content'
7776
- // paddingRight: '10px'
7663
+ height: 'max-content',
7664
+ paddingRight: '10px'
7777
7665
  },
7778
-
7779
7666
  videoDetails: {
7780
7667
  width: '100%'
7781
7668
  },
7782
7669
  videoDetailsHeading: {
7783
- // fontSize: '20px',
7670
+ fontSize: '20px',
7784
7671
  fontWeight: '600',
7785
7672
  lineHeight: '20px'
7786
7673
  },
7787
7674
  videoTestimonialTitle: {
7788
- // fontSize: '24px',
7675
+ fontSize: '24px',
7789
7676
  lineHeight: '36px',
7790
7677
  letterSpacing: '-1px'
7791
7678
  },
@@ -7823,18 +7710,23 @@ const SingleVideoSlide = props => {
7823
7710
  completed
7824
7711
  }) => {
7825
7712
  if (days === 0 && hours < 24) {
7713
+ if (countryCode === 'kr') {
7714
+ return /*#__PURE__*/React__default["default"].createElement("span", null, hours, " \uC2DC\uAC04 ", minutes, " \uBD84 ", seconds, "\uCD08");
7715
+ }
7826
7716
  return /*#__PURE__*/React__default["default"].createElement("span", null, hours, "h ", minutes, "m ", seconds, "s");
7827
7717
  } else {
7828
7718
  let given = moment__default["default"](props.data.endDate);
7829
7719
  let current = moment__default["default"]().startOf('day');
7830
- return /*#__PURE__*/React__default["default"].createElement("span", null, Math.floor(moment__default["default"].duration(given.diff(current)).asDays()), " day(s)");
7720
+ return /*#__PURE__*/React__default["default"].createElement("span", null, Math.floor(moment__default["default"].duration(given.diff(current)).asDays()), ' ', countryCode === 'kr' ? '날' : 'day(s)');
7831
7721
  }
7832
7722
  };
7833
7723
  const {
7834
7724
  data,
7835
7725
  courseBuyNow,
7836
7726
  conversions = 20,
7837
- showCourseInstallment
7727
+ showCourseInstallment,
7728
+ countryCode,
7729
+ currencySymbol
7838
7730
  } = props;
7839
7731
  const showCourseInstallmentData = data?.courseOverviewData;
7840
7732
  const InstalmentData = isEdit ? data?.courseOverviewData?.installments?.formData?.installments[0].installmentAmount : data?.courseOverviewData?.installments?.formData?.installmentInfo?.installments[0].installmentPrice;
@@ -7867,6 +7759,34 @@ const SingleVideoSlide = props => {
7867
7759
  }) => {
7868
7760
  return (discount / price * 100).toFixed(2);
7869
7761
  };
7762
+ const renderHurryUpBannerText = () => {
7763
+ return countryCode === 'KR' ? `서두르세요! 현재 신청 가능 인원은 ${data.offerPriceValidFor - conversions}명 입니다.` : `Hurry up! Offer left for ${data.offerPriceValidFor - conversions} users now`;
7764
+ };
7765
+ const limitedPeriodOfferText = countryCode === 'KR' ? `기간 한정 딜이므로 서두르세요!` : 'Hurry up! Offer for limited period only';
7766
+ const renderOfferEndsInText = () => {
7767
+ if (countryCode === 'KR') {
7768
+ return /*#__PURE__*/React__default["default"].createElement("p", {
7769
+ className: classes.offerText
7770
+ }, /*#__PURE__*/React__default["default"].createElement("span", {
7771
+ className: classes.courseDetailTime
7772
+ }, /*#__PURE__*/React__default["default"].createElement(Countdown__default["default"], {
7773
+ renderer: renderer,
7774
+ date: data.endDate
7775
+ })), ' ', "\uD6C4\xA0\uC2E0\uCCAD\xA0\uB9C8\uAC10\xA0\uC608\uC815");
7776
+ } else {
7777
+ return /*#__PURE__*/React__default["default"].createElement("p", {
7778
+ className: classes.offerText
7779
+ }, "Offer Ends in", ' ', /*#__PURE__*/React__default["default"].createElement("span", {
7780
+ className: classes.courseDetailTime
7781
+ }, /*#__PURE__*/React__default["default"].createElement(Countdown__default["default"], {
7782
+ renderer: renderer,
7783
+ date: data.endDate
7784
+ })));
7785
+ }
7786
+ };
7787
+ const effectivePrice = formatCurrency(countryCode, data?.effectivePrice, currencySymbol);
7788
+ const finalPrice = formatCurrency(countryCode, data?.price, currencySymbol);
7789
+ const buyNowText = countryCode === 'KR' ? '이 강좌를 수강하세요.' : 'BUY NOW';
7870
7790
  return /*#__PURE__*/React__default["default"].createElement("div", {
7871
7791
  className: classes.videoCarouselContainer
7872
7792
  }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -7879,11 +7799,11 @@ const SingleVideoSlide = props => {
7879
7799
  className: classes.bannerContainer
7880
7800
  }, /*#__PURE__*/React__default["default"].createElement("div", {
7881
7801
  className: classes.bannerContainerText
7882
- }, "Hurry up! Offer left for", ' ', data.offerPriceValidFor - conversions, " users now")) : checkIfOfferIsValid() && /*#__PURE__*/React__default["default"].createElement("div", {
7802
+ }, renderHurryUpBannerText())) : checkIfOfferIsValid() && /*#__PURE__*/React__default["default"].createElement("div", {
7883
7803
  className: classes.bannerContainer
7884
7804
  }, /*#__PURE__*/React__default["default"].createElement("div", {
7885
7805
  className: classes.bannerContainerText
7886
- }, "Hurry up! Offer for limited period only"))), /*#__PURE__*/React__default["default"].createElement("div", {
7806
+ }, limitedPeriodOfferText))), /*#__PURE__*/React__default["default"].createElement("div", {
7887
7807
  className: classes.emblemContainer
7888
7808
  }, data?.courseOverviewData?.courseTagList.length && data?.courseOverviewData?.courseTagList?.map(data => {
7889
7809
  return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -7948,14 +7868,7 @@ const SingleVideoSlide = props => {
7948
7868
  }
7949
7869
  }, /*#__PURE__*/React__default["default"].createElement("div", {
7950
7870
  className: classes.courseViewContainer
7951
- }, checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && /*#__PURE__*/React__default["default"].createElement("p", {
7952
- className: classes.offerText
7953
- }, "Offer Ends in", ' ', /*#__PURE__*/React__default["default"].createElement("span", {
7954
- className: classes.courseDetailTime
7955
- }, /*#__PURE__*/React__default["default"].createElement(Countdown__default["default"], {
7956
- renderer: renderer,
7957
- date: data.endDate
7958
- }))), /*#__PURE__*/React__default["default"].createElement("div", {
7871
+ }, checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && renderOfferEndsInText(), /*#__PURE__*/React__default["default"].createElement("div", {
7959
7872
  ref: data?.videoFrame?.refSetter,
7960
7873
  className: classes.iframeContainer
7961
7874
  }, /*#__PURE__*/React__default["default"].createElement(VideoPlayer, {
@@ -7969,14 +7882,14 @@ const SingleVideoSlide = props => {
7969
7882
  className: classes.priceContainer
7970
7883
  }, /*#__PURE__*/React__default["default"].createElement("div", {
7971
7884
  className: classes.offerPrice
7972
- }, "\u20B9 ", data.effectivePrice), checkForShowDiscount() && (data.endDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React__default["default"].createElement("p", {
7885
+ }, effectivePrice), checkForShowDiscount() && (data.endDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React__default["default"].createElement("p", {
7973
7886
  style: {
7974
- // fontSize: '20px',
7887
+ fontSize: '20px',
7975
7888
  marginTop: '0px'
7976
7889
  }
7977
7890
  }, /*#__PURE__*/React__default["default"].createElement("span", {
7978
7891
  className: classes.originalPrice
7979
- }, "\u20B9 ", data.price), ' ', /*#__PURE__*/React__default["default"].createElement("span", {
7892
+ }, finalPrice), ' ', /*#__PURE__*/React__default["default"].createElement("span", {
7980
7893
  className: classes.offerDiscount
7981
7894
  }, `${data && discount(data)}%`))), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(Button, {
7982
7895
  style: {
@@ -7985,7 +7898,7 @@ const SingleVideoSlide = props => {
7985
7898
  data: {
7986
7899
  // link: 'headerData?.loginCtaLink',
7987
7900
  // isLink: 1,
7988
- value: 'BUY NOW'
7901
+ value: buyNowText
7989
7902
  // isExternal: 1
7990
7903
  },
7991
7904
 
@@ -8021,14 +7934,14 @@ function CoursePromotionPage({
8021
7934
  sectionIndex
8022
7935
  }) {
8023
7936
  const {
8024
- isMobile,
8025
7937
  layout: {
8026
7938
  containerWidth
8027
- }
7939
+ },
7940
+ countryCode,
7941
+ currencySymbol
8028
7942
  } = React.useContext(PageContext);
8029
7943
  const classes = useCoursePromotionPage({
8030
- containerWidth,
8031
- isMobile
7944
+ containerWidth
8032
7945
  });
8033
7946
  return /*#__PURE__*/React__default["default"].createElement("div", {
8034
7947
  className: classes.courseSuperContainer
@@ -8041,7 +7954,9 @@ function CoursePromotionPage({
8041
7954
  courseBuyNow: extraProps.courseBuyNow,
8042
7955
  showCourseInstallment: extraProps.showCourseInstallment,
8043
7956
  conversions: extraProps.conversions,
8044
- sectionIndex: sectionIndex
7957
+ sectionIndex: sectionIndex,
7958
+ countryCode: countryCode,
7959
+ currencySymbol: currencySymbol
8045
7960
  }))));
8046
7961
  }
8047
7962
 
@@ -8052,9 +7967,7 @@ var index$3 = /*#__PURE__*/Object.freeze({
8052
7967
 
8053
7968
  const useFormPageStyles = createUseStyles(theme => ({
8054
7969
  formPageSection: {
8055
- padding: ({
8056
- isMobile
8057
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
7970
+ padding: '35px 70px',
8058
7971
  background: '#F4F9FF',
8059
7972
  '&, & *, & *:before, & *:after': {
8060
7973
  fontFamily: theme?.typography?.fontFamily,
@@ -8065,82 +7978,77 @@ const useFormPageStyles = createUseStyles(theme => ({
8065
7978
  textAlign: 'center'
8066
7979
  },
8067
7980
  formPageTitle: {
8068
- fontSize: theme.typography.fontSize.h2,
8069
- fontWeight: theme.typography.fontWeight.bold
7981
+ fontSize: '50px',
7982
+ fontWeight: '700'
8070
7983
  },
8071
7984
  formPageSubtitle: {
8072
- marginTop: '8px',
8073
- fontSize: theme.typography.fontSize.h6,
7985
+ marginTop: '16px',
7986
+ fontSize: '16px',
8074
7987
  lineHeight: '23px',
8075
7988
  color: 'rgba(51, 51, 51, 0.5)',
8076
- marginBottom: theme.spacing.margin.tiny
7989
+ marginBottom: '32px'
8077
7990
  },
8078
7991
  formPageFormContainer: {
7992
+ marginTop: '32px',
8079
7993
  '& form': {
8080
- padding: '72px',
7994
+ padding: '35px 140px',
8081
7995
  background: '#FFFFFF',
8082
7996
  borderRadius: '8px',
8083
7997
  boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.16)'
8084
7998
  }
8085
7999
  },
8086
8000
  inputField: {
8087
- marginTop: '12px'
8088
- // padding: '12px 16px',
8089
- // border: '1px solid #D8E0F0',
8090
- // borderRadius: '16px'
8001
+ marginTop: '20px',
8002
+ padding: '20px',
8003
+ border: '1px solid #D8E0F0',
8004
+ borderRadius: '16px'
8091
8005
  },
8092
-
8093
8006
  inputFieldLabel: {
8094
8007
  color: '#333',
8095
- fontSize: theme.typography.fontSize.subHead,
8096
- fontWeight: theme.typography.fontWeight.semiBold,
8008
+ fontSize: '20px',
8097
8009
  display: 'block',
8098
- marginTop: '20px',
8099
- marginBottom: '12px'
8010
+ marginBottom: '10px'
8100
8011
  },
8101
8012
  inputFieldControl: {
8102
8013
  width: '100%',
8014
+ height: '50px',
8103
8015
  borderRadius: '8px',
8104
8016
  border: '1px solid #D8E0F0',
8105
- padding: '12px 16px',
8017
+ padding: '5px 10px',
8106
8018
  color: '#7D8592',
8107
- fontSize: theme.typography.fontSize.subHead
8019
+ fontSize: '16px'
8108
8020
  },
8109
8021
  checkboxField: {
8110
- // padding: '20px',
8111
- // border: '1px solid #D8E0F0',
8112
- // borderRadius: '8px'
8022
+ marginTop: '20px',
8023
+ padding: '20px',
8024
+ border: '1px solid #D8E0F0',
8025
+ borderRadius: '8px'
8113
8026
  },
8114
8027
  checkBoxFieldLabel: {
8115
8028
  color: '#333',
8116
- fontSize: theme.typography.fontSize.subHead,
8117
- fontWeight: theme.typography.fontWeight.semiBold,
8118
- marginTop: '20px',
8119
- marginBottom: '12px'
8029
+ fontSize: '20px',
8030
+ margin: '10px 0'
8120
8031
  },
8121
8032
  inputFieldRequired: {
8122
8033
  color: '#F41828'
8123
8034
  },
8124
8035
  checkboxFieldControl: {
8125
- padding: '8px 0',
8036
+ padding: '6px 0',
8126
8037
  '& label': {
8127
- fontSize: theme.typography.fontSize.subHead,
8038
+ fontFamily: '16px',
8128
8039
  marginLeft: '10px',
8129
8040
  color: '#7D8592'
8130
8041
  }
8131
8042
  },
8132
8043
  submitBtnContainer: {
8133
- marginTop: theme.spacing.margin.tiny,
8134
- display: 'flex',
8135
- alignItems: 'center',
8136
- justifyContent: 'center',
8044
+ marginTop: '20px',
8137
8045
  width: '100%',
8138
8046
  margin: '0 auto',
8139
8047
  '& button': {
8140
- // height: '44px',
8141
- padding: '16px 24px',
8048
+ height: '44px',
8049
+ padding: '10px 40px',
8142
8050
  color: '#FFFFFF',
8143
- fontSize: theme.typography.fontSize.subHead,
8051
+ fontSize: '16px',
8144
8052
  cursor: 'pointer',
8145
8053
  borderRadius: '8px'
8146
8054
  }
@@ -8155,14 +8063,8 @@ const useFormPageStyles = createUseStyles(theme => ({
8155
8063
  },
8156
8064
  formPageFormContainer: {
8157
8065
  '& form': {
8158
- padding: '16px'
8066
+ padding: '24px'
8159
8067
  }
8160
- },
8161
- inputFieldLabel: {
8162
- marginBottom: '8px'
8163
- },
8164
- checkBoxFieldLabel: {
8165
- marginBottom: '8px'
8166
8068
  }
8167
8069
  }
8168
8070
  }));
@@ -8209,16 +8111,13 @@ const FormPage = ({
8209
8111
  extraProps = {}
8210
8112
  }) => {
8211
8113
  const [formData, setFormData] = React.useState({});
8114
+ const classes = useFormPageStyles();
8212
8115
  const [formSubmitted, setformSubmitted] = React.useState(false);
8213
8116
  const metadata = sectionData?.components?.[0]?.metadata || formPageMock;
8214
8117
  const {
8215
8118
  _id,
8216
- baseURLs,
8217
- isMobile
8119
+ baseURLs
8218
8120
  } = React.useContext(PageContext);
8219
- const classes = useFormPageStyles({
8220
- isMobile
8221
- });
8222
8121
  const handleSubmit = async e => {
8223
8122
  e.preventDefault();
8224
8123
  let formResponse = [];
@@ -8425,18 +8324,16 @@ const useTilesStyles = createUseStyles(theme => {
8425
8324
  alignItems: 'center',
8426
8325
  display: 'flex',
8427
8326
  flexDirection: 'column',
8428
- padding: ({
8429
- isMobile
8430
- } = {}) => isMobile ? `16px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`
8327
+ marginTop: '20px'
8431
8328
  },
8432
8329
  tileDiv: {
8433
8330
  width: '236px',
8434
- // height: '160px',
8435
- aspectRatio: '3/2',
8331
+ height: '160px',
8436
8332
  position: 'relative',
8437
8333
  borderRadius: '16px',
8438
8334
  overflow: 'hidden',
8439
- cursor: 'pointer'
8335
+ cursor: 'pointer',
8336
+ margin: '1rem'
8440
8337
  },
8441
8338
  tileImg: {
8442
8339
  objectFit: 'cover',
@@ -8451,8 +8348,8 @@ const useTilesStyles = createUseStyles(theme => {
8451
8348
  top: '12%',
8452
8349
  left: '7%',
8453
8350
  color: 'white',
8454
- fontWeight: theme.typography.fontWeight.semiBold,
8455
- fontSize: theme.typography.fontSize.h5,
8351
+ fontWeight: '600',
8352
+ fontSize: '20px',
8456
8353
  width: '150px'
8457
8354
  },
8458
8355
  row: {
@@ -8460,28 +8357,25 @@ const useTilesStyles = createUseStyles(theme => {
8460
8357
  flexDirection: 'row',
8461
8358
  justifyContent: 'center',
8462
8359
  flexWrap: 'wrap',
8463
- width: '100%',
8464
- gap: '24px'
8360
+ width: '85%',
8361
+ marginBottom: '3rem'
8465
8362
  },
8466
8363
  header: {
8467
- fontWeight: theme.typography.fontWeight.bold,
8468
- fontSize: theme.typography.fontSize.h2,
8364
+ fontWeight: '700',
8365
+ fontSize: '46px',
8469
8366
  lineHeight: '46px',
8367
+ marginBottom: '1rem',
8470
8368
  textAlign: 'center',
8369
+ marginTop: '3rem',
8471
8370
  color: '#2D2D2D'
8472
8371
  },
8473
8372
  headerTitle: {
8474
- fontWeight: theme.typography.fontWeight.regular,
8475
- fontSize: theme.typography.fontSize.subHead,
8373
+ fontWeight: '400',
8374
+ fontSize: '24px',
8476
8375
  lineHeight: '46px',
8477
8376
  color: '#7D8592',
8478
- marginBottom: theme.spacing.margin.tiny,
8377
+ marginBottom: '3rem',
8479
8378
  textAlign: 'center'
8480
- },
8481
- '@media screen and (max-width: 767px)': {
8482
- tileDiv: {
8483
- width: 'calc(53% - 24px)'
8484
- }
8485
8379
  }
8486
8380
  };
8487
8381
  });
@@ -8490,6 +8384,7 @@ function Tiles({
8490
8384
  sectionData,
8491
8385
  sectionIndex
8492
8386
  }) {
8387
+ const classes = useTilesStyles({});
8493
8388
  const {
8494
8389
  isMobile,
8495
8390
  layout: {
@@ -8498,9 +8393,6 @@ function Tiles({
8498
8393
  isPreview,
8499
8394
  isEdit
8500
8395
  } = React.useContext(PageContext);
8501
- const classes = useTilesStyles({
8502
- isMobile
8503
- });
8504
8396
  const nodeData = sectionData.components;
8505
8397
  const tilesList = nodeData[0]?.tilesList.components;
8506
8398
  const handleClick = value => {
@@ -8711,7 +8603,8 @@ function Section({
8711
8603
  style: {
8712
8604
  textAlign: 'center',
8713
8605
  width: '100%',
8714
- backgroundColor: '#ffffff'
8606
+ backgroundColor: '#ffffff',
8607
+ padding: '0px 24px'
8715
8608
  }
8716
8609
  }, /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("p", {
8717
8610
  style: {
@@ -8738,10 +8631,10 @@ function Section({
8738
8631
  marginBottom: '15px'
8739
8632
  },
8740
8633
  ref: body?.components[1]?.refSetter
8741
- }, body?.components[1]?.metadata?.text), /*#__PURE__*/React__default["default"].createElement("p", {
8634
+ }, body?.components[1]?.metadata?.text), /*#__PURE__*/React__default["default"].createElement("div", {
8742
8635
  style: {
8743
8636
  maxWidth: '435px',
8744
- margin: 'auto',
8637
+ // margin: '0px 10px',
8745
8638
  // fontFamily: 'Roboto',
8746
8639
  fontStyle: 'normal',
8747
8640
  fontWeight: '400',