diy-template-components 0.2.81 → 0.2.83

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 -1073
  2. package/build/index.es.js.map +1 -1
  3. package/build/index.js +968 -1073
  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,
@@ -6276,21 +6167,17 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6276
6167
  flexDirection: 'column',
6277
6168
  alignItems: 'center',
6278
6169
  backgroundColor: theme?.palette?.background?.default,
6279
- padding: ({
6280
- isMobile
6281
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
6282
6170
  '&, & *, & *:before, & *:after': {
6283
6171
  fontFamily: theme?.typography?.fontFamily,
6284
6172
  boxSizing: 'border-box'
6173
+ },
6174
+ '& h2,& h3': {
6175
+ fontWeight: '500',
6176
+ '& b,& strong': {
6177
+ fontWeight: '700'
6178
+ }
6285
6179
  }
6286
- // '& h2,& h3': {
6287
- // fontWeight: '500',
6288
- // '& b,& strong': {
6289
- // fontWeight: '700'
6290
- // }
6291
- // }
6292
6180
  },
6293
-
6294
6181
  formContainer: {
6295
6182
  margin: '0 auto',
6296
6183
  maxWidth: ({
@@ -6309,14 +6196,14 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6309
6196
  backgroundColor: theme?.palette?.background?.default,
6310
6197
  boxShadow: theme?.shadows?.secondary,
6311
6198
  borderRadius: theme?.shape?.borderRadius?.regular,
6312
- padding: '48px',
6199
+ margin: '60px 10%',
6200
+ padding: '40px 80px',
6313
6201
  position: 'relative'
6314
6202
  },
6315
6203
  title: {
6316
6204
  margin: '0',
6317
- fontSize: theme.typography.fontSize.h2,
6205
+ fontSize: '56px',
6318
6206
  color: theme?.palette?.font?.secondary,
6319
- fontWeight: theme.typography.fontWeight.bold,
6320
6207
  lineHeight: '71px',
6321
6208
  letterSpacing: '-3px',
6322
6209
  textAlign: 'left',
@@ -6324,19 +6211,16 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6324
6211
  },
6325
6212
  contentContainer: {
6326
6213
  width: '100%',
6327
- display: 'flex'
6328
- // alignItems: 'flex-start',
6214
+ display: 'flex',
6215
+ alignItems: 'flex-start',
6216
+ marginTop: '32px'
6329
6217
  },
6330
-
6331
6218
  leftContainer: {
6332
- width: '65%',
6333
- display: 'flex',
6334
- flexDirection: 'column',
6335
- justifyContent: 'space-between'
6219
+ width: '65%'
6336
6220
  },
6337
6221
  subtitle: {
6338
- // margin: '0 0 40px 0',
6339
- fontSize: theme.typography.fontSize.h6,
6222
+ margin: '0 0 40px 0',
6223
+ fontSize: '20px',
6340
6224
  color: theme?.palette?.font?.primary,
6341
6225
  lineHeight: '32px',
6342
6226
  wordBreak: 'break-word'
@@ -6358,16 +6242,13 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6358
6242
  padding: '4px 8px 0 0'
6359
6243
  },
6360
6244
  addressText: {
6361
- fontSize: theme.typography.fontSize.subHead,
6245
+ fontSize: '16px',
6362
6246
  color: theme?.palette?.font?.default,
6363
6247
  lineHeight: '24px'
6364
6248
  },
6365
6249
  rightContainer: {
6366
6250
  width: '50%',
6367
- padding: '0 0 0 80px',
6368
- display: 'flex',
6369
- flexDirection: 'column',
6370
- justifyContent: 'space-between'
6251
+ padding: '0 0 0 80px'
6371
6252
  },
6372
6253
  inputDiv: {
6373
6254
  margin: '0 0 20px 0',
@@ -6381,8 +6262,8 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6381
6262
  alignItems: 'center'
6382
6263
  },
6383
6264
  sectionContainer: {
6384
- // margin: '26px 16px',
6385
- padding: '16px'
6265
+ margin: '26px 16px',
6266
+ padding: '32px 16px'
6386
6267
  },
6387
6268
  partialBackground: {
6388
6269
  height: '150px'
@@ -6392,32 +6273,26 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6392
6273
  marginTop: '8px'
6393
6274
  },
6394
6275
  leftContainer: {
6395
- width: '100%'
6396
- // padding: '0 16ox'
6276
+ width: '100%',
6277
+ padding: '0 16ox'
6397
6278
  },
6398
-
6399
6279
  rightContainer: {
6400
6280
  width: '100%',
6401
6281
  padding: '0'
6402
6282
  },
6403
6283
  title: {
6404
- // fontSize: '24px',
6284
+ fontSize: '24px',
6405
6285
  lineHeight: '32px',
6406
- letterSpacing: 'initial',
6407
- margin: '0 0 16px 0',
6408
- textAlign: 'center'
6286
+ letterSpacing: 'initial'
6409
6287
  },
6410
6288
  subtitle: {
6411
- margin: '0 0 16px 0',
6412
- lineHeight: '26px',
6413
- textAlign: 'center'
6289
+ margin: '0 0 12px 0'
6414
6290
  },
6415
6291
  inputDiv: {
6416
- margin: '0 0 16px 0'
6292
+ margin: '0 0 10px 0'
6417
6293
  },
6418
6294
  addressRow: {
6419
- padding: '0px',
6420
- margin: '0 0 16px 0'
6295
+ padding: '12px 0'
6421
6296
  }
6422
6297
  }
6423
6298
  }));
@@ -6436,8 +6311,7 @@ function FormEnquiry({
6436
6311
  isEdit
6437
6312
  } = React.useContext(PageContext);
6438
6313
  const classes = useSectionStyles$1({
6439
- containerWidth,
6440
- isMobile
6314
+ containerWidth
6441
6315
  });
6442
6316
  const [nodeData] = sectionData.components;
6443
6317
  const theme = useTheme();
@@ -6496,10 +6370,6 @@ function FormEnquiry({
6496
6370
  className: classes.partialBackground
6497
6371
  }), /*#__PURE__*/React__default["default"].createElement("div", {
6498
6372
  className: classes.sectionContainer
6499
- }, /*#__PURE__*/React__default["default"].createElement("div", {
6500
- className: classes.contentContainer
6501
- }, /*#__PURE__*/React__default["default"].createElement("div", {
6502
- className: classes.leftContainer
6503
6373
  }, /*#__PURE__*/React__default["default"].createElement("h2", {
6504
6374
  className: classes.title
6505
6375
  }, /*#__PURE__*/React__default["default"].createElement("span", {
@@ -6508,6 +6378,10 @@ function FormEnquiry({
6508
6378
  __html: nodeData?.title?.metadata?.value
6509
6379
  }
6510
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", {
6511
6385
  ref: nodeData?.subtitle?.refSetter,
6512
6386
  className: classes.subtitle,
6513
6387
  dangerouslySetInnerHTML: {
@@ -6647,7 +6521,7 @@ function FormEnquiry({
6647
6521
  messageValid: 1
6648
6522
  });
6649
6523
  }
6650
- })), 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, {
6651
6525
  ref: nodeData?.cta?.refSetter,
6652
6526
  data: btnDisabled && validData?.messageValid && validData?.emailValid && validData?.nameValid && validData?.phoneValid ? {
6653
6527
  value: 'Submitted'
@@ -6658,7 +6532,7 @@ function FormEnquiry({
6658
6532
  type: nodeData?.cta?.metadata?.type,
6659
6533
  size: isMobile ? 'small' : 'medium',
6660
6534
  disabled: btnDisabled
6661
- })))))));
6535
+ }))))));
6662
6536
  }
6663
6537
 
6664
6538
  var index$6 = /*#__PURE__*/Object.freeze({
@@ -6674,24 +6548,20 @@ const useSectionStyles = createUseStyles(theme => ({
6674
6548
  justifyContent: 'center',
6675
6549
  flexDirection: 'column',
6676
6550
  alignItems: 'center',
6677
- padding: ({
6678
- isMobile
6679
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
6680
6551
  backgroundColor: theme?.palette?.background?.default,
6681
6552
  '&, & *, & *:before, & *:after': {
6682
6553
  fontFamily: theme?.typography?.fontFamily,
6683
6554
  boxSizing: 'border-box'
6555
+ },
6556
+ '& h2,& h3': {
6557
+ fontWeight: '500',
6558
+ '& b,& strong': {
6559
+ fontWeight: '700'
6560
+ }
6684
6561
  }
6685
- // '& h2,& h3': {
6686
- // fontWeight: '500',
6687
- // '& b,& strong': {
6688
- // fontWeight: '700'
6689
- // }
6690
- // }
6691
6562
  },
6692
-
6693
6563
  contactContainer: {
6694
- width: '100%',
6564
+ width: '80%',
6695
6565
  margin: '0 auto',
6696
6566
  maxWidth: ({
6697
6567
  containerWidth
@@ -6709,12 +6579,13 @@ const useSectionStyles = createUseStyles(theme => ({
6709
6579
  backgroundColor: theme?.palette?.background?.default,
6710
6580
  boxShadow: theme?.shadows?.secondary,
6711
6581
  borderRadius: theme?.shape?.borderRadius?.regular,
6712
- padding: '48px',
6582
+ margin: '60px',
6583
+ padding: '40px 80px',
6713
6584
  position: 'relative'
6714
6585
  },
6715
6586
  title: {
6716
6587
  margin: '0',
6717
- fontSize: theme.typography.fontSize.h2,
6588
+ fontSize: '56px',
6718
6589
  color: theme?.palette?.font?.secondary,
6719
6590
  lineHeight: '71px',
6720
6591
  letterSpacing: '-3px',
@@ -6724,37 +6595,36 @@ const useSectionStyles = createUseStyles(theme => ({
6724
6595
  contentContainer: {
6725
6596
  width: '100%',
6726
6597
  display: 'flex',
6727
- justifyContent: 'space-between',
6598
+ alignItems: 'flex-start',
6599
+ marginTop: '32px',
6728
6600
  wordBreak: 'break-word'
6729
6601
  },
6730
6602
  leftContainer: {
6731
- width: '50%',
6732
- display: 'flex',
6733
- flexDirection: 'column',
6734
- justifyContent: 'space-between'
6603
+ width: '50%'
6735
6604
  },
6736
6605
  subtitle: {
6737
- margin: '0 0 auto 0',
6738
- fontSize: theme.typography.fontSize.h6,
6606
+ margin: '0 0 58px 0',
6607
+ fontSize: '20px',
6739
6608
  color: theme?.palette?.font?.primary,
6740
- lineHeight: '32px',
6741
- margin: '20px 0px'
6609
+ lineHeight: '32px'
6742
6610
  },
6743
6611
  addressContainer: {
6744
6612
  display: 'flex',
6745
6613
  alignItems: 'flex-start',
6746
6614
  flexDirection: 'column',
6747
- width: '100%',
6748
- position: 'relative'
6615
+ width: '85%',
6616
+ position: 'relative',
6617
+ paddingBottom: '55%'
6618
+ // '& img': {
6619
+ // width: '80%'
6620
+ // }
6749
6621
  },
6622
+
6750
6623
  telephoneImage: {
6751
6624
  width: '80%'
6752
6625
  },
6753
6626
  rightContainer: {
6754
6627
  width: '50%',
6755
- display: 'flex',
6756
- flexDirection: 'column',
6757
- justifyContent: 'space-between',
6758
6628
  padding: '0 0 0 80px'
6759
6629
  },
6760
6630
  inputDiv: {
@@ -6768,16 +6638,16 @@ const useSectionStyles = createUseStyles(theme => ({
6768
6638
  background: theme?.palette?.background?.default,
6769
6639
  border: `1px solid ${theme?.palette?.border?.secondary}`,
6770
6640
  borderRadius: theme?.shape?.borderRadius?.regular,
6771
- // padding: '14px 12px',
6641
+ padding: '14px 12px',
6772
6642
  display: 'flex',
6773
6643
  fontWeight: '400',
6774
- fontSize: theme.typography.fontSize.subHead,
6644
+ fontSize: '16px',
6775
6645
  lineHeight: '20px',
6776
6646
  fontFamily: 'inherit',
6777
6647
  resize: 'none',
6778
6648
  '&::placeholder': {
6779
6649
  fontWeight: '400',
6780
- fontSize: theme.typography.fontSize.subHead,
6650
+ fontSize: '16px',
6781
6651
  lineHeight: '20px',
6782
6652
  color: theme?.palette?.font?.primary,
6783
6653
  fontFamily: theme?.typography?.fontFamily
@@ -6807,7 +6677,8 @@ const useSectionStyles = createUseStyles(theme => ({
6807
6677
  alignItems: 'center'
6808
6678
  },
6809
6679
  sectionContainer: {
6810
- padding: '16px'
6680
+ margin: '26px 16px',
6681
+ padding: '32px 16px'
6811
6682
  },
6812
6683
  partialBackground: {
6813
6684
  height: '150px'
@@ -6825,17 +6696,15 @@ const useSectionStyles = createUseStyles(theme => ({
6825
6696
  padding: '0'
6826
6697
  },
6827
6698
  title: {
6828
- lineHeight: '26px',
6829
- letterSpacing: 'initial',
6830
- textAlign: 'center'
6699
+ fontSize: '24px',
6700
+ lineHeight: '32px',
6701
+ letterSpacing: 'initial'
6831
6702
  },
6832
6703
  subtitle: {
6833
- margin: '0 0 12px 0',
6834
- textAlign: 'center',
6835
- lineHeight: '26px'
6704
+ margin: '0 0 12px 0'
6836
6705
  },
6837
6706
  addressRow: {
6838
- // padding: '12px 0'
6707
+ padding: '12px 0'
6839
6708
  },
6840
6709
  addressContainer: {
6841
6710
  '& img': {
@@ -6843,7 +6712,7 @@ const useSectionStyles = createUseStyles(theme => ({
6843
6712
  }
6844
6713
  },
6845
6714
  inputDiv: {
6846
- // margin: '0 0 10px 0'
6715
+ margin: '0 0 10px 0'
6847
6716
  },
6848
6717
  inputField: {
6849
6718
  width: '100%',
@@ -6875,8 +6744,7 @@ function Contact({
6875
6744
  let [btnDisabled, setBtnDisabled] = React.useState(false);
6876
6745
  const [nodeData] = sectionData.components;
6877
6746
  const classes = useSectionStyles({
6878
- containerWidth,
6879
- isMobile
6747
+ containerWidth
6880
6748
  });
6881
6749
  let formInitialValue = {
6882
6750
  name: nodeData?.nameField?.metadata?.value,
@@ -6932,10 +6800,6 @@ function Contact({
6932
6800
  className: classes.partialBackground
6933
6801
  }), /*#__PURE__*/React__default["default"].createElement("div", {
6934
6802
  className: classes.sectionContainer
6935
- }, /*#__PURE__*/React__default["default"].createElement("div", {
6936
- className: classes.contentContainer
6937
- }, /*#__PURE__*/React__default["default"].createElement("div", {
6938
- className: classes.leftContainer
6939
6803
  }, /*#__PURE__*/React__default["default"].createElement("h2", {
6940
6804
  className: classes.title
6941
6805
  }, /*#__PURE__*/React__default["default"].createElement("span", {
@@ -6944,6 +6808,10 @@ function Contact({
6944
6808
  __html: nodeData?.title?.metadata?.value
6945
6809
  }
6946
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", {
6947
6815
  ref: nodeData?.subtitle?.refSetter,
6948
6816
  className: classes.subtitle,
6949
6817
  dangerouslySetInnerHTML: {
@@ -7046,9 +6914,7 @@ function Contact({
7046
6914
  messageValid: 1
7047
6915
  });
7048
6916
  }
7049
- })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React__default["default"].createElement("div", {
7050
- className: classes.btnContainer
7051
- }, /*#__PURE__*/React__default["default"].createElement(Button, {
6917
+ })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React__default["default"].createElement(Button, {
7052
6918
  ref: nodeData?.cta?.refSetter,
7053
6919
  data: btnDisabled && validData?.messageValid && validData?.emailValid && validData?.nameValid && validData?.phoneValid ? {
7054
6920
  value: 'Submitted'
@@ -7060,7 +6926,7 @@ function Contact({
7060
6926
  size: isMobile ? 'small' : 'medium',
7061
6927
  disabled: btnDisabled,
7062
6928
  name: "button"
7063
- })))))));
6929
+ }))))));
7064
6930
  }
7065
6931
 
7066
6932
  var index$5 = /*#__PURE__*/Object.freeze({
@@ -7073,15 +6939,16 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7073
6939
  webinarSuperContainer: {
7074
6940
  display: 'flex',
7075
6941
  justifyContent: 'center',
7076
- padding: ({
7077
- isMobile
7078
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
6942
+ padding: '70px',
7079
6943
  '&, & *, & *:before, & *:after': {
7080
6944
  fontFamily: theme?.typography?.fontFamily,
7081
6945
  boxSizing: 'border-box'
7082
6946
  },
7083
- '& h2,& h3,& p': {
7084
- margin: '0'
6947
+ '& h2,& h3': {
6948
+ fontWeight: '500',
6949
+ '& b,& strong': {
6950
+ fontWeight: '700'
6951
+ }
7085
6952
  }
7086
6953
  },
7087
6954
  sectionContainer: {
@@ -7095,34 +6962,30 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7095
6962
  maxWidth: '1440px',
7096
6963
  fontFamily: theme?.typography?.fontFamily
7097
6964
  },
7098
- // videoTestimonialHeading: {
7099
- // fontSize: theme.typography.fontSize.subHead,
7100
- // lineHeight: '20px',
7101
- // letterSpacing: '3px',
7102
- // textTransform: 'uppercase',
7103
- // color: theme.palette.font.tertiary,
7104
- // wordBreak: 'break-word',
7105
- // fontWeight: theme.typography.fontWeight.bold,
7106
- // },
7107
-
7108
- // videoTestimonialTitle: {
7109
- // fontSize: theme.typography.fontSize.h2,
7110
- // lineHeight: '71px',
7111
- // fontWeight: theme.typography.fontWeight.bold,
7112
- // letterSpacing: '-3px',
7113
- // margin: '0',
7114
- // color: theme.palette.font.default,
7115
- // wordBreak: 'break-word'
7116
- // },
7117
-
7118
- // videoCarouselContainer: {
7119
- // marginTop: '16px'
7120
- // },
7121
-
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
+ },
7122
6985
  webinarCarousel: {
7123
6986
  display: 'flex',
7124
6987
  justifyContent: 'flex-start',
7125
- gap: '32px'
6988
+ gap: '20px'
7126
6989
  },
7127
6990
  '@media screen and (max-width: 767px)': {
7128
6991
  webinarCarousel: {
@@ -7137,21 +7000,18 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7137
7000
  alignItems: 'center'
7138
7001
  },
7139
7002
  iframeContainer: {
7140
- width: '100%',
7003
+ width: '90%',
7141
7004
  position: 'relative',
7142
7005
  paddingBottom: '56.25%',
7143
7006
  // top: "6%",
7144
- // left: '5%'
7145
- borderRadius: '8px',
7146
- overflow: 'hidden'
7007
+ left: '5%'
7147
7008
  },
7148
7009
  offerText: {
7149
7010
  textAlign: 'center',
7150
- color: theme.palette.font.primary,
7151
- marginBottom: '5%'
7011
+ color: theme.palette.font.primary
7152
7012
  },
7153
7013
  offerPrice: {
7154
- fontSize: theme.typography.fontSize.h5,
7014
+ fontSize: '28px',
7155
7015
  fontWeight: '600'
7156
7016
  },
7157
7017
  priceContainer: {
@@ -7170,10 +7030,9 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7170
7030
  bottomContainer: {
7171
7031
  display: 'flex',
7172
7032
  justifyContent: 'space-between',
7173
- marginTop: '5%'
7174
- // padding: '0px 5% 0px 5%'
7033
+ marginTop: '5%',
7034
+ padding: '0px 5% 0px 5%'
7175
7035
  },
7176
-
7177
7036
  iframe: {
7178
7037
  position: 'absolute',
7179
7038
  width: '100%',
@@ -7184,12 +7043,10 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7184
7043
  width: '100%',
7185
7044
  display: 'flex',
7186
7045
  flexDirection: 'column',
7187
- alignItems: 'flex-start',
7188
- gap: '20px'
7046
+ alignItems: 'flex-start'
7189
7047
  },
7190
7048
  videoDetailsHeading: {
7191
- fontSize: theme.typography.fontSize.h3,
7192
- fontWeight: theme.typography.fontWeight.bold,
7049
+ fontSize: '40px',
7193
7050
  lineHeight: '48px',
7194
7051
  margin: '0',
7195
7052
  letterSpacing: '-1px',
@@ -7203,7 +7060,7 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7203
7060
  display: 'flex',
7204
7061
  flexDirection: 'column',
7205
7062
  justifyContent: 'start',
7206
- padding: '24px',
7063
+ paddingTop: '20px',
7207
7064
  borderRadius: '10px'
7208
7065
  },
7209
7066
  bannerContainer: {
@@ -7216,12 +7073,14 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7216
7073
  position: 'relative',
7217
7074
  fontSize: '18px',
7218
7075
  transform: 'rotate(180deg)',
7219
- 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'
7220
7078
  },
7221
7079
  bannerContainerText: {
7222
7080
  transform: 'rotate(180deg)'
7223
7081
  },
7224
7082
  courseDetailsTags: {
7083
+ marginTop: '16px',
7225
7084
  display: 'flex'
7226
7085
  },
7227
7086
  courseDetailTag: {
@@ -7229,22 +7088,23 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7229
7088
  alignItems: 'center',
7230
7089
  marginRight: '20px',
7231
7090
  '& div': {
7232
- fontSize: theme.typography.fontSize.subHead,
7091
+ fontSize: '14px',
7233
7092
  marginLeft: '10px'
7234
7093
  }
7235
7094
  },
7236
7095
  courseDetailContent: {
7237
- fontSize: theme.typography.fontSize.subHead,
7096
+ marginTop: '16px',
7097
+ fontSize: '16px',
7238
7098
  wordBreak: 'break-word',
7239
7099
  color: theme.palette.font.primary,
7240
- whiteSpace: 'pre-wrap',
7241
- width: '80%'
7100
+ margin: '10px 0 20px',
7101
+ whiteSpace: 'pre-wrap'
7242
7102
  },
7243
7103
  courseDetailViewFullDetails: {
7244
7104
  cursor: 'pointer',
7245
- fontSize: theme.typography.fontSize.subHead,
7105
+ fontSize: '16px',
7246
7106
  lineHeight: '24px',
7247
- marginTop: '-20px',
7107
+ margin: '0',
7248
7108
  color: '#00ADE7',
7249
7109
  wordBreak: 'break-word'
7250
7110
  },
@@ -7252,10 +7112,9 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7252
7112
  color: '#EB5757',
7253
7113
  fontWeight: '600'
7254
7114
  },
7255
- // webinarButtonContainer: {
7256
- // marginBottom: '20px'
7257
- // },
7258
-
7115
+ webinarButtonContainer: {
7116
+ marginBottom: '20px'
7117
+ },
7259
7118
  iconBackground: {
7260
7119
  display: 'flex',
7261
7120
  width: '36px',
@@ -7287,10 +7146,11 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7287
7146
  width: '100%'
7288
7147
  },
7289
7148
  videoDetailsHeading: {
7149
+ fontSize: '16px',
7290
7150
  lineHeight: '20px'
7291
7151
  },
7292
7152
  videoTestimonialTitle: {
7293
- // fontSize: '24px',
7153
+ fontSize: '24px',
7294
7154
  lineHeight: '36px',
7295
7155
  letterSpacing: '-1px'
7296
7156
  },
@@ -7320,7 +7180,9 @@ const SingleVideoSlide$1 = props => {
7320
7180
  const {
7321
7181
  data,
7322
7182
  webinarCtaClick,
7323
- conversions = 0
7183
+ conversions = 0,
7184
+ countryCode,
7185
+ currencySymbol
7324
7186
  } = props;
7325
7187
  const renderer = ({
7326
7188
  days,
@@ -7330,11 +7192,14 @@ const SingleVideoSlide$1 = props => {
7330
7192
  completed
7331
7193
  }) => {
7332
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
+ }
7333
7198
  return /*#__PURE__*/React__default["default"].createElement("span", null, hours, "h ", minutes, "m ", seconds, "s");
7334
7199
  } else {
7335
7200
  let given = moment__default["default"](props.data.offerPriceEndDate);
7336
7201
  let current = moment__default["default"]().startOf('day');
7337
- 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)');
7338
7203
  }
7339
7204
  };
7340
7205
  const checkIfOfferIsValid = () => moment__default["default"]().diff(moment__default["default"](props.data.offerPriceEndDate)) < 0;
@@ -7366,6 +7231,44 @@ const SingleVideoSlide$1 = props => {
7366
7231
  return (discount / price * 100).toFixed(2);
7367
7232
  };
7368
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';
7369
7272
  return /*#__PURE__*/React__default["default"].createElement("div", {
7370
7273
  className: classes.videoCarouselContainer
7371
7274
  }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -7378,11 +7281,11 @@ const SingleVideoSlide$1 = props => {
7378
7281
  className: classes.bannerContainer
7379
7282
  }, /*#__PURE__*/React__default["default"].createElement("div", {
7380
7283
  className: classes.bannerContainerText
7381
- }, "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", {
7382
7285
  className: classes.bannerContainer
7383
7286
  }, /*#__PURE__*/React__default["default"].createElement("div", {
7384
7287
  className: classes.bannerContainerText
7385
- }, "Hurry up! Offer for limited period only"))), /*#__PURE__*/React__default["default"].createElement("h3", {
7288
+ }, limitedPeriodOfferText))), /*#__PURE__*/React__default["default"].createElement("h3", {
7386
7289
  ref: data?.videoTextHeading?.refSetter,
7387
7290
  className: classes.videoDetailsHeading,
7388
7291
  dangerouslySetInnerHTML: {
@@ -7422,14 +7325,7 @@ const SingleVideoSlide$1 = props => {
7422
7325
  }
7423
7326
  }))), /*#__PURE__*/React__default["default"].createElement("div", {
7424
7327
  className: classes.courseViewContainer
7425
- }, data.isPaid !== 0 && checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && /*#__PURE__*/React__default["default"].createElement("p", {
7426
- className: classes.offerText
7427
- }, "Offer Ends in", ' ', /*#__PURE__*/React__default["default"].createElement("span", {
7428
- className: classes.courseDetailTime
7429
- }, /*#__PURE__*/React__default["default"].createElement(Countdown__default["default"], {
7430
- renderer: renderer,
7431
- date: data.offerPriceEndDate
7432
- }))), /*#__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", {
7433
7329
  ref: data?.videoFrame?.refSetter,
7434
7330
  className: classes.iframeContainer
7435
7331
  }, /*#__PURE__*/React__default["default"].createElement(VideoPlayer, {
@@ -7446,13 +7342,14 @@ const SingleVideoSlide$1 = props => {
7446
7342
  className: classes.priceContainer
7447
7343
  }, /*#__PURE__*/React__default["default"].createElement("div", {
7448
7344
  className: classes.offerPrice
7449
- }, "\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", {
7450
7346
  style: {
7451
- fontSize: '20px'
7347
+ fontSize: '20px',
7348
+ marginTop: '0px'
7452
7349
  }
7453
7350
  }, /*#__PURE__*/React__default["default"].createElement("span", {
7454
7351
  className: classes.originalPrice
7455
- }, "\u20B9", data?.price), ' ', /*#__PURE__*/React__default["default"].createElement("span", {
7352
+ }, finalPrice), ' ', /*#__PURE__*/React__default["default"].createElement("span", {
7456
7353
  className: classes.offerDiscount
7457
7354
  }, `${data && discount(data)}%`))) : null, /*#__PURE__*/React__default["default"].createElement("div", {
7458
7355
  className: classes.webinarButtonContainer
@@ -7464,7 +7361,7 @@ const SingleVideoSlide$1 = props => {
7464
7361
  data: {
7465
7362
  // link: 'headerData?.loginCtaLink',
7466
7363
  // isLink: 1,
7467
- value: data.isPaid ? 'BUY NOW' : 'REGISTER NOW'
7364
+ value: data.isPaid ? buyNowText : registerNowText
7468
7365
  // isExternal: 1
7469
7366
  },
7470
7367
 
@@ -7482,14 +7379,14 @@ function CoursePromotionPage$1({
7482
7379
  sectionIndex
7483
7380
  }) {
7484
7381
  const {
7485
- isMobile,
7486
7382
  layout: {
7487
7383
  containerWidth
7488
- }
7384
+ },
7385
+ countryCode,
7386
+ currencySymbol
7489
7387
  } = React.useContext(PageContext);
7490
7388
  const classes = useWebinarPromotionPage({
7491
- containerWidth,
7492
- isMobile
7389
+ containerWidth
7493
7390
  });
7494
7391
  return /*#__PURE__*/React__default["default"].createElement("div", {
7495
7392
  className: classes.webinarSuperContainer
@@ -7501,7 +7398,9 @@ function CoursePromotionPage$1({
7501
7398
  data: sectionData.components[0].metadata,
7502
7399
  webinarCtaClick: extraProps.webinarCtaClick,
7503
7400
  conversions: extraProps.conversions,
7504
- sectionIndex: sectionIndex
7401
+ sectionIndex: sectionIndex,
7402
+ countryCode: countryCode,
7403
+ currencySymbol: currencySymbol
7505
7404
  }))));
7506
7405
  }
7507
7406
 
@@ -7511,26 +7410,22 @@ var index$4 = /*#__PURE__*/Object.freeze({
7511
7410
  });
7512
7411
 
7513
7412
  const useCoursePromotionPage = createUseStyles(theme => {
7514
- debugger;
7515
7413
  return {
7516
7414
  courseSuperContainer: {
7517
7415
  display: 'flex',
7518
7416
  justifyContent: 'center',
7519
- padding: ({
7520
- isMobile
7521
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
7417
+ padding: '70px ',
7522
7418
  '&, & *, & *:before, & *:after': {
7523
7419
  fontFamily: theme?.typography?.fontFamily,
7524
7420
  boxSizing: 'border-box'
7421
+ },
7422
+ '& h2,& h3': {
7423
+ fontWeight: '500',
7424
+ '& b,& strong': {
7425
+ fontWeight: '700'
7426
+ }
7525
7427
  }
7526
- // '& h2,& h3': {
7527
- // fontWeight: '500',
7528
- // '& b,& strong': {
7529
- // fontWeight: '700'
7530
- // }
7531
- // }
7532
7428
  },
7533
-
7534
7429
  sectionContainer: {
7535
7430
  margin: '0 auto',
7536
7431
  maxWidth: ({
@@ -7543,7 +7438,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
7543
7438
  fontFamily: theme?.typography?.fontFamily
7544
7439
  },
7545
7440
  videoTestimonialHeading: {
7546
- fontSize: theme.typography.fontSize.subHead,
7441
+ fontSize: '16px',
7547
7442
  lineHeight: '20px',
7548
7443
  letterSpacing: '3px',
7549
7444
  textTransform: 'uppercase',
@@ -7552,7 +7447,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
7552
7447
  fontWeight: '700'
7553
7448
  },
7554
7449
  videoTestimonialTitle: {
7555
- fontSize: theme.typography.fontSize.h2,
7450
+ fontSize: '56px',
7556
7451
  lineHeight: '71px',
7557
7452
  letterSpacing: '-3px',
7558
7453
  margin: '0',
@@ -7560,12 +7455,12 @@ const useCoursePromotionPage = createUseStyles(theme => {
7560
7455
  wordBreak: 'break-word'
7561
7456
  },
7562
7457
  videoCarouselContainer: {
7563
- // marginTop: '16px'
7458
+ marginTop: '16px'
7564
7459
  },
7565
7460
  coursePageCarousel: {
7566
7461
  display: 'flex',
7567
7462
  justifyContent: 'flex-start',
7568
- gap: '32px'
7463
+ gap: '20px'
7569
7464
  },
7570
7465
  '@media screen and (max-width: 767px)': {
7571
7466
  coursePageCarousel: {
@@ -7580,19 +7475,18 @@ const useCoursePromotionPage = createUseStyles(theme => {
7580
7475
  alignItems: 'center'
7581
7476
  },
7582
7477
  iframeContainer: {
7583
- width: '100%',
7478
+ width: '90%',
7584
7479
  position: 'relative',
7585
- paddingBottom: '56.25%'
7480
+ paddingBottom: '56.25%',
7586
7481
  // top: "6%",
7587
- // left: '5%'
7482
+ left: '5%'
7588
7483
  },
7589
-
7590
7484
  offerText: {
7591
7485
  textAlign: 'center',
7592
7486
  color: theme.palette.font.primary
7593
7487
  },
7594
7488
  offerPrice: {
7595
- fontSize: theme.typography.fontSize.h4,
7489
+ fontSize: '28px',
7596
7490
  fontWeight: '700'
7597
7491
  },
7598
7492
  priceContainer: {
@@ -7610,7 +7504,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
7610
7504
  fontWeight: '600'
7611
7505
  },
7612
7506
  bottomContainer: {
7613
- width: '100%',
7507
+ width: '90%',
7614
7508
  marginLeft: 'auto',
7615
7509
  marginRight: 'auto',
7616
7510
  display: 'flex',
@@ -7627,11 +7521,10 @@ const useCoursePromotionPage = createUseStyles(theme => {
7627
7521
  width: '100%',
7628
7522
  display: 'flex',
7629
7523
  flexDirection: 'column',
7630
- alignItems: 'flex-start',
7631
- gap: '20px'
7524
+ alignItems: 'flex-start'
7632
7525
  },
7633
7526
  videoDetailsHeading: {
7634
- fontSize: theme.typography.fontSize.h3,
7527
+ fontSize: '40px',
7635
7528
  lineHeight: '48px',
7636
7529
  margin: '0',
7637
7530
  letterSpacing: '-1px',
@@ -7642,13 +7535,11 @@ const useCoursePromotionPage = createUseStyles(theme => {
7642
7535
  width: '445px',
7643
7536
  backgroundColor: '#f4f9ff',
7644
7537
  display: 'flex',
7645
- padding: '24px',
7646
7538
  flexDirection: 'column',
7647
- borderRadius: '10px'
7648
- // paddingBottom: '10px',
7649
- // paddingTop: '10px'
7539
+ borderRadius: '10px',
7540
+ paddingBottom: '10px',
7541
+ paddingTop: '10px'
7650
7542
  },
7651
-
7652
7543
  bannerContainer: {
7653
7544
  width: '100%',
7654
7545
  background: '#EB5757',
@@ -7657,12 +7548,11 @@ const useCoursePromotionPage = createUseStyles(theme => {
7657
7548
  padding: '10px 10px 23px 40px',
7658
7549
  wordWrap: 'break-word',
7659
7550
  position: 'relative',
7660
- fontSize: theme.typography.fontSize.subHead,
7551
+ fontSize: '18px',
7661
7552
  transform: 'rotate(180deg)',
7662
- clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 calc(100% - 10px), 15px calc(50% - 10px/2))'
7663
- // 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'
7664
7555
  },
7665
-
7666
7556
  bannerContainerText: {
7667
7557
  transform: 'rotate(180deg)'
7668
7558
  },
@@ -7673,15 +7563,16 @@ const useCoursePromotionPage = createUseStyles(theme => {
7673
7563
  },
7674
7564
  courseEmblem: {
7675
7565
  background: '#F0F4F8',
7676
- fontSize: theme.typography.fontSize.subHead,
7677
7566
  borderRadius: '2.00337px',
7678
7567
  padding: '8px',
7679
7568
  display: 'flex',
7680
7569
  alignItems: 'center',
7681
- justifyContent: 'center'
7570
+ justifyContent: 'center',
7571
+ marginTop: '20px',
7572
+ marginBottom: '20px'
7682
7573
  },
7683
7574
  courseDetailsTags: {
7684
- // marginTop: '16px',
7575
+ marginTop: '16px',
7685
7576
  display: 'flex',
7686
7577
  flexWrap: 'wrap'
7687
7578
  },
@@ -7691,14 +7582,13 @@ const useCoursePromotionPage = createUseStyles(theme => {
7691
7582
  alignItems: 'center',
7692
7583
  marginRight: '20px',
7693
7584
  '& div': {
7694
- fontSize: theme.typography.fontSize.subHead,
7695
- fontWeight: theme.typography.fontWeight.semiBold,
7585
+ fontSize: '14px',
7696
7586
  marginLeft: '10px'
7697
7587
  }
7698
7588
  },
7699
7589
  courseDetailContent: {
7700
- // marginTop: '16px',
7701
- fontSize: theme.typography.fontSize.subHead,
7590
+ marginTop: '16px',
7591
+ fontSize: '16px',
7702
7592
  lineHeight: '24px',
7703
7593
  wordBreak: 'break-word',
7704
7594
  color: theme.palette.font.primary,
@@ -7707,9 +7597,9 @@ const useCoursePromotionPage = createUseStyles(theme => {
7707
7597
  },
7708
7598
  courseDetailViewFullDetails: {
7709
7599
  cursor: 'pointer',
7710
- fontSize: theme.typography.fontSize.subHead,
7600
+ fontSize: '16px',
7711
7601
  lineHeight: '24px',
7712
- marginTop: '-24px',
7602
+ margin: '0',
7713
7603
  color: '#00ADE7',
7714
7604
  wordBreak: 'break-word'
7715
7605
  },
@@ -7756,34 +7646,33 @@ const useCoursePromotionPage = createUseStyles(theme => {
7756
7646
  },
7757
7647
  '@media (max-width: 767px)': {
7758
7648
  bannerContainerText: {
7759
- // fontSize: '16px'
7649
+ fontSize: '16px'
7760
7650
  },
7761
7651
  courseViewContainer: {
7762
7652
  width: '100%',
7763
7653
  paddingBottom: '10px'
7764
7654
  },
7765
- // courseSuperContainer: {
7766
- // padding: '20px 10px 60px 20px'
7767
- // },
7655
+ courseSuperContainer: {
7656
+ padding: '20px 10px 60px 20px'
7657
+ },
7768
7658
  videoCarousel: {
7769
7659
  flexDirection: 'column-reverse',
7770
7660
  gap: '20px'
7771
7661
  },
7772
7662
  videoCarouselContainer: {
7773
- height: 'max-content'
7774
- // paddingRight: '10px'
7663
+ height: 'max-content',
7664
+ paddingRight: '10px'
7775
7665
  },
7776
-
7777
7666
  videoDetails: {
7778
7667
  width: '100%'
7779
7668
  },
7780
7669
  videoDetailsHeading: {
7781
- // fontSize: '20px',
7670
+ fontSize: '20px',
7782
7671
  fontWeight: '600',
7783
7672
  lineHeight: '20px'
7784
7673
  },
7785
7674
  videoTestimonialTitle: {
7786
- // fontSize: '24px',
7675
+ fontSize: '24px',
7787
7676
  lineHeight: '36px',
7788
7677
  letterSpacing: '-1px'
7789
7678
  },
@@ -7821,18 +7710,23 @@ const SingleVideoSlide = props => {
7821
7710
  completed
7822
7711
  }) => {
7823
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
+ }
7824
7716
  return /*#__PURE__*/React__default["default"].createElement("span", null, hours, "h ", minutes, "m ", seconds, "s");
7825
7717
  } else {
7826
7718
  let given = moment__default["default"](props.data.endDate);
7827
7719
  let current = moment__default["default"]().startOf('day');
7828
- 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)');
7829
7721
  }
7830
7722
  };
7831
7723
  const {
7832
7724
  data,
7833
7725
  courseBuyNow,
7834
7726
  conversions = 20,
7835
- showCourseInstallment
7727
+ showCourseInstallment,
7728
+ countryCode,
7729
+ currencySymbol
7836
7730
  } = props;
7837
7731
  const showCourseInstallmentData = data?.courseOverviewData;
7838
7732
  const InstalmentData = isEdit ? data?.courseOverviewData?.installments?.formData?.installments[0].installmentAmount : data?.courseOverviewData?.installments?.formData?.installmentInfo?.installments[0].installmentPrice;
@@ -7865,6 +7759,34 @@ const SingleVideoSlide = props => {
7865
7759
  }) => {
7866
7760
  return (discount / price * 100).toFixed(2);
7867
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';
7868
7790
  return /*#__PURE__*/React__default["default"].createElement("div", {
7869
7791
  className: classes.videoCarouselContainer
7870
7792
  }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -7877,11 +7799,11 @@ const SingleVideoSlide = props => {
7877
7799
  className: classes.bannerContainer
7878
7800
  }, /*#__PURE__*/React__default["default"].createElement("div", {
7879
7801
  className: classes.bannerContainerText
7880
- }, "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", {
7881
7803
  className: classes.bannerContainer
7882
7804
  }, /*#__PURE__*/React__default["default"].createElement("div", {
7883
7805
  className: classes.bannerContainerText
7884
- }, "Hurry up! Offer for limited period only"))), /*#__PURE__*/React__default["default"].createElement("div", {
7806
+ }, limitedPeriodOfferText))), /*#__PURE__*/React__default["default"].createElement("div", {
7885
7807
  className: classes.emblemContainer
7886
7808
  }, data?.courseOverviewData?.courseTagList.length && data?.courseOverviewData?.courseTagList?.map(data => {
7887
7809
  return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -7946,14 +7868,7 @@ const SingleVideoSlide = props => {
7946
7868
  }
7947
7869
  }, /*#__PURE__*/React__default["default"].createElement("div", {
7948
7870
  className: classes.courseViewContainer
7949
- }, checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && /*#__PURE__*/React__default["default"].createElement("p", {
7950
- className: classes.offerText
7951
- }, "Offer Ends in", ' ', /*#__PURE__*/React__default["default"].createElement("span", {
7952
- className: classes.courseDetailTime
7953
- }, /*#__PURE__*/React__default["default"].createElement(Countdown__default["default"], {
7954
- renderer: renderer,
7955
- date: data.endDate
7956
- }))), /*#__PURE__*/React__default["default"].createElement("div", {
7871
+ }, checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && renderOfferEndsInText(), /*#__PURE__*/React__default["default"].createElement("div", {
7957
7872
  ref: data?.videoFrame?.refSetter,
7958
7873
  className: classes.iframeContainer
7959
7874
  }, /*#__PURE__*/React__default["default"].createElement(VideoPlayer, {
@@ -7967,14 +7882,14 @@ const SingleVideoSlide = props => {
7967
7882
  className: classes.priceContainer
7968
7883
  }, /*#__PURE__*/React__default["default"].createElement("div", {
7969
7884
  className: classes.offerPrice
7970
- }, "\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", {
7971
7886
  style: {
7972
- // fontSize: '20px',
7887
+ fontSize: '20px',
7973
7888
  marginTop: '0px'
7974
7889
  }
7975
7890
  }, /*#__PURE__*/React__default["default"].createElement("span", {
7976
7891
  className: classes.originalPrice
7977
- }, "\u20B9 ", data.price), ' ', /*#__PURE__*/React__default["default"].createElement("span", {
7892
+ }, finalPrice), ' ', /*#__PURE__*/React__default["default"].createElement("span", {
7978
7893
  className: classes.offerDiscount
7979
7894
  }, `${data && discount(data)}%`))), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(Button, {
7980
7895
  style: {
@@ -7983,7 +7898,7 @@ const SingleVideoSlide = props => {
7983
7898
  data: {
7984
7899
  // link: 'headerData?.loginCtaLink',
7985
7900
  // isLink: 1,
7986
- value: 'BUY NOW'
7901
+ value: buyNowText
7987
7902
  // isExternal: 1
7988
7903
  },
7989
7904
 
@@ -8019,14 +7934,14 @@ function CoursePromotionPage({
8019
7934
  sectionIndex
8020
7935
  }) {
8021
7936
  const {
8022
- isMobile,
8023
7937
  layout: {
8024
7938
  containerWidth
8025
- }
7939
+ },
7940
+ countryCode,
7941
+ currencySymbol
8026
7942
  } = React.useContext(PageContext);
8027
7943
  const classes = useCoursePromotionPage({
8028
- containerWidth,
8029
- isMobile
7944
+ containerWidth
8030
7945
  });
8031
7946
  return /*#__PURE__*/React__default["default"].createElement("div", {
8032
7947
  className: classes.courseSuperContainer
@@ -8039,7 +7954,9 @@ function CoursePromotionPage({
8039
7954
  courseBuyNow: extraProps.courseBuyNow,
8040
7955
  showCourseInstallment: extraProps.showCourseInstallment,
8041
7956
  conversions: extraProps.conversions,
8042
- sectionIndex: sectionIndex
7957
+ sectionIndex: sectionIndex,
7958
+ countryCode: countryCode,
7959
+ currencySymbol: currencySymbol
8043
7960
  }))));
8044
7961
  }
8045
7962
 
@@ -8050,9 +7967,7 @@ var index$3 = /*#__PURE__*/Object.freeze({
8050
7967
 
8051
7968
  const useFormPageStyles = createUseStyles(theme => ({
8052
7969
  formPageSection: {
8053
- padding: ({
8054
- isMobile
8055
- } = {}) => 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',
8056
7971
  background: '#F4F9FF',
8057
7972
  '&, & *, & *:before, & *:after': {
8058
7973
  fontFamily: theme?.typography?.fontFamily,
@@ -8063,82 +7978,77 @@ const useFormPageStyles = createUseStyles(theme => ({
8063
7978
  textAlign: 'center'
8064
7979
  },
8065
7980
  formPageTitle: {
8066
- fontSize: theme.typography.fontSize.h2,
8067
- fontWeight: theme.typography.fontWeight.bold
7981
+ fontSize: '50px',
7982
+ fontWeight: '700'
8068
7983
  },
8069
7984
  formPageSubtitle: {
8070
- marginTop: '8px',
8071
- fontSize: theme.typography.fontSize.h6,
7985
+ marginTop: '16px',
7986
+ fontSize: '16px',
8072
7987
  lineHeight: '23px',
8073
7988
  color: 'rgba(51, 51, 51, 0.5)',
8074
- marginBottom: theme.spacing.margin.tiny
7989
+ marginBottom: '32px'
8075
7990
  },
8076
7991
  formPageFormContainer: {
7992
+ marginTop: '32px',
8077
7993
  '& form': {
8078
- padding: '72px',
7994
+ padding: '35px 140px',
8079
7995
  background: '#FFFFFF',
8080
7996
  borderRadius: '8px',
8081
7997
  boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.16)'
8082
7998
  }
8083
7999
  },
8084
8000
  inputField: {
8085
- marginTop: '12px'
8086
- // padding: '12px 16px',
8087
- // border: '1px solid #D8E0F0',
8088
- // borderRadius: '16px'
8001
+ marginTop: '20px',
8002
+ padding: '20px',
8003
+ border: '1px solid #D8E0F0',
8004
+ borderRadius: '16px'
8089
8005
  },
8090
-
8091
8006
  inputFieldLabel: {
8092
8007
  color: '#333',
8093
- fontSize: theme.typography.fontSize.subHead,
8094
- fontWeight: theme.typography.fontWeight.semiBold,
8008
+ fontSize: '20px',
8095
8009
  display: 'block',
8096
- marginTop: '20px',
8097
- marginBottom: '12px'
8010
+ marginBottom: '10px'
8098
8011
  },
8099
8012
  inputFieldControl: {
8100
8013
  width: '100%',
8014
+ height: '50px',
8101
8015
  borderRadius: '8px',
8102
8016
  border: '1px solid #D8E0F0',
8103
- padding: '12px 16px',
8017
+ padding: '5px 10px',
8104
8018
  color: '#7D8592',
8105
- fontSize: theme.typography.fontSize.subHead
8019
+ fontSize: '16px'
8106
8020
  },
8107
8021
  checkboxField: {
8108
- // padding: '20px',
8109
- // border: '1px solid #D8E0F0',
8110
- // borderRadius: '8px'
8022
+ marginTop: '20px',
8023
+ padding: '20px',
8024
+ border: '1px solid #D8E0F0',
8025
+ borderRadius: '8px'
8111
8026
  },
8112
8027
  checkBoxFieldLabel: {
8113
8028
  color: '#333',
8114
- fontSize: theme.typography.fontSize.subHead,
8115
- fontWeight: theme.typography.fontWeight.semiBold,
8116
- marginTop: '20px',
8117
- marginBottom: '12px'
8029
+ fontSize: '20px',
8030
+ margin: '10px 0'
8118
8031
  },
8119
8032
  inputFieldRequired: {
8120
8033
  color: '#F41828'
8121
8034
  },
8122
8035
  checkboxFieldControl: {
8123
- padding: '8px 0',
8036
+ padding: '6px 0',
8124
8037
  '& label': {
8125
- fontSize: theme.typography.fontSize.subHead,
8038
+ fontFamily: '16px',
8126
8039
  marginLeft: '10px',
8127
8040
  color: '#7D8592'
8128
8041
  }
8129
8042
  },
8130
8043
  submitBtnContainer: {
8131
- marginTop: theme.spacing.margin.tiny,
8132
- display: 'flex',
8133
- alignItems: 'center',
8134
- justifyContent: 'center',
8044
+ marginTop: '20px',
8135
8045
  width: '100%',
8136
8046
  margin: '0 auto',
8137
8047
  '& button': {
8138
- // height: '44px',
8139
- padding: '16px 24px',
8048
+ height: '44px',
8049
+ padding: '10px 40px',
8140
8050
  color: '#FFFFFF',
8141
- fontSize: theme.typography.fontSize.subHead,
8051
+ fontSize: '16px',
8142
8052
  cursor: 'pointer',
8143
8053
  borderRadius: '8px'
8144
8054
  }
@@ -8153,14 +8063,8 @@ const useFormPageStyles = createUseStyles(theme => ({
8153
8063
  },
8154
8064
  formPageFormContainer: {
8155
8065
  '& form': {
8156
- padding: '16px'
8066
+ padding: '24px'
8157
8067
  }
8158
- },
8159
- inputFieldLabel: {
8160
- marginBottom: '8px'
8161
- },
8162
- checkBoxFieldLabel: {
8163
- marginBottom: '8px'
8164
8068
  }
8165
8069
  }
8166
8070
  }));
@@ -8207,16 +8111,13 @@ const FormPage = ({
8207
8111
  extraProps = {}
8208
8112
  }) => {
8209
8113
  const [formData, setFormData] = React.useState({});
8114
+ const classes = useFormPageStyles();
8210
8115
  const [formSubmitted, setformSubmitted] = React.useState(false);
8211
8116
  const metadata = sectionData?.components?.[0]?.metadata || formPageMock;
8212
8117
  const {
8213
8118
  _id,
8214
- baseURLs,
8215
- isMobile
8119
+ baseURLs
8216
8120
  } = React.useContext(PageContext);
8217
- const classes = useFormPageStyles({
8218
- isMobile
8219
- });
8220
8121
  const handleSubmit = async e => {
8221
8122
  e.preventDefault();
8222
8123
  let formResponse = [];
@@ -8423,18 +8324,16 @@ const useTilesStyles = createUseStyles(theme => {
8423
8324
  alignItems: 'center',
8424
8325
  display: 'flex',
8425
8326
  flexDirection: 'column',
8426
- padding: ({
8427
- isMobile
8428
- } = {}) => isMobile ? `16px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`
8327
+ marginTop: '20px'
8429
8328
  },
8430
8329
  tileDiv: {
8431
8330
  width: '236px',
8432
- // height: '160px',
8433
- aspectRatio: '3/2',
8331
+ height: '160px',
8434
8332
  position: 'relative',
8435
8333
  borderRadius: '16px',
8436
8334
  overflow: 'hidden',
8437
- cursor: 'pointer'
8335
+ cursor: 'pointer',
8336
+ margin: '1rem'
8438
8337
  },
8439
8338
  tileImg: {
8440
8339
  objectFit: 'cover',
@@ -8449,8 +8348,8 @@ const useTilesStyles = createUseStyles(theme => {
8449
8348
  top: '12%',
8450
8349
  left: '7%',
8451
8350
  color: 'white',
8452
- fontWeight: theme.typography.fontWeight.semiBold,
8453
- fontSize: theme.typography.fontSize.h5,
8351
+ fontWeight: '600',
8352
+ fontSize: '20px',
8454
8353
  width: '150px'
8455
8354
  },
8456
8355
  row: {
@@ -8458,28 +8357,25 @@ const useTilesStyles = createUseStyles(theme => {
8458
8357
  flexDirection: 'row',
8459
8358
  justifyContent: 'center',
8460
8359
  flexWrap: 'wrap',
8461
- width: '100%',
8462
- gap: '24px'
8360
+ width: '85%',
8361
+ marginBottom: '3rem'
8463
8362
  },
8464
8363
  header: {
8465
- fontWeight: theme.typography.fontWeight.bold,
8466
- fontSize: theme.typography.fontSize.h2,
8364
+ fontWeight: '700',
8365
+ fontSize: '46px',
8467
8366
  lineHeight: '46px',
8367
+ marginBottom: '1rem',
8468
8368
  textAlign: 'center',
8369
+ marginTop: '3rem',
8469
8370
  color: '#2D2D2D'
8470
8371
  },
8471
8372
  headerTitle: {
8472
- fontWeight: theme.typography.fontWeight.regular,
8473
- fontSize: theme.typography.fontSize.subHead,
8373
+ fontWeight: '400',
8374
+ fontSize: '24px',
8474
8375
  lineHeight: '46px',
8475
8376
  color: '#7D8592',
8476
- marginBottom: theme.spacing.margin.tiny,
8377
+ marginBottom: '3rem',
8477
8378
  textAlign: 'center'
8478
- },
8479
- '@media screen and (max-width: 767px)': {
8480
- tileDiv: {
8481
- width: 'calc(53% - 24px)'
8482
- }
8483
8379
  }
8484
8380
  };
8485
8381
  });
@@ -8488,6 +8384,7 @@ function Tiles({
8488
8384
  sectionData,
8489
8385
  sectionIndex
8490
8386
  }) {
8387
+ const classes = useTilesStyles({});
8491
8388
  const {
8492
8389
  isMobile,
8493
8390
  layout: {
@@ -8496,9 +8393,6 @@ function Tiles({
8496
8393
  isPreview,
8497
8394
  isEdit
8498
8395
  } = React.useContext(PageContext);
8499
- const classes = useTilesStyles({
8500
- isMobile
8501
- });
8502
8396
  const nodeData = sectionData.components;
8503
8397
  const tilesList = nodeData[0]?.tilesList.components;
8504
8398
  const handleClick = value => {
@@ -8709,7 +8603,8 @@ function Section({
8709
8603
  style: {
8710
8604
  textAlign: 'center',
8711
8605
  width: '100%',
8712
- backgroundColor: '#ffffff'
8606
+ backgroundColor: '#ffffff',
8607
+ padding: '0px 24px'
8713
8608
  }
8714
8609
  }, /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement("p", {
8715
8610
  style: {
@@ -8736,10 +8631,10 @@ function Section({
8736
8631
  marginBottom: '15px'
8737
8632
  },
8738
8633
  ref: body?.components[1]?.refSetter
8739
- }, body?.components[1]?.metadata?.text), /*#__PURE__*/React__default["default"].createElement("p", {
8634
+ }, body?.components[1]?.metadata?.text), /*#__PURE__*/React__default["default"].createElement("div", {
8740
8635
  style: {
8741
8636
  maxWidth: '435px',
8742
- margin: 'auto',
8637
+ // margin: '0px 10px',
8743
8638
  // fontFamily: 'Roboto',
8744
8639
  fontStyle: 'normal',
8745
8640
  fontWeight: '400',