diy-template-components 0.2.80 → 0.2.82

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/build/index.es.js +968 -1075
  2. package/build/index.es.js.map +1 -1
  3. package/build/index.js +968 -1075
  4. package/build/index.js.map +1 -1
  5. package/package.json +3 -3
package/build/index.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,
@@ -6226,8 +6117,6 @@ function TeamCard({
6226
6117
  }, /*#__PURE__*/React.createElement("div", {
6227
6118
  className: classes.sectionContainer
6228
6119
  }, /*#__PURE__*/React.createElement("div", {
6229
- className: classes.partialBackground
6230
- }), /*#__PURE__*/React.createElement("div", {
6231
6120
  className: classes.teamHeading
6232
6121
  }, /*#__PURE__*/React.createElement("span", {
6233
6122
  ref: teamData?.teamHeading?.refSetter,
@@ -6263,21 +6152,17 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6263
6152
  flexDirection: 'column',
6264
6153
  alignItems: 'center',
6265
6154
  backgroundColor: theme?.palette?.background?.default,
6266
- padding: ({
6267
- isMobile
6268
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
6269
6155
  '&, & *, & *:before, & *:after': {
6270
6156
  fontFamily: theme?.typography?.fontFamily,
6271
6157
  boxSizing: 'border-box'
6158
+ },
6159
+ '& h2,& h3': {
6160
+ fontWeight: '500',
6161
+ '& b,& strong': {
6162
+ fontWeight: '700'
6163
+ }
6272
6164
  }
6273
- // '& h2,& h3': {
6274
- // fontWeight: '500',
6275
- // '& b,& strong': {
6276
- // fontWeight: '700'
6277
- // }
6278
- // }
6279
6165
  },
6280
-
6281
6166
  formContainer: {
6282
6167
  margin: '0 auto',
6283
6168
  maxWidth: ({
@@ -6296,14 +6181,14 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6296
6181
  backgroundColor: theme?.palette?.background?.default,
6297
6182
  boxShadow: theme?.shadows?.secondary,
6298
6183
  borderRadius: theme?.shape?.borderRadius?.regular,
6299
- padding: '48px',
6184
+ margin: '60px 10%',
6185
+ padding: '40px 80px',
6300
6186
  position: 'relative'
6301
6187
  },
6302
6188
  title: {
6303
6189
  margin: '0',
6304
- fontSize: theme.typography.fontSize.h2,
6190
+ fontSize: '56px',
6305
6191
  color: theme?.palette?.font?.secondary,
6306
- fontWeight: theme.typography.fontWeight.bold,
6307
6192
  lineHeight: '71px',
6308
6193
  letterSpacing: '-3px',
6309
6194
  textAlign: 'left',
@@ -6311,19 +6196,16 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6311
6196
  },
6312
6197
  contentContainer: {
6313
6198
  width: '100%',
6314
- display: 'flex'
6315
- // alignItems: 'flex-start',
6199
+ display: 'flex',
6200
+ alignItems: 'flex-start',
6201
+ marginTop: '32px'
6316
6202
  },
6317
-
6318
6203
  leftContainer: {
6319
- width: '65%',
6320
- display: 'flex',
6321
- flexDirection: 'column',
6322
- justifyContent: 'space-between'
6204
+ width: '65%'
6323
6205
  },
6324
6206
  subtitle: {
6325
- // margin: '0 0 40px 0',
6326
- fontSize: theme.typography.fontSize.h6,
6207
+ margin: '0 0 40px 0',
6208
+ fontSize: '20px',
6327
6209
  color: theme?.palette?.font?.primary,
6328
6210
  lineHeight: '32px',
6329
6211
  wordBreak: 'break-word'
@@ -6345,16 +6227,13 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6345
6227
  padding: '4px 8px 0 0'
6346
6228
  },
6347
6229
  addressText: {
6348
- fontSize: theme.typography.fontSize.subHead,
6230
+ fontSize: '16px',
6349
6231
  color: theme?.palette?.font?.default,
6350
6232
  lineHeight: '24px'
6351
6233
  },
6352
6234
  rightContainer: {
6353
6235
  width: '50%',
6354
- padding: '0 0 0 80px',
6355
- display: 'flex',
6356
- flexDirection: 'column',
6357
- justifyContent: 'space-between'
6236
+ padding: '0 0 0 80px'
6358
6237
  },
6359
6238
  inputDiv: {
6360
6239
  margin: '0 0 20px 0',
@@ -6368,8 +6247,8 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6368
6247
  alignItems: 'center'
6369
6248
  },
6370
6249
  sectionContainer: {
6371
- // margin: '26px 16px',
6372
- padding: '16px'
6250
+ margin: '26px 16px',
6251
+ padding: '32px 16px'
6373
6252
  },
6374
6253
  partialBackground: {
6375
6254
  height: '150px'
@@ -6379,32 +6258,26 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6379
6258
  marginTop: '8px'
6380
6259
  },
6381
6260
  leftContainer: {
6382
- width: '100%'
6383
- // padding: '0 16ox'
6261
+ width: '100%',
6262
+ padding: '0 16ox'
6384
6263
  },
6385
-
6386
6264
  rightContainer: {
6387
6265
  width: '100%',
6388
6266
  padding: '0'
6389
6267
  },
6390
6268
  title: {
6391
- // fontSize: '24px',
6269
+ fontSize: '24px',
6392
6270
  lineHeight: '32px',
6393
- letterSpacing: 'initial',
6394
- margin: '0 0 16px 0',
6395
- textAlign: 'center'
6271
+ letterSpacing: 'initial'
6396
6272
  },
6397
6273
  subtitle: {
6398
- margin: '0 0 16px 0',
6399
- lineHeight: '26px',
6400
- textAlign: 'center'
6274
+ margin: '0 0 12px 0'
6401
6275
  },
6402
6276
  inputDiv: {
6403
- margin: '0 0 16px 0'
6277
+ margin: '0 0 10px 0'
6404
6278
  },
6405
6279
  addressRow: {
6406
- padding: '0px',
6407
- margin: '0 0 16px 0'
6280
+ padding: '12px 0'
6408
6281
  }
6409
6282
  }
6410
6283
  }));
@@ -6423,8 +6296,7 @@ function FormEnquiry({
6423
6296
  isEdit
6424
6297
  } = useContext(PageContext);
6425
6298
  const classes = useSectionStyles$1({
6426
- containerWidth,
6427
- isMobile
6299
+ containerWidth
6428
6300
  });
6429
6301
  const [nodeData] = sectionData.components;
6430
6302
  const theme = useTheme();
@@ -6483,10 +6355,6 @@ function FormEnquiry({
6483
6355
  className: classes.partialBackground
6484
6356
  }), /*#__PURE__*/React.createElement("div", {
6485
6357
  className: classes.sectionContainer
6486
- }, /*#__PURE__*/React.createElement("div", {
6487
- className: classes.contentContainer
6488
- }, /*#__PURE__*/React.createElement("div", {
6489
- className: classes.leftContainer
6490
6358
  }, /*#__PURE__*/React.createElement("h2", {
6491
6359
  className: classes.title
6492
6360
  }, /*#__PURE__*/React.createElement("span", {
@@ -6495,6 +6363,10 @@ function FormEnquiry({
6495
6363
  __html: nodeData?.title?.metadata?.value
6496
6364
  }
6497
6365
  })), /*#__PURE__*/React.createElement("div", {
6366
+ className: classes.contentContainer
6367
+ }, /*#__PURE__*/React.createElement("div", {
6368
+ className: classes.leftContainer
6369
+ }, /*#__PURE__*/React.createElement("div", {
6498
6370
  ref: nodeData?.subtitle?.refSetter,
6499
6371
  className: classes.subtitle,
6500
6372
  dangerouslySetInnerHTML: {
@@ -6634,7 +6506,7 @@ function FormEnquiry({
6634
6506
  messageValid: 1
6635
6507
  });
6636
6508
  }
6637
- })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
6509
+ })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React.createElement(Button, {
6638
6510
  ref: nodeData?.cta?.refSetter,
6639
6511
  data: btnDisabled && validData?.messageValid && validData?.emailValid && validData?.nameValid && validData?.phoneValid ? {
6640
6512
  value: 'Submitted'
@@ -6645,7 +6517,7 @@ function FormEnquiry({
6645
6517
  type: nodeData?.cta?.metadata?.type,
6646
6518
  size: isMobile ? 'small' : 'medium',
6647
6519
  disabled: btnDisabled
6648
- })))))));
6520
+ }))))));
6649
6521
  }
6650
6522
 
6651
6523
  var index$6 = /*#__PURE__*/Object.freeze({
@@ -6661,24 +6533,20 @@ const useSectionStyles = createUseStyles(theme => ({
6661
6533
  justifyContent: 'center',
6662
6534
  flexDirection: 'column',
6663
6535
  alignItems: 'center',
6664
- padding: ({
6665
- isMobile
6666
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
6667
6536
  backgroundColor: theme?.palette?.background?.default,
6668
6537
  '&, & *, & *:before, & *:after': {
6669
6538
  fontFamily: theme?.typography?.fontFamily,
6670
6539
  boxSizing: 'border-box'
6540
+ },
6541
+ '& h2,& h3': {
6542
+ fontWeight: '500',
6543
+ '& b,& strong': {
6544
+ fontWeight: '700'
6545
+ }
6671
6546
  }
6672
- // '& h2,& h3': {
6673
- // fontWeight: '500',
6674
- // '& b,& strong': {
6675
- // fontWeight: '700'
6676
- // }
6677
- // }
6678
6547
  },
6679
-
6680
6548
  contactContainer: {
6681
- width: '100%',
6549
+ width: '80%',
6682
6550
  margin: '0 auto',
6683
6551
  maxWidth: ({
6684
6552
  containerWidth
@@ -6696,12 +6564,13 @@ const useSectionStyles = createUseStyles(theme => ({
6696
6564
  backgroundColor: theme?.palette?.background?.default,
6697
6565
  boxShadow: theme?.shadows?.secondary,
6698
6566
  borderRadius: theme?.shape?.borderRadius?.regular,
6699
- padding: '48px',
6567
+ margin: '60px',
6568
+ padding: '40px 80px',
6700
6569
  position: 'relative'
6701
6570
  },
6702
6571
  title: {
6703
6572
  margin: '0',
6704
- fontSize: theme.typography.fontSize.h2,
6573
+ fontSize: '56px',
6705
6574
  color: theme?.palette?.font?.secondary,
6706
6575
  lineHeight: '71px',
6707
6576
  letterSpacing: '-3px',
@@ -6711,37 +6580,36 @@ const useSectionStyles = createUseStyles(theme => ({
6711
6580
  contentContainer: {
6712
6581
  width: '100%',
6713
6582
  display: 'flex',
6714
- justifyContent: 'space-between',
6583
+ alignItems: 'flex-start',
6584
+ marginTop: '32px',
6715
6585
  wordBreak: 'break-word'
6716
6586
  },
6717
6587
  leftContainer: {
6718
- width: '50%',
6719
- display: 'flex',
6720
- flexDirection: 'column',
6721
- justifyContent: 'space-between'
6588
+ width: '50%'
6722
6589
  },
6723
6590
  subtitle: {
6724
- margin: '0 0 auto 0',
6725
- fontSize: theme.typography.fontSize.h6,
6591
+ margin: '0 0 58px 0',
6592
+ fontSize: '20px',
6726
6593
  color: theme?.palette?.font?.primary,
6727
- lineHeight: '32px',
6728
- margin: '20px 0px'
6594
+ lineHeight: '32px'
6729
6595
  },
6730
6596
  addressContainer: {
6731
6597
  display: 'flex',
6732
6598
  alignItems: 'flex-start',
6733
6599
  flexDirection: 'column',
6734
- width: '100%',
6735
- position: 'relative'
6600
+ width: '85%',
6601
+ position: 'relative',
6602
+ paddingBottom: '55%'
6603
+ // '& img': {
6604
+ // width: '80%'
6605
+ // }
6736
6606
  },
6607
+
6737
6608
  telephoneImage: {
6738
6609
  width: '80%'
6739
6610
  },
6740
6611
  rightContainer: {
6741
6612
  width: '50%',
6742
- display: 'flex',
6743
- flexDirection: 'column',
6744
- justifyContent: 'space-between',
6745
6613
  padding: '0 0 0 80px'
6746
6614
  },
6747
6615
  inputDiv: {
@@ -6755,16 +6623,16 @@ const useSectionStyles = createUseStyles(theme => ({
6755
6623
  background: theme?.palette?.background?.default,
6756
6624
  border: `1px solid ${theme?.palette?.border?.secondary}`,
6757
6625
  borderRadius: theme?.shape?.borderRadius?.regular,
6758
- // padding: '14px 12px',
6626
+ padding: '14px 12px',
6759
6627
  display: 'flex',
6760
6628
  fontWeight: '400',
6761
- fontSize: theme.typography.fontSize.subHead,
6629
+ fontSize: '16px',
6762
6630
  lineHeight: '20px',
6763
6631
  fontFamily: 'inherit',
6764
6632
  resize: 'none',
6765
6633
  '&::placeholder': {
6766
6634
  fontWeight: '400',
6767
- fontSize: theme.typography.fontSize.subHead,
6635
+ fontSize: '16px',
6768
6636
  lineHeight: '20px',
6769
6637
  color: theme?.palette?.font?.primary,
6770
6638
  fontFamily: theme?.typography?.fontFamily
@@ -6794,7 +6662,8 @@ const useSectionStyles = createUseStyles(theme => ({
6794
6662
  alignItems: 'center'
6795
6663
  },
6796
6664
  sectionContainer: {
6797
- padding: '16px'
6665
+ margin: '26px 16px',
6666
+ padding: '32px 16px'
6798
6667
  },
6799
6668
  partialBackground: {
6800
6669
  height: '150px'
@@ -6812,17 +6681,15 @@ const useSectionStyles = createUseStyles(theme => ({
6812
6681
  padding: '0'
6813
6682
  },
6814
6683
  title: {
6815
- lineHeight: '26px',
6816
- letterSpacing: 'initial',
6817
- textAlign: 'center'
6684
+ fontSize: '24px',
6685
+ lineHeight: '32px',
6686
+ letterSpacing: 'initial'
6818
6687
  },
6819
6688
  subtitle: {
6820
- margin: '0 0 12px 0',
6821
- textAlign: 'center',
6822
- lineHeight: '26px'
6689
+ margin: '0 0 12px 0'
6823
6690
  },
6824
6691
  addressRow: {
6825
- // padding: '12px 0'
6692
+ padding: '12px 0'
6826
6693
  },
6827
6694
  addressContainer: {
6828
6695
  '& img': {
@@ -6830,7 +6697,7 @@ const useSectionStyles = createUseStyles(theme => ({
6830
6697
  }
6831
6698
  },
6832
6699
  inputDiv: {
6833
- // margin: '0 0 10px 0'
6700
+ margin: '0 0 10px 0'
6834
6701
  },
6835
6702
  inputField: {
6836
6703
  width: '100%',
@@ -6862,8 +6729,7 @@ function Contact({
6862
6729
  let [btnDisabled, setBtnDisabled] = useState(false);
6863
6730
  const [nodeData] = sectionData.components;
6864
6731
  const classes = useSectionStyles({
6865
- containerWidth,
6866
- isMobile
6732
+ containerWidth
6867
6733
  });
6868
6734
  let formInitialValue = {
6869
6735
  name: nodeData?.nameField?.metadata?.value,
@@ -6919,10 +6785,6 @@ function Contact({
6919
6785
  className: classes.partialBackground
6920
6786
  }), /*#__PURE__*/React.createElement("div", {
6921
6787
  className: classes.sectionContainer
6922
- }, /*#__PURE__*/React.createElement("div", {
6923
- className: classes.contentContainer
6924
- }, /*#__PURE__*/React.createElement("div", {
6925
- className: classes.leftContainer
6926
6788
  }, /*#__PURE__*/React.createElement("h2", {
6927
6789
  className: classes.title
6928
6790
  }, /*#__PURE__*/React.createElement("span", {
@@ -6931,6 +6793,10 @@ function Contact({
6931
6793
  __html: nodeData?.title?.metadata?.value
6932
6794
  }
6933
6795
  })), /*#__PURE__*/React.createElement("div", {
6796
+ className: classes.contentContainer
6797
+ }, /*#__PURE__*/React.createElement("div", {
6798
+ className: classes.leftContainer
6799
+ }, /*#__PURE__*/React.createElement("div", {
6934
6800
  ref: nodeData?.subtitle?.refSetter,
6935
6801
  className: classes.subtitle,
6936
6802
  dangerouslySetInnerHTML: {
@@ -7033,9 +6899,7 @@ function Contact({
7033
6899
  messageValid: 1
7034
6900
  });
7035
6901
  }
7036
- })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React.createElement("div", {
7037
- className: classes.btnContainer
7038
- }, /*#__PURE__*/React.createElement(Button, {
6902
+ })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React.createElement(Button, {
7039
6903
  ref: nodeData?.cta?.refSetter,
7040
6904
  data: btnDisabled && validData?.messageValid && validData?.emailValid && validData?.nameValid && validData?.phoneValid ? {
7041
6905
  value: 'Submitted'
@@ -7047,7 +6911,7 @@ function Contact({
7047
6911
  size: isMobile ? 'small' : 'medium',
7048
6912
  disabled: btnDisabled,
7049
6913
  name: "button"
7050
- })))))));
6914
+ }))))));
7051
6915
  }
7052
6916
 
7053
6917
  var index$5 = /*#__PURE__*/Object.freeze({
@@ -7060,15 +6924,16 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7060
6924
  webinarSuperContainer: {
7061
6925
  display: 'flex',
7062
6926
  justifyContent: 'center',
7063
- padding: ({
7064
- isMobile
7065
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
6927
+ padding: '70px',
7066
6928
  '&, & *, & *:before, & *:after': {
7067
6929
  fontFamily: theme?.typography?.fontFamily,
7068
6930
  boxSizing: 'border-box'
7069
6931
  },
7070
- '& h2,& h3,& p': {
7071
- margin: '0'
6932
+ '& h2,& h3': {
6933
+ fontWeight: '500',
6934
+ '& b,& strong': {
6935
+ fontWeight: '700'
6936
+ }
7072
6937
  }
7073
6938
  },
7074
6939
  sectionContainer: {
@@ -7082,34 +6947,30 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7082
6947
  maxWidth: '1440px',
7083
6948
  fontFamily: theme?.typography?.fontFamily
7084
6949
  },
7085
- // videoTestimonialHeading: {
7086
- // fontSize: theme.typography.fontSize.subHead,
7087
- // lineHeight: '20px',
7088
- // letterSpacing: '3px',
7089
- // textTransform: 'uppercase',
7090
- // color: theme.palette.font.tertiary,
7091
- // wordBreak: 'break-word',
7092
- // fontWeight: theme.typography.fontWeight.bold,
7093
- // },
7094
-
7095
- // videoTestimonialTitle: {
7096
- // fontSize: theme.typography.fontSize.h2,
7097
- // lineHeight: '71px',
7098
- // fontWeight: theme.typography.fontWeight.bold,
7099
- // letterSpacing: '-3px',
7100
- // margin: '0',
7101
- // color: theme.palette.font.default,
7102
- // wordBreak: 'break-word'
7103
- // },
7104
-
7105
- // videoCarouselContainer: {
7106
- // marginTop: '16px'
7107
- // },
7108
-
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
+ },
7109
6970
  webinarCarousel: {
7110
6971
  display: 'flex',
7111
6972
  justifyContent: 'flex-start',
7112
- gap: '32px'
6973
+ gap: '20px'
7113
6974
  },
7114
6975
  '@media screen and (max-width: 767px)': {
7115
6976
  webinarCarousel: {
@@ -7124,21 +6985,18 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7124
6985
  alignItems: 'center'
7125
6986
  },
7126
6987
  iframeContainer: {
7127
- width: '100%',
6988
+ width: '90%',
7128
6989
  position: 'relative',
7129
6990
  paddingBottom: '56.25%',
7130
6991
  // top: "6%",
7131
- // left: '5%'
7132
- borderRadius: '8px',
7133
- overflow: 'hidden'
6992
+ left: '5%'
7134
6993
  },
7135
6994
  offerText: {
7136
6995
  textAlign: 'center',
7137
- color: theme.palette.font.primary,
7138
- marginBottom: '5%'
6996
+ color: theme.palette.font.primary
7139
6997
  },
7140
6998
  offerPrice: {
7141
- fontSize: theme.typography.fontSize.h5,
6999
+ fontSize: '28px',
7142
7000
  fontWeight: '600'
7143
7001
  },
7144
7002
  priceContainer: {
@@ -7157,10 +7015,9 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7157
7015
  bottomContainer: {
7158
7016
  display: 'flex',
7159
7017
  justifyContent: 'space-between',
7160
- marginTop: '5%'
7161
- // padding: '0px 5% 0px 5%'
7018
+ marginTop: '5%',
7019
+ padding: '0px 5% 0px 5%'
7162
7020
  },
7163
-
7164
7021
  iframe: {
7165
7022
  position: 'absolute',
7166
7023
  width: '100%',
@@ -7171,12 +7028,10 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7171
7028
  width: '100%',
7172
7029
  display: 'flex',
7173
7030
  flexDirection: 'column',
7174
- alignItems: 'flex-start',
7175
- gap: '20px'
7031
+ alignItems: 'flex-start'
7176
7032
  },
7177
7033
  videoDetailsHeading: {
7178
- fontSize: theme.typography.fontSize.h3,
7179
- fontWeight: theme.typography.fontWeight.bold,
7034
+ fontSize: '40px',
7180
7035
  lineHeight: '48px',
7181
7036
  margin: '0',
7182
7037
  letterSpacing: '-1px',
@@ -7190,7 +7045,7 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7190
7045
  display: 'flex',
7191
7046
  flexDirection: 'column',
7192
7047
  justifyContent: 'start',
7193
- padding: '24px',
7048
+ paddingTop: '20px',
7194
7049
  borderRadius: '10px'
7195
7050
  },
7196
7051
  bannerContainer: {
@@ -7203,12 +7058,14 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7203
7058
  position: 'relative',
7204
7059
  fontSize: '18px',
7205
7060
  transform: 'rotate(180deg)',
7206
- 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'
7207
7063
  },
7208
7064
  bannerContainerText: {
7209
7065
  transform: 'rotate(180deg)'
7210
7066
  },
7211
7067
  courseDetailsTags: {
7068
+ marginTop: '16px',
7212
7069
  display: 'flex'
7213
7070
  },
7214
7071
  courseDetailTag: {
@@ -7216,22 +7073,23 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7216
7073
  alignItems: 'center',
7217
7074
  marginRight: '20px',
7218
7075
  '& div': {
7219
- fontSize: theme.typography.fontSize.subHead,
7076
+ fontSize: '14px',
7220
7077
  marginLeft: '10px'
7221
7078
  }
7222
7079
  },
7223
7080
  courseDetailContent: {
7224
- fontSize: theme.typography.fontSize.subHead,
7081
+ marginTop: '16px',
7082
+ fontSize: '16px',
7225
7083
  wordBreak: 'break-word',
7226
7084
  color: theme.palette.font.primary,
7227
- whiteSpace: 'pre-wrap',
7228
- width: '80%'
7085
+ margin: '10px 0 20px',
7086
+ whiteSpace: 'pre-wrap'
7229
7087
  },
7230
7088
  courseDetailViewFullDetails: {
7231
7089
  cursor: 'pointer',
7232
- fontSize: theme.typography.fontSize.subHead,
7090
+ fontSize: '16px',
7233
7091
  lineHeight: '24px',
7234
- marginTop: '-20px',
7092
+ margin: '0',
7235
7093
  color: '#00ADE7',
7236
7094
  wordBreak: 'break-word'
7237
7095
  },
@@ -7239,10 +7097,9 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7239
7097
  color: '#EB5757',
7240
7098
  fontWeight: '600'
7241
7099
  },
7242
- // webinarButtonContainer: {
7243
- // marginBottom: '20px'
7244
- // },
7245
-
7100
+ webinarButtonContainer: {
7101
+ marginBottom: '20px'
7102
+ },
7246
7103
  iconBackground: {
7247
7104
  display: 'flex',
7248
7105
  width: '36px',
@@ -7274,10 +7131,11 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7274
7131
  width: '100%'
7275
7132
  },
7276
7133
  videoDetailsHeading: {
7134
+ fontSize: '16px',
7277
7135
  lineHeight: '20px'
7278
7136
  },
7279
7137
  videoTestimonialTitle: {
7280
- // fontSize: '24px',
7138
+ fontSize: '24px',
7281
7139
  lineHeight: '36px',
7282
7140
  letterSpacing: '-1px'
7283
7141
  },
@@ -7307,7 +7165,9 @@ const SingleVideoSlide$1 = props => {
7307
7165
  const {
7308
7166
  data,
7309
7167
  webinarCtaClick,
7310
- conversions = 0
7168
+ conversions = 0,
7169
+ countryCode,
7170
+ currencySymbol
7311
7171
  } = props;
7312
7172
  const renderer = ({
7313
7173
  days,
@@ -7317,11 +7177,14 @@ const SingleVideoSlide$1 = props => {
7317
7177
  completed
7318
7178
  }) => {
7319
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
+ }
7320
7183
  return /*#__PURE__*/React.createElement("span", null, hours, "h ", minutes, "m ", seconds, "s");
7321
7184
  } else {
7322
7185
  let given = moment(props.data.offerPriceEndDate);
7323
7186
  let current = moment().startOf('day');
7324
- 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)');
7325
7188
  }
7326
7189
  };
7327
7190
  const checkIfOfferIsValid = () => moment().diff(moment(props.data.offerPriceEndDate)) < 0;
@@ -7353,6 +7216,44 @@ const SingleVideoSlide$1 = props => {
7353
7216
  return (discount / price * 100).toFixed(2);
7354
7217
  };
7355
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';
7356
7257
  return /*#__PURE__*/React.createElement("div", {
7357
7258
  className: classes.videoCarouselContainer
7358
7259
  }, /*#__PURE__*/React.createElement("div", {
@@ -7365,11 +7266,11 @@ const SingleVideoSlide$1 = props => {
7365
7266
  className: classes.bannerContainer
7366
7267
  }, /*#__PURE__*/React.createElement("div", {
7367
7268
  className: classes.bannerContainerText
7368
- }, "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", {
7369
7270
  className: classes.bannerContainer
7370
7271
  }, /*#__PURE__*/React.createElement("div", {
7371
7272
  className: classes.bannerContainerText
7372
- }, "Hurry up! Offer for limited period only"))), /*#__PURE__*/React.createElement("h3", {
7273
+ }, limitedPeriodOfferText))), /*#__PURE__*/React.createElement("h3", {
7373
7274
  ref: data?.videoTextHeading?.refSetter,
7374
7275
  className: classes.videoDetailsHeading,
7375
7276
  dangerouslySetInnerHTML: {
@@ -7409,14 +7310,7 @@ const SingleVideoSlide$1 = props => {
7409
7310
  }
7410
7311
  }))), /*#__PURE__*/React.createElement("div", {
7411
7312
  className: classes.courseViewContainer
7412
- }, data.isPaid !== 0 && checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && /*#__PURE__*/React.createElement("p", {
7413
- className: classes.offerText
7414
- }, "Offer Ends in", ' ', /*#__PURE__*/React.createElement("span", {
7415
- className: classes.courseDetailTime
7416
- }, /*#__PURE__*/React.createElement(Countdown, {
7417
- renderer: renderer,
7418
- date: data.offerPriceEndDate
7419
- }))), /*#__PURE__*/React.createElement("div", {
7313
+ }, data.isPaid !== 0 && checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && renderOfferEndsInText(), /*#__PURE__*/React.createElement("div", {
7420
7314
  ref: data?.videoFrame?.refSetter,
7421
7315
  className: classes.iframeContainer
7422
7316
  }, /*#__PURE__*/React.createElement(VideoPlayer, {
@@ -7433,13 +7327,14 @@ const SingleVideoSlide$1 = props => {
7433
7327
  className: classes.priceContainer
7434
7328
  }, /*#__PURE__*/React.createElement("div", {
7435
7329
  className: classes.offerPrice
7436
- }, "\u20B9", data?.effectivePrice), checkForShowDiscount() && (data.offerPriceEndDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React.createElement("p", {
7330
+ }, effectivePrice), checkForShowDiscount() && (data.offerPriceEndDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React.createElement("p", {
7437
7331
  style: {
7438
- fontSize: '20px'
7332
+ fontSize: '20px',
7333
+ marginTop: '0px'
7439
7334
  }
7440
7335
  }, /*#__PURE__*/React.createElement("span", {
7441
7336
  className: classes.originalPrice
7442
- }, "\u20B9", data?.price), ' ', /*#__PURE__*/React.createElement("span", {
7337
+ }, finalPrice), ' ', /*#__PURE__*/React.createElement("span", {
7443
7338
  className: classes.offerDiscount
7444
7339
  }, `${data && discount(data)}%`))) : null, /*#__PURE__*/React.createElement("div", {
7445
7340
  className: classes.webinarButtonContainer
@@ -7451,7 +7346,7 @@ const SingleVideoSlide$1 = props => {
7451
7346
  data: {
7452
7347
  // link: 'headerData?.loginCtaLink',
7453
7348
  // isLink: 1,
7454
- value: data.isPaid ? 'BUY NOW' : 'REGISTER NOW'
7349
+ value: data.isPaid ? buyNowText : registerNowText
7455
7350
  // isExternal: 1
7456
7351
  },
7457
7352
 
@@ -7469,14 +7364,14 @@ function CoursePromotionPage$1({
7469
7364
  sectionIndex
7470
7365
  }) {
7471
7366
  const {
7472
- isMobile,
7473
7367
  layout: {
7474
7368
  containerWidth
7475
- }
7369
+ },
7370
+ countryCode,
7371
+ currencySymbol
7476
7372
  } = useContext(PageContext);
7477
7373
  const classes = useWebinarPromotionPage({
7478
- containerWidth,
7479
- isMobile
7374
+ containerWidth
7480
7375
  });
7481
7376
  return /*#__PURE__*/React.createElement("div", {
7482
7377
  className: classes.webinarSuperContainer
@@ -7488,7 +7383,9 @@ function CoursePromotionPage$1({
7488
7383
  data: sectionData.components[0].metadata,
7489
7384
  webinarCtaClick: extraProps.webinarCtaClick,
7490
7385
  conversions: extraProps.conversions,
7491
- sectionIndex: sectionIndex
7386
+ sectionIndex: sectionIndex,
7387
+ countryCode: countryCode,
7388
+ currencySymbol: currencySymbol
7492
7389
  }))));
7493
7390
  }
7494
7391
 
@@ -7498,26 +7395,22 @@ var index$4 = /*#__PURE__*/Object.freeze({
7498
7395
  });
7499
7396
 
7500
7397
  const useCoursePromotionPage = createUseStyles(theme => {
7501
- debugger;
7502
7398
  return {
7503
7399
  courseSuperContainer: {
7504
7400
  display: 'flex',
7505
7401
  justifyContent: 'center',
7506
- padding: ({
7507
- isMobile
7508
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
7402
+ padding: '70px ',
7509
7403
  '&, & *, & *:before, & *:after': {
7510
7404
  fontFamily: theme?.typography?.fontFamily,
7511
7405
  boxSizing: 'border-box'
7406
+ },
7407
+ '& h2,& h3': {
7408
+ fontWeight: '500',
7409
+ '& b,& strong': {
7410
+ fontWeight: '700'
7411
+ }
7512
7412
  }
7513
- // '& h2,& h3': {
7514
- // fontWeight: '500',
7515
- // '& b,& strong': {
7516
- // fontWeight: '700'
7517
- // }
7518
- // }
7519
7413
  },
7520
-
7521
7414
  sectionContainer: {
7522
7415
  margin: '0 auto',
7523
7416
  maxWidth: ({
@@ -7530,7 +7423,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
7530
7423
  fontFamily: theme?.typography?.fontFamily
7531
7424
  },
7532
7425
  videoTestimonialHeading: {
7533
- fontSize: theme.typography.fontSize.subHead,
7426
+ fontSize: '16px',
7534
7427
  lineHeight: '20px',
7535
7428
  letterSpacing: '3px',
7536
7429
  textTransform: 'uppercase',
@@ -7539,7 +7432,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
7539
7432
  fontWeight: '700'
7540
7433
  },
7541
7434
  videoTestimonialTitle: {
7542
- fontSize: theme.typography.fontSize.h2,
7435
+ fontSize: '56px',
7543
7436
  lineHeight: '71px',
7544
7437
  letterSpacing: '-3px',
7545
7438
  margin: '0',
@@ -7547,12 +7440,12 @@ const useCoursePromotionPage = createUseStyles(theme => {
7547
7440
  wordBreak: 'break-word'
7548
7441
  },
7549
7442
  videoCarouselContainer: {
7550
- // marginTop: '16px'
7443
+ marginTop: '16px'
7551
7444
  },
7552
7445
  coursePageCarousel: {
7553
7446
  display: 'flex',
7554
7447
  justifyContent: 'flex-start',
7555
- gap: '32px'
7448
+ gap: '20px'
7556
7449
  },
7557
7450
  '@media screen and (max-width: 767px)': {
7558
7451
  coursePageCarousel: {
@@ -7567,19 +7460,18 @@ const useCoursePromotionPage = createUseStyles(theme => {
7567
7460
  alignItems: 'center'
7568
7461
  },
7569
7462
  iframeContainer: {
7570
- width: '100%',
7463
+ width: '90%',
7571
7464
  position: 'relative',
7572
- paddingBottom: '56.25%'
7465
+ paddingBottom: '56.25%',
7573
7466
  // top: "6%",
7574
- // left: '5%'
7467
+ left: '5%'
7575
7468
  },
7576
-
7577
7469
  offerText: {
7578
7470
  textAlign: 'center',
7579
7471
  color: theme.palette.font.primary
7580
7472
  },
7581
7473
  offerPrice: {
7582
- fontSize: theme.typography.fontSize.h4,
7474
+ fontSize: '28px',
7583
7475
  fontWeight: '700'
7584
7476
  },
7585
7477
  priceContainer: {
@@ -7597,7 +7489,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
7597
7489
  fontWeight: '600'
7598
7490
  },
7599
7491
  bottomContainer: {
7600
- width: '100%',
7492
+ width: '90%',
7601
7493
  marginLeft: 'auto',
7602
7494
  marginRight: 'auto',
7603
7495
  display: 'flex',
@@ -7614,11 +7506,10 @@ const useCoursePromotionPage = createUseStyles(theme => {
7614
7506
  width: '100%',
7615
7507
  display: 'flex',
7616
7508
  flexDirection: 'column',
7617
- alignItems: 'flex-start',
7618
- gap: '20px'
7509
+ alignItems: 'flex-start'
7619
7510
  },
7620
7511
  videoDetailsHeading: {
7621
- fontSize: theme.typography.fontSize.h3,
7512
+ fontSize: '40px',
7622
7513
  lineHeight: '48px',
7623
7514
  margin: '0',
7624
7515
  letterSpacing: '-1px',
@@ -7629,13 +7520,11 @@ const useCoursePromotionPage = createUseStyles(theme => {
7629
7520
  width: '445px',
7630
7521
  backgroundColor: '#f4f9ff',
7631
7522
  display: 'flex',
7632
- padding: '24px',
7633
7523
  flexDirection: 'column',
7634
- borderRadius: '10px'
7635
- // paddingBottom: '10px',
7636
- // paddingTop: '10px'
7524
+ borderRadius: '10px',
7525
+ paddingBottom: '10px',
7526
+ paddingTop: '10px'
7637
7527
  },
7638
-
7639
7528
  bannerContainer: {
7640
7529
  width: '100%',
7641
7530
  background: '#EB5757',
@@ -7644,12 +7533,11 @@ const useCoursePromotionPage = createUseStyles(theme => {
7644
7533
  padding: '10px 10px 23px 40px',
7645
7534
  wordWrap: 'break-word',
7646
7535
  position: 'relative',
7647
- fontSize: theme.typography.fontSize.subHead,
7536
+ fontSize: '18px',
7648
7537
  transform: 'rotate(180deg)',
7649
- clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 calc(100% - 10px), 15px calc(50% - 10px/2))'
7650
- // 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'
7651
7540
  },
7652
-
7653
7541
  bannerContainerText: {
7654
7542
  transform: 'rotate(180deg)'
7655
7543
  },
@@ -7660,15 +7548,16 @@ const useCoursePromotionPage = createUseStyles(theme => {
7660
7548
  },
7661
7549
  courseEmblem: {
7662
7550
  background: '#F0F4F8',
7663
- fontSize: theme.typography.fontSize.subHead,
7664
7551
  borderRadius: '2.00337px',
7665
7552
  padding: '8px',
7666
7553
  display: 'flex',
7667
7554
  alignItems: 'center',
7668
- justifyContent: 'center'
7555
+ justifyContent: 'center',
7556
+ marginTop: '20px',
7557
+ marginBottom: '20px'
7669
7558
  },
7670
7559
  courseDetailsTags: {
7671
- // marginTop: '16px',
7560
+ marginTop: '16px',
7672
7561
  display: 'flex',
7673
7562
  flexWrap: 'wrap'
7674
7563
  },
@@ -7678,14 +7567,13 @@ const useCoursePromotionPage = createUseStyles(theme => {
7678
7567
  alignItems: 'center',
7679
7568
  marginRight: '20px',
7680
7569
  '& div': {
7681
- fontSize: theme.typography.fontSize.subHead,
7682
- fontWeight: theme.typography.fontWeight.semiBold,
7570
+ fontSize: '14px',
7683
7571
  marginLeft: '10px'
7684
7572
  }
7685
7573
  },
7686
7574
  courseDetailContent: {
7687
- // marginTop: '16px',
7688
- fontSize: theme.typography.fontSize.subHead,
7575
+ marginTop: '16px',
7576
+ fontSize: '16px',
7689
7577
  lineHeight: '24px',
7690
7578
  wordBreak: 'break-word',
7691
7579
  color: theme.palette.font.primary,
@@ -7694,9 +7582,9 @@ const useCoursePromotionPage = createUseStyles(theme => {
7694
7582
  },
7695
7583
  courseDetailViewFullDetails: {
7696
7584
  cursor: 'pointer',
7697
- fontSize: theme.typography.fontSize.subHead,
7585
+ fontSize: '16px',
7698
7586
  lineHeight: '24px',
7699
- marginTop: '-24px',
7587
+ margin: '0',
7700
7588
  color: '#00ADE7',
7701
7589
  wordBreak: 'break-word'
7702
7590
  },
@@ -7743,34 +7631,33 @@ const useCoursePromotionPage = createUseStyles(theme => {
7743
7631
  },
7744
7632
  '@media (max-width: 767px)': {
7745
7633
  bannerContainerText: {
7746
- // fontSize: '16px'
7634
+ fontSize: '16px'
7747
7635
  },
7748
7636
  courseViewContainer: {
7749
7637
  width: '100%',
7750
7638
  paddingBottom: '10px'
7751
7639
  },
7752
- // courseSuperContainer: {
7753
- // padding: '20px 10px 60px 20px'
7754
- // },
7640
+ courseSuperContainer: {
7641
+ padding: '20px 10px 60px 20px'
7642
+ },
7755
7643
  videoCarousel: {
7756
7644
  flexDirection: 'column-reverse',
7757
7645
  gap: '20px'
7758
7646
  },
7759
7647
  videoCarouselContainer: {
7760
- height: 'max-content'
7761
- // paddingRight: '10px'
7648
+ height: 'max-content',
7649
+ paddingRight: '10px'
7762
7650
  },
7763
-
7764
7651
  videoDetails: {
7765
7652
  width: '100%'
7766
7653
  },
7767
7654
  videoDetailsHeading: {
7768
- // fontSize: '20px',
7655
+ fontSize: '20px',
7769
7656
  fontWeight: '600',
7770
7657
  lineHeight: '20px'
7771
7658
  },
7772
7659
  videoTestimonialTitle: {
7773
- // fontSize: '24px',
7660
+ fontSize: '24px',
7774
7661
  lineHeight: '36px',
7775
7662
  letterSpacing: '-1px'
7776
7663
  },
@@ -7808,18 +7695,23 @@ const SingleVideoSlide = props => {
7808
7695
  completed
7809
7696
  }) => {
7810
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
+ }
7811
7701
  return /*#__PURE__*/React.createElement("span", null, hours, "h ", minutes, "m ", seconds, "s");
7812
7702
  } else {
7813
7703
  let given = moment(props.data.endDate);
7814
7704
  let current = moment().startOf('day');
7815
- 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)');
7816
7706
  }
7817
7707
  };
7818
7708
  const {
7819
7709
  data,
7820
7710
  courseBuyNow,
7821
7711
  conversions = 20,
7822
- showCourseInstallment
7712
+ showCourseInstallment,
7713
+ countryCode,
7714
+ currencySymbol
7823
7715
  } = props;
7824
7716
  const showCourseInstallmentData = data?.courseOverviewData;
7825
7717
  const InstalmentData = isEdit ? data?.courseOverviewData?.installments?.formData?.installments[0].installmentAmount : data?.courseOverviewData?.installments?.formData?.installmentInfo?.installments[0].installmentPrice;
@@ -7852,6 +7744,34 @@ const SingleVideoSlide = props => {
7852
7744
  }) => {
7853
7745
  return (discount / price * 100).toFixed(2);
7854
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';
7855
7775
  return /*#__PURE__*/React.createElement("div", {
7856
7776
  className: classes.videoCarouselContainer
7857
7777
  }, /*#__PURE__*/React.createElement("div", {
@@ -7864,11 +7784,11 @@ const SingleVideoSlide = props => {
7864
7784
  className: classes.bannerContainer
7865
7785
  }, /*#__PURE__*/React.createElement("div", {
7866
7786
  className: classes.bannerContainerText
7867
- }, "Hurry up! Offer left for", ' ', data.offerPriceValidFor - conversions, " users now")) : checkIfOfferIsValid() && /*#__PURE__*/React.createElement("div", {
7787
+ }, renderHurryUpBannerText())) : checkIfOfferIsValid() && /*#__PURE__*/React.createElement("div", {
7868
7788
  className: classes.bannerContainer
7869
7789
  }, /*#__PURE__*/React.createElement("div", {
7870
7790
  className: classes.bannerContainerText
7871
- }, "Hurry up! Offer for limited period only"))), /*#__PURE__*/React.createElement("div", {
7791
+ }, limitedPeriodOfferText))), /*#__PURE__*/React.createElement("div", {
7872
7792
  className: classes.emblemContainer
7873
7793
  }, data?.courseOverviewData?.courseTagList.length && data?.courseOverviewData?.courseTagList?.map(data => {
7874
7794
  return /*#__PURE__*/React.createElement("div", {
@@ -7933,14 +7853,7 @@ const SingleVideoSlide = props => {
7933
7853
  }
7934
7854
  }, /*#__PURE__*/React.createElement("div", {
7935
7855
  className: classes.courseViewContainer
7936
- }, checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && /*#__PURE__*/React.createElement("p", {
7937
- className: classes.offerText
7938
- }, "Offer Ends in", ' ', /*#__PURE__*/React.createElement("span", {
7939
- className: classes.courseDetailTime
7940
- }, /*#__PURE__*/React.createElement(Countdown, {
7941
- renderer: renderer,
7942
- date: data.endDate
7943
- }))), /*#__PURE__*/React.createElement("div", {
7856
+ }, checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && renderOfferEndsInText(), /*#__PURE__*/React.createElement("div", {
7944
7857
  ref: data?.videoFrame?.refSetter,
7945
7858
  className: classes.iframeContainer
7946
7859
  }, /*#__PURE__*/React.createElement(VideoPlayer, {
@@ -7954,14 +7867,14 @@ const SingleVideoSlide = props => {
7954
7867
  className: classes.priceContainer
7955
7868
  }, /*#__PURE__*/React.createElement("div", {
7956
7869
  className: classes.offerPrice
7957
- }, "\u20B9 ", data.effectivePrice), checkForShowDiscount() && (data.endDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React.createElement("p", {
7870
+ }, effectivePrice), checkForShowDiscount() && (data.endDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React.createElement("p", {
7958
7871
  style: {
7959
- // fontSize: '20px',
7872
+ fontSize: '20px',
7960
7873
  marginTop: '0px'
7961
7874
  }
7962
7875
  }, /*#__PURE__*/React.createElement("span", {
7963
7876
  className: classes.originalPrice
7964
- }, "\u20B9 ", data.price), ' ', /*#__PURE__*/React.createElement("span", {
7877
+ }, finalPrice), ' ', /*#__PURE__*/React.createElement("span", {
7965
7878
  className: classes.offerDiscount
7966
7879
  }, `${data && discount(data)}%`))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
7967
7880
  style: {
@@ -7970,7 +7883,7 @@ const SingleVideoSlide = props => {
7970
7883
  data: {
7971
7884
  // link: 'headerData?.loginCtaLink',
7972
7885
  // isLink: 1,
7973
- value: 'BUY NOW'
7886
+ value: buyNowText
7974
7887
  // isExternal: 1
7975
7888
  },
7976
7889
 
@@ -8006,14 +7919,14 @@ function CoursePromotionPage({
8006
7919
  sectionIndex
8007
7920
  }) {
8008
7921
  const {
8009
- isMobile,
8010
7922
  layout: {
8011
7923
  containerWidth
8012
- }
7924
+ },
7925
+ countryCode,
7926
+ currencySymbol
8013
7927
  } = useContext(PageContext);
8014
7928
  const classes = useCoursePromotionPage({
8015
- containerWidth,
8016
- isMobile
7929
+ containerWidth
8017
7930
  });
8018
7931
  return /*#__PURE__*/React.createElement("div", {
8019
7932
  className: classes.courseSuperContainer
@@ -8026,7 +7939,9 @@ function CoursePromotionPage({
8026
7939
  courseBuyNow: extraProps.courseBuyNow,
8027
7940
  showCourseInstallment: extraProps.showCourseInstallment,
8028
7941
  conversions: extraProps.conversions,
8029
- sectionIndex: sectionIndex
7942
+ sectionIndex: sectionIndex,
7943
+ countryCode: countryCode,
7944
+ currencySymbol: currencySymbol
8030
7945
  }))));
8031
7946
  }
8032
7947
 
@@ -8037,9 +7952,7 @@ var index$3 = /*#__PURE__*/Object.freeze({
8037
7952
 
8038
7953
  const useFormPageStyles = createUseStyles(theme => ({
8039
7954
  formPageSection: {
8040
- padding: ({
8041
- isMobile
8042
- } = {}) => 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',
8043
7956
  background: '#F4F9FF',
8044
7957
  '&, & *, & *:before, & *:after': {
8045
7958
  fontFamily: theme?.typography?.fontFamily,
@@ -8050,82 +7963,77 @@ const useFormPageStyles = createUseStyles(theme => ({
8050
7963
  textAlign: 'center'
8051
7964
  },
8052
7965
  formPageTitle: {
8053
- fontSize: theme.typography.fontSize.h2,
8054
- fontWeight: theme.typography.fontWeight.bold
7966
+ fontSize: '50px',
7967
+ fontWeight: '700'
8055
7968
  },
8056
7969
  formPageSubtitle: {
8057
- marginTop: '8px',
8058
- fontSize: theme.typography.fontSize.h6,
7970
+ marginTop: '16px',
7971
+ fontSize: '16px',
8059
7972
  lineHeight: '23px',
8060
7973
  color: 'rgba(51, 51, 51, 0.5)',
8061
- marginBottom: theme.spacing.margin.tiny
7974
+ marginBottom: '32px'
8062
7975
  },
8063
7976
  formPageFormContainer: {
7977
+ marginTop: '32px',
8064
7978
  '& form': {
8065
- padding: '72px',
7979
+ padding: '35px 140px',
8066
7980
  background: '#FFFFFF',
8067
7981
  borderRadius: '8px',
8068
7982
  boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.16)'
8069
7983
  }
8070
7984
  },
8071
7985
  inputField: {
8072
- marginTop: '12px'
8073
- // padding: '12px 16px',
8074
- // border: '1px solid #D8E0F0',
8075
- // borderRadius: '16px'
7986
+ marginTop: '20px',
7987
+ padding: '20px',
7988
+ border: '1px solid #D8E0F0',
7989
+ borderRadius: '16px'
8076
7990
  },
8077
-
8078
7991
  inputFieldLabel: {
8079
7992
  color: '#333',
8080
- fontSize: theme.typography.fontSize.subHead,
8081
- fontWeight: theme.typography.fontWeight.semiBold,
7993
+ fontSize: '20px',
8082
7994
  display: 'block',
8083
- marginTop: '20px',
8084
- marginBottom: '12px'
7995
+ marginBottom: '10px'
8085
7996
  },
8086
7997
  inputFieldControl: {
8087
7998
  width: '100%',
7999
+ height: '50px',
8088
8000
  borderRadius: '8px',
8089
8001
  border: '1px solid #D8E0F0',
8090
- padding: '12px 16px',
8002
+ padding: '5px 10px',
8091
8003
  color: '#7D8592',
8092
- fontSize: theme.typography.fontSize.subHead
8004
+ fontSize: '16px'
8093
8005
  },
8094
8006
  checkboxField: {
8095
- // padding: '20px',
8096
- // border: '1px solid #D8E0F0',
8097
- // borderRadius: '8px'
8007
+ marginTop: '20px',
8008
+ padding: '20px',
8009
+ border: '1px solid #D8E0F0',
8010
+ borderRadius: '8px'
8098
8011
  },
8099
8012
  checkBoxFieldLabel: {
8100
8013
  color: '#333',
8101
- fontSize: theme.typography.fontSize.subHead,
8102
- fontWeight: theme.typography.fontWeight.semiBold,
8103
- marginTop: '20px',
8104
- marginBottom: '12px'
8014
+ fontSize: '20px',
8015
+ margin: '10px 0'
8105
8016
  },
8106
8017
  inputFieldRequired: {
8107
8018
  color: '#F41828'
8108
8019
  },
8109
8020
  checkboxFieldControl: {
8110
- padding: '8px 0',
8021
+ padding: '6px 0',
8111
8022
  '& label': {
8112
- fontSize: theme.typography.fontSize.subHead,
8023
+ fontFamily: '16px',
8113
8024
  marginLeft: '10px',
8114
8025
  color: '#7D8592'
8115
8026
  }
8116
8027
  },
8117
8028
  submitBtnContainer: {
8118
- marginTop: theme.spacing.margin.tiny,
8119
- display: 'flex',
8120
- alignItems: 'center',
8121
- justifyContent: 'center',
8029
+ marginTop: '20px',
8122
8030
  width: '100%',
8123
8031
  margin: '0 auto',
8124
8032
  '& button': {
8125
- // height: '44px',
8126
- padding: '16px 24px',
8033
+ height: '44px',
8034
+ padding: '10px 40px',
8127
8035
  color: '#FFFFFF',
8128
- fontSize: theme.typography.fontSize.subHead,
8036
+ fontSize: '16px',
8129
8037
  cursor: 'pointer',
8130
8038
  borderRadius: '8px'
8131
8039
  }
@@ -8140,14 +8048,8 @@ const useFormPageStyles = createUseStyles(theme => ({
8140
8048
  },
8141
8049
  formPageFormContainer: {
8142
8050
  '& form': {
8143
- padding: '16px'
8051
+ padding: '24px'
8144
8052
  }
8145
- },
8146
- inputFieldLabel: {
8147
- marginBottom: '8px'
8148
- },
8149
- checkBoxFieldLabel: {
8150
- marginBottom: '8px'
8151
8053
  }
8152
8054
  }
8153
8055
  }));
@@ -8194,16 +8096,13 @@ const FormPage = ({
8194
8096
  extraProps = {}
8195
8097
  }) => {
8196
8098
  const [formData, setFormData] = useState({});
8099
+ const classes = useFormPageStyles();
8197
8100
  const [formSubmitted, setformSubmitted] = useState(false);
8198
8101
  const metadata = sectionData?.components?.[0]?.metadata || formPageMock;
8199
8102
  const {
8200
8103
  _id,
8201
- baseURLs,
8202
- isMobile
8104
+ baseURLs
8203
8105
  } = useContext(PageContext);
8204
- const classes = useFormPageStyles({
8205
- isMobile
8206
- });
8207
8106
  const handleSubmit = async e => {
8208
8107
  e.preventDefault();
8209
8108
  let formResponse = [];
@@ -8410,18 +8309,16 @@ const useTilesStyles = createUseStyles(theme => {
8410
8309
  alignItems: 'center',
8411
8310
  display: 'flex',
8412
8311
  flexDirection: 'column',
8413
- padding: ({
8414
- isMobile
8415
- } = {}) => isMobile ? `16px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`
8312
+ marginTop: '20px'
8416
8313
  },
8417
8314
  tileDiv: {
8418
8315
  width: '236px',
8419
- // height: '160px',
8420
- aspectRatio: '3/2',
8316
+ height: '160px',
8421
8317
  position: 'relative',
8422
8318
  borderRadius: '16px',
8423
8319
  overflow: 'hidden',
8424
- cursor: 'pointer'
8320
+ cursor: 'pointer',
8321
+ margin: '1rem'
8425
8322
  },
8426
8323
  tileImg: {
8427
8324
  objectFit: 'cover',
@@ -8436,8 +8333,8 @@ const useTilesStyles = createUseStyles(theme => {
8436
8333
  top: '12%',
8437
8334
  left: '7%',
8438
8335
  color: 'white',
8439
- fontWeight: theme.typography.fontWeight.semiBold,
8440
- fontSize: theme.typography.fontSize.h5,
8336
+ fontWeight: '600',
8337
+ fontSize: '20px',
8441
8338
  width: '150px'
8442
8339
  },
8443
8340
  row: {
@@ -8445,28 +8342,25 @@ const useTilesStyles = createUseStyles(theme => {
8445
8342
  flexDirection: 'row',
8446
8343
  justifyContent: 'center',
8447
8344
  flexWrap: 'wrap',
8448
- width: '100%',
8449
- gap: '24px'
8345
+ width: '85%',
8346
+ marginBottom: '3rem'
8450
8347
  },
8451
8348
  header: {
8452
- fontWeight: theme.typography.fontWeight.bold,
8453
- fontSize: theme.typography.fontSize.h2,
8349
+ fontWeight: '700',
8350
+ fontSize: '46px',
8454
8351
  lineHeight: '46px',
8352
+ marginBottom: '1rem',
8455
8353
  textAlign: 'center',
8354
+ marginTop: '3rem',
8456
8355
  color: '#2D2D2D'
8457
8356
  },
8458
8357
  headerTitle: {
8459
- fontWeight: theme.typography.fontWeight.regular,
8460
- fontSize: theme.typography.fontSize.subHead,
8358
+ fontWeight: '400',
8359
+ fontSize: '24px',
8461
8360
  lineHeight: '46px',
8462
8361
  color: '#7D8592',
8463
- marginBottom: theme.spacing.margin.tiny,
8362
+ marginBottom: '3rem',
8464
8363
  textAlign: 'center'
8465
- },
8466
- '@media screen and (max-width: 767px)': {
8467
- tileDiv: {
8468
- width: 'calc(53% - 24px)'
8469
- }
8470
8364
  }
8471
8365
  };
8472
8366
  });
@@ -8475,6 +8369,7 @@ function Tiles({
8475
8369
  sectionData,
8476
8370
  sectionIndex
8477
8371
  }) {
8372
+ const classes = useTilesStyles({});
8478
8373
  const {
8479
8374
  isMobile,
8480
8375
  layout: {
@@ -8483,9 +8378,6 @@ function Tiles({
8483
8378
  isPreview,
8484
8379
  isEdit
8485
8380
  } = useContext(PageContext);
8486
- const classes = useTilesStyles({
8487
- isMobile
8488
- });
8489
8381
  const nodeData = sectionData.components;
8490
8382
  const tilesList = nodeData[0]?.tilesList.components;
8491
8383
  const handleClick = value => {
@@ -8696,7 +8588,8 @@ function Section({
8696
8588
  style: {
8697
8589
  textAlign: 'center',
8698
8590
  width: '100%',
8699
- backgroundColor: '#ffffff'
8591
+ backgroundColor: '#ffffff',
8592
+ padding: '0px 24px'
8700
8593
  }
8701
8594
  }, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("p", {
8702
8595
  style: {
@@ -8723,10 +8616,10 @@ function Section({
8723
8616
  marginBottom: '15px'
8724
8617
  },
8725
8618
  ref: body?.components[1]?.refSetter
8726
- }, body?.components[1]?.metadata?.text), /*#__PURE__*/React.createElement("p", {
8619
+ }, body?.components[1]?.metadata?.text), /*#__PURE__*/React.createElement("div", {
8727
8620
  style: {
8728
8621
  maxWidth: '435px',
8729
- margin: 'auto',
8622
+ // margin: '0px 10px',
8730
8623
  // fontFamily: 'Roboto',
8731
8624
  fontStyle: 'normal',
8732
8625
  fontWeight: '400',