diy-template-components 0.2.82 → 0.2.84

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