diy-template-components 0.2.81 → 0.2.83

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/build/index.es.js +968 -1073
  2. package/build/index.es.js.map +1 -1
  3. package/build/index.js +968 -1073
  4. package/build/index.js.map +1 -1
  5. package/package.json +3 -3
package/build/index.es.js CHANGED
@@ -356,7 +356,7 @@ const buttonStyles = createUseStyles(theme => ({
356
356
  } = {}) => disabled ? colorMixer(theme?.palette?.primary.main, 0.5).color : theme?.palette?.primary?.main,
357
357
  border: ({
358
358
  disabled
359
- } = {}) => disabled ? `1px solid ${colorMixer(theme.palette.primary.main, 0.5).color}` : `1px solid ${theme?.palette?.primary?.main}`,
359
+ } = {}) => disabled ? `1px solid ${colorMixer(theme.palette.primary.main, 0.5).color}` : `1px solid ${theme.palette.primary.main}`,
360
360
  textDecoration: 'none',
361
361
  cursor: ({
362
362
  disabled
@@ -579,7 +579,7 @@ var menu = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20v
579
579
 
580
580
  var clpLogo = "478367302082f28d.svg";
581
581
 
582
- 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";
582
+ 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";
583
583
 
584
584
  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";
585
585
 
@@ -1912,99 +1912,20 @@ const palettes = {
1912
1912
  rust: rustPalette
1913
1913
  };
1914
1914
 
1915
- const baseFactor = 8;
1916
- const mobileMargin = {
1917
- tiny: baseFactor * 2,
1918
- small: baseFactor * 2,
1919
- regular: baseFactor * 3,
1920
- medium: baseFactor * 6
1921
- };
1922
- const margin = {
1923
- tiny: baseFactor * 4,
1924
- small: baseFactor * 4 * 2,
1925
- regular: baseFactor * 4 * 4,
1926
- medium: baseFactor * 4 * 6,
1927
- large: baseFactor * 4 * 8,
1928
- xLarge: baseFactor * 4 * 12
1929
- };
1930
- const mobilePadding = {
1931
- tiny: baseFactor * 2,
1932
- // 16px
1933
- small: baseFactor * 2,
1934
- //16px
1935
- regular: baseFactor * 3,
1936
- // 24px
1937
- medium: baseFactor * 6 // 48px
1938
- };
1939
-
1940
- const padding = {
1941
- minute: baseFactor * 2,
1942
- // 16px
1943
- tiny: baseFactor * 4,
1944
- // 32px
1945
- small: baseFactor * 4 * 2,
1946
- // 64px
1947
- xSmall: baseFactor * 3 * 3,
1948
- // 72px
1949
- regular: baseFactor * 4 * 3,
1950
- // 96 px
1951
- medium: baseFactor * 4 * 4,
1952
- // 128 px
1953
- large: baseFactor * 4 * 5,
1954
- // 160px
1955
- xLarge: baseFactor * 4 * 6 // 192px
1956
- };
1957
-
1958
- const fontSize = {
1959
- h1: 72,
1960
- h2: 56,
1961
- h3: 40,
1962
- h4: 32,
1963
- h5: 24,
1964
- h6: 20,
1965
- subHead: 16,
1966
- body: 14
1967
- };
1968
- const fontSizeMob = {
1969
- h1: 40,
1970
- h2: 20,
1971
- h3: 32,
1972
- h4: 16,
1973
- h5: 16,
1974
- h6: 14,
1975
- subHead: 14,
1976
- body: 14
1977
- };
1978
- const fontWeight = {
1979
- light: 300,
1980
- regular: 400,
1981
- medium: 500,
1982
- semiBold: 600,
1983
- bold: 700,
1984
- superBold: 900
1985
- };
1986
-
1987
- function getTheme(colorTheme = 'blue', fontFamily = 'Arial', isMobile) {
1915
+ function getTheme(colorTheme = 'blue', fontFamily = 'Arial') {
1988
1916
  const palette = palettes[colorTheme] || palettes['blue'];
1989
1917
  const typography = {
1990
- fontFamily: `"${fontFamily}", "Roboto", "Helvetica", "Arial", "sans-serif"`,
1991
- fontSize: isMobile ? fontSizeMob : fontSize,
1992
- fontWeight
1918
+ fontFamily: `"${fontFamily}", "Roboto", "Helvetica", "Arial", "sans-serif"`
1993
1919
  };
1994
1920
  const shape = {
1995
1921
  borderRadius
1996
1922
  };
1997
- const spacing = {
1998
- padding: isMobile ? mobilePadding : padding,
1999
- margin: isMobile ? mobileMargin : margin
2000
- };
2001
1923
  return {
2002
1924
  palette,
2003
1925
  shape,
2004
1926
  typography,
2005
1927
  shadows: generateShadows(palette),
2006
- borders: generateBorders(palette),
2007
- spacing
1928
+ borders: generateBorders(palette)
2008
1929
  };
2009
1930
  }
2010
1931
 
@@ -2208,22 +2129,17 @@ function PageRenderer$1({
2208
2129
  const useSectionStyles$8 = createUseStyles(theme => ({
2209
2130
  bannerCarouselRightSection: {
2210
2131
  position: 'relative',
2211
- padding: ({
2212
- isMobile
2213
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
2214
- backgroundColor: theme?.palette?.background?.primary,
2215
2132
  '&, & *, & *:before, & *:after': {
2216
2133
  fontFamily: theme?.typography?.fontFamily,
2217
2134
  boxSizing: 'border-box'
2135
+ },
2136
+ '& h2,& h3': {
2137
+ fontWeight: '500',
2138
+ '& b,& strong': {
2139
+ fontWeight: '700'
2140
+ }
2218
2141
  }
2219
- // '& h2,& h3': {
2220
- // fontWeight: '500',
2221
- // '& b,& strong': {
2222
- // fontWeight: '700'
2223
- // }
2224
- // }
2225
2142
  },
2226
-
2227
2143
  sectionContainer: {
2228
2144
  margin: '0 auto',
2229
2145
  maxWidth: ({
@@ -2236,19 +2152,24 @@ const useSectionStyles$8 = createUseStyles(theme => ({
2236
2152
  justifyContent: 'center',
2237
2153
  position: 'relative'
2238
2154
  },
2155
+ partialBackground: {
2156
+ width: '61%',
2157
+ position: 'absolute',
2158
+ backgroundColor: theme?.palette?.background?.primary,
2159
+ height: '100%',
2160
+ top: '0',
2161
+ left: '0'
2162
+ },
2239
2163
  contentContainer: {
2240
2164
  position: 'relative',
2241
2165
  width: '100%',
2242
2166
  zIndex: '1',
2243
- // display: 'grid',
2244
- // gridTemplateColumns: 'repeat(2,minmax(0, 1fr))',
2245
- display: 'flex',
2246
- flexDirection: 'row',
2247
- alignItems: 'center',
2248
- maxWidth: '100%',
2249
- gap: '72px'
2167
+ display: 'grid',
2168
+ gridTemplateColumns: 'repeat(2,minmax(0, 1fr))',
2169
+ maxWidth: '100%'
2250
2170
  },
2251
2171
  textContainer: {
2172
+ padding: '140px 18%',
2252
2173
  textAlign: 'left',
2253
2174
  margin: '0 auto',
2254
2175
  maxWidth: '100%'
@@ -2256,30 +2177,23 @@ const useSectionStyles$8 = createUseStyles(theme => ({
2256
2177
  imageContainer: {
2257
2178
  width: '100%',
2258
2179
  position: 'relative',
2259
- height: '100%',
2260
- display: 'flex',
2261
- justifyContent: 'center',
2262
- alignItems: 'center',
2263
- borderRadius: '8px',
2264
- overflow: 'hidden'
2180
+ height: '90%'
2265
2181
  },
2266
2182
  subTitleHeading: {
2267
2183
  marginBottom: '8px',
2268
- fontSize: theme.typography.fontSize.subHead,
2269
- color: theme?.palette?.font?.default,
2184
+ fontSize: '16px',
2185
+ color: theme?.palette?.font?.tertiary,
2270
2186
  wordBreak: 'break-word',
2271
2187
  maxWidth: '100%'
2272
2188
  },
2273
2189
  heading: {
2274
2190
  margin: '0',
2275
- fontSize: theme.typography.fontSize.h1,
2191
+ fontSize: '72px',
2276
2192
  color: theme?.palette?.font?.default,
2277
- wordBreak: 'break-word',
2278
- fontWeight: theme.typography.fontWeight.bold,
2279
- lineHeight: 'normal'
2193
+ wordBreak: 'break-word'
2280
2194
  },
2281
2195
  description: {
2282
- margin: `${theme.spacing.margin.tiny}px 0px`,
2196
+ margin: '40px 0',
2283
2197
  color: theme?.palette?.font?.primary,
2284
2198
  lineHeight: '24px',
2285
2199
  wordBreak: 'break-word'
@@ -2294,24 +2208,30 @@ const useSectionStyles$8 = createUseStyles(theme => ({
2294
2208
  display: 'flex',
2295
2209
  gap: '20px',
2296
2210
  justifyContent: 'center',
2297
- marginTop: theme.spacing.margin.tiny,
2211
+ bottom: '25px',
2212
+ position: 'absolute',
2298
2213
  width: '100%'
2299
2214
  },
2300
- partialBackground: {
2301
- display: 'none'
2302
- },
2303
2215
  '@media screen and (max-width: 767px)': {
2304
2216
  partialBackground: {
2305
2217
  display: 'none'
2306
2218
  },
2219
+ sectionContainer: {
2220
+ paddingBottom: '50px'
2221
+ },
2307
2222
  contentContainer: {
2308
2223
  display: 'flex',
2309
- flexFlow: 'column',
2310
- paddingBottom: '48px',
2311
- gap: '24px'
2224
+ flexFlow: 'column-reverse',
2225
+ paddingBottom: '20px'
2312
2226
  },
2313
2227
  textContainer: {
2314
- textAlign: 'center'
2228
+ padding: '20px 20px 0'
2229
+ },
2230
+ heading: {
2231
+ fontSize: '40px'
2232
+ },
2233
+ description: {
2234
+ margin: '16px 0'
2315
2235
  },
2316
2236
  linkButton: {
2317
2237
  padding: '12px 16px'
@@ -2344,7 +2264,7 @@ const useCarouselStyles = createUseStyles(theme => ({
2344
2264
  '& .slick-dots': {
2345
2265
  bottom: ({
2346
2266
  buttonContainerClass
2347
- } = {}) => !!buttonContainerClass ? '10px' : 'unset',
2267
+ } = {}) => !!buttonContainerClass ? '20px' : 'unset',
2348
2268
  position: ({
2349
2269
  buttonContainerClass
2350
2270
  } = {}) => !!buttonContainerClass ? 'absolute' : 'inherit',
@@ -2354,7 +2274,7 @@ const useCarouselStyles = createUseStyles(theme => ({
2354
2274
  textAlign: 'center',
2355
2275
  paddingBottom: '0',
2356
2276
  '& ul': {
2357
- margin: theme.spacing.margin.regular,
2277
+ margin: '0',
2358
2278
  padding: '0',
2359
2279
  '& li': {
2360
2280
  width: 'unset',
@@ -2378,7 +2298,7 @@ const useCarouselStyles = createUseStyles(theme => ({
2378
2298
  display: 'flex',
2379
2299
  gap: '20px',
2380
2300
  justifyContent: 'center',
2381
- marginTop: theme.spacing.margin.tiny
2301
+ marginTop: '40px'
2382
2302
  },
2383
2303
  dots: {
2384
2304
  width: '4px',
@@ -2395,15 +2315,6 @@ const useCarouselStyles = createUseStyles(theme => ({
2395
2315
  background: ({
2396
2316
  inverted
2397
2317
  } = {}) => !!inverted ? theme?.palette?.font?.invertedDefault : theme.palette.primary.main
2398
- },
2399
- '@media screen and (max-width: 767px)': {
2400
- sliderClass: {
2401
- '& .slick-dots': {
2402
- '& ul': {
2403
- margin: '0px'
2404
- }
2405
- }
2406
- }
2407
2318
  }
2408
2319
  }));
2409
2320
 
@@ -2563,8 +2474,7 @@ function Section$4({
2563
2474
  isCustomWebsite
2564
2475
  } = useContext(PageContext);
2565
2476
  const classes = useSectionStyles$8({
2566
- isCustomWebsite,
2567
- isMobile
2477
+ isCustomWebsite
2568
2478
  });
2569
2479
  return /*#__PURE__*/React.createElement("div", {
2570
2480
  className: classes.centerData
@@ -2613,14 +2523,12 @@ function BannerCarouselRight({
2613
2523
  sectionIndex
2614
2524
  }) {
2615
2525
  const {
2616
- isMobile,
2617
2526
  layout: {
2618
2527
  containerWidth
2619
2528
  }
2620
2529
  } = useContext(PageContext);
2621
2530
  const classes = useSectionStyles$8({
2622
- containerWidth,
2623
- isMobile
2531
+ containerWidth
2624
2532
  });
2625
2533
  const [{
2626
2534
  bannerCarousel
@@ -2649,9 +2557,7 @@ var index$l = /*#__PURE__*/Object.freeze({
2649
2557
  const useSectionStyles$7 = createUseStyles(theme => ({
2650
2558
  section: {
2651
2559
  width: '100%',
2652
- padding: ({
2653
- isMobile
2654
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
2560
+ padding: '70px 0',
2655
2561
  display: 'flex',
2656
2562
  justifyContent: 'center',
2657
2563
  flexDirection: 'column',
@@ -2662,7 +2568,10 @@ const useSectionStyles$7 = createUseStyles(theme => ({
2662
2568
  boxSizing: 'border-box'
2663
2569
  },
2664
2570
  '& h2,& h3': {
2665
- marginTop: '0'
2571
+ fontWeight: '500',
2572
+ '& b,& strong': {
2573
+ fontWeight: '700'
2574
+ }
2666
2575
  }
2667
2576
  },
2668
2577
  sectionContainer: {
@@ -2673,19 +2582,16 @@ const useSectionStyles$7 = createUseStyles(theme => ({
2673
2582
  },
2674
2583
  subTitleHeading: {
2675
2584
  marginBottom: '8px',
2676
- fontSize: theme.typography.fontSize.subHead,
2677
- color: theme?.palette?.font?.default,
2585
+ fontSize: '16px',
2586
+ color: theme?.palette?.font?.tertiary,
2678
2587
  alignItems: 'center',
2679
2588
  textAlign: 'center',
2680
- wordBreak: 'break-word',
2681
- letterSpacing: '3px',
2682
- textTransform: 'uppercase'
2589
+ wordBreak: 'break-word'
2683
2590
  },
2684
2591
  heading: {
2685
- marginBottom: theme.spacing.margin.tiny,
2686
- fontSize: theme.typography.fontSize.h2,
2592
+ margin: '0',
2593
+ fontSize: '72px',
2687
2594
  color: theme?.palette?.font?.default,
2688
- fontWeight: theme.typography.fontWeight.bold,
2689
2595
  textAlign: 'center',
2690
2596
  wordBreak: 'break-word'
2691
2597
  },
@@ -2706,7 +2612,7 @@ const useSectionStyles$7 = createUseStyles(theme => ({
2706
2612
  borderRadius: theme?.shape?.borderRadius?.regular,
2707
2613
  overflow: 'hidden',
2708
2614
  minHeight: 200,
2709
- marginBottom: theme.spacing.margin.small,
2615
+ margin: '16px 0',
2710
2616
  position: 'relative',
2711
2617
  '&:nth-child(2n)': {
2712
2618
  alignSelf: 'flex-end',
@@ -2714,7 +2620,7 @@ const useSectionStyles$7 = createUseStyles(theme => ({
2714
2620
  right: '0'
2715
2621
  },
2716
2622
  '& $contentText': {
2717
- marginRight: '170px'
2623
+ marginRight: '200px'
2718
2624
  }
2719
2625
  },
2720
2626
  '&:nth-child(2n+1)': {
@@ -2723,7 +2629,7 @@ const useSectionStyles$7 = createUseStyles(theme => ({
2723
2629
  left: '0'
2724
2630
  },
2725
2631
  '& $contentText': {
2726
- marginLeft: '170px'
2632
+ marginLeft: '200px'
2727
2633
  }
2728
2634
  },
2729
2635
  '&:nth-child(7n+1) $contentNumber': {
@@ -2757,31 +2663,42 @@ const useSectionStyles$7 = createUseStyles(theme => ({
2757
2663
  display: 'flex',
2758
2664
  alignItems: 'center',
2759
2665
  justifyContent: 'center',
2760
- padding: '48px',
2761
2666
  height: '100%',
2762
2667
  color: theme?.palette?.font?.default,
2668
+ width: '200px',
2763
2669
  wordBreak: 'break-word'
2764
2670
  },
2765
2671
  contentText: {
2766
- padding: theme.spacing.padding.tiny
2672
+ padding: '20px 0'
2767
2673
  },
2768
2674
  contentHeading: {
2769
2675
  fontStyle: 'normal',
2770
- fontSize: theme.typography.fontSize.h5,
2771
- fontWeight: theme.typography.fontWeight.bold,
2676
+ fontSize: '24px',
2772
2677
  lineHeight: '32px',
2773
- marginBottom: '8px',
2774
2678
  color: theme?.palette?.font?.default,
2679
+ margin: '0 48px',
2775
2680
  wordBreak: 'break-word'
2776
2681
  },
2777
2682
  contentPara: {
2778
2683
  fontStyle: 'normal',
2779
- fontSize: theme.typography.fontSize.subHead,
2684
+ fontSize: '16px',
2780
2685
  lineHeight: '32px',
2781
2686
  color: theme?.palette?.font?.primary,
2687
+ margin: '20px 48px 0 48px',
2782
2688
  wordBreak: 'break-word'
2783
2689
  },
2784
2690
  '@media screen and (max-width: 767px)': {
2691
+ section: {
2692
+ padding: '70px 20px'
2693
+ },
2694
+ textContainer: {
2695
+ padding: '20px',
2696
+ width: '100%'
2697
+ },
2698
+ heading: {
2699
+ fontSize: '24px',
2700
+ margin: '4px 0 12px 0'
2701
+ },
2785
2702
  contentContainer: {
2786
2703
  width: '100%'
2787
2704
  },
@@ -2789,31 +2706,36 @@ const useSectionStyles$7 = createUseStyles(theme => ({
2789
2706
  display: 'flex',
2790
2707
  flexDirection: 'column',
2791
2708
  borderRadius: theme.shape.borderRadius.large,
2709
+ margin: '20px 0 10px 0',
2792
2710
  width: '100%',
2793
2711
  height: 'auto',
2794
2712
  '&:nth-child(2n)': {
2795
2713
  marginLeft: '0',
2796
2714
  '& $contentText': {
2797
2715
  marginRight: '0',
2798
- alignSelf: 'flex-start'
2799
- // padding: '0'
2716
+ alignSelf: 'flex-start',
2717
+ padding: '0'
2800
2718
  }
2801
2719
  },
2802
-
2803
2720
  '&:nth-child(2n+1)': {
2804
2721
  marginRight: '0',
2805
2722
  '& $contentText': {
2806
2723
  marginLeft: '0',
2807
- alignSelf: 'flex-start'
2808
- // padding: '0'
2724
+ alignSelf: 'flex-start',
2725
+ padding: '0'
2809
2726
  }
2810
2727
  }
2811
2728
  },
2812
-
2813
2729
  contentNumber: {
2814
2730
  width: '100%',
2815
- padding: '24px',
2731
+ padding: '40px 0',
2816
2732
  position: 'static'
2733
+ },
2734
+ contentHeading: {
2735
+ margin: '20px 20px 0 20px'
2736
+ },
2737
+ contentPara: {
2738
+ margin: '16px 20px 24px 20px'
2817
2739
  }
2818
2740
  }
2819
2741
  }));
@@ -2824,12 +2746,10 @@ function List({
2824
2746
  const {
2825
2747
  layout: {
2826
2748
  containerWidth
2827
- },
2828
- isMobile
2749
+ }
2829
2750
  } = useContext(PageContext);
2830
2751
  const classes = useSectionStyles$7({
2831
- containerWidth,
2832
- isMobile
2752
+ containerWidth
2833
2753
  });
2834
2754
  const [nodeData] = sectionData.components;
2835
2755
  const getNumber = val => {
@@ -2893,33 +2813,29 @@ const useSectionStyles$6 = createUseStyles(theme => ({
2893
2813
  '&, & *, & *:before, & *:after': {
2894
2814
  fontFamily: theme?.typography?.fontFamily,
2895
2815
  boxSizing: 'border-box'
2816
+ },
2817
+ '& h2,& h3': {
2818
+ fontWeight: '500',
2819
+ '& b,& strong': {
2820
+ fontWeight: '700'
2821
+ }
2896
2822
  }
2897
- // '& h2,& h3': {
2898
- // fontWeight: '500',
2899
- // '& b,& strong': {
2900
- // fontWeight: '700'
2901
- // }
2902
- // }
2903
2823
  },
2904
-
2905
2824
  sectionContainer: {
2825
+ margin: '0 auto',
2906
2826
  width: '100%',
2907
2827
  // maxWidth: ({ containerWidth } = {}) => containerWidth,
2908
2828
  position: 'absolute',
2909
- zIndex: '9',
2910
- height: '100%'
2829
+ zIndex: '9'
2911
2830
  },
2912
2831
  absoluteButtons: {
2913
2832
  display: 'flex',
2914
2833
  gap: '20px',
2915
2834
  justifyContent: 'center',
2916
- bottom: '10%',
2835
+ bottom: '25px',
2917
2836
  position: 'absolute',
2918
2837
  width: '100%'
2919
2838
  },
2920
- buttonClass: {
2921
- margin: `${theme.spacing.margin.tiny}px 0px`
2922
- },
2923
2839
  contentContainer: {
2924
2840
  // padding: '100px 0',
2925
2841
  // height: '100%',
@@ -2955,33 +2871,27 @@ const useSectionStyles$6 = createUseStyles(theme => ({
2955
2871
  height: '100%'
2956
2872
  },
2957
2873
  textContainer: {
2958
- padding: `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
2959
- // margin: `0px ${theme.spacing.padding.medium} 0px ${theme.spacing.padding.medium}`,
2960
- width: '100%',
2961
- height: '100%',
2962
- display: 'flex',
2963
- justifyContent: 'center',
2964
- alignItems: 'center',
2965
- flexDirection: 'column'
2874
+ padding: '100px 0',
2875
+ margin: '0 auto',
2876
+ width: '80%'
2966
2877
  },
2967
2878
  subTitleHeading: {
2968
2879
  color: theme?.palette?.font?.invertedDefault,
2969
2880
  marginBottom: '8px',
2970
- fontSize: theme.typography.fontSize.subHead,
2881
+ fontSize: '16px',
2971
2882
  wordBreak: 'break-word'
2972
2883
  },
2973
2884
  heading: {
2974
2885
  margin: '0',
2975
- fontSize: theme.typography.fontSize.h1,
2886
+ fontSize: '62px',
2976
2887
  color: theme?.palette?.font?.invertedDefault,
2977
2888
  wordBreak: 'break-word'
2978
2889
  },
2979
2890
  description: {
2980
- margin: `${theme.spacing.margin.tiny}px 0px`,
2891
+ margin: '40px 0',
2981
2892
  color: theme?.palette?.font?.invertedDefault,
2982
2893
  lineHeight: '24px',
2983
- wordBreak: 'break-word',
2984
- fontSize: theme.typography.fontSize.subHead
2894
+ wordBreak: 'break-word'
2985
2895
  },
2986
2896
  sideBannerImage: {
2987
2897
  width: '100%',
@@ -2999,19 +2909,22 @@ const useSectionStyles$6 = createUseStyles(theme => ({
2999
2909
  justifyContent: 'center',
3000
2910
  padding: '0px'
3001
2911
  },
3002
- // textContainer: {
3003
- // padding: '20px 20px',
3004
- // height: '100%',
3005
- // width: '100%'
3006
- // // backgroundColor: theme?.palette?.background?.primary
3007
- // },
2912
+ textContainer: {
2913
+ padding: '20px 20px',
2914
+ height: '100%',
2915
+ width: '100%'
2916
+ // backgroundColor: theme?.palette?.background?.primary
2917
+ },
2918
+
3008
2919
  subTitleHeading: {
3009
2920
  color: theme?.palette?.font?.tertiary
3010
2921
  },
3011
2922
  heading: {
2923
+ fontSize: '40px',
3012
2924
  color: theme?.palette?.font?.default
3013
2925
  },
3014
2926
  description: {
2927
+ margin: '16px 0',
3015
2928
  color: theme?.palette?.font?.primary
3016
2929
  },
3017
2930
  centerBgImageContainer: {
@@ -3078,14 +2991,12 @@ const Section$3 = ({
3078
2991
  dangerouslySetInnerHTML: {
3079
2992
  __html: nodeData.description.metadata.value
3080
2993
  }
3081
- }) : null, nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React.createElement("div", {
3082
- className: classes.buttonClass
3083
- }, /*#__PURE__*/React.createElement(Button, {
2994
+ }) : null, nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React.createElement(Button, {
3084
2995
  ref: nodeData?.cta?.refSetter,
3085
2996
  data: nodeData.cta.metadata,
3086
2997
  type: nodeData?.cta?.metadata?.type,
3087
2998
  size: isMobile ? 'small' : 'medium'
3088
- }))) : null), /*#__PURE__*/React.createElement("div", {
2999
+ })) : null), /*#__PURE__*/React.createElement("div", {
3089
3000
  className: classes?.centerBgImageContainer
3090
3001
  }, /*#__PURE__*/React.createElement(NextImageRenderer, {
3091
3002
  src: nodeData.image.metadata.value,
@@ -3127,21 +3038,18 @@ var index$j = /*#__PURE__*/Object.freeze({
3127
3038
  const useSectionStyles$5 = createUseStyles(theme => {
3128
3039
  return {
3129
3040
  section: {
3130
- padding: ({
3131
- isMobile
3132
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
3041
+ paddingBottom: '70px',
3133
3042
  '&, & *, & *:before, & *:after': {
3134
3043
  fontFamily: theme?.typography?.fontFamily,
3135
3044
  boxSizing: 'border-box'
3045
+ },
3046
+ '& h2,& h3': {
3047
+ fontWeight: '500',
3048
+ '& b,& strong': {
3049
+ fontWeight: '700'
3050
+ }
3136
3051
  }
3137
- // '& h2,& h3': {
3138
- // fontWeight: theme?.typography?.fontWeight?.medium,
3139
- // '& b,& strong': {
3140
- // fontWeight: theme?.typography?.fontWeight?.bold
3141
- // }
3142
- // }
3143
3052
  },
3144
-
3145
3053
  sectionContainer: {
3146
3054
  margin: '0 auto',
3147
3055
  maxWidth: ({
@@ -3151,11 +3059,9 @@ const useSectionStyles$5 = createUseStyles(theme => {
3151
3059
  centerData: {
3152
3060
  display: 'flex',
3153
3061
  alignItems: 'center',
3154
- justifyContent: 'center'
3155
-
3156
- // padding: `${theme?.spacing?.padding?.regular}px ${theme?.spacing?.padding?.medium}px 0px ${theme?.spacing?.padding?.medium}px`
3062
+ justifyContent: 'center',
3063
+ padding: '140px 70px 0'
3157
3064
  },
3158
-
3159
3065
  imageContainerDiv: {
3160
3066
  width: '50%',
3161
3067
  position: 'relative'
@@ -3189,28 +3095,25 @@ const useSectionStyles$5 = createUseStyles(theme => {
3189
3095
  objectFit: 'cover'
3190
3096
  },
3191
3097
  textContainer: {
3192
- marginLeft: '72px',
3098
+ padding: '0 60px',
3193
3099
  textAlign: 'left',
3194
3100
  margin: '0 auto',
3195
3101
  width: '50%'
3196
3102
  },
3197
3103
  subTitleHeading: {
3198
3104
  marginBottom: '8px',
3199
- fontSize: theme?.typography?.fontSize?.subHead,
3200
- color: theme?.palette?.font?.default,
3105
+ fontSize: '16px',
3106
+ color: theme?.palette?.font?.tertiary,
3201
3107
  wordBreak: 'break-word'
3202
3108
  },
3203
3109
  heading: {
3204
3110
  margin: '0',
3205
- fontSize: theme?.typography?.fontSize?.h1,
3111
+ fontSize: '72px',
3206
3112
  color: theme?.palette?.font?.default,
3207
- wordBreak: 'break-word',
3208
- fontWeight: theme?.typography?.fontWeight?.bold,
3209
- lineHeight: 'normal'
3113
+ wordBreak: 'break-word'
3210
3114
  },
3211
3115
  description: {
3212
- marginTop: theme.spacing.margin.tiny,
3213
- marginBottom: theme.spacing.margin.tiny,
3116
+ margin: '40px 0',
3214
3117
  color: theme?.palette?.font?.primary,
3215
3118
  lineHeight: '24px',
3216
3119
  wordBreak: 'break-word'
@@ -3220,9 +3123,9 @@ const useSectionStyles$5 = createUseStyles(theme => {
3220
3123
  padding: '0 0 40px'
3221
3124
  },
3222
3125
  centerData: {
3223
- flexDirection: 'column-reverse',
3126
+ flexDirection: 'column',
3224
3127
  width: '100%',
3225
- padding: `${theme?.spacing?.padding?.medium}px ${theme?.spacing?.padding?.regular}px`
3128
+ padding: '0'
3226
3129
  },
3227
3130
  imageContainer: {
3228
3131
  height: 'unset !important',
@@ -3242,11 +3145,11 @@ const useSectionStyles$5 = createUseStyles(theme => {
3242
3145
  height: 'unset !important'
3243
3146
  },
3244
3147
  textContainer: {
3245
- padding: `${theme?.spacing?.padding?.regular}px 0px`,
3148
+ padding: '20px 20px',
3246
3149
  width: 'unset'
3247
3150
  },
3248
3151
  heading: {
3249
- fontSize: `${theme?.typography?.fontSize?.h3}px`
3152
+ fontSize: '40px'
3250
3153
  },
3251
3154
  description: {
3252
3155
  margin: '16px 0'
@@ -3267,8 +3170,7 @@ function Section$2({
3267
3170
  isCustomWebsite
3268
3171
  } = useContext(PageContext);
3269
3172
  const classes = useSectionStyles$5({
3270
- isCustomWebsite,
3271
- isMobile
3173
+ isCustomWebsite
3272
3174
  });
3273
3175
  return /*#__PURE__*/React.createElement("div", {
3274
3176
  className: classes.centerData
@@ -3281,6 +3183,8 @@ function Section$2({
3281
3183
  ref: nodeData?.image?.refSetter,
3282
3184
  className: classes.sideBannerImage,
3283
3185
  sectionIndex: sectionIndex
3186
+ }), /*#__PURE__*/React.createElement("div", {
3187
+ className: classes.imageBorder
3284
3188
  }))), /*#__PURE__*/React.createElement("div", {
3285
3189
  className: classes.textContainer
3286
3190
  }, /*#__PURE__*/React.createElement("div", {
@@ -3351,15 +3255,16 @@ const useSectionStyles$4 = createUseStyles(theme => ({
3351
3255
  width: '100%',
3352
3256
  alignItems: 'center',
3353
3257
  justifyContent: 'center',
3354
- padding: ({
3355
- isMobile
3356
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
3258
+ padding: '60px 70px',
3357
3259
  '&, & *, & *:before, & *:after': {
3358
3260
  fontFamily: theme?.typography?.fontFamily,
3359
3261
  boxSizing: 'border-box'
3360
3262
  },
3361
3263
  '& h2,& h3': {
3362
- marginTop: '0'
3264
+ fontWeight: '500',
3265
+ '& b,& strong': {
3266
+ fontWeight: '700'
3267
+ }
3363
3268
  }
3364
3269
  },
3365
3270
  newsLetterContainer: {
@@ -3380,16 +3285,15 @@ const useSectionStyles$4 = createUseStyles(theme => ({
3380
3285
  backgroundColor: theme?.palette?.background?.default,
3381
3286
  boxShadow: theme?.shadows?.secondary,
3382
3287
  borderRadius: theme?.shape?.borderRadius?.regular,
3383
- padding: theme.spacing.padding.small,
3288
+ padding: '40px 80px',
3384
3289
  position: 'relative'
3385
3290
  },
3386
3291
  cardHeading: {
3387
- fontSize: theme.typography.fontSize.h2,
3388
- fontWeight: theme.typography.fontWeight.bold,
3292
+ fontSize: '56px',
3389
3293
  lineHeight: '71px',
3390
3294
  letterSpacing: '-3px',
3391
3295
  color: theme?.palette?.font?.secondary,
3392
- marginBottom: theme.spacing.padding.tiny,
3296
+ margin: '0 0 32px 0',
3393
3297
  wordBreak: 'break-word'
3394
3298
  },
3395
3299
  contentContainer: {
@@ -3398,9 +3302,10 @@ const useSectionStyles$4 = createUseStyles(theme => ({
3398
3302
  justifyContent: 'space-between'
3399
3303
  },
3400
3304
  title: {
3401
- fontSize: theme.typography.fontSize.h6,
3305
+ fontSize: '20px',
3402
3306
  lineHeight: '32px',
3403
3307
  color: theme?.palette?.font?.primary,
3308
+ margin: '0 80px 0 0',
3404
3309
  width: 'calc(50% - 80px)',
3405
3310
  wordBreak: 'break-word'
3406
3311
  },
@@ -3438,44 +3343,42 @@ const useSectionStyles$4 = createUseStyles(theme => ({
3438
3343
  section: {
3439
3344
  display: 'flex',
3440
3345
  flexDirection: 'column',
3441
- alignItems: 'center'
3346
+ alignItems: 'center',
3347
+ padding: '30px 20px'
3442
3348
  },
3443
3349
  sectionContainer: {
3444
- borderRadius: theme?.shape?.borderRadius?.large,
3445
- textAlign: 'center',
3446
- display: 'flex',
3447
- alignItems: 'center',
3448
- flexDirection: 'column'
3350
+ padding: '30px 20px',
3351
+ borderRadius: theme?.shape?.borderRadius?.large
3449
3352
  },
3450
3353
  partialBackground: {
3451
3354
  height: '150px'
3452
3355
  },
3453
3356
  title: {
3454
3357
  width: '100%',
3455
- lineHeight: '22px',
3456
- margin: '0px 0px 16px 0px'
3358
+ margin: '0',
3359
+ fontSize: '20px',
3360
+ lineHeight: '32px'
3457
3361
  },
3458
3362
  cardHeading: {
3363
+ fontSize: '24px',
3459
3364
  lineHeight: '32px',
3460
3365
  letterSpacing: '-1px',
3461
- width: '50%',
3462
- lineHeight: 'normal'
3366
+ marginBottom: '20px'
3463
3367
  },
3464
3368
  contentContainer: {
3465
3369
  display: 'flex',
3466
3370
  flexDirection: 'column',
3467
- justifyContent: 'flex-start',
3468
- textAlign: 'center'
3371
+ justifyContent: 'flex-start'
3469
3372
  },
3470
3373
  inputContainer: {
3471
3374
  display: 'block',
3472
3375
  width: '100%',
3376
+ margin: '24px 16px 0 16px',
3473
3377
  position: 'initial'
3474
3378
  },
3475
3379
  btnContainer: {
3476
3380
  right: 'unset',
3477
- position: 'initial',
3478
- marginTop: '4px'
3381
+ position: 'initial'
3479
3382
  }
3480
3383
  }
3481
3384
  }));
@@ -3620,8 +3523,7 @@ function SubscribeToNewsletter({
3620
3523
  } = useContext(PageContext);
3621
3524
  const [nodeData] = sectionData.components;
3622
3525
  const classes = useSectionStyles$4({
3623
- containerWidth,
3624
- isMobile
3526
+ containerWidth
3625
3527
  });
3626
3528
  let formInitialValue = nodeData?.inputField?.metadata?.value;
3627
3529
  const [inputVal, setInputVal] = useState(formInitialValue);
@@ -3734,176 +3636,171 @@ var index$h = /*#__PURE__*/Object.freeze({
3734
3636
  'default': SubscribeToNewsletter
3735
3637
  });
3736
3638
 
3737
- const useTestimonialStyles = createUseStyles(theme => ({
3738
- testimonialContainer: {
3739
- background: theme?.palette?.background?.primary,
3740
- overflow: 'hidden',
3741
- padding: `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
3742
- '&, & *, & *:before, & *:after': {
3743
- fontFamily: theme?.typography?.fontFamily,
3744
- boxSizing: 'border-box'
3745
- },
3746
- '& h3,& p': {
3747
- marginTop: '0'
3748
- }
3749
- },
3750
- sectionContainer: {
3751
- margin: '0 auto',
3752
- maxWidth: ({
3753
- containerWidth
3754
- } = {}) => containerWidth
3755
- },
3756
- testimonialText: {
3757
- color: theme?.palette?.font?.default,
3758
- fontSize: theme.typography.fontSize.subHead,
3759
- wordBreak: 'break-word',
3760
- textTransform: 'uppercase'
3761
- },
3762
- testimonialHeader: {
3763
- fontSize: theme.typography.fontSize.h2,
3764
- color: theme?.palette?.font?.default,
3765
- fontWeight: theme.typography.fontWeight.bold,
3766
- marginBottom: theme.spacing.margin.tiny,
3767
- marginTop: '8px',
3768
- overflow: 'hidden',
3769
- wordBreak: 'break-word',
3770
- // whiteSpace: 'nowrap',
3771
- textOverflow: 'ellipsis'
3772
- },
3773
- sliderContainer: {
3774
- marginRight: `-${theme.spacing.margin.regular}px`
3775
- },
3776
- singleCard: {
3777
- // margin: '6px 12px',
3778
- position: 'relative',
3779
- height: 'calc(100% - 12px)',
3780
- width: 'calc(100% - 24px)',
3781
- background: theme?.palette?.background?.default,
3782
- boxShadow: theme?.shadows?.primary,
3783
- borderRadius: theme?.shape?.borderRadius?.regular
3784
- },
3785
- contentRow: {
3786
- display: 'grid',
3787
- gridTemplateColumns: ({
3788
- slidesToShow
3789
- } = {}) => `repeat(${slidesToShow},minmax(0, 1fr))`
3790
- },
3791
- cardDetails: {
3792
- height: '100%',
3793
- display: 'flex',
3794
- flexDirection: 'column',
3795
- justifyContent: 'space-between',
3796
- padding: '48px',
3797
- alignItems: 'flex-start'
3798
- },
3799
- quoteIcon: {
3800
- position: 'absolute',
3801
- right: '20px'
3802
- },
3803
- reviewText: {
3804
- // padding: '48px 41px 0 48px',
3805
- marginBottom: theme.spacing.margin.tiny,
3806
- fontSize: theme.typography.fontSize.subHead,
3807
- wordBreak: 'break-word',
3808
- color: theme?.palette?.font?.primary,
3809
- lineHeight: '22px'
3810
- },
3811
- userContainer: {
3812
- display: 'flex',
3813
- gap: '16px',
3814
- alignItems: 'center'
3815
- },
3816
- userImageContainer: {
3817
- width: '64px',
3818
- height: '64px',
3819
- position: 'relative',
3820
- // paddingBottom: '55px',
3821
- objectFit: 'cover'
3822
- },
3823
- userImageDummy: {
3824
- width: '64px',
3825
- height: '64px',
3826
- borderRadius: '32px',
3827
- background: '#666666',
3828
- marginRight: '16px',
3829
- flexShrink: '0'
3830
- },
3831
- userImage: {
3832
- width: '64px',
3833
- height: '64px',
3834
- borderRadius: '32px',
3835
- marginRight: '16px'
3836
- },
3837
- userName: {
3838
- color: theme?.palette?.font?.default,
3839
- margin: '0',
3840
- fontSize: theme.typography.fontSize.h5,
3841
- // paddingTop: '16px',
3842
- overflow: 'hidden',
3843
- whiteSpace: 'nowrap',
3844
- textOverflow: 'ellipsis'
3845
- },
3846
- buttonContainer: {
3847
- display: 'flex',
3848
- gap: '20px',
3849
- justifyContent: 'center',
3850
- // paddingRight: theme.spacing.padding.medium,
3851
- marginTop: theme.spacing.margin.tiny
3852
- },
3853
- '@media (max-width: 768px)': {
3639
+ const useTestimonialStyles = createUseStyles(theme => {
3640
+ return {
3854
3641
  testimonialContainer: {
3855
- padding: `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px`
3856
- },
3857
- // testimonialCardAndText: {
3858
- // margin: '0 20px'
3859
- // },
3860
-
3861
- // testimonialHeader: {
3862
- // fontSize: '24px',
3863
- // color: theme?.palette?.font?.default,
3864
- // margin: '4px 0 12px 0',
3865
- // overflow: 'hidden',
3866
- // // whiteSpace: 'nowrap',
3867
- // wordBreak: 'break-word',
3868
- // textOverflow: 'ellipsis'
3869
- // },
3870
- userImageDummy: {
3871
- width: '48px',
3872
- height: '48px',
3873
- borderRadius: '24px',
3874
- marginRight: '16px'
3642
+ background: theme?.palette?.background?.primary,
3643
+ overflow: 'hidden',
3644
+ padding: '70px',
3645
+ '&, & *, & *:before, & *:after': {
3646
+ fontFamily: theme?.typography?.fontFamily,
3647
+ boxSizing: 'border-box'
3648
+ },
3649
+ '& h2,& h3': {
3650
+ fontWeight: '500',
3651
+ '& b,& strong': {
3652
+ fontWeight: '700'
3653
+ }
3654
+ }
3875
3655
  },
3876
- userImage: {
3877
- width: '48px',
3878
- height: '48px',
3879
- borderRadius: '24px',
3880
- marginRight: '16px'
3656
+ sectionContainer: {
3657
+ margin: '0 auto',
3658
+ maxWidth: ({
3659
+ containerWidth
3660
+ } = {}) => containerWidth
3881
3661
  },
3882
- reviewText: {
3883
- marginBottom: '16px'
3662
+ testimonialCardAndText: {
3663
+ marginTop: '70px'
3884
3664
  },
3885
- singleCard: {
3886
- margin: '6px 2px',
3887
- width: 'calc(100% - 14px)'
3665
+ testimonialText: {
3666
+ color: theme?.palette?.font?.secondary,
3667
+ fontSize: '16px',
3668
+ marginLeft: '10px',
3669
+ wordBreak: 'break-word'
3888
3670
  },
3889
- userName: {
3890
- // paddingTop: '8px',
3671
+ testimonialHeader: {
3672
+ fontSize: '56px',
3673
+ color: theme?.palette?.font?.default,
3674
+ margin: '10px 0 40px 10px',
3891
3675
  overflow: 'hidden',
3892
- whiteSpace: 'nowrap',
3676
+ wordBreak: 'break-word',
3677
+ // whiteSpace: 'nowrap',
3893
3678
  textOverflow: 'ellipsis'
3894
3679
  },
3895
- userImageContainer: {
3896
- width: '48px',
3897
- height: '48px'
3680
+ sliderContainer: {
3681
+ marginRight: '-20px'
3682
+ },
3683
+ singleCard: {
3684
+ margin: '6px 12px',
3685
+ position: 'relative',
3686
+ height: 'calc(100% - 12px)',
3687
+ width: 'calc(100% - 24px)',
3688
+ background: theme?.palette?.background?.default,
3689
+ boxShadow: theme?.shadows?.primary,
3690
+ borderRadius: theme?.shape?.borderRadius?.regular
3691
+ },
3692
+ contentRow: {
3693
+ display: 'grid',
3694
+ gridTemplateColumns: ({
3695
+ slidesToShow
3696
+ } = {}) => `repeat(${slidesToShow},minmax(0, 1fr))`
3898
3697
  },
3899
3698
  cardDetails: {
3900
- padding: '16px'
3699
+ height: '100%',
3700
+ display: 'flex',
3701
+ flexDirection: 'column',
3702
+ justifyContent: 'space-between'
3703
+ },
3704
+ quoteIcon: {
3705
+ position: 'absolute',
3706
+ right: '20px'
3707
+ },
3708
+ reviewText: {
3709
+ padding: '48px 41px 0 48px',
3710
+ marginBottom: '48px',
3711
+ fontSize: '18px',
3712
+ wordBreak: 'break-word',
3713
+ color: theme?.palette?.font?.primary
3714
+ },
3715
+ userContainer: {
3716
+ display: 'flex',
3717
+ gap: '15px',
3718
+ padding: '0 0 29px 48px'
3719
+ },
3720
+ userImageContainer: {
3721
+ width: '64px',
3722
+ height: '64px',
3723
+ position: 'relative',
3724
+ // paddingBottom: '55px',
3725
+ objectFit: 'cover'
3726
+ },
3727
+ userImageDummy: {
3728
+ width: '64px',
3729
+ height: '64px',
3730
+ borderRadius: '32px',
3731
+ background: '#666666',
3732
+ marginRight: '16px',
3733
+ flexShrink: '0'
3734
+ },
3735
+ userImage: {
3736
+ width: '64px',
3737
+ height: '64px',
3738
+ borderRadius: '32px',
3739
+ marginRight: '16px'
3740
+ },
3741
+ userName: {
3742
+ color: theme?.palette?.font?.default,
3743
+ margin: '0',
3744
+ fontSize: '24px',
3745
+ paddingTop: '16px',
3746
+ overflow: 'hidden',
3747
+ whiteSpace: 'nowrap',
3748
+ textOverflow: 'ellipsis'
3749
+ },
3750
+ buttonContainer: {
3751
+ display: 'flex',
3752
+ width: '120px',
3753
+ justifyContent: 'space-between',
3754
+ margin: '36px auto 81px auto'
3755
+ },
3756
+ '@media (max-width: 768px)': {
3757
+ testimonialContainer: {
3758
+ padding: '60px 0'
3759
+ },
3760
+ testimonialCardAndText: {
3761
+ margin: '0 20px'
3762
+ },
3763
+ testimonialHeader: {
3764
+ fontSize: '24px',
3765
+ color: theme?.palette?.font?.default,
3766
+ margin: '4px 0 12px 0',
3767
+ overflow: 'hidden',
3768
+ // whiteSpace: 'nowrap',
3769
+ wordBreak: 'break-word',
3770
+ textOverflow: 'ellipsis'
3771
+ },
3772
+ userImageDummy: {
3773
+ width: '48px',
3774
+ height: '48px',
3775
+ borderRadius: '24px',
3776
+ marginRight: '16px'
3777
+ },
3778
+ userImage: {
3779
+ width: '48px',
3780
+ height: '48px',
3781
+ borderRadius: '24px',
3782
+ marginRight: '16px'
3783
+ },
3784
+ reviewText: {
3785
+ marginBottom: '40px'
3786
+ },
3787
+ singleCard: {
3788
+ margin: '6px 2px',
3789
+ width: 'calc(100% - 4px)'
3790
+ },
3791
+ userName: {
3792
+ paddingTop: '8px',
3793
+ overflow: 'hidden',
3794
+ whiteSpace: 'nowrap',
3795
+ textOverflow: 'ellipsis'
3796
+ },
3797
+ userImageContainer: {
3798
+ width: '48px',
3799
+ height: '48px'
3800
+ }
3901
3801
  }
3902
- // sliderContainer: {
3903
- // marginRight: '-24px'
3904
- // },
3905
- }
3906
- }));
3802
+ };
3803
+ });
3907
3804
 
3908
3805
  function QuotesComponent() {
3909
3806
  const theme = useTheme();
@@ -3931,14 +3828,13 @@ function Section$1({
3931
3828
  const classes = useTestimonialStyles({
3932
3829
  containerWidth,
3933
3830
  cardsCount,
3934
- slidesToShow,
3935
- isMobile
3831
+ slidesToShow
3936
3832
  });
3937
3833
  const settings = {
3938
3834
  className: classes.sliderContainer,
3939
3835
  slidesToShow,
3940
3836
  centerMode: true,
3941
- centerPadding: isMobile ? '0px 0 0' : '80px 0 0'
3837
+ centerPadding: isMobile ? '10px 0 0' : '80px 0 0'
3942
3838
  };
3943
3839
  const carouselContent = carouselList.map((el, idx) =>
3944
3840
  /*#__PURE__*/
@@ -4145,7 +4041,8 @@ const useVideoStyles$1 = createUseStyles(theme => {
4145
4041
  height: '100%',
4146
4042
  width: '100%',
4147
4043
  objectFit: 'cover',
4148
- objectPosition: 'top'
4044
+ objectPosition: 'top',
4045
+ opacity: '0.8'
4149
4046
  },
4150
4047
  '@media (max-width: 767px)': {
4151
4048
  iframe: {
@@ -4180,7 +4077,10 @@ function VideoPlayer(props) {
4180
4077
  }
4181
4078
  }
4182
4079
  return /*#__PURE__*/React.createElement(React.Fragment, null, !isLoaded && /*#__PURE__*/React.createElement("div", {
4183
- className: classes.imgContainer
4080
+ className: classes.imgContainer,
4081
+ onClick: () => {
4082
+ setIsEnableed(true);
4083
+ }
4184
4084
  }, /*#__PURE__*/React.createElement(NextImageRenderer, {
4185
4085
  src: imageUrl,
4186
4086
  sectionIndex: props?.sectionIndex,
@@ -4209,20 +4109,20 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
4209
4109
  videoTestimonialSuperContainer: {
4210
4110
  display: 'flex',
4211
4111
  justifyContent: 'center',
4212
- padding: ({
4213
- isMobile
4214
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
4112
+ padding: '70px',
4215
4113
  '&, & *, & *:before, & *:after': {
4216
- fontFamily: theme?.typography?.fontFamily
4217
- // boxSizing: 'border-box'
4114
+ fontFamily: theme?.typography?.fontFamily,
4115
+ boxSizing: 'border-box'
4218
4116
  },
4219
-
4220
- '& h2,& h3,& p': {
4221
- marginTop: '0'
4117
+ '& h2,& h3': {
4118
+ fontWeight: '500',
4119
+ '& b,& strong': {
4120
+ fontWeight: '700'
4121
+ }
4222
4122
  }
4223
4123
  },
4224
4124
  sectionContainer: {
4225
- // margin: '0 auto',
4125
+ margin: '0 auto',
4226
4126
  maxWidth: ({
4227
4127
  containerWidth
4228
4128
  } = {}) => containerWidth
@@ -4233,28 +4133,29 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
4233
4133
  fontFamily: theme?.typography?.fontFamily
4234
4134
  },
4235
4135
  videoTestimonialHeading: {
4236
- fontSize: theme.typography.fontSize.subHead,
4136
+ fontSize: '16px',
4237
4137
  lineHeight: '20px',
4238
4138
  letterSpacing: '3px',
4239
4139
  textTransform: 'uppercase',
4240
- color: theme.palette.font.default,
4241
- wordBreak: 'break-word',
4242
- marginBottom: '8px'
4140
+ color: theme.palette.font.tertiary,
4141
+ wordBreak: 'break-word'
4243
4142
  },
4244
4143
  videoTestimonialTitle: {
4245
- fontSize: theme.typography.fontSize.h1,
4246
- // lineHeight: '71px',
4144
+ fontSize: '56px',
4145
+ lineHeight: '71px',
4247
4146
  letterSpacing: '-3px',
4248
- fontWeight: theme.typography.fontWeight.bold,
4249
- marginBottom: theme.spacing.margin.tiny,
4147
+ margin: '0',
4250
4148
  color: theme.palette.font.default,
4251
4149
  wordBreak: 'break-word'
4252
4150
  },
4151
+ videoCarouselContainer: {
4152
+ marginTop: '16px'
4153
+ },
4253
4154
  videoCarousel: {
4254
4155
  display: 'flex',
4255
4156
  alignItems: 'center',
4256
4157
  justifyContent: 'flex-start',
4257
- gap: theme.spacing.margin.small
4158
+ gap: '60px'
4258
4159
  },
4259
4160
  iframeSuperContainer: {
4260
4161
  height: '100%',
@@ -4276,49 +4177,57 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
4276
4177
  videoDetails: {
4277
4178
  width: '100%',
4278
4179
  display: 'flex',
4279
- gap: '24px',
4280
4180
  flexDirection: 'column',
4281
4181
  alignItems: 'flex-start'
4282
4182
  },
4283
4183
  videoDetailsHeading: {
4284
- fontSize: theme.typography.fontSize.h3,
4184
+ fontSize: '40px',
4285
4185
  lineHeight: '48px',
4286
4186
  margin: '0',
4287
4187
  letterSpacing: '-1px',
4288
4188
  wordBreak: 'break-word',
4289
- color: theme.palette.font.default,
4290
- fontWeight: theme.typography.fontWeight.bold
4189
+ color: theme.palette.font.default
4291
4190
  },
4292
4191
  videoDetailsContent: {
4293
- fontSize: theme.typography.fontSize.subHead,
4192
+ fontSize: '16px',
4294
4193
  lineHeight: '24px',
4295
4194
  wordBreak: 'break-word',
4296
- color: theme.palette.font.primary
4195
+ color: theme.palette.font.primary,
4196
+ margin: '10px 0 20px'
4297
4197
  },
4298
4198
  videoDetailsSubContent: {
4299
- fontSize: theme.typography.fontSize.subHead,
4199
+ fontSize: '16px',
4300
4200
  lineHeight: '24px',
4301
4201
  margin: '0',
4302
4202
  color: theme.palette.font.primary,
4303
4203
  wordBreak: 'break-word'
4304
4204
  },
4305
4205
  '@media (max-width: 767px)': {
4206
+ videoTestimonialSuperContainer: {
4207
+ padding: '70px 10px 60px 20px'
4208
+ },
4306
4209
  videoCarousel: {
4307
- flexDirection: 'column'
4210
+ flexDirection: 'column',
4211
+ gap: '20px'
4308
4212
  },
4309
4213
  videoCarouselContainer: {
4310
- height: 'max-content'
4214
+ height: 'max-content',
4215
+ paddingRight: '10px'
4311
4216
  },
4312
4217
  videoDetails: {
4313
- width: '100%',
4314
- gap: '16px'
4218
+ width: '100%'
4315
4219
  },
4316
4220
  videoDetailsHeading: {
4221
+ fontSize: '16px',
4317
4222
  lineHeight: '20px'
4318
4223
  },
4319
4224
  videoTestimonialTitle: {
4225
+ fontSize: '24px',
4320
4226
  lineHeight: '36px',
4321
4227
  letterSpacing: '-1px'
4228
+ },
4229
+ videoDetailsContent: {
4230
+ marginTop: '4px'
4322
4231
  }
4323
4232
  }
4324
4233
  };
@@ -4373,11 +4282,11 @@ function VideoTestimonial({
4373
4282
  layout: {
4374
4283
  containerWidth
4375
4284
  },
4376
- isMobile
4285
+ countryCode,
4286
+ currencySymbol
4377
4287
  } = useContext(PageContext);
4378
4288
  const classes = useVideoTestimonialStyles({
4379
- containerWidth,
4380
- isMobile
4289
+ containerWidth
4381
4290
  });
4382
4291
  const [videoData] = sectionData.components;
4383
4292
  const Wrapper = videoData.videoCarousel.components.length > 1 ? Carousel : Fragment;
@@ -4404,7 +4313,9 @@ function VideoTestimonial({
4404
4313
  })), /*#__PURE__*/React.createElement(Wrapper, null, videoData.videoCarousel.components.map((data, index) => /*#__PURE__*/React.createElement(SingleVideoSlide$2, {
4405
4314
  data: data,
4406
4315
  key: index,
4407
- sectionIndex: sectionIndex
4316
+ sectionIndex: sectionIndex,
4317
+ countryCode: countryCode,
4318
+ currencySymbol: currencySymbol
4408
4319
  }))))));
4409
4320
  }
4410
4321
 
@@ -4416,16 +4327,17 @@ var index$f = /*#__PURE__*/Object.freeze({
4416
4327
  const useVideoStyles = createUseStyles(theme => {
4417
4328
  return {
4418
4329
  videoSuperContainer: {
4419
- padding: ({
4420
- isMobile
4421
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
4330
+ padding: '70px',
4422
4331
  backgroundColor: theme?.palette?.background?.primary,
4423
4332
  '&, & *, & *:before, & *:after': {
4424
4333
  fontFamily: theme?.typography?.fontFamily,
4425
4334
  boxSizing: 'border-box'
4426
4335
  },
4427
- '& h3': {
4428
- marginTop: '0'
4336
+ '& h2,& h3': {
4337
+ fontWeight: '500',
4338
+ '& b,& strong': {
4339
+ fontWeight: '700'
4340
+ }
4429
4341
  }
4430
4342
  },
4431
4343
  sectionContainer: {
@@ -4434,30 +4346,28 @@ const useVideoStyles = createUseStyles(theme => {
4434
4346
  containerWidth
4435
4347
  } = {}) => containerWidth
4436
4348
  },
4437
- // videoContainer: {
4438
- // marginTop: '70px'
4439
- // },
4440
-
4349
+ videoContainer: {
4350
+ marginTop: '70px'
4351
+ },
4441
4352
  videoHeading: {
4442
- fontSize: theme.typography.fontSize.subHead,
4443
- textTransform: 'uppercase',
4353
+ fontSize: '16px',
4444
4354
  lineHeight: '20px',
4445
- color: theme?.palette?.font?.default,
4355
+ marginBottom: '4px',
4446
4356
  letterSpacing: '3px',
4357
+ color: theme?.palette?.font?.primary,
4447
4358
  wordBreak: 'break-word'
4448
4359
  },
4449
4360
  videoTitle: {
4450
- fontSize: theme.typography.fontSize.h2,
4451
- fontWeight: theme.typography.fontWeight.bold,
4361
+ fontSize: '56px',
4452
4362
  lineHeight: '71px',
4453
4363
  letterSpacing: '-3px',
4454
- marginBottom: theme.spacing.margin.tiny,
4455
- marginTop: '8px',
4364
+ marginBottom: '20px',
4365
+ marginTop: '0',
4456
4366
  color: theme?.palette?.font?.default,
4457
4367
  wordBreak: 'break-word'
4458
4368
  },
4459
4369
  sliderContainer: {
4460
- marginRight: `-${theme.spacing.padding.medium}px`
4370
+ marginRight: '-35px'
4461
4371
  },
4462
4372
  singleSlideContainer: {
4463
4373
  backgroundColor: theme?.palette?.background?.default,
@@ -4465,7 +4375,7 @@ const useVideoStyles = createUseStyles(theme => {
4465
4375
  width: 'calc(100% - 40px)',
4466
4376
  height: 'calc(100% - 40px)',
4467
4377
  borderRadius: theme?.shape?.borderRadius?.regular,
4468
- padding: '48px',
4378
+ padding: '40px',
4469
4379
  boxShadow: theme?.shadows?.primary
4470
4380
  },
4471
4381
  contentRow: {
@@ -4478,7 +4388,6 @@ const useVideoStyles = createUseStyles(theme => {
4478
4388
  width: '100%',
4479
4389
  borderRadius: theme?.shape?.borderRadius?.regular,
4480
4390
  position: 'relative',
4481
- overflow: 'hidden',
4482
4391
  paddingBottom: '56.25%'
4483
4392
  },
4484
4393
  iframe: {
@@ -4493,32 +4402,43 @@ const useVideoStyles = createUseStyles(theme => {
4493
4402
  margin: '12px 12px 0'
4494
4403
  },
4495
4404
  videoDetailsHeading: {
4496
- fontSize: theme.typography.fontSize.h5,
4497
- fontWeight: theme.typography.fontWeight.bold,
4405
+ fontSize: '24px',
4498
4406
  lineHeight: '32px',
4499
- marginBottom: '8px',
4407
+ margin: '0',
4500
4408
  color: theme?.palette?.font?.default,
4501
4409
  wordBreak: 'break-word'
4502
4410
  },
4503
4411
  videoDetailsSubHeading: {
4504
- fontSize: theme.typography.fontSize.subHead,
4412
+ fontSize: '16px',
4505
4413
  lineHeight: '24px',
4506
4414
  wordBreak: 'break-word',
4507
4415
  color: theme?.palette?.font?.primary
4508
4416
  },
4509
4417
  '@media (max-width: 767px)': {
4418
+ videoSuperContainer: {
4419
+ padding: '70px 20px 60px'
4420
+ },
4510
4421
  videoHeading: {
4511
- lineHeight: '20px'
4422
+ fontSize: '16px',
4423
+ lineHeight: '20px',
4424
+ letterSpacing: '3px'
4425
+ },
4426
+ videoTitle: {
4427
+ fontSize: '24px',
4428
+ lineHeight: '36px',
4429
+ letterSpacing: '-1px',
4430
+ marginBottom: '0',
4431
+ marginTop: '0'
4512
4432
  },
4513
4433
  videoContainer: {
4514
4434
  margin: '0'
4515
4435
  },
4516
4436
  sliderContainer: {
4517
- // marginLeft: '-6px',
4518
- marginRight: '0px'
4437
+ marginLeft: '-6px',
4438
+ marginRight: '-20px'
4519
4439
  },
4520
4440
  singleSlideContainer: {
4521
- padding: '16px',
4441
+ padding: '0',
4522
4442
  width: 'calc(100% - 12px)',
4523
4443
  height: 'calc(100% - 24px)',
4524
4444
  margin: '12px 6px'
@@ -4530,28 +4450,14 @@ const useVideoStyles = createUseStyles(theme => {
4530
4450
  textAlign: 'left',
4531
4451
  margin: '12px 12px 0'
4532
4452
  },
4533
- videoTitle: {
4534
- display: 'flex',
4535
- justifyContent: 'center',
4536
- textAlign: 'center',
4537
- lineHeight: '36px',
4538
- letterSpacing: '-1px'
4453
+ videoDetailsHeading: {
4454
+ fontSize: '18px',
4455
+ margin: '0'
4539
4456
  },
4540
- videoHeading: {
4541
- display: 'flex',
4542
- justifyContent: 'center',
4543
- textAlign: 'center'
4457
+ videoDetailsSubHeading: {
4458
+ fontSize: '12px',
4459
+ paddingBottom: '20px'
4544
4460
  }
4545
-
4546
- // videoDetailsHeading: {
4547
- // fontSize: '18px',
4548
- // margin: '0'
4549
- // },
4550
-
4551
- // videoDetailsSubHeading: {
4552
- // fontSize: '12px',
4553
- // paddingBottom: '20px'
4554
- // }
4555
4461
  }
4556
4462
  };
4557
4463
  });
@@ -4565,7 +4471,10 @@ const SingleSlide$1 = props => {
4565
4471
  className: classes.singleSlideContainer
4566
4472
  }, /*#__PURE__*/React.createElement("div", {
4567
4473
  ref: data?.videoFrame?.refSetter,
4568
- className: classes.iframeContainer
4474
+ className: classes.iframeContainer,
4475
+ style: {
4476
+ background: 'linear-gradient(#333333,rgb(0 0 0))'
4477
+ }
4569
4478
  }, /*#__PURE__*/React.createElement(VideoPlayer, {
4570
4479
  imageUrl: data.videoFrame.metadata?.thumbnail,
4571
4480
  videoUrl: data.videoFrame.metadata?.value
@@ -4601,13 +4510,12 @@ function Video({
4601
4510
  const classes = useVideoStyles({
4602
4511
  containerWidth,
4603
4512
  cardsCount,
4604
- slidesToShow,
4605
- isMobile
4513
+ slidesToShow
4606
4514
  });
4607
4515
  const settings = {
4608
4516
  className: classes.sliderContainer,
4609
4517
  slidesToShow,
4610
- centerPadding: isMobile ? '0px' : '100px 0 0',
4518
+ centerPadding: isMobile ? '40px 0 0' : '100px 0 0',
4611
4519
  centerMode: true
4612
4520
  };
4613
4521
  const carouselContent = videoData.videoCarousel.components.map((data, index) => /*#__PURE__*/React.createElement(SingleSlide$1, {
@@ -4650,20 +4558,19 @@ var index$e = /*#__PURE__*/Object.freeze({
4650
4558
  const useSectionStyles$3 = createUseStyles(theme => ({
4651
4559
  section: {
4652
4560
  position: 'relative',
4653
- padding: `${theme?.spacing?.padding?.regular}px 0px ${theme?.spacing?.padding?.regular}px ${theme?.spacing?.padding?.medium}px`,
4561
+ padding: '70px 0',
4654
4562
  backgroundColor: theme?.palette?.background?.default,
4655
4563
  '&, & *, & *:before, & *:after': {
4656
4564
  fontFamily: theme?.typography?.fontFamily,
4657
4565
  boxSizing: 'border-box'
4566
+ },
4567
+ '& h2,& h3': {
4568
+ fontWeight: '500',
4569
+ '& b,& strong': {
4570
+ fontWeight: '700'
4571
+ }
4658
4572
  }
4659
- // '& h2,& h3': {
4660
- // fontWeight: '500',
4661
- // '& b,& strong': {
4662
- // fontWeight: '700'
4663
- // }
4664
- // }
4665
4573
  },
4666
-
4667
4574
  sectionContainer: {
4668
4575
  margin: '0 auto',
4669
4576
  maxWidth: ({
@@ -4674,25 +4581,26 @@ const useSectionStyles$3 = createUseStyles(theme => ({
4674
4581
  position: 'absolute',
4675
4582
  top: '0',
4676
4583
  left: '0',
4677
- height: '50%',
4584
+ height: '350px',
4678
4585
  background: theme?.palette?.background?.primary,
4679
4586
  width: '100%'
4680
4587
  },
4681
4588
  content: {
4682
- position: 'relative'
4589
+ position: 'relative',
4590
+ margin: '0 70px'
4683
4591
  },
4684
4592
  subTitleHeading: {
4685
4593
  width: '100%',
4686
- fontSize: theme.typography.fontSize.subHead,
4687
- color: theme?.palette?.font?.default,
4594
+ fontSize: '16px',
4595
+ color: theme?.palette?.font?.tertiary,
4688
4596
  textAlign: 'left',
4689
4597
  lineHeight: '20px',
4690
4598
  letterSpacing: '3px',
4691
4599
  wordBreak: 'break-word'
4692
4600
  },
4693
4601
  heading: {
4694
- margin: `8px 0 ${theme.spacing.margin.tiny}px`,
4695
- fontSize: theme.typography.fontSize.h2,
4602
+ margin: '8px 0 20px',
4603
+ fontSize: '56px',
4696
4604
  width: '100%',
4697
4605
  lineHeight: '70px',
4698
4606
  color: theme?.palette?.font?.default,
@@ -4714,17 +4622,16 @@ const useSectionStyles$3 = createUseStyles(theme => ({
4714
4622
  height: 'calc(100% - 12px)'
4715
4623
  },
4716
4624
  cardContent: {
4717
- padding: theme.spacing.padding.tiny,
4625
+ padding: '32px',
4718
4626
  height: '100%',
4719
4627
  display: 'flex',
4720
4628
  flexDirection: 'column'
4721
4629
  },
4722
4630
  cardHeading: {
4723
- fontSize: theme.typography.fontSize.h5,
4631
+ fontSize: '24px',
4724
4632
  lineHeight: '32px',
4725
- fontWeight: theme.typography.fontWeight.bold,
4726
4633
  color: theme?.palette?.font?.default,
4727
- margin: `${theme.spacing.margin.tiny}px 0px`,
4634
+ margin: '32px 0 16px',
4728
4635
  wordBreak: 'break-word'
4729
4636
  },
4730
4637
  imageContainer: {
@@ -4736,16 +4643,8 @@ const useSectionStyles$3 = createUseStyles(theme => ({
4736
4643
  borderRadius: '50%',
4737
4644
  background: theme?.palette?.background?.primary
4738
4645
  },
4739
- buttonContainerClass: {
4740
- marginRight: theme.spacing.margin.regular,
4741
- display: 'flex',
4742
- gap: '20px',
4743
- alignItems: 'center',
4744
- justifyContent: 'center',
4745
- marginTop: theme.spacing.margin.tiny
4746
- },
4747
4646
  cardPara: {
4748
- fontSize: theme.typography.fontSize.subHead,
4647
+ fontSize: '16px',
4749
4648
  lineHeight: '24px',
4750
4649
  color: theme?.palette?.font?.primary,
4751
4650
  margin: '0',
@@ -4761,10 +4660,13 @@ const useSectionStyles$3 = createUseStyles(theme => ({
4761
4660
  '@media screen and (max-width: 767px)': {
4762
4661
  heading: {
4763
4662
  fontSize: '24px',
4764
- margin: `4px 0 ${theme.spacing.margin.tiny}px`,
4663
+ margin: '4px 0 12px',
4765
4664
  lineHeight: '36px',
4766
4665
  padding: '0'
4767
4666
  },
4667
+ content: {
4668
+ margin: '0 20px'
4669
+ },
4768
4670
  sliderContainer: {
4769
4671
  marginLeft: '-6px',
4770
4672
  marginRight: '-20px'
@@ -4779,6 +4681,12 @@ const useSectionStyles$3 = createUseStyles(theme => ({
4779
4681
  slidesToShow,
4780
4682
  cardsCount
4781
4683
  } = {}) => cardsCount > slidesToShow ? `6px 2px 6px 6px` : `6px 0 6px 0`
4684
+ },
4685
+ cardContent: {
4686
+ padding: '20px'
4687
+ },
4688
+ cardHeading: {
4689
+ margin: '14px 0'
4782
4690
  }
4783
4691
  }
4784
4692
  }));
@@ -4862,8 +4770,7 @@ function Info({
4862
4770
  }
4863
4771
  })), cardsCount > slidesToShow ? /*#__PURE__*/React.createElement(Carousel, {
4864
4772
  hideArrow: isMobile,
4865
- settings: settings,
4866
- buttonContainerClass: classes.buttonContainerClass
4773
+ settings: settings
4867
4774
  }, carouselContent) : /*#__PURE__*/React.createElement("div", {
4868
4775
  className: classes.contentRow
4869
4776
  }, carouselContent))));
@@ -4876,56 +4783,67 @@ var index$d = /*#__PURE__*/Object.freeze({
4876
4783
 
4877
4784
  const useSectionStyles$2 = createUseStyles(theme => ({
4878
4785
  section: {
4879
- padding: ({
4880
- isMobile
4881
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
4786
+ padding: '70px',
4882
4787
  backgroundColor: theme?.palette?.background?.default,
4883
4788
  '&, & *, & *:before, & *:after': {
4884
4789
  fontFamily: theme?.typography?.fontFamily,
4885
4790
  boxSizing: 'border-box'
4886
4791
  },
4887
- '& h2,& h3,& p': {
4888
- margin: '0'
4792
+ '& h2,& h3': {
4793
+ fontWeight: '500',
4794
+ '& b,& strong': {
4795
+ fontWeight: '700'
4796
+ }
4889
4797
  }
4890
4798
  },
4891
4799
  sectionContainer: {
4800
+ margin: '0 auto',
4892
4801
  maxWidth: ({
4893
4802
  containerWidth
4894
4803
  } = {}) => containerWidth
4895
4804
  },
4896
4805
  subHeading: {
4897
- fontSize: theme.typography.fontSize.subHead,
4806
+ fontSize: '20px',
4898
4807
  marginBottom: '8px',
4899
- color: theme?.palette?.font?.default,
4900
- wordBreak: 'break-word',
4901
- textTransform: 'uppercase',
4902
- letterSpacing: '3px'
4808
+ color: theme?.palette?.font?.tertiary,
4809
+ wordBreak: 'break-word'
4903
4810
  },
4904
4811
  title: {
4905
- fontSize: theme.typography.fontSize.h2,
4906
- fontWeight: theme.typography.fontWeight.bold,
4907
- lineHeight: 'normal',
4812
+ fontSize: '56px',
4813
+ lineHeight: '70px',
4908
4814
  margin: '0',
4909
4815
  color: theme?.palette?.font?.default,
4910
- wordBreak: 'break-word',
4911
- marginBottom: theme.spacing.margin.tiny
4816
+ wordBreak: 'break-word'
4912
4817
  },
4913
4818
  textContent: {
4914
4819
  display: 'grid',
4915
4820
  gridTemplateColumns: '1fr 1fr',
4916
- gap: '48px',
4917
- padding: '48px 0px'
4821
+ gap: '80px'
4918
4822
  },
4919
4823
  textPara: {
4824
+ margin: '20px 0 0 0',
4920
4825
  lineHeight: '24px',
4921
4826
  color: theme?.palette?.font?.primary,
4922
- wordBreak: 'break-word',
4923
- fontSize: theme.typography.fontSize.subHead
4827
+ wordBreak: 'break-word'
4924
4828
  },
4925
4829
  '@media screen and (max-width: 767px)': {
4830
+ section: {
4831
+ padding: '60px 20px'
4832
+ },
4833
+ subHeading: {
4834
+ fontSize: '16px',
4835
+ lineHeight: '20px',
4836
+ marginBottom: '4px'
4837
+ },
4838
+ title: {
4839
+ fontSize: '24px',
4840
+ lineHeight: '36px'
4841
+ },
4926
4842
  textContent: {
4927
- gap: '16px',
4928
- padding: '16px 0px'
4843
+ display: 'block'
4844
+ },
4845
+ textPara: {
4846
+ marginTop: '12px'
4929
4847
  }
4930
4848
  }
4931
4849
  }));
@@ -4936,12 +4854,10 @@ const TextSection = ({
4936
4854
  const {
4937
4855
  layout: {
4938
4856
  containerWidth
4939
- },
4940
- isMobile
4857
+ }
4941
4858
  } = useContext(PageContext);
4942
4859
  const classes = useSectionStyles$2({
4943
- containerWidth,
4944
- isMobile
4860
+ containerWidth
4945
4861
  });
4946
4862
  const [nodeData] = sectionData.components;
4947
4863
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("section", {
@@ -4988,21 +4904,18 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
4988
4904
  return {
4989
4905
  container: {
4990
4906
  background: theme?.palette?.background?.default,
4991
- padding: ({
4992
- isMobile
4993
- } = {}) => 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`,
4907
+ padding: '70px',
4994
4908
  '&, & *, & *:before, & *:after': {
4995
4909
  fontFamily: theme?.typography?.fontFamily,
4996
4910
  boxSizing: 'border-box'
4911
+ },
4912
+ '& h2,& h3': {
4913
+ fontWeight: '500',
4914
+ '& b,& strong': {
4915
+ fontWeight: '700'
4916
+ }
4997
4917
  }
4998
- // '& h2,& h3': {
4999
- // fontWeight: '500',
5000
- // '& b,& strong': {
5001
- // fontWeight: '700'
5002
- // }
5003
- // }
5004
4918
  },
5005
-
5006
4919
  sectionContainer: {
5007
4920
  margin: '0 auto',
5008
4921
  maxWidth: ({
@@ -5010,16 +4923,14 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
5010
4923
  } = {}) => containerWidth
5011
4924
  },
5012
4925
  cardHeading: {
5013
- color: theme?.palette?.font?.default,
5014
- fontSize: theme.typography.fontSize.subHead,
4926
+ color: theme?.palette?.font?.secondary,
4927
+ fontSize: '16px',
5015
4928
  letterSpacing: '3px',
5016
- wordBreak: 'break-word',
5017
- textTransform: 'uppercase'
4929
+ wordBreak: 'break-word'
4930
+ },
4931
+ sliderContainer: {
4932
+ marginRight: '-70px'
5018
4933
  },
5019
- // sliderContainer: {
5020
- // marginRight: '-70px'
5021
- // },
5022
-
5023
4934
  singleCard: {
5024
4935
  margin: '0 1px',
5025
4936
  width: 'calc(100% - 2px)',
@@ -5042,26 +4953,24 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
5042
4953
  height: '100%'
5043
4954
  },
5044
4955
  title: {
5045
- fontSize: theme.typography.fontSize.h2,
4956
+ fontSize: '56px',
5046
4957
  lineHeight: '70px',
5047
4958
  letterSpacing: '-3px',
5048
4959
  color: theme?.palette?.font?.default,
5049
- marginTop: '8px',
5050
- marginBottom: theme.spacing.margin.tiny,
4960
+ margin: '8px 0 20px',
5051
4961
  overflow: 'hidden',
5052
4962
  whiteSpace: 'nowrap',
5053
4963
  textOverflow: 'ellipsis'
5054
4964
  },
5055
4965
  '@media (max-width: 768px)': {
5056
- // container: {
5057
- // padding: '60px 20px'
5058
- // },
5059
-
5060
- // cardHeading: {
5061
- // marginLeft: '3px'
5062
- // },
5063
-
4966
+ container: {
4967
+ padding: '60px 20px'
4968
+ },
4969
+ cardHeading: {
4970
+ marginLeft: '3px'
4971
+ },
5064
4972
  title: {
4973
+ fontSize: '24px',
5065
4974
  lineHeight: '36px',
5066
4975
  letterSpacing: '-1px',
5067
4976
  color: theme?.palette?.font?.default,
@@ -5069,11 +4978,10 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
5069
4978
  overflow: 'hidden',
5070
4979
  whiteSpace: 'nowrap',
5071
4980
  textOverflow: 'ellipsis'
4981
+ },
4982
+ sliderContainer: {
4983
+ marginRight: '-20px'
5072
4984
  }
5073
-
5074
- // sliderContainer: {
5075
- // marginRight: '-20px'
5076
- // }
5077
4985
  }
5078
4986
  };
5079
4987
  });
@@ -5095,12 +5003,11 @@ function PhotoGallery({
5095
5003
  const classes = usePhotoGalleryStyles({
5096
5004
  containerWidth,
5097
5005
  cardsCount,
5098
- slidesToShow,
5099
- isMobile
5006
+ slidesToShow
5100
5007
  });
5101
5008
  const settings = {
5102
5009
  className: classes.sliderContainer,
5103
- dots: isMobile,
5010
+ dots: false,
5104
5011
  infinite: true,
5105
5012
  speed: 500,
5106
5013
  slidesToShow,
@@ -5154,69 +5061,64 @@ var index$b = /*#__PURE__*/Object.freeze({
5154
5061
  const useFaqListStyles = createUseStyles(theme => ({
5155
5062
  section: {
5156
5063
  width: '100%',
5157
- padding: ({
5158
- isMobile
5159
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
5064
+ padding: '70px',
5160
5065
  backgroundColor: theme?.palette?.background?.primary,
5161
5066
  '&, & *, & *:before, & *:after': {
5162
5067
  fontFamily: theme?.typography?.fontFamily,
5163
5068
  boxSizing: 'border-box'
5164
5069
  },
5165
5070
  '& h2,& h3': {
5166
- marginTop: '0'
5071
+ fontWeight: '500',
5072
+ '& b,& strong': {
5073
+ fontWeight: '700'
5074
+ }
5167
5075
  }
5168
5076
  },
5169
5077
  sectionContainer: {
5078
+ margin: '0 auto',
5170
5079
  maxWidth: ({
5171
5080
  containerWidth
5172
5081
  } = {}) => containerWidth
5173
5082
  },
5174
5083
  sectionSubheading: {
5175
- color: theme?.palette?.font.default,
5176
- fontSize: theme.typography.fontSize.subHead,
5084
+ color: theme?.palette?.font.tertiary,
5085
+ fontSize: '16px',
5177
5086
  marginBottom: '8px',
5178
5087
  wordBreak: 'break-word'
5179
5088
  },
5180
5089
  sectionHeading: {
5181
- fontSize: theme.typography.fontSize.h2,
5182
- fontWeight: theme.typography.fontWeight.bold,
5090
+ fontSize: '56px',
5091
+ margin: '0 0 20px',
5183
5092
  wordBreak: 'break-word',
5184
- marginBottom: `${theme.spacing.margin.tiny}px`
5093
+ lineHeight: '71px'
5185
5094
  },
5186
5095
  container: {
5187
5096
  boxShadow: theme?.shadows?.secondary,
5188
5097
  borderRadius: '8px',
5189
- backgroundColor: theme?.palette?.background?.default
5098
+ backgroundColor: theme?.palette?.background?.default,
5099
+ padding: '40px 60px 60px'
5190
5100
  },
5191
5101
  basicCardContainer: {
5192
- borderBottom: theme?.borders?.secondary,
5193
- padding: `${theme.spacing.padding.tiny}px`
5194
- },
5195
- innerContainer: {
5196
- display: 'flex',
5197
- flexDirection: 'column',
5198
- gap: ({
5199
- isSelected
5200
- } = {}) => isSelected ? '16px' : '0'
5201
- },
5202
- arrowButton: {
5203
- marginLeft: theme.spacing.margin.tiny
5102
+ borderBottom: theme?.borders?.secondary
5204
5103
  },
5205
5104
  header: {
5206
5105
  display: 'flex',
5207
5106
  justifyContent: 'space-between',
5208
- alignItems: 'center'
5107
+ alignItems: 'center',
5108
+ padding: '20px 0'
5209
5109
  },
5210
5110
  title: {
5211
5111
  color: theme?.palette?.font.default,
5212
- fontSize: theme.typography.fontSize.h5,
5213
- fontWeight: theme.typography.fontWeight.bold,
5112
+ fontSize: '24px',
5214
5113
  margin: '0',
5215
5114
  wordBreak: 'break-word'
5216
5115
  },
5217
5116
  content: {
5117
+ margin: ({
5118
+ isSelected
5119
+ } = {}) => isSelected ? '0 0 20px 0' : '0',
5218
5120
  color: theme?.palette?.font.primary,
5219
- fontSize: theme.typography.fontSize.subHead,
5121
+ fontSize: '16px',
5220
5122
  lineHeight: '24px',
5221
5123
  maxHeight: ({
5222
5124
  isSelected
@@ -5225,12 +5127,28 @@ const useFaqListStyles = createUseStyles(theme => ({
5225
5127
  overflow: 'hidden'
5226
5128
  },
5227
5129
  '@media screen and (max-width: 767px)': {
5130
+ section: {
5131
+ padding: '60px 20px'
5132
+ },
5133
+ sectionHeading: {
5134
+ fontSize: '36px'
5135
+ },
5136
+ header: {
5137
+ padding: '20px 0'
5138
+ },
5139
+ title: {
5140
+ fontSize: '18px'
5141
+ },
5228
5142
  content: {
5229
5143
  lineHeight: '20px'
5230
5144
  },
5145
+ container: {
5146
+ padding: '0 20px'
5147
+ },
5231
5148
  basicCardContainer: {
5232
5149
  '&:last-child': {
5233
- borderBottom: 'none'
5150
+ borderBottom: 'none',
5151
+ paddingBottom: '1px'
5234
5152
  }
5235
5153
  }
5236
5154
  }
@@ -5243,13 +5161,11 @@ const FAQListing = ({
5243
5161
  const {
5244
5162
  layout: {
5245
5163
  containerWidth
5246
- },
5247
- isMobile
5164
+ }
5248
5165
  } = useContext(PageContext);
5249
5166
  const classes = useFaqListStyles({
5250
5167
  selectedIndex,
5251
- containerWidth,
5252
- isMobile
5168
+ containerWidth
5253
5169
  });
5254
5170
  const [nodeData] = sectionData.components;
5255
5171
  return /*#__PURE__*/React.createElement("section", {
@@ -5292,8 +5208,7 @@ const Accordion = ({
5292
5208
  return /*#__PURE__*/React.createElement("div", {
5293
5209
  className: classes.basicCardContainer
5294
5210
  }, /*#__PURE__*/React.createElement("div", {
5295
- onClick: onClick,
5296
- className: classes.innerContainer
5211
+ onClick: onClick
5297
5212
  }, /*#__PURE__*/React.createElement("div", {
5298
5213
  className: classes.header
5299
5214
  }, /*#__PURE__*/React.createElement("h3", {
@@ -5302,9 +5217,7 @@ const Accordion = ({
5302
5217
  dangerouslySetInnerHTML: {
5303
5218
  __html: item.question.metadata.value
5304
5219
  }
5305
- }), /*#__PURE__*/React.createElement("div", {
5306
- className: classes.arrowButton
5307
- }, /*#__PURE__*/React.createElement(ArrowButton, {
5220
+ }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ArrowButton, {
5308
5221
  down: isSelected,
5309
5222
  up: !isSelected,
5310
5223
  size: "small"
@@ -5324,26 +5237,19 @@ var index$a = /*#__PURE__*/Object.freeze({
5324
5237
 
5325
5238
  const useTextGridStyles = createUseStyles(theme => ({
5326
5239
  section: {
5327
- padding: ({
5328
- isMobile
5329
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
5330
- // backgroundColor: theme?.palette?.background?.primary,
5331
-
5240
+ padding: '70px',
5241
+ backgroundColor: theme?.palette?.background?.primary,
5332
5242
  '&, & *, & *:before, & *:after': {
5333
5243
  fontFamily: theme?.typography?.fontFamily,
5334
5244
  boxSizing: 'border-box'
5335
5245
  },
5336
- '& h2,& h3,& p': {
5337
- marginTop: '0'
5246
+ '& h2,& h3': {
5247
+ fontWeight: '500',
5248
+ '& b,& strong': {
5249
+ fontWeight: '700'
5250
+ }
5338
5251
  }
5339
- // '& h2,& h3': {
5340
- // fontWeight: '500',
5341
- // '& b,& strong': {
5342
- // fontWeight: '700'
5343
- // }
5344
- // }
5345
5252
  },
5346
-
5347
5253
  sectionContainer: {
5348
5254
  margin: '0 auto',
5349
5255
  maxWidth: ({
@@ -5351,28 +5257,25 @@ const useTextGridStyles = createUseStyles(theme => ({
5351
5257
  } = {}) => containerWidth
5352
5258
  },
5353
5259
  subheading: {
5354
- color: theme?.palette?.font.default,
5355
- fontSize: theme.typography.fontSize.subHead,
5260
+ color: theme?.palette?.font.tertiary,
5261
+ fontSize: '16px',
5356
5262
  lineHeight: '20px',
5357
5263
  letterSpacing: '3px',
5358
- wordBreak: 'break-word',
5359
- textTransform: 'uppercase',
5360
- marginBottom: '8px'
5264
+ wordBreak: 'break-word'
5361
5265
  },
5362
5266
  heading: {
5363
- fontSize: theme.typography.fontSize.h2,
5364
- lineHeight: 'normal',
5365
- fontWeight: theme.typography.fontWeight.bold,
5267
+ fontSize: '56px',
5268
+ lineHeight: '70px',
5366
5269
  letterSpacing: '-3px',
5367
- marginBottom: theme.spacing.margin.tiny,
5270
+ margin: '8px 0 16px',
5368
5271
  wordBreak: 'break-word'
5369
5272
  },
5370
5273
  sliderContainer: {
5371
5274
  margin: '0 -10px'
5372
5275
  },
5373
5276
  node: {
5374
- margin: '0 16px',
5375
- padding: '48px',
5277
+ margin: '6px 10px',
5278
+ padding: '40px',
5376
5279
  position: 'relative',
5377
5280
  height: 'calc(100% - 12px)',
5378
5281
  background: theme?.palette?.background?.default,
@@ -5380,17 +5283,17 @@ const useTextGridStyles = createUseStyles(theme => ({
5380
5283
  borderRadius: theme?.shape?.borderRadius?.regular
5381
5284
  },
5382
5285
  nodeTitle: {
5383
- color: theme?.palette?.font.default,
5384
- fontSize: theme.typography.fontSize.h3,
5385
- fontWeight: theme.typography.fontWeight.bold,
5386
- lineHeight: 'normal',
5286
+ color: theme?.palette?.font.secondary,
5287
+ fontSize: '40px',
5288
+ lineHeight: '48px',
5387
5289
  margin: '0 0 20px',
5388
5290
  wordBreak: 'break-word'
5389
5291
  },
5390
5292
  nodePara: {
5391
5293
  color: theme?.palette?.font.tertiary,
5392
- fontSize: theme.typography.fontSize.subHead,
5294
+ fontSize: '16px',
5393
5295
  lineHeight: '24px',
5296
+ margin: '20px 0',
5394
5297
  wordBreak: 'break-word'
5395
5298
  },
5396
5299
  contentRow: {
@@ -5400,21 +5303,27 @@ const useTextGridStyles = createUseStyles(theme => ({
5400
5303
  } = {}) => `repeat(${slidesToShow},minmax(0, 1fr))`
5401
5304
  },
5402
5305
  '@media screen and (max-width: 767px)': {
5306
+ section: {
5307
+ padding: '60px 20px'
5308
+ },
5309
+ heading: {
5310
+ fontSize: '24px',
5311
+ lineHeight: '36px',
5312
+ letterSpacing: '-1px',
5313
+ margin: '4px 0 6px'
5314
+ },
5403
5315
  sliderContainer: {
5404
5316
  margin: '0 -20px 0 -10px'
5405
5317
  },
5406
5318
  node: {
5407
- padding: '16px',
5408
- margin: '0 6px'
5319
+ padding: '20px'
5409
5320
  },
5410
5321
  nodeTitle: {
5411
- marginBottom: '0px'
5322
+ fontSize: '24px',
5323
+ lineHeight: '36px'
5412
5324
  },
5413
5325
  nodePara: {
5414
- margin: '16px 0'
5415
- },
5416
- heading: {
5417
- letterSpacing: '-1px'
5326
+ margin: '12px 0'
5418
5327
  }
5419
5328
  }
5420
5329
  }));
@@ -5434,8 +5343,7 @@ const TextGrid = ({
5434
5343
  const classes = useTextGridStyles({
5435
5344
  containerWidth,
5436
5345
  cardsCount,
5437
- slidesToShow,
5438
- isMobile
5346
+ slidesToShow
5439
5347
  });
5440
5348
  const settings = {
5441
5349
  className: classes.sliderContainer,
@@ -5496,46 +5404,39 @@ const useCourseStyles = createUseStyles(theme => {
5496
5404
  return {
5497
5405
  coursesContainer: {
5498
5406
  overflow: 'hidden',
5499
- padding: ({
5500
- isMobile
5501
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
5502
5407
  '&, & *, & *:before, & *:after': {
5503
5408
  fontFamily: theme?.typography?.fontFamily,
5504
5409
  boxSizing: 'border-box'
5410
+ },
5411
+ '& h2,& h3': {
5412
+ fontWeight: '500',
5413
+ '& b,& strong': {
5414
+ fontWeight: '700'
5415
+ }
5505
5416
  }
5506
- // '& h2,& h3': {
5507
- // fontWeight: '500',
5508
- // '& b,& strong': {
5509
- // fontWeight: '700'
5510
- // }
5511
- // }
5512
5417
  },
5513
-
5514
5418
  sectionContainer: {
5515
5419
  margin: '0 auto',
5516
5420
  maxWidth: ({
5517
5421
  containerWidth
5518
5422
  } = {}) => containerWidth
5519
5423
  },
5520
- // coursesCardAndText: {
5521
- // padding: '70px'
5522
- // },
5523
-
5424
+ coursesCardAndText: {
5425
+ padding: '70px'
5426
+ },
5524
5427
  coursesText: {
5525
5428
  color: theme?.palette?.font?.secondary,
5526
5429
  fontWeight: '400',
5527
- fontSize: theme.typography.fontSize.subHead,
5430
+ fontSize: '16px',
5528
5431
  lineHeight: '20px',
5529
5432
  textAlign: 'center',
5530
- textTransform: 'uppercase',
5531
5433
  wordBreak: 'break-word'
5532
5434
  },
5533
5435
  coursesHeader: {
5534
- fontSize: theme.typography.fontSize.h2,
5436
+ fontSize: '56px',
5535
5437
  lineHeight: '70px',
5536
5438
  color: theme?.palette?.font?.default,
5537
- marginTop: '8px',
5538
- marginBottom: theme.spacing.margin.tiny,
5439
+ margin: '10px 0 40px 10px',
5539
5440
  overflow: 'hidden',
5540
5441
  whiteSpace: 'nowrap',
5541
5442
  textOverflow: 'ellipsis',
@@ -5610,7 +5511,7 @@ const useCourseStyles = createUseStyles(theme => {
5610
5511
  courseCardName: {
5611
5512
  color: theme?.palette?.font?.default,
5612
5513
  fontWeight: '700',
5613
- fontSize: theme.typography.fontSize.h5,
5514
+ fontSize: '24px',
5614
5515
  lineHeight: '32px',
5615
5516
  wordBreak: 'break-word',
5616
5517
  padding: '12px 0px',
@@ -5625,7 +5526,7 @@ const useCourseStyles = createUseStyles(theme => {
5625
5526
  display: 'flex',
5626
5527
  justifyContent: 'flex-start',
5627
5528
  alignItems: 'center',
5628
- fontSize: theme.typography.fontSize.subHead,
5529
+ fontSize: '16px',
5629
5530
  color: theme?.palette?.font?.primary,
5630
5531
  '& img': {
5631
5532
  marginRight: '5px'
@@ -5637,10 +5538,10 @@ const useCourseStyles = createUseStyles(theme => {
5637
5538
  display: 'flex',
5638
5539
  justifyContent: 'space-between',
5639
5540
  alignItems: 'center',
5640
- padding: '12px 0 0 4px'
5541
+ padding: '13px 0 0 4px'
5641
5542
  },
5642
5543
  courseCardPrice: {
5643
- fontSize: theme.typography.fontSize.h5,
5544
+ fontSize: '24px',
5644
5545
  fontWeight: '700'
5645
5546
  },
5646
5547
  coursesAnchorTag: {
@@ -5661,8 +5562,7 @@ const useCourseStyles = createUseStyles(theme => {
5661
5562
  cursor: 'pointer',
5662
5563
  background: theme?.palette?.primary?.main,
5663
5564
  color: theme?.palette?.font?.invertedDefault,
5664
- padding: '8px 16px',
5665
- fontWeight: theme.typography.fontWeight.bold,
5565
+ padding: '12px 16px',
5666
5566
  cursor: 'pointer',
5667
5567
  borderRadius: theme.shape.borderRadius.regular
5668
5568
  },
@@ -5707,7 +5607,7 @@ const useCourseStyles = createUseStyles(theme => {
5707
5607
  //background: theme?.palette?.background?.primary
5708
5608
  },
5709
5609
  coursesCardAndText: {
5710
- // padding: '70px 30px'
5610
+ padding: '70px 30px'
5711
5611
  },
5712
5612
  singleCardContainer: {
5713
5613
  gridTemplateColumns: '1fr'
@@ -5716,7 +5616,7 @@ const useCourseStyles = createUseStyles(theme => {
5716
5616
  margin: '0'
5717
5617
  },
5718
5618
  coursesHeader: {
5719
- // fontSize: '24px',
5619
+ fontSize: '24px',
5720
5620
  lineHeight: '36px',
5721
5621
  color: theme?.palette?.font?.default,
5722
5622
  margin: '4px 0 12px 0',
@@ -5725,8 +5625,8 @@ const useCourseStyles = createUseStyles(theme => {
5725
5625
  textOverflow: 'ellipsis'
5726
5626
  },
5727
5627
  singleCard: {
5728
- margin: '6px 2px'
5729
- // width: 'calc(100% - 12px)'
5628
+ margin: '6px 2px',
5629
+ width: 'calc(100% - 4px)'
5730
5630
  }
5731
5631
  }
5732
5632
  };
@@ -5891,8 +5791,7 @@ function courses({
5891
5791
  const [fallBackImages, setFallbackImages] = useState([]);
5892
5792
  const [showShimmer, setShowShimmer] = useState(true);
5893
5793
  const classes = useCourseStyles({
5894
- containerWidth,
5895
- isMobile
5794
+ containerWidth
5896
5795
  });
5897
5796
  const [nodeData] = sectionData?.components;
5898
5797
  const handleApiCall = () => {
@@ -5944,7 +5843,7 @@ function courses({
5944
5843
  const settings = {
5945
5844
  className: classes.slickContainer,
5946
5845
  infinite: false,
5947
- slidesToShow: isMobile ? 1 : 3.5
5846
+ slidesToShow: isMobile ? 1.1 : 3.25
5948
5847
  };
5949
5848
  const Wrapper = (cardList?.length || fallBackImages?.length) > settings.slidesToShow ? Carousel : SimpleCardsContainer;
5950
5849
  const wrapperProps = (cardList?.length || fallBackImages?.length) > settings.slidesToShow ? {
@@ -6020,17 +5919,17 @@ var index$8 = /*#__PURE__*/Object.freeze({
6020
5919
  const useTeamStyles = createUseStyles(theme => {
6021
5920
  return {
6022
5921
  teamSuperContainer: {
6023
- padding: ({
6024
- isMobile
6025
- } = {}) => 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`,
6026
- // backgroundColor: theme?.palette?.background?.primary,
6027
-
5922
+ padding: '60px',
5923
+ backgroundColor: theme?.palette?.background?.primary,
6028
5924
  '&, & *, & *:before, & *:after': {
6029
5925
  fontFamily: theme?.typography?.fontFamily,
6030
5926
  boxSizing: 'border-box'
6031
5927
  },
6032
5928
  '& h2,& h3': {
6033
- margin: '0'
5929
+ fontWeight: '500',
5930
+ '& b,& strong': {
5931
+ fontWeight: '700'
5932
+ }
6034
5933
  }
6035
5934
  },
6036
5935
  sectionContainer: {
@@ -6040,31 +5939,20 @@ const useTeamStyles = createUseStyles(theme => {
6040
5939
  } = {}) => containerWidth
6041
5940
  },
6042
5941
  teamHeading: {
6043
- fontSize: theme.typography.fontSize.subHead,
6044
- textTransform: 'uppercase',
5942
+ fontSize: '16px',
6045
5943
  lineHeight: '20px',
6046
5944
  letterSpacing: '3px',
6047
- marginBottom: '8px',
6048
- color: theme?.palette?.font?.default,
6049
- wordBreak: 'break-word',
6050
- position: 'relative'
6051
- },
6052
- partialBackground: {
6053
- position: 'absolute',
6054
- top: '0',
6055
- left: '0',
6056
- height: '50%',
6057
- background: theme?.palette?.background?.primary,
6058
- width: '100%'
5945
+ margin: '0 0 8px',
5946
+ color: theme?.palette?.font?.primary,
5947
+ wordBreak: 'break-word'
6059
5948
  },
6060
5949
  teamTitle: {
6061
- fontSize: theme.typography.fontSize.h2,
6062
- fontWeight: theme.typography.fontWeight.bold,
5950
+ fontSize: '56px',
6063
5951
  lineHeight: '70px',
6064
5952
  letterSpacing: '-3px',
6065
5953
  wordBreak: 'break-word',
6066
- color: theme?.palette?.font?.default,
6067
- position: 'relative'
5954
+ margin: '0 ',
5955
+ color: theme?.palette?.font?.default
6068
5956
  },
6069
5957
  sliderContainer: {
6070
5958
  margin: '0 -20px'
@@ -6078,11 +5966,10 @@ const useTeamStyles = createUseStyles(theme => {
6078
5966
  singleSlideContainer: {
6079
5967
  backgroundColor: theme?.palette?.background?.default,
6080
5968
  margin: '20px',
6081
- width: 'calc(100% - 32px)',
6082
- // height: 'calc(100% - 40px)',
6083
- border: '3px solid #D8E0F0',
5969
+ width: 'calc(100% - 40px)',
5970
+ height: 'calc(100% - 40px)',
6084
5971
  borderRadius: theme?.shape?.borderRadius?.regular,
6085
- padding: theme.spacing.padding.tiny,
5972
+ padding: '32px',
6086
5973
  boxShadow: theme?.shadows?.primary
6087
5974
  },
6088
5975
  imageContainer: {
@@ -6107,28 +5994,32 @@ const useTeamStyles = createUseStyles(theme => {
6107
5994
  overflowWrap: 'break-word'
6108
5995
  },
6109
5996
  teamDetailsHeading: {
6110
- fontSize: theme.typography.fontSize.h5,
6111
- fontWeight: theme.typography.fontWeight.bold,
5997
+ fontSize: '24px',
6112
5998
  lineHeight: '32px',
6113
5999
  margin: '0',
6114
6000
  color: theme?.palette?.font?.default
6115
6001
  },
6116
6002
  teamDetailsSubHeading: {
6117
- fontSize: theme.typography.fontSize.subHead,
6003
+ fontSize: '16px',
6118
6004
  lineHeight: '24px',
6119
6005
  margin: '12px 0 0',
6120
6006
  color: theme?.palette?.font?.primary
6121
6007
  },
6122
6008
  '@media (max-width: 767px)': {
6123
- // teamSuperContainer: {
6124
- // padding: '60px 20px'
6125
- // },
6009
+ teamSuperContainer: {
6010
+ padding: '60px 20px'
6011
+ },
6126
6012
  teamHeading: {
6127
- lineHeight: '20px'
6013
+ fontSize: '16px',
6014
+ lineHeight: '20px',
6015
+ letterSpacing: '3px',
6016
+ margin: '0'
6128
6017
  },
6129
6018
  teamTitle: {
6019
+ fontSize: '24px',
6130
6020
  lineHeight: '36px',
6131
- letterSpacing: '-1px'
6021
+ letterSpacing: '-1px',
6022
+ margin: '0'
6132
6023
  },
6133
6024
  sliderContainer: {
6134
6025
  margin: '0 -4px'
@@ -6138,17 +6029,18 @@ const useTeamStyles = createUseStyles(theme => {
6138
6029
  margin: '12px 4px'
6139
6030
  },
6140
6031
  teamDetailsContainer: {
6141
- textAlign: 'center'
6142
- // margin: '15px 0 0',
6143
- // paddingBottom: '0'
6032
+ textAlign: 'center',
6033
+ margin: '15px 0 0',
6034
+ paddingBottom: '0'
6144
6035
  },
6145
-
6146
6036
  teamDetailsHeading: {
6037
+ fontSize: '16px',
6147
6038
  lineHeight: '24px',
6148
6039
  margin: '0',
6149
6040
  color: theme?.palette?.font?.default
6150
6041
  },
6151
6042
  teamDetailsSubHeading: {
6043
+ fontSize: '16px',
6152
6044
  color: theme?.palette?.font?.primary
6153
6045
  }
6154
6046
  }
@@ -6203,8 +6095,7 @@ function TeamCard({
6203
6095
  const classes = useTeamStyles({
6204
6096
  containerWidth,
6205
6097
  cardsCount,
6206
- slidesToShow,
6207
- isMobile
6098
+ slidesToShow
6208
6099
  });
6209
6100
  const settings = {
6210
6101
  className: classes.sliderContainer,
@@ -6261,21 +6152,17 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6261
6152
  flexDirection: 'column',
6262
6153
  alignItems: 'center',
6263
6154
  backgroundColor: theme?.palette?.background?.default,
6264
- padding: ({
6265
- isMobile
6266
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
6267
6155
  '&, & *, & *:before, & *:after': {
6268
6156
  fontFamily: theme?.typography?.fontFamily,
6269
6157
  boxSizing: 'border-box'
6158
+ },
6159
+ '& h2,& h3': {
6160
+ fontWeight: '500',
6161
+ '& b,& strong': {
6162
+ fontWeight: '700'
6163
+ }
6270
6164
  }
6271
- // '& h2,& h3': {
6272
- // fontWeight: '500',
6273
- // '& b,& strong': {
6274
- // fontWeight: '700'
6275
- // }
6276
- // }
6277
6165
  },
6278
-
6279
6166
  formContainer: {
6280
6167
  margin: '0 auto',
6281
6168
  maxWidth: ({
@@ -6294,14 +6181,14 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6294
6181
  backgroundColor: theme?.palette?.background?.default,
6295
6182
  boxShadow: theme?.shadows?.secondary,
6296
6183
  borderRadius: theme?.shape?.borderRadius?.regular,
6297
- padding: '48px',
6184
+ margin: '60px 10%',
6185
+ padding: '40px 80px',
6298
6186
  position: 'relative'
6299
6187
  },
6300
6188
  title: {
6301
6189
  margin: '0',
6302
- fontSize: theme.typography.fontSize.h2,
6190
+ fontSize: '56px',
6303
6191
  color: theme?.palette?.font?.secondary,
6304
- fontWeight: theme.typography.fontWeight.bold,
6305
6192
  lineHeight: '71px',
6306
6193
  letterSpacing: '-3px',
6307
6194
  textAlign: 'left',
@@ -6309,19 +6196,16 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6309
6196
  },
6310
6197
  contentContainer: {
6311
6198
  width: '100%',
6312
- display: 'flex'
6313
- // alignItems: 'flex-start',
6199
+ display: 'flex',
6200
+ alignItems: 'flex-start',
6201
+ marginTop: '32px'
6314
6202
  },
6315
-
6316
6203
  leftContainer: {
6317
- width: '65%',
6318
- display: 'flex',
6319
- flexDirection: 'column',
6320
- justifyContent: 'space-between'
6204
+ width: '65%'
6321
6205
  },
6322
6206
  subtitle: {
6323
- // margin: '0 0 40px 0',
6324
- fontSize: theme.typography.fontSize.h6,
6207
+ margin: '0 0 40px 0',
6208
+ fontSize: '20px',
6325
6209
  color: theme?.palette?.font?.primary,
6326
6210
  lineHeight: '32px',
6327
6211
  wordBreak: 'break-word'
@@ -6343,16 +6227,13 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6343
6227
  padding: '4px 8px 0 0'
6344
6228
  },
6345
6229
  addressText: {
6346
- fontSize: theme.typography.fontSize.subHead,
6230
+ fontSize: '16px',
6347
6231
  color: theme?.palette?.font?.default,
6348
6232
  lineHeight: '24px'
6349
6233
  },
6350
6234
  rightContainer: {
6351
6235
  width: '50%',
6352
- padding: '0 0 0 80px',
6353
- display: 'flex',
6354
- flexDirection: 'column',
6355
- justifyContent: 'space-between'
6236
+ padding: '0 0 0 80px'
6356
6237
  },
6357
6238
  inputDiv: {
6358
6239
  margin: '0 0 20px 0',
@@ -6366,8 +6247,8 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6366
6247
  alignItems: 'center'
6367
6248
  },
6368
6249
  sectionContainer: {
6369
- // margin: '26px 16px',
6370
- padding: '16px'
6250
+ margin: '26px 16px',
6251
+ padding: '32px 16px'
6371
6252
  },
6372
6253
  partialBackground: {
6373
6254
  height: '150px'
@@ -6377,32 +6258,26 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6377
6258
  marginTop: '8px'
6378
6259
  },
6379
6260
  leftContainer: {
6380
- width: '100%'
6381
- // padding: '0 16ox'
6261
+ width: '100%',
6262
+ padding: '0 16ox'
6382
6263
  },
6383
-
6384
6264
  rightContainer: {
6385
6265
  width: '100%',
6386
6266
  padding: '0'
6387
6267
  },
6388
6268
  title: {
6389
- // fontSize: '24px',
6269
+ fontSize: '24px',
6390
6270
  lineHeight: '32px',
6391
- letterSpacing: 'initial',
6392
- margin: '0 0 16px 0',
6393
- textAlign: 'center'
6271
+ letterSpacing: 'initial'
6394
6272
  },
6395
6273
  subtitle: {
6396
- margin: '0 0 16px 0',
6397
- lineHeight: '26px',
6398
- textAlign: 'center'
6274
+ margin: '0 0 12px 0'
6399
6275
  },
6400
6276
  inputDiv: {
6401
- margin: '0 0 16px 0'
6277
+ margin: '0 0 10px 0'
6402
6278
  },
6403
6279
  addressRow: {
6404
- padding: '0px',
6405
- margin: '0 0 16px 0'
6280
+ padding: '12px 0'
6406
6281
  }
6407
6282
  }
6408
6283
  }));
@@ -6421,8 +6296,7 @@ function FormEnquiry({
6421
6296
  isEdit
6422
6297
  } = useContext(PageContext);
6423
6298
  const classes = useSectionStyles$1({
6424
- containerWidth,
6425
- isMobile
6299
+ containerWidth
6426
6300
  });
6427
6301
  const [nodeData] = sectionData.components;
6428
6302
  const theme = useTheme();
@@ -6481,10 +6355,6 @@ function FormEnquiry({
6481
6355
  className: classes.partialBackground
6482
6356
  }), /*#__PURE__*/React.createElement("div", {
6483
6357
  className: classes.sectionContainer
6484
- }, /*#__PURE__*/React.createElement("div", {
6485
- className: classes.contentContainer
6486
- }, /*#__PURE__*/React.createElement("div", {
6487
- className: classes.leftContainer
6488
6358
  }, /*#__PURE__*/React.createElement("h2", {
6489
6359
  className: classes.title
6490
6360
  }, /*#__PURE__*/React.createElement("span", {
@@ -6493,6 +6363,10 @@ function FormEnquiry({
6493
6363
  __html: nodeData?.title?.metadata?.value
6494
6364
  }
6495
6365
  })), /*#__PURE__*/React.createElement("div", {
6366
+ className: classes.contentContainer
6367
+ }, /*#__PURE__*/React.createElement("div", {
6368
+ className: classes.leftContainer
6369
+ }, /*#__PURE__*/React.createElement("div", {
6496
6370
  ref: nodeData?.subtitle?.refSetter,
6497
6371
  className: classes.subtitle,
6498
6372
  dangerouslySetInnerHTML: {
@@ -6632,7 +6506,7 @@ function FormEnquiry({
6632
6506
  messageValid: 1
6633
6507
  });
6634
6508
  }
6635
- })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
6509
+ })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React.createElement(Button, {
6636
6510
  ref: nodeData?.cta?.refSetter,
6637
6511
  data: btnDisabled && validData?.messageValid && validData?.emailValid && validData?.nameValid && validData?.phoneValid ? {
6638
6512
  value: 'Submitted'
@@ -6643,7 +6517,7 @@ function FormEnquiry({
6643
6517
  type: nodeData?.cta?.metadata?.type,
6644
6518
  size: isMobile ? 'small' : 'medium',
6645
6519
  disabled: btnDisabled
6646
- })))))));
6520
+ }))))));
6647
6521
  }
6648
6522
 
6649
6523
  var index$6 = /*#__PURE__*/Object.freeze({
@@ -6659,24 +6533,20 @@ const useSectionStyles = createUseStyles(theme => ({
6659
6533
  justifyContent: 'center',
6660
6534
  flexDirection: 'column',
6661
6535
  alignItems: 'center',
6662
- padding: ({
6663
- isMobile
6664
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
6665
6536
  backgroundColor: theme?.palette?.background?.default,
6666
6537
  '&, & *, & *:before, & *:after': {
6667
6538
  fontFamily: theme?.typography?.fontFamily,
6668
6539
  boxSizing: 'border-box'
6540
+ },
6541
+ '& h2,& h3': {
6542
+ fontWeight: '500',
6543
+ '& b,& strong': {
6544
+ fontWeight: '700'
6545
+ }
6669
6546
  }
6670
- // '& h2,& h3': {
6671
- // fontWeight: '500',
6672
- // '& b,& strong': {
6673
- // fontWeight: '700'
6674
- // }
6675
- // }
6676
6547
  },
6677
-
6678
6548
  contactContainer: {
6679
- width: '100%',
6549
+ width: '80%',
6680
6550
  margin: '0 auto',
6681
6551
  maxWidth: ({
6682
6552
  containerWidth
@@ -6694,12 +6564,13 @@ const useSectionStyles = createUseStyles(theme => ({
6694
6564
  backgroundColor: theme?.palette?.background?.default,
6695
6565
  boxShadow: theme?.shadows?.secondary,
6696
6566
  borderRadius: theme?.shape?.borderRadius?.regular,
6697
- padding: '48px',
6567
+ margin: '60px',
6568
+ padding: '40px 80px',
6698
6569
  position: 'relative'
6699
6570
  },
6700
6571
  title: {
6701
6572
  margin: '0',
6702
- fontSize: theme.typography.fontSize.h2,
6573
+ fontSize: '56px',
6703
6574
  color: theme?.palette?.font?.secondary,
6704
6575
  lineHeight: '71px',
6705
6576
  letterSpacing: '-3px',
@@ -6709,37 +6580,36 @@ const useSectionStyles = createUseStyles(theme => ({
6709
6580
  contentContainer: {
6710
6581
  width: '100%',
6711
6582
  display: 'flex',
6712
- justifyContent: 'space-between',
6583
+ alignItems: 'flex-start',
6584
+ marginTop: '32px',
6713
6585
  wordBreak: 'break-word'
6714
6586
  },
6715
6587
  leftContainer: {
6716
- width: '50%',
6717
- display: 'flex',
6718
- flexDirection: 'column',
6719
- justifyContent: 'space-between'
6588
+ width: '50%'
6720
6589
  },
6721
6590
  subtitle: {
6722
- margin: '0 0 auto 0',
6723
- fontSize: theme.typography.fontSize.h6,
6591
+ margin: '0 0 58px 0',
6592
+ fontSize: '20px',
6724
6593
  color: theme?.palette?.font?.primary,
6725
- lineHeight: '32px',
6726
- margin: '20px 0px'
6594
+ lineHeight: '32px'
6727
6595
  },
6728
6596
  addressContainer: {
6729
6597
  display: 'flex',
6730
6598
  alignItems: 'flex-start',
6731
6599
  flexDirection: 'column',
6732
- width: '100%',
6733
- position: 'relative'
6600
+ width: '85%',
6601
+ position: 'relative',
6602
+ paddingBottom: '55%'
6603
+ // '& img': {
6604
+ // width: '80%'
6605
+ // }
6734
6606
  },
6607
+
6735
6608
  telephoneImage: {
6736
6609
  width: '80%'
6737
6610
  },
6738
6611
  rightContainer: {
6739
6612
  width: '50%',
6740
- display: 'flex',
6741
- flexDirection: 'column',
6742
- justifyContent: 'space-between',
6743
6613
  padding: '0 0 0 80px'
6744
6614
  },
6745
6615
  inputDiv: {
@@ -6753,16 +6623,16 @@ const useSectionStyles = createUseStyles(theme => ({
6753
6623
  background: theme?.palette?.background?.default,
6754
6624
  border: `1px solid ${theme?.palette?.border?.secondary}`,
6755
6625
  borderRadius: theme?.shape?.borderRadius?.regular,
6756
- // padding: '14px 12px',
6626
+ padding: '14px 12px',
6757
6627
  display: 'flex',
6758
6628
  fontWeight: '400',
6759
- fontSize: theme.typography.fontSize.subHead,
6629
+ fontSize: '16px',
6760
6630
  lineHeight: '20px',
6761
6631
  fontFamily: 'inherit',
6762
6632
  resize: 'none',
6763
6633
  '&::placeholder': {
6764
6634
  fontWeight: '400',
6765
- fontSize: theme.typography.fontSize.subHead,
6635
+ fontSize: '16px',
6766
6636
  lineHeight: '20px',
6767
6637
  color: theme?.palette?.font?.primary,
6768
6638
  fontFamily: theme?.typography?.fontFamily
@@ -6792,7 +6662,8 @@ const useSectionStyles = createUseStyles(theme => ({
6792
6662
  alignItems: 'center'
6793
6663
  },
6794
6664
  sectionContainer: {
6795
- padding: '16px'
6665
+ margin: '26px 16px',
6666
+ padding: '32px 16px'
6796
6667
  },
6797
6668
  partialBackground: {
6798
6669
  height: '150px'
@@ -6810,17 +6681,15 @@ const useSectionStyles = createUseStyles(theme => ({
6810
6681
  padding: '0'
6811
6682
  },
6812
6683
  title: {
6813
- lineHeight: '26px',
6814
- letterSpacing: 'initial',
6815
- textAlign: 'center'
6684
+ fontSize: '24px',
6685
+ lineHeight: '32px',
6686
+ letterSpacing: 'initial'
6816
6687
  },
6817
6688
  subtitle: {
6818
- margin: '0 0 12px 0',
6819
- textAlign: 'center',
6820
- lineHeight: '26px'
6689
+ margin: '0 0 12px 0'
6821
6690
  },
6822
6691
  addressRow: {
6823
- // padding: '12px 0'
6692
+ padding: '12px 0'
6824
6693
  },
6825
6694
  addressContainer: {
6826
6695
  '& img': {
@@ -6828,7 +6697,7 @@ const useSectionStyles = createUseStyles(theme => ({
6828
6697
  }
6829
6698
  },
6830
6699
  inputDiv: {
6831
- // margin: '0 0 10px 0'
6700
+ margin: '0 0 10px 0'
6832
6701
  },
6833
6702
  inputField: {
6834
6703
  width: '100%',
@@ -6860,8 +6729,7 @@ function Contact({
6860
6729
  let [btnDisabled, setBtnDisabled] = useState(false);
6861
6730
  const [nodeData] = sectionData.components;
6862
6731
  const classes = useSectionStyles({
6863
- containerWidth,
6864
- isMobile
6732
+ containerWidth
6865
6733
  });
6866
6734
  let formInitialValue = {
6867
6735
  name: nodeData?.nameField?.metadata?.value,
@@ -6917,10 +6785,6 @@ function Contact({
6917
6785
  className: classes.partialBackground
6918
6786
  }), /*#__PURE__*/React.createElement("div", {
6919
6787
  className: classes.sectionContainer
6920
- }, /*#__PURE__*/React.createElement("div", {
6921
- className: classes.contentContainer
6922
- }, /*#__PURE__*/React.createElement("div", {
6923
- className: classes.leftContainer
6924
6788
  }, /*#__PURE__*/React.createElement("h2", {
6925
6789
  className: classes.title
6926
6790
  }, /*#__PURE__*/React.createElement("span", {
@@ -6929,6 +6793,10 @@ function Contact({
6929
6793
  __html: nodeData?.title?.metadata?.value
6930
6794
  }
6931
6795
  })), /*#__PURE__*/React.createElement("div", {
6796
+ className: classes.contentContainer
6797
+ }, /*#__PURE__*/React.createElement("div", {
6798
+ className: classes.leftContainer
6799
+ }, /*#__PURE__*/React.createElement("div", {
6932
6800
  ref: nodeData?.subtitle?.refSetter,
6933
6801
  className: classes.subtitle,
6934
6802
  dangerouslySetInnerHTML: {
@@ -7031,9 +6899,7 @@ function Contact({
7031
6899
  messageValid: 1
7032
6900
  });
7033
6901
  }
7034
- })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React.createElement("div", {
7035
- className: classes.btnContainer
7036
- }, /*#__PURE__*/React.createElement(Button, {
6902
+ })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React.createElement(Button, {
7037
6903
  ref: nodeData?.cta?.refSetter,
7038
6904
  data: btnDisabled && validData?.messageValid && validData?.emailValid && validData?.nameValid && validData?.phoneValid ? {
7039
6905
  value: 'Submitted'
@@ -7045,7 +6911,7 @@ function Contact({
7045
6911
  size: isMobile ? 'small' : 'medium',
7046
6912
  disabled: btnDisabled,
7047
6913
  name: "button"
7048
- })))))));
6914
+ }))))));
7049
6915
  }
7050
6916
 
7051
6917
  var index$5 = /*#__PURE__*/Object.freeze({
@@ -7058,15 +6924,16 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7058
6924
  webinarSuperContainer: {
7059
6925
  display: 'flex',
7060
6926
  justifyContent: 'center',
7061
- padding: ({
7062
- isMobile
7063
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
6927
+ padding: '70px',
7064
6928
  '&, & *, & *:before, & *:after': {
7065
6929
  fontFamily: theme?.typography?.fontFamily,
7066
6930
  boxSizing: 'border-box'
7067
6931
  },
7068
- '& h2,& h3,& p': {
7069
- margin: '0'
6932
+ '& h2,& h3': {
6933
+ fontWeight: '500',
6934
+ '& b,& strong': {
6935
+ fontWeight: '700'
6936
+ }
7070
6937
  }
7071
6938
  },
7072
6939
  sectionContainer: {
@@ -7080,34 +6947,30 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7080
6947
  maxWidth: '1440px',
7081
6948
  fontFamily: theme?.typography?.fontFamily
7082
6949
  },
7083
- // videoTestimonialHeading: {
7084
- // fontSize: theme.typography.fontSize.subHead,
7085
- // lineHeight: '20px',
7086
- // letterSpacing: '3px',
7087
- // textTransform: 'uppercase',
7088
- // color: theme.palette.font.tertiary,
7089
- // wordBreak: 'break-word',
7090
- // fontWeight: theme.typography.fontWeight.bold,
7091
- // },
7092
-
7093
- // videoTestimonialTitle: {
7094
- // fontSize: theme.typography.fontSize.h2,
7095
- // lineHeight: '71px',
7096
- // fontWeight: theme.typography.fontWeight.bold,
7097
- // letterSpacing: '-3px',
7098
- // margin: '0',
7099
- // color: theme.palette.font.default,
7100
- // wordBreak: 'break-word'
7101
- // },
7102
-
7103
- // videoCarouselContainer: {
7104
- // marginTop: '16px'
7105
- // },
7106
-
6950
+ videoTestimonialHeading: {
6951
+ fontSize: '16px',
6952
+ lineHeight: '20px',
6953
+ letterSpacing: '3px',
6954
+ textTransform: 'uppercase',
6955
+ color: theme.palette.font.tertiary,
6956
+ wordBreak: 'break-word',
6957
+ fontWeight: '700'
6958
+ },
6959
+ videoTestimonialTitle: {
6960
+ fontSize: '56px',
6961
+ lineHeight: '71px',
6962
+ letterSpacing: '-3px',
6963
+ margin: '0',
6964
+ color: theme.palette.font.default,
6965
+ wordBreak: 'break-word'
6966
+ },
6967
+ videoCarouselContainer: {
6968
+ marginTop: '16px'
6969
+ },
7107
6970
  webinarCarousel: {
7108
6971
  display: 'flex',
7109
6972
  justifyContent: 'flex-start',
7110
- gap: '32px'
6973
+ gap: '20px'
7111
6974
  },
7112
6975
  '@media screen and (max-width: 767px)': {
7113
6976
  webinarCarousel: {
@@ -7122,21 +6985,18 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7122
6985
  alignItems: 'center'
7123
6986
  },
7124
6987
  iframeContainer: {
7125
- width: '100%',
6988
+ width: '90%',
7126
6989
  position: 'relative',
7127
6990
  paddingBottom: '56.25%',
7128
6991
  // top: "6%",
7129
- // left: '5%'
7130
- borderRadius: '8px',
7131
- overflow: 'hidden'
6992
+ left: '5%'
7132
6993
  },
7133
6994
  offerText: {
7134
6995
  textAlign: 'center',
7135
- color: theme.palette.font.primary,
7136
- marginBottom: '5%'
6996
+ color: theme.palette.font.primary
7137
6997
  },
7138
6998
  offerPrice: {
7139
- fontSize: theme.typography.fontSize.h5,
6999
+ fontSize: '28px',
7140
7000
  fontWeight: '600'
7141
7001
  },
7142
7002
  priceContainer: {
@@ -7155,10 +7015,9 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7155
7015
  bottomContainer: {
7156
7016
  display: 'flex',
7157
7017
  justifyContent: 'space-between',
7158
- marginTop: '5%'
7159
- // padding: '0px 5% 0px 5%'
7018
+ marginTop: '5%',
7019
+ padding: '0px 5% 0px 5%'
7160
7020
  },
7161
-
7162
7021
  iframe: {
7163
7022
  position: 'absolute',
7164
7023
  width: '100%',
@@ -7169,12 +7028,10 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7169
7028
  width: '100%',
7170
7029
  display: 'flex',
7171
7030
  flexDirection: 'column',
7172
- alignItems: 'flex-start',
7173
- gap: '20px'
7031
+ alignItems: 'flex-start'
7174
7032
  },
7175
7033
  videoDetailsHeading: {
7176
- fontSize: theme.typography.fontSize.h3,
7177
- fontWeight: theme.typography.fontWeight.bold,
7034
+ fontSize: '40px',
7178
7035
  lineHeight: '48px',
7179
7036
  margin: '0',
7180
7037
  letterSpacing: '-1px',
@@ -7188,7 +7045,7 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7188
7045
  display: 'flex',
7189
7046
  flexDirection: 'column',
7190
7047
  justifyContent: 'start',
7191
- padding: '24px',
7048
+ paddingTop: '20px',
7192
7049
  borderRadius: '10px'
7193
7050
  },
7194
7051
  bannerContainer: {
@@ -7201,12 +7058,14 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7201
7058
  position: 'relative',
7202
7059
  fontSize: '18px',
7203
7060
  transform: 'rotate(180deg)',
7204
- clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 calc(100% - 10px), 15px calc(50% - 10px/2))'
7061
+ clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 calc(100% - 10px), 15px calc(50% - 10px/2))',
7062
+ marginBottom: '16px'
7205
7063
  },
7206
7064
  bannerContainerText: {
7207
7065
  transform: 'rotate(180deg)'
7208
7066
  },
7209
7067
  courseDetailsTags: {
7068
+ marginTop: '16px',
7210
7069
  display: 'flex'
7211
7070
  },
7212
7071
  courseDetailTag: {
@@ -7214,22 +7073,23 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7214
7073
  alignItems: 'center',
7215
7074
  marginRight: '20px',
7216
7075
  '& div': {
7217
- fontSize: theme.typography.fontSize.subHead,
7076
+ fontSize: '14px',
7218
7077
  marginLeft: '10px'
7219
7078
  }
7220
7079
  },
7221
7080
  courseDetailContent: {
7222
- fontSize: theme.typography.fontSize.subHead,
7081
+ marginTop: '16px',
7082
+ fontSize: '16px',
7223
7083
  wordBreak: 'break-word',
7224
7084
  color: theme.palette.font.primary,
7225
- whiteSpace: 'pre-wrap',
7226
- width: '80%'
7085
+ margin: '10px 0 20px',
7086
+ whiteSpace: 'pre-wrap'
7227
7087
  },
7228
7088
  courseDetailViewFullDetails: {
7229
7089
  cursor: 'pointer',
7230
- fontSize: theme.typography.fontSize.subHead,
7090
+ fontSize: '16px',
7231
7091
  lineHeight: '24px',
7232
- marginTop: '-20px',
7092
+ margin: '0',
7233
7093
  color: '#00ADE7',
7234
7094
  wordBreak: 'break-word'
7235
7095
  },
@@ -7237,10 +7097,9 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7237
7097
  color: '#EB5757',
7238
7098
  fontWeight: '600'
7239
7099
  },
7240
- // webinarButtonContainer: {
7241
- // marginBottom: '20px'
7242
- // },
7243
-
7100
+ webinarButtonContainer: {
7101
+ marginBottom: '20px'
7102
+ },
7244
7103
  iconBackground: {
7245
7104
  display: 'flex',
7246
7105
  width: '36px',
@@ -7272,10 +7131,11 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7272
7131
  width: '100%'
7273
7132
  },
7274
7133
  videoDetailsHeading: {
7134
+ fontSize: '16px',
7275
7135
  lineHeight: '20px'
7276
7136
  },
7277
7137
  videoTestimonialTitle: {
7278
- // fontSize: '24px',
7138
+ fontSize: '24px',
7279
7139
  lineHeight: '36px',
7280
7140
  letterSpacing: '-1px'
7281
7141
  },
@@ -7305,7 +7165,9 @@ const SingleVideoSlide$1 = props => {
7305
7165
  const {
7306
7166
  data,
7307
7167
  webinarCtaClick,
7308
- conversions = 0
7168
+ conversions = 0,
7169
+ countryCode,
7170
+ currencySymbol
7309
7171
  } = props;
7310
7172
  const renderer = ({
7311
7173
  days,
@@ -7315,11 +7177,14 @@ const SingleVideoSlide$1 = props => {
7315
7177
  completed
7316
7178
  }) => {
7317
7179
  if (days === 0 && hours < 24) {
7180
+ if (countryCode === 'KR') {
7181
+ return /*#__PURE__*/React.createElement("span", null, hours, " \uC2DC\uAC04 ", minutes, " \uBD84 ", seconds, "\uCD08");
7182
+ }
7318
7183
  return /*#__PURE__*/React.createElement("span", null, hours, "h ", minutes, "m ", seconds, "s");
7319
7184
  } else {
7320
7185
  let given = moment(props.data.offerPriceEndDate);
7321
7186
  let current = moment().startOf('day');
7322
- return /*#__PURE__*/React.createElement("span", null, Math.floor(moment.duration(given.diff(current)).asDays()), " day(s)");
7187
+ return /*#__PURE__*/React.createElement("span", null, Math.floor(moment.duration(given.diff(current)).asDays()), ' ', countryCode === 'KR' ? '날' : 'day(s)');
7323
7188
  }
7324
7189
  };
7325
7190
  const checkIfOfferIsValid = () => moment().diff(moment(props.data.offerPriceEndDate)) < 0;
@@ -7351,6 +7216,44 @@ const SingleVideoSlide$1 = props => {
7351
7216
  return (discount / price * 100).toFixed(2);
7352
7217
  };
7353
7218
  const classes = useWebinarPromotionPage();
7219
+ const effectivePrice = formatCurrency(countryCode, data?.effectivePrice, currencySymbol);
7220
+ const renderHurryUpBannerText = () => {
7221
+ let count = data.offerPriceValidFor - conversions;
7222
+ if (countryCode === 'KR') {
7223
+ if (count > 1) {
7224
+ return `서두르세요! 현재 신청 가능 인원은 ${count}명 입니다.`;
7225
+ } else {
7226
+ return `서두르세요! ${count}명까지만 신청 가능이 가능합니다.`;
7227
+ }
7228
+ } else {
7229
+ return `Hurry up! Offer left for ${count} ${count > 1 ? 'users now' : 'user only'}`;
7230
+ }
7231
+ };
7232
+ const limitedPeriodOfferText = countryCode === 'KR' ? '기간 한정 딜이므로 서두르세요!' : 'Hurry up! Offer for limited period only';
7233
+ const renderOfferEndsInText = () => {
7234
+ if (countryCode === 'KR') {
7235
+ return /*#__PURE__*/React.createElement("p", {
7236
+ className: classes.offerText
7237
+ }, /*#__PURE__*/React.createElement("span", {
7238
+ className: classes.courseDetailTime
7239
+ }, /*#__PURE__*/React.createElement(Countdown, {
7240
+ renderer: renderer,
7241
+ date: data.offerPriceEndDate
7242
+ })), ' ', "\uD6C4\xA0\uC2E0\uCCAD\xA0\uB9C8\uAC10\xA0\uC608\uC815");
7243
+ } else {
7244
+ return /*#__PURE__*/React.createElement("p", {
7245
+ className: classes.offerText
7246
+ }, "Offer Ends in", ' ', /*#__PURE__*/React.createElement("span", {
7247
+ className: classes.courseDetailTime
7248
+ }, /*#__PURE__*/React.createElement(Countdown, {
7249
+ renderer: renderer,
7250
+ date: data.offerPriceEndDate
7251
+ })));
7252
+ }
7253
+ };
7254
+ const finalPrice = formatCurrency(countryCode, data?.price, currencySymbol);
7255
+ const buyNowText = countryCode === 'KR' ? '이 강좌를 수강하세요.' : 'BUY NOW';
7256
+ const registerNowText = countryCode === 'KR' ? '지금 신청하기' : 'REGISTER NOW';
7354
7257
  return /*#__PURE__*/React.createElement("div", {
7355
7258
  className: classes.videoCarouselContainer
7356
7259
  }, /*#__PURE__*/React.createElement("div", {
@@ -7363,11 +7266,11 @@ const SingleVideoSlide$1 = props => {
7363
7266
  className: classes.bannerContainer
7364
7267
  }, /*#__PURE__*/React.createElement("div", {
7365
7268
  className: classes.bannerContainerText
7366
- }, "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.createElement("div", {
7269
+ }, renderHurryUpBannerText())) : checkIfOfferIsValid() && data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : /*#__PURE__*/React.createElement("div", {
7367
7270
  className: classes.bannerContainer
7368
7271
  }, /*#__PURE__*/React.createElement("div", {
7369
7272
  className: classes.bannerContainerText
7370
- }, "Hurry up! Offer for limited period only"))), /*#__PURE__*/React.createElement("h3", {
7273
+ }, limitedPeriodOfferText))), /*#__PURE__*/React.createElement("h3", {
7371
7274
  ref: data?.videoTextHeading?.refSetter,
7372
7275
  className: classes.videoDetailsHeading,
7373
7276
  dangerouslySetInnerHTML: {
@@ -7407,14 +7310,7 @@ const SingleVideoSlide$1 = props => {
7407
7310
  }
7408
7311
  }))), /*#__PURE__*/React.createElement("div", {
7409
7312
  className: classes.courseViewContainer
7410
- }, data.isPaid !== 0 && checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && /*#__PURE__*/React.createElement("p", {
7411
- className: classes.offerText
7412
- }, "Offer Ends in", ' ', /*#__PURE__*/React.createElement("span", {
7413
- className: classes.courseDetailTime
7414
- }, /*#__PURE__*/React.createElement(Countdown, {
7415
- renderer: renderer,
7416
- date: data.offerPriceEndDate
7417
- }))), /*#__PURE__*/React.createElement("div", {
7313
+ }, data.isPaid !== 0 && checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && renderOfferEndsInText(), /*#__PURE__*/React.createElement("div", {
7418
7314
  ref: data?.videoFrame?.refSetter,
7419
7315
  className: classes.iframeContainer
7420
7316
  }, /*#__PURE__*/React.createElement(VideoPlayer, {
@@ -7431,13 +7327,14 @@ const SingleVideoSlide$1 = props => {
7431
7327
  className: classes.priceContainer
7432
7328
  }, /*#__PURE__*/React.createElement("div", {
7433
7329
  className: classes.offerPrice
7434
- }, "\u20B9", data?.effectivePrice), checkForShowDiscount() && (data.offerPriceEndDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React.createElement("p", {
7330
+ }, effectivePrice), checkForShowDiscount() && (data.offerPriceEndDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React.createElement("p", {
7435
7331
  style: {
7436
- fontSize: '20px'
7332
+ fontSize: '20px',
7333
+ marginTop: '0px'
7437
7334
  }
7438
7335
  }, /*#__PURE__*/React.createElement("span", {
7439
7336
  className: classes.originalPrice
7440
- }, "\u20B9", data?.price), ' ', /*#__PURE__*/React.createElement("span", {
7337
+ }, finalPrice), ' ', /*#__PURE__*/React.createElement("span", {
7441
7338
  className: classes.offerDiscount
7442
7339
  }, `${data && discount(data)}%`))) : null, /*#__PURE__*/React.createElement("div", {
7443
7340
  className: classes.webinarButtonContainer
@@ -7449,7 +7346,7 @@ const SingleVideoSlide$1 = props => {
7449
7346
  data: {
7450
7347
  // link: 'headerData?.loginCtaLink',
7451
7348
  // isLink: 1,
7452
- value: data.isPaid ? 'BUY NOW' : 'REGISTER NOW'
7349
+ value: data.isPaid ? buyNowText : registerNowText
7453
7350
  // isExternal: 1
7454
7351
  },
7455
7352
 
@@ -7467,14 +7364,14 @@ function CoursePromotionPage$1({
7467
7364
  sectionIndex
7468
7365
  }) {
7469
7366
  const {
7470
- isMobile,
7471
7367
  layout: {
7472
7368
  containerWidth
7473
- }
7369
+ },
7370
+ countryCode,
7371
+ currencySymbol
7474
7372
  } = useContext(PageContext);
7475
7373
  const classes = useWebinarPromotionPage({
7476
- containerWidth,
7477
- isMobile
7374
+ containerWidth
7478
7375
  });
7479
7376
  return /*#__PURE__*/React.createElement("div", {
7480
7377
  className: classes.webinarSuperContainer
@@ -7486,7 +7383,9 @@ function CoursePromotionPage$1({
7486
7383
  data: sectionData.components[0].metadata,
7487
7384
  webinarCtaClick: extraProps.webinarCtaClick,
7488
7385
  conversions: extraProps.conversions,
7489
- sectionIndex: sectionIndex
7386
+ sectionIndex: sectionIndex,
7387
+ countryCode: countryCode,
7388
+ currencySymbol: currencySymbol
7490
7389
  }))));
7491
7390
  }
7492
7391
 
@@ -7496,26 +7395,22 @@ var index$4 = /*#__PURE__*/Object.freeze({
7496
7395
  });
7497
7396
 
7498
7397
  const useCoursePromotionPage = createUseStyles(theme => {
7499
- debugger;
7500
7398
  return {
7501
7399
  courseSuperContainer: {
7502
7400
  display: 'flex',
7503
7401
  justifyContent: 'center',
7504
- padding: ({
7505
- isMobile
7506
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
7402
+ padding: '70px ',
7507
7403
  '&, & *, & *:before, & *:after': {
7508
7404
  fontFamily: theme?.typography?.fontFamily,
7509
7405
  boxSizing: 'border-box'
7406
+ },
7407
+ '& h2,& h3': {
7408
+ fontWeight: '500',
7409
+ '& b,& strong': {
7410
+ fontWeight: '700'
7411
+ }
7510
7412
  }
7511
- // '& h2,& h3': {
7512
- // fontWeight: '500',
7513
- // '& b,& strong': {
7514
- // fontWeight: '700'
7515
- // }
7516
- // }
7517
7413
  },
7518
-
7519
7414
  sectionContainer: {
7520
7415
  margin: '0 auto',
7521
7416
  maxWidth: ({
@@ -7528,7 +7423,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
7528
7423
  fontFamily: theme?.typography?.fontFamily
7529
7424
  },
7530
7425
  videoTestimonialHeading: {
7531
- fontSize: theme.typography.fontSize.subHead,
7426
+ fontSize: '16px',
7532
7427
  lineHeight: '20px',
7533
7428
  letterSpacing: '3px',
7534
7429
  textTransform: 'uppercase',
@@ -7537,7 +7432,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
7537
7432
  fontWeight: '700'
7538
7433
  },
7539
7434
  videoTestimonialTitle: {
7540
- fontSize: theme.typography.fontSize.h2,
7435
+ fontSize: '56px',
7541
7436
  lineHeight: '71px',
7542
7437
  letterSpacing: '-3px',
7543
7438
  margin: '0',
@@ -7545,12 +7440,12 @@ const useCoursePromotionPage = createUseStyles(theme => {
7545
7440
  wordBreak: 'break-word'
7546
7441
  },
7547
7442
  videoCarouselContainer: {
7548
- // marginTop: '16px'
7443
+ marginTop: '16px'
7549
7444
  },
7550
7445
  coursePageCarousel: {
7551
7446
  display: 'flex',
7552
7447
  justifyContent: 'flex-start',
7553
- gap: '32px'
7448
+ gap: '20px'
7554
7449
  },
7555
7450
  '@media screen and (max-width: 767px)': {
7556
7451
  coursePageCarousel: {
@@ -7565,19 +7460,18 @@ const useCoursePromotionPage = createUseStyles(theme => {
7565
7460
  alignItems: 'center'
7566
7461
  },
7567
7462
  iframeContainer: {
7568
- width: '100%',
7463
+ width: '90%',
7569
7464
  position: 'relative',
7570
- paddingBottom: '56.25%'
7465
+ paddingBottom: '56.25%',
7571
7466
  // top: "6%",
7572
- // left: '5%'
7467
+ left: '5%'
7573
7468
  },
7574
-
7575
7469
  offerText: {
7576
7470
  textAlign: 'center',
7577
7471
  color: theme.palette.font.primary
7578
7472
  },
7579
7473
  offerPrice: {
7580
- fontSize: theme.typography.fontSize.h4,
7474
+ fontSize: '28px',
7581
7475
  fontWeight: '700'
7582
7476
  },
7583
7477
  priceContainer: {
@@ -7595,7 +7489,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
7595
7489
  fontWeight: '600'
7596
7490
  },
7597
7491
  bottomContainer: {
7598
- width: '100%',
7492
+ width: '90%',
7599
7493
  marginLeft: 'auto',
7600
7494
  marginRight: 'auto',
7601
7495
  display: 'flex',
@@ -7612,11 +7506,10 @@ const useCoursePromotionPage = createUseStyles(theme => {
7612
7506
  width: '100%',
7613
7507
  display: 'flex',
7614
7508
  flexDirection: 'column',
7615
- alignItems: 'flex-start',
7616
- gap: '20px'
7509
+ alignItems: 'flex-start'
7617
7510
  },
7618
7511
  videoDetailsHeading: {
7619
- fontSize: theme.typography.fontSize.h3,
7512
+ fontSize: '40px',
7620
7513
  lineHeight: '48px',
7621
7514
  margin: '0',
7622
7515
  letterSpacing: '-1px',
@@ -7627,13 +7520,11 @@ const useCoursePromotionPage = createUseStyles(theme => {
7627
7520
  width: '445px',
7628
7521
  backgroundColor: '#f4f9ff',
7629
7522
  display: 'flex',
7630
- padding: '24px',
7631
7523
  flexDirection: 'column',
7632
- borderRadius: '10px'
7633
- // paddingBottom: '10px',
7634
- // paddingTop: '10px'
7524
+ borderRadius: '10px',
7525
+ paddingBottom: '10px',
7526
+ paddingTop: '10px'
7635
7527
  },
7636
-
7637
7528
  bannerContainer: {
7638
7529
  width: '100%',
7639
7530
  background: '#EB5757',
@@ -7642,12 +7533,11 @@ const useCoursePromotionPage = createUseStyles(theme => {
7642
7533
  padding: '10px 10px 23px 40px',
7643
7534
  wordWrap: 'break-word',
7644
7535
  position: 'relative',
7645
- fontSize: theme.typography.fontSize.subHead,
7536
+ fontSize: '18px',
7646
7537
  transform: 'rotate(180deg)',
7647
- clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 calc(100% - 10px), 15px calc(50% - 10px/2))'
7648
- // marginBottom: '16px'
7538
+ clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 calc(100% - 10px), 15px calc(50% - 10px/2))',
7539
+ marginBottom: '16px'
7649
7540
  },
7650
-
7651
7541
  bannerContainerText: {
7652
7542
  transform: 'rotate(180deg)'
7653
7543
  },
@@ -7658,15 +7548,16 @@ const useCoursePromotionPage = createUseStyles(theme => {
7658
7548
  },
7659
7549
  courseEmblem: {
7660
7550
  background: '#F0F4F8',
7661
- fontSize: theme.typography.fontSize.subHead,
7662
7551
  borderRadius: '2.00337px',
7663
7552
  padding: '8px',
7664
7553
  display: 'flex',
7665
7554
  alignItems: 'center',
7666
- justifyContent: 'center'
7555
+ justifyContent: 'center',
7556
+ marginTop: '20px',
7557
+ marginBottom: '20px'
7667
7558
  },
7668
7559
  courseDetailsTags: {
7669
- // marginTop: '16px',
7560
+ marginTop: '16px',
7670
7561
  display: 'flex',
7671
7562
  flexWrap: 'wrap'
7672
7563
  },
@@ -7676,14 +7567,13 @@ const useCoursePromotionPage = createUseStyles(theme => {
7676
7567
  alignItems: 'center',
7677
7568
  marginRight: '20px',
7678
7569
  '& div': {
7679
- fontSize: theme.typography.fontSize.subHead,
7680
- fontWeight: theme.typography.fontWeight.semiBold,
7570
+ fontSize: '14px',
7681
7571
  marginLeft: '10px'
7682
7572
  }
7683
7573
  },
7684
7574
  courseDetailContent: {
7685
- // marginTop: '16px',
7686
- fontSize: theme.typography.fontSize.subHead,
7575
+ marginTop: '16px',
7576
+ fontSize: '16px',
7687
7577
  lineHeight: '24px',
7688
7578
  wordBreak: 'break-word',
7689
7579
  color: theme.palette.font.primary,
@@ -7692,9 +7582,9 @@ const useCoursePromotionPage = createUseStyles(theme => {
7692
7582
  },
7693
7583
  courseDetailViewFullDetails: {
7694
7584
  cursor: 'pointer',
7695
- fontSize: theme.typography.fontSize.subHead,
7585
+ fontSize: '16px',
7696
7586
  lineHeight: '24px',
7697
- marginTop: '-24px',
7587
+ margin: '0',
7698
7588
  color: '#00ADE7',
7699
7589
  wordBreak: 'break-word'
7700
7590
  },
@@ -7741,34 +7631,33 @@ const useCoursePromotionPage = createUseStyles(theme => {
7741
7631
  },
7742
7632
  '@media (max-width: 767px)': {
7743
7633
  bannerContainerText: {
7744
- // fontSize: '16px'
7634
+ fontSize: '16px'
7745
7635
  },
7746
7636
  courseViewContainer: {
7747
7637
  width: '100%',
7748
7638
  paddingBottom: '10px'
7749
7639
  },
7750
- // courseSuperContainer: {
7751
- // padding: '20px 10px 60px 20px'
7752
- // },
7640
+ courseSuperContainer: {
7641
+ padding: '20px 10px 60px 20px'
7642
+ },
7753
7643
  videoCarousel: {
7754
7644
  flexDirection: 'column-reverse',
7755
7645
  gap: '20px'
7756
7646
  },
7757
7647
  videoCarouselContainer: {
7758
- height: 'max-content'
7759
- // paddingRight: '10px'
7648
+ height: 'max-content',
7649
+ paddingRight: '10px'
7760
7650
  },
7761
-
7762
7651
  videoDetails: {
7763
7652
  width: '100%'
7764
7653
  },
7765
7654
  videoDetailsHeading: {
7766
- // fontSize: '20px',
7655
+ fontSize: '20px',
7767
7656
  fontWeight: '600',
7768
7657
  lineHeight: '20px'
7769
7658
  },
7770
7659
  videoTestimonialTitle: {
7771
- // fontSize: '24px',
7660
+ fontSize: '24px',
7772
7661
  lineHeight: '36px',
7773
7662
  letterSpacing: '-1px'
7774
7663
  },
@@ -7806,18 +7695,23 @@ const SingleVideoSlide = props => {
7806
7695
  completed
7807
7696
  }) => {
7808
7697
  if (days === 0 && hours < 24) {
7698
+ if (countryCode === 'KR') {
7699
+ return /*#__PURE__*/React.createElement("span", null, hours, " \uC2DC\uAC04 ", minutes, " \uBD84 ", seconds, "\uCD08");
7700
+ }
7809
7701
  return /*#__PURE__*/React.createElement("span", null, hours, "h ", minutes, "m ", seconds, "s");
7810
7702
  } else {
7811
7703
  let given = moment(props.data.endDate);
7812
7704
  let current = moment().startOf('day');
7813
- return /*#__PURE__*/React.createElement("span", null, Math.floor(moment.duration(given.diff(current)).asDays()), " day(s)");
7705
+ return /*#__PURE__*/React.createElement("span", null, Math.floor(moment.duration(given.diff(current)).asDays()), ' ', countryCode === 'KR' ? '날' : 'day(s)');
7814
7706
  }
7815
7707
  };
7816
7708
  const {
7817
7709
  data,
7818
7710
  courseBuyNow,
7819
7711
  conversions = 20,
7820
- showCourseInstallment
7712
+ showCourseInstallment,
7713
+ countryCode,
7714
+ currencySymbol
7821
7715
  } = props;
7822
7716
  const showCourseInstallmentData = data?.courseOverviewData;
7823
7717
  const InstalmentData = isEdit ? data?.courseOverviewData?.installments?.formData?.installments[0].installmentAmount : data?.courseOverviewData?.installments?.formData?.installmentInfo?.installments[0].installmentPrice;
@@ -7850,6 +7744,34 @@ const SingleVideoSlide = props => {
7850
7744
  }) => {
7851
7745
  return (discount / price * 100).toFixed(2);
7852
7746
  };
7747
+ const renderHurryUpBannerText = () => {
7748
+ return countryCode === 'KR' ? `서두르세요! 현재 신청 가능 인원은 ${data.offerPriceValidFor - conversions}명 입니다.` : `Hurry up! Offer left for ${data.offerPriceValidFor - conversions} users now`;
7749
+ };
7750
+ const limitedPeriodOfferText = countryCode === 'KR' ? `기간 한정 딜이므로 서두르세요!` : 'Hurry up! Offer for limited period only';
7751
+ const renderOfferEndsInText = () => {
7752
+ if (countryCode === 'KR') {
7753
+ return /*#__PURE__*/React.createElement("p", {
7754
+ className: classes.offerText
7755
+ }, /*#__PURE__*/React.createElement("span", {
7756
+ className: classes.courseDetailTime
7757
+ }, /*#__PURE__*/React.createElement(Countdown, {
7758
+ renderer: renderer,
7759
+ date: data.endDate
7760
+ })), ' ', "\uD6C4\xA0\uC2E0\uCCAD\xA0\uB9C8\uAC10\xA0\uC608\uC815");
7761
+ } else {
7762
+ return /*#__PURE__*/React.createElement("p", {
7763
+ className: classes.offerText
7764
+ }, "Offer Ends in", ' ', /*#__PURE__*/React.createElement("span", {
7765
+ className: classes.courseDetailTime
7766
+ }, /*#__PURE__*/React.createElement(Countdown, {
7767
+ renderer: renderer,
7768
+ date: data.endDate
7769
+ })));
7770
+ }
7771
+ };
7772
+ const effectivePrice = formatCurrency(countryCode, data?.effectivePrice, currencySymbol);
7773
+ const finalPrice = formatCurrency(countryCode, data?.price, currencySymbol);
7774
+ const buyNowText = countryCode === 'KR' ? '이 강좌를 수강하세요.' : 'BUY NOW';
7853
7775
  return /*#__PURE__*/React.createElement("div", {
7854
7776
  className: classes.videoCarouselContainer
7855
7777
  }, /*#__PURE__*/React.createElement("div", {
@@ -7862,11 +7784,11 @@ const SingleVideoSlide = props => {
7862
7784
  className: classes.bannerContainer
7863
7785
  }, /*#__PURE__*/React.createElement("div", {
7864
7786
  className: classes.bannerContainerText
7865
- }, "Hurry up! Offer left for", ' ', data.offerPriceValidFor - conversions, " users now")) : checkIfOfferIsValid() && /*#__PURE__*/React.createElement("div", {
7787
+ }, renderHurryUpBannerText())) : checkIfOfferIsValid() && /*#__PURE__*/React.createElement("div", {
7866
7788
  className: classes.bannerContainer
7867
7789
  }, /*#__PURE__*/React.createElement("div", {
7868
7790
  className: classes.bannerContainerText
7869
- }, "Hurry up! Offer for limited period only"))), /*#__PURE__*/React.createElement("div", {
7791
+ }, limitedPeriodOfferText))), /*#__PURE__*/React.createElement("div", {
7870
7792
  className: classes.emblemContainer
7871
7793
  }, data?.courseOverviewData?.courseTagList.length && data?.courseOverviewData?.courseTagList?.map(data => {
7872
7794
  return /*#__PURE__*/React.createElement("div", {
@@ -7931,14 +7853,7 @@ const SingleVideoSlide = props => {
7931
7853
  }
7932
7854
  }, /*#__PURE__*/React.createElement("div", {
7933
7855
  className: classes.courseViewContainer
7934
- }, checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && /*#__PURE__*/React.createElement("p", {
7935
- className: classes.offerText
7936
- }, "Offer Ends in", ' ', /*#__PURE__*/React.createElement("span", {
7937
- className: classes.courseDetailTime
7938
- }, /*#__PURE__*/React.createElement(Countdown, {
7939
- renderer: renderer,
7940
- date: data.endDate
7941
- }))), /*#__PURE__*/React.createElement("div", {
7856
+ }, checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && renderOfferEndsInText(), /*#__PURE__*/React.createElement("div", {
7942
7857
  ref: data?.videoFrame?.refSetter,
7943
7858
  className: classes.iframeContainer
7944
7859
  }, /*#__PURE__*/React.createElement(VideoPlayer, {
@@ -7952,14 +7867,14 @@ const SingleVideoSlide = props => {
7952
7867
  className: classes.priceContainer
7953
7868
  }, /*#__PURE__*/React.createElement("div", {
7954
7869
  className: classes.offerPrice
7955
- }, "\u20B9 ", data.effectivePrice), checkForShowDiscount() && (data.endDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React.createElement("p", {
7870
+ }, effectivePrice), checkForShowDiscount() && (data.endDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React.createElement("p", {
7956
7871
  style: {
7957
- // fontSize: '20px',
7872
+ fontSize: '20px',
7958
7873
  marginTop: '0px'
7959
7874
  }
7960
7875
  }, /*#__PURE__*/React.createElement("span", {
7961
7876
  className: classes.originalPrice
7962
- }, "\u20B9 ", data.price), ' ', /*#__PURE__*/React.createElement("span", {
7877
+ }, finalPrice), ' ', /*#__PURE__*/React.createElement("span", {
7963
7878
  className: classes.offerDiscount
7964
7879
  }, `${data && discount(data)}%`))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
7965
7880
  style: {
@@ -7968,7 +7883,7 @@ const SingleVideoSlide = props => {
7968
7883
  data: {
7969
7884
  // link: 'headerData?.loginCtaLink',
7970
7885
  // isLink: 1,
7971
- value: 'BUY NOW'
7886
+ value: buyNowText
7972
7887
  // isExternal: 1
7973
7888
  },
7974
7889
 
@@ -8004,14 +7919,14 @@ function CoursePromotionPage({
8004
7919
  sectionIndex
8005
7920
  }) {
8006
7921
  const {
8007
- isMobile,
8008
7922
  layout: {
8009
7923
  containerWidth
8010
- }
7924
+ },
7925
+ countryCode,
7926
+ currencySymbol
8011
7927
  } = useContext(PageContext);
8012
7928
  const classes = useCoursePromotionPage({
8013
- containerWidth,
8014
- isMobile
7929
+ containerWidth
8015
7930
  });
8016
7931
  return /*#__PURE__*/React.createElement("div", {
8017
7932
  className: classes.courseSuperContainer
@@ -8024,7 +7939,9 @@ function CoursePromotionPage({
8024
7939
  courseBuyNow: extraProps.courseBuyNow,
8025
7940
  showCourseInstallment: extraProps.showCourseInstallment,
8026
7941
  conversions: extraProps.conversions,
8027
- sectionIndex: sectionIndex
7942
+ sectionIndex: sectionIndex,
7943
+ countryCode: countryCode,
7944
+ currencySymbol: currencySymbol
8028
7945
  }))));
8029
7946
  }
8030
7947
 
@@ -8035,9 +7952,7 @@ var index$3 = /*#__PURE__*/Object.freeze({
8035
7952
 
8036
7953
  const useFormPageStyles = createUseStyles(theme => ({
8037
7954
  formPageSection: {
8038
- padding: ({
8039
- isMobile
8040
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
7955
+ padding: '35px 70px',
8041
7956
  background: '#F4F9FF',
8042
7957
  '&, & *, & *:before, & *:after': {
8043
7958
  fontFamily: theme?.typography?.fontFamily,
@@ -8048,82 +7963,77 @@ const useFormPageStyles = createUseStyles(theme => ({
8048
7963
  textAlign: 'center'
8049
7964
  },
8050
7965
  formPageTitle: {
8051
- fontSize: theme.typography.fontSize.h2,
8052
- fontWeight: theme.typography.fontWeight.bold
7966
+ fontSize: '50px',
7967
+ fontWeight: '700'
8053
7968
  },
8054
7969
  formPageSubtitle: {
8055
- marginTop: '8px',
8056
- fontSize: theme.typography.fontSize.h6,
7970
+ marginTop: '16px',
7971
+ fontSize: '16px',
8057
7972
  lineHeight: '23px',
8058
7973
  color: 'rgba(51, 51, 51, 0.5)',
8059
- marginBottom: theme.spacing.margin.tiny
7974
+ marginBottom: '32px'
8060
7975
  },
8061
7976
  formPageFormContainer: {
7977
+ marginTop: '32px',
8062
7978
  '& form': {
8063
- padding: '72px',
7979
+ padding: '35px 140px',
8064
7980
  background: '#FFFFFF',
8065
7981
  borderRadius: '8px',
8066
7982
  boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.16)'
8067
7983
  }
8068
7984
  },
8069
7985
  inputField: {
8070
- marginTop: '12px'
8071
- // padding: '12px 16px',
8072
- // border: '1px solid #D8E0F0',
8073
- // borderRadius: '16px'
7986
+ marginTop: '20px',
7987
+ padding: '20px',
7988
+ border: '1px solid #D8E0F0',
7989
+ borderRadius: '16px'
8074
7990
  },
8075
-
8076
7991
  inputFieldLabel: {
8077
7992
  color: '#333',
8078
- fontSize: theme.typography.fontSize.subHead,
8079
- fontWeight: theme.typography.fontWeight.semiBold,
7993
+ fontSize: '20px',
8080
7994
  display: 'block',
8081
- marginTop: '20px',
8082
- marginBottom: '12px'
7995
+ marginBottom: '10px'
8083
7996
  },
8084
7997
  inputFieldControl: {
8085
7998
  width: '100%',
7999
+ height: '50px',
8086
8000
  borderRadius: '8px',
8087
8001
  border: '1px solid #D8E0F0',
8088
- padding: '12px 16px',
8002
+ padding: '5px 10px',
8089
8003
  color: '#7D8592',
8090
- fontSize: theme.typography.fontSize.subHead
8004
+ fontSize: '16px'
8091
8005
  },
8092
8006
  checkboxField: {
8093
- // padding: '20px',
8094
- // border: '1px solid #D8E0F0',
8095
- // borderRadius: '8px'
8007
+ marginTop: '20px',
8008
+ padding: '20px',
8009
+ border: '1px solid #D8E0F0',
8010
+ borderRadius: '8px'
8096
8011
  },
8097
8012
  checkBoxFieldLabel: {
8098
8013
  color: '#333',
8099
- fontSize: theme.typography.fontSize.subHead,
8100
- fontWeight: theme.typography.fontWeight.semiBold,
8101
- marginTop: '20px',
8102
- marginBottom: '12px'
8014
+ fontSize: '20px',
8015
+ margin: '10px 0'
8103
8016
  },
8104
8017
  inputFieldRequired: {
8105
8018
  color: '#F41828'
8106
8019
  },
8107
8020
  checkboxFieldControl: {
8108
- padding: '8px 0',
8021
+ padding: '6px 0',
8109
8022
  '& label': {
8110
- fontSize: theme.typography.fontSize.subHead,
8023
+ fontFamily: '16px',
8111
8024
  marginLeft: '10px',
8112
8025
  color: '#7D8592'
8113
8026
  }
8114
8027
  },
8115
8028
  submitBtnContainer: {
8116
- marginTop: theme.spacing.margin.tiny,
8117
- display: 'flex',
8118
- alignItems: 'center',
8119
- justifyContent: 'center',
8029
+ marginTop: '20px',
8120
8030
  width: '100%',
8121
8031
  margin: '0 auto',
8122
8032
  '& button': {
8123
- // height: '44px',
8124
- padding: '16px 24px',
8033
+ height: '44px',
8034
+ padding: '10px 40px',
8125
8035
  color: '#FFFFFF',
8126
- fontSize: theme.typography.fontSize.subHead,
8036
+ fontSize: '16px',
8127
8037
  cursor: 'pointer',
8128
8038
  borderRadius: '8px'
8129
8039
  }
@@ -8138,14 +8048,8 @@ const useFormPageStyles = createUseStyles(theme => ({
8138
8048
  },
8139
8049
  formPageFormContainer: {
8140
8050
  '& form': {
8141
- padding: '16px'
8051
+ padding: '24px'
8142
8052
  }
8143
- },
8144
- inputFieldLabel: {
8145
- marginBottom: '8px'
8146
- },
8147
- checkBoxFieldLabel: {
8148
- marginBottom: '8px'
8149
8053
  }
8150
8054
  }
8151
8055
  }));
@@ -8192,16 +8096,13 @@ const FormPage = ({
8192
8096
  extraProps = {}
8193
8097
  }) => {
8194
8098
  const [formData, setFormData] = useState({});
8099
+ const classes = useFormPageStyles();
8195
8100
  const [formSubmitted, setformSubmitted] = useState(false);
8196
8101
  const metadata = sectionData?.components?.[0]?.metadata || formPageMock;
8197
8102
  const {
8198
8103
  _id,
8199
- baseURLs,
8200
- isMobile
8104
+ baseURLs
8201
8105
  } = useContext(PageContext);
8202
- const classes = useFormPageStyles({
8203
- isMobile
8204
- });
8205
8106
  const handleSubmit = async e => {
8206
8107
  e.preventDefault();
8207
8108
  let formResponse = [];
@@ -8408,18 +8309,16 @@ const useTilesStyles = createUseStyles(theme => {
8408
8309
  alignItems: 'center',
8409
8310
  display: 'flex',
8410
8311
  flexDirection: 'column',
8411
- padding: ({
8412
- isMobile
8413
- } = {}) => isMobile ? `16px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`
8312
+ marginTop: '20px'
8414
8313
  },
8415
8314
  tileDiv: {
8416
8315
  width: '236px',
8417
- // height: '160px',
8418
- aspectRatio: '3/2',
8316
+ height: '160px',
8419
8317
  position: 'relative',
8420
8318
  borderRadius: '16px',
8421
8319
  overflow: 'hidden',
8422
- cursor: 'pointer'
8320
+ cursor: 'pointer',
8321
+ margin: '1rem'
8423
8322
  },
8424
8323
  tileImg: {
8425
8324
  objectFit: 'cover',
@@ -8434,8 +8333,8 @@ const useTilesStyles = createUseStyles(theme => {
8434
8333
  top: '12%',
8435
8334
  left: '7%',
8436
8335
  color: 'white',
8437
- fontWeight: theme.typography.fontWeight.semiBold,
8438
- fontSize: theme.typography.fontSize.h5,
8336
+ fontWeight: '600',
8337
+ fontSize: '20px',
8439
8338
  width: '150px'
8440
8339
  },
8441
8340
  row: {
@@ -8443,28 +8342,25 @@ const useTilesStyles = createUseStyles(theme => {
8443
8342
  flexDirection: 'row',
8444
8343
  justifyContent: 'center',
8445
8344
  flexWrap: 'wrap',
8446
- width: '100%',
8447
- gap: '24px'
8345
+ width: '85%',
8346
+ marginBottom: '3rem'
8448
8347
  },
8449
8348
  header: {
8450
- fontWeight: theme.typography.fontWeight.bold,
8451
- fontSize: theme.typography.fontSize.h2,
8349
+ fontWeight: '700',
8350
+ fontSize: '46px',
8452
8351
  lineHeight: '46px',
8352
+ marginBottom: '1rem',
8453
8353
  textAlign: 'center',
8354
+ marginTop: '3rem',
8454
8355
  color: '#2D2D2D'
8455
8356
  },
8456
8357
  headerTitle: {
8457
- fontWeight: theme.typography.fontWeight.regular,
8458
- fontSize: theme.typography.fontSize.subHead,
8358
+ fontWeight: '400',
8359
+ fontSize: '24px',
8459
8360
  lineHeight: '46px',
8460
8361
  color: '#7D8592',
8461
- marginBottom: theme.spacing.margin.tiny,
8362
+ marginBottom: '3rem',
8462
8363
  textAlign: 'center'
8463
- },
8464
- '@media screen and (max-width: 767px)': {
8465
- tileDiv: {
8466
- width: 'calc(53% - 24px)'
8467
- }
8468
8364
  }
8469
8365
  };
8470
8366
  });
@@ -8473,6 +8369,7 @@ function Tiles({
8473
8369
  sectionData,
8474
8370
  sectionIndex
8475
8371
  }) {
8372
+ const classes = useTilesStyles({});
8476
8373
  const {
8477
8374
  isMobile,
8478
8375
  layout: {
@@ -8481,9 +8378,6 @@ function Tiles({
8481
8378
  isPreview,
8482
8379
  isEdit
8483
8380
  } = useContext(PageContext);
8484
- const classes = useTilesStyles({
8485
- isMobile
8486
- });
8487
8381
  const nodeData = sectionData.components;
8488
8382
  const tilesList = nodeData[0]?.tilesList.components;
8489
8383
  const handleClick = value => {
@@ -8694,7 +8588,8 @@ function Section({
8694
8588
  style: {
8695
8589
  textAlign: 'center',
8696
8590
  width: '100%',
8697
- backgroundColor: '#ffffff'
8591
+ backgroundColor: '#ffffff',
8592
+ padding: '0px 24px'
8698
8593
  }
8699
8594
  }, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("p", {
8700
8595
  style: {
@@ -8721,10 +8616,10 @@ function Section({
8721
8616
  marginBottom: '15px'
8722
8617
  },
8723
8618
  ref: body?.components[1]?.refSetter
8724
- }, body?.components[1]?.metadata?.text), /*#__PURE__*/React.createElement("p", {
8619
+ }, body?.components[1]?.metadata?.text), /*#__PURE__*/React.createElement("div", {
8725
8620
  style: {
8726
8621
  maxWidth: '435px',
8727
- margin: 'auto',
8622
+ // margin: '0px 10px',
8728
8623
  // fontFamily: 'Roboto',
8729
8624
  fontStyle: 'normal',
8730
8625
  fontWeight: '400',