diy-template-components 0.2.77 → 0.2.78

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 +832 -974
  2. package/build/index.es.js.map +1 -1
  3. package/build/index.js +832 -974
  4. package/build/index.js.map +1 -1
  5. package/package.json +1 -1
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,100 +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) {
1988
- console.log(isMobile, "isMobileisMobile");
1915
+ function getTheme(colorTheme = 'blue', fontFamily = 'Arial') {
1989
1916
  const palette = palettes[colorTheme] || palettes['blue'];
1990
1917
  const typography = {
1991
- fontFamily: `"${fontFamily}", "Roboto", "Helvetica", "Arial", "sans-serif"`,
1992
- fontSize: isMobile ? fontSizeMob : fontSize,
1993
- fontWeight
1918
+ fontFamily: `"${fontFamily}", "Roboto", "Helvetica", "Arial", "sans-serif"`
1994
1919
  };
1995
1920
  const shape = {
1996
1921
  borderRadius
1997
1922
  };
1998
- const spacing = {
1999
- padding: isMobile ? mobilePadding : padding,
2000
- margin: isMobile ? mobileMargin : margin
2001
- };
2002
1923
  return {
2003
1924
  palette,
2004
1925
  shape,
2005
1926
  typography,
2006
1927
  shadows: generateShadows(palette),
2007
- borders: generateBorders(palette),
2008
- spacing
1928
+ borders: generateBorders(palette)
2009
1929
  };
2010
1930
  }
2011
1931
 
@@ -2209,22 +2129,17 @@ function PageRenderer$1({
2209
2129
  const useSectionStyles$8 = createUseStyles(theme => ({
2210
2130
  bannerCarouselRightSection: {
2211
2131
  position: 'relative',
2212
- padding: ({
2213
- isMobile
2214
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
2215
- backgroundColor: theme?.palette?.background?.primary,
2216
2132
  '&, & *, & *:before, & *:after': {
2217
2133
  fontFamily: theme?.typography?.fontFamily,
2218
2134
  boxSizing: 'border-box'
2135
+ },
2136
+ '& h2,& h3': {
2137
+ fontWeight: '500',
2138
+ '& b,& strong': {
2139
+ fontWeight: '700'
2140
+ }
2219
2141
  }
2220
- // '& h2,& h3': {
2221
- // fontWeight: '500',
2222
- // '& b,& strong': {
2223
- // fontWeight: '700'
2224
- // }
2225
- // }
2226
2142
  },
2227
-
2228
2143
  sectionContainer: {
2229
2144
  margin: '0 auto',
2230
2145
  maxWidth: ({
@@ -2237,19 +2152,24 @@ const useSectionStyles$8 = createUseStyles(theme => ({
2237
2152
  justifyContent: 'center',
2238
2153
  position: 'relative'
2239
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
+ },
2240
2163
  contentContainer: {
2241
2164
  position: 'relative',
2242
2165
  width: '100%',
2243
2166
  zIndex: '1',
2244
- // display: 'grid',
2245
- // gridTemplateColumns: 'repeat(2,minmax(0, 1fr))',
2246
- display: 'flex',
2247
- flexDirection: 'row',
2248
- alignItems: 'center',
2249
- maxWidth: '100%',
2250
- gap: '72px'
2167
+ display: 'grid',
2168
+ gridTemplateColumns: 'repeat(2,minmax(0, 1fr))',
2169
+ maxWidth: '100%'
2251
2170
  },
2252
2171
  textContainer: {
2172
+ padding: '140px 18%',
2253
2173
  textAlign: 'left',
2254
2174
  margin: '0 auto',
2255
2175
  maxWidth: '100%'
@@ -2257,28 +2177,23 @@ const useSectionStyles$8 = createUseStyles(theme => ({
2257
2177
  imageContainer: {
2258
2178
  width: '100%',
2259
2179
  position: 'relative',
2260
- height: '100%',
2261
- display: 'flex',
2262
- justifyContent: 'center',
2263
- alignItems: 'center',
2264
- borderRadius: '8px',
2265
- overflow: 'hidden'
2180
+ height: '90%'
2266
2181
  },
2267
2182
  subTitleHeading: {
2268
2183
  marginBottom: '8px',
2269
- fontSize: theme.typography.fontSize.subHead,
2184
+ fontSize: '16px',
2270
2185
  color: theme?.palette?.font?.tertiary,
2271
2186
  wordBreak: 'break-word',
2272
2187
  maxWidth: '100%'
2273
2188
  },
2274
2189
  heading: {
2275
2190
  margin: '0',
2276
- fontSize: theme.typography.fontSize.h1,
2191
+ fontSize: '72px',
2277
2192
  color: theme?.palette?.font?.default,
2278
2193
  wordBreak: 'break-word'
2279
2194
  },
2280
2195
  description: {
2281
- margin: `${theme.spacing.margin.tiny}px 0px`,
2196
+ margin: '40px 0',
2282
2197
  color: theme?.palette?.font?.primary,
2283
2198
  lineHeight: '24px',
2284
2199
  wordBreak: 'break-word'
@@ -2293,24 +2208,30 @@ const useSectionStyles$8 = createUseStyles(theme => ({
2293
2208
  display: 'flex',
2294
2209
  gap: '20px',
2295
2210
  justifyContent: 'center',
2296
- marginTop: theme.spacing.margin.tiny,
2211
+ bottom: '25px',
2212
+ position: 'absolute',
2297
2213
  width: '100%'
2298
2214
  },
2299
- partialBackground: {
2300
- display: 'none'
2301
- },
2302
2215
  '@media screen and (max-width: 767px)': {
2303
2216
  partialBackground: {
2304
2217
  display: 'none'
2305
2218
  },
2219
+ sectionContainer: {
2220
+ paddingBottom: '50px'
2221
+ },
2306
2222
  contentContainer: {
2307
2223
  display: 'flex',
2308
- flexFlow: 'column',
2309
- paddingBottom: '48px',
2310
- gap: '24px'
2224
+ flexFlow: 'column-reverse',
2225
+ paddingBottom: '20px'
2311
2226
  },
2312
2227
  textContainer: {
2313
- textAlign: 'center'
2228
+ padding: '20px 20px 0'
2229
+ },
2230
+ heading: {
2231
+ fontSize: '40px'
2232
+ },
2233
+ description: {
2234
+ margin: '16px 0'
2314
2235
  },
2315
2236
  linkButton: {
2316
2237
  padding: '12px 16px'
@@ -2343,7 +2264,7 @@ const useCarouselStyles = createUseStyles(theme => ({
2343
2264
  '& .slick-dots': {
2344
2265
  bottom: ({
2345
2266
  buttonContainerClass
2346
- } = {}) => !!buttonContainerClass ? '10px' : 'unset',
2267
+ } = {}) => !!buttonContainerClass ? '20px' : 'unset',
2347
2268
  position: ({
2348
2269
  buttonContainerClass
2349
2270
  } = {}) => !!buttonContainerClass ? 'absolute' : 'inherit',
@@ -2353,7 +2274,7 @@ const useCarouselStyles = createUseStyles(theme => ({
2353
2274
  textAlign: 'center',
2354
2275
  paddingBottom: '0',
2355
2276
  '& ul': {
2356
- margin: theme.spacing.margin.regular,
2277
+ margin: '0',
2357
2278
  padding: '0',
2358
2279
  '& li': {
2359
2280
  width: 'unset',
@@ -2377,7 +2298,7 @@ const useCarouselStyles = createUseStyles(theme => ({
2377
2298
  display: 'flex',
2378
2299
  gap: '20px',
2379
2300
  justifyContent: 'center',
2380
- marginTop: theme.spacing.margin.tiny
2301
+ marginTop: '40px'
2381
2302
  },
2382
2303
  dots: {
2383
2304
  width: '4px',
@@ -2394,15 +2315,6 @@ const useCarouselStyles = createUseStyles(theme => ({
2394
2315
  background: ({
2395
2316
  inverted
2396
2317
  } = {}) => !!inverted ? theme?.palette?.font?.invertedDefault : theme.palette.primary.main
2397
- },
2398
- '@media screen and (max-width: 767px)': {
2399
- sliderClass: {
2400
- '& .slick-dots': {
2401
- '& ul': {
2402
- margin: '0px'
2403
- }
2404
- }
2405
- }
2406
2318
  }
2407
2319
  }));
2408
2320
 
@@ -2562,8 +2474,7 @@ function Section$4({
2562
2474
  isCustomWebsite
2563
2475
  } = useContext(PageContext);
2564
2476
  const classes = useSectionStyles$8({
2565
- isCustomWebsite,
2566
- isMobile
2477
+ isCustomWebsite
2567
2478
  });
2568
2479
  return /*#__PURE__*/React.createElement("div", {
2569
2480
  className: classes.centerData
@@ -2612,14 +2523,12 @@ function BannerCarouselRight({
2612
2523
  sectionIndex
2613
2524
  }) {
2614
2525
  const {
2615
- isMobile,
2616
2526
  layout: {
2617
2527
  containerWidth
2618
2528
  }
2619
2529
  } = useContext(PageContext);
2620
2530
  const classes = useSectionStyles$8({
2621
- containerWidth,
2622
- isMobile
2531
+ containerWidth
2623
2532
  });
2624
2533
  const [{
2625
2534
  bannerCarousel
@@ -2648,9 +2557,7 @@ var index$l = /*#__PURE__*/Object.freeze({
2648
2557
  const useSectionStyles$7 = createUseStyles(theme => ({
2649
2558
  section: {
2650
2559
  width: '100%',
2651
- padding: ({
2652
- isMobile
2653
- } = {}) => 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',
2654
2561
  display: 'flex',
2655
2562
  justifyContent: 'center',
2656
2563
  flexDirection: 'column',
@@ -2661,7 +2568,10 @@ const useSectionStyles$7 = createUseStyles(theme => ({
2661
2568
  boxSizing: 'border-box'
2662
2569
  },
2663
2570
  '& h2,& h3': {
2664
- marginTop: '0'
2571
+ fontWeight: '500',
2572
+ '& b,& strong': {
2573
+ fontWeight: '700'
2574
+ }
2665
2575
  }
2666
2576
  },
2667
2577
  sectionContainer: {
@@ -2672,18 +2582,16 @@ const useSectionStyles$7 = createUseStyles(theme => ({
2672
2582
  },
2673
2583
  subTitleHeading: {
2674
2584
  marginBottom: '8px',
2675
- fontSize: theme.typography.fontSize.subHead,
2585
+ fontSize: '16px',
2676
2586
  color: theme?.palette?.font?.tertiary,
2677
2587
  alignItems: 'center',
2678
2588
  textAlign: 'center',
2679
- wordBreak: 'break-word',
2680
- textTransform: 'uppercase'
2589
+ wordBreak: 'break-word'
2681
2590
  },
2682
2591
  heading: {
2683
- marginBottom: theme.spacing.margin.tiny,
2684
- fontSize: theme.typography.fontSize.h2,
2592
+ margin: '0',
2593
+ fontSize: '72px',
2685
2594
  color: theme?.palette?.font?.default,
2686
- fontWeight: theme.typography.fontWeight.bold,
2687
2595
  textAlign: 'center',
2688
2596
  wordBreak: 'break-word'
2689
2597
  },
@@ -2704,7 +2612,7 @@ const useSectionStyles$7 = createUseStyles(theme => ({
2704
2612
  borderRadius: theme?.shape?.borderRadius?.regular,
2705
2613
  overflow: 'hidden',
2706
2614
  minHeight: 200,
2707
- marginBottom: theme.spacing.margin.small,
2615
+ margin: '16px 0',
2708
2616
  position: 'relative',
2709
2617
  '&:nth-child(2n)': {
2710
2618
  alignSelf: 'flex-end',
@@ -2712,7 +2620,7 @@ const useSectionStyles$7 = createUseStyles(theme => ({
2712
2620
  right: '0'
2713
2621
  },
2714
2622
  '& $contentText': {
2715
- marginRight: '170px'
2623
+ marginRight: '200px'
2716
2624
  }
2717
2625
  },
2718
2626
  '&:nth-child(2n+1)': {
@@ -2721,7 +2629,7 @@ const useSectionStyles$7 = createUseStyles(theme => ({
2721
2629
  left: '0'
2722
2630
  },
2723
2631
  '& $contentText': {
2724
- marginLeft: '170px'
2632
+ marginLeft: '200px'
2725
2633
  }
2726
2634
  },
2727
2635
  '&:nth-child(7n+1) $contentNumber': {
@@ -2755,31 +2663,42 @@ const useSectionStyles$7 = createUseStyles(theme => ({
2755
2663
  display: 'flex',
2756
2664
  alignItems: 'center',
2757
2665
  justifyContent: 'center',
2758
- padding: '48px',
2759
2666
  height: '100%',
2760
2667
  color: theme?.palette?.font?.default,
2668
+ width: '200px',
2761
2669
  wordBreak: 'break-word'
2762
2670
  },
2763
2671
  contentText: {
2764
- padding: theme.spacing.padding.tiny
2672
+ padding: '20px 0'
2765
2673
  },
2766
2674
  contentHeading: {
2767
2675
  fontStyle: 'normal',
2768
- fontSize: theme.typography.fontSize.h5,
2769
- fontWeight: theme.typography.fontWeight.bold,
2676
+ fontSize: '24px',
2770
2677
  lineHeight: '32px',
2771
- marginBottom: '8px',
2772
2678
  color: theme?.palette?.font?.default,
2679
+ margin: '0 48px',
2773
2680
  wordBreak: 'break-word'
2774
2681
  },
2775
2682
  contentPara: {
2776
2683
  fontStyle: 'normal',
2777
- fontSize: theme.typography.fontSize.subHead,
2684
+ fontSize: '16px',
2778
2685
  lineHeight: '32px',
2779
2686
  color: theme?.palette?.font?.primary,
2687
+ margin: '20px 48px 0 48px',
2780
2688
  wordBreak: 'break-word'
2781
2689
  },
2782
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
+ },
2783
2702
  contentContainer: {
2784
2703
  width: '100%'
2785
2704
  },
@@ -2787,31 +2706,36 @@ const useSectionStyles$7 = createUseStyles(theme => ({
2787
2706
  display: 'flex',
2788
2707
  flexDirection: 'column',
2789
2708
  borderRadius: theme.shape.borderRadius.large,
2709
+ margin: '20px 0 10px 0',
2790
2710
  width: '100%',
2791
2711
  height: 'auto',
2792
2712
  '&:nth-child(2n)': {
2793
2713
  marginLeft: '0',
2794
2714
  '& $contentText': {
2795
2715
  marginRight: '0',
2796
- alignSelf: 'flex-start'
2797
- // padding: '0'
2716
+ alignSelf: 'flex-start',
2717
+ padding: '0'
2798
2718
  }
2799
2719
  },
2800
-
2801
2720
  '&:nth-child(2n+1)': {
2802
2721
  marginRight: '0',
2803
2722
  '& $contentText': {
2804
2723
  marginLeft: '0',
2805
- alignSelf: 'flex-start'
2806
- // padding: '0'
2724
+ alignSelf: 'flex-start',
2725
+ padding: '0'
2807
2726
  }
2808
2727
  }
2809
2728
  },
2810
-
2811
2729
  contentNumber: {
2812
2730
  width: '100%',
2813
- padding: '24px',
2731
+ padding: '40px 0',
2814
2732
  position: 'static'
2733
+ },
2734
+ contentHeading: {
2735
+ margin: '20px 20px 0 20px'
2736
+ },
2737
+ contentPara: {
2738
+ margin: '16px 20px 24px 20px'
2815
2739
  }
2816
2740
  }
2817
2741
  }));
@@ -2822,12 +2746,10 @@ function List({
2822
2746
  const {
2823
2747
  layout: {
2824
2748
  containerWidth
2825
- },
2826
- isMobile
2749
+ }
2827
2750
  } = useContext(PageContext);
2828
2751
  const classes = useSectionStyles$7({
2829
- containerWidth,
2830
- isMobile
2752
+ containerWidth
2831
2753
  });
2832
2754
  const [nodeData] = sectionData.components;
2833
2755
  const getNumber = val => {
@@ -2891,33 +2813,29 @@ const useSectionStyles$6 = createUseStyles(theme => ({
2891
2813
  '&, & *, & *:before, & *:after': {
2892
2814
  fontFamily: theme?.typography?.fontFamily,
2893
2815
  boxSizing: 'border-box'
2816
+ },
2817
+ '& h2,& h3': {
2818
+ fontWeight: '500',
2819
+ '& b,& strong': {
2820
+ fontWeight: '700'
2821
+ }
2894
2822
  }
2895
- // '& h2,& h3': {
2896
- // fontWeight: '500',
2897
- // '& b,& strong': {
2898
- // fontWeight: '700'
2899
- // }
2900
- // }
2901
2823
  },
2902
-
2903
2824
  sectionContainer: {
2825
+ margin: '0 auto',
2904
2826
  width: '100%',
2905
2827
  // maxWidth: ({ containerWidth } = {}) => containerWidth,
2906
2828
  position: 'absolute',
2907
- zIndex: '9',
2908
- height: '100%'
2829
+ zIndex: '9'
2909
2830
  },
2910
2831
  absoluteButtons: {
2911
2832
  display: 'flex',
2912
2833
  gap: '20px',
2913
2834
  justifyContent: 'center',
2914
- bottom: '10%',
2835
+ bottom: '25px',
2915
2836
  position: 'absolute',
2916
2837
  width: '100%'
2917
2838
  },
2918
- buttonClass: {
2919
- margin: `${theme.spacing.margin.tiny}px 0px`
2920
- },
2921
2839
  contentContainer: {
2922
2840
  // padding: '100px 0',
2923
2841
  // height: '100%',
@@ -2953,33 +2871,27 @@ const useSectionStyles$6 = createUseStyles(theme => ({
2953
2871
  height: '100%'
2954
2872
  },
2955
2873
  textContainer: {
2956
- padding: `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
2957
- // margin: `0px ${theme.spacing.padding.medium} 0px ${theme.spacing.padding.medium}`,
2958
- width: '100%',
2959
- height: '100%',
2960
- display: 'flex',
2961
- justifyContent: 'center',
2962
- alignItems: 'center',
2963
- flexDirection: 'column'
2874
+ padding: '100px 0',
2875
+ margin: '0 auto',
2876
+ width: '80%'
2964
2877
  },
2965
2878
  subTitleHeading: {
2966
2879
  color: theme?.palette?.font?.invertedDefault,
2967
2880
  marginBottom: '8px',
2968
- fontSize: theme.typography.fontSize.subHead,
2881
+ fontSize: '16px',
2969
2882
  wordBreak: 'break-word'
2970
2883
  },
2971
2884
  heading: {
2972
2885
  margin: '0',
2973
- fontSize: theme.typography.fontSize.h1,
2886
+ fontSize: '62px',
2974
2887
  color: theme?.palette?.font?.invertedDefault,
2975
2888
  wordBreak: 'break-word'
2976
2889
  },
2977
2890
  description: {
2978
- margin: `${theme.spacing.margin.tiny}px 0px`,
2891
+ margin: '40px 0',
2979
2892
  color: theme?.palette?.font?.invertedDefault,
2980
2893
  lineHeight: '24px',
2981
- wordBreak: 'break-word',
2982
- fontSize: theme.typography.fontSize.subHead
2894
+ wordBreak: 'break-word'
2983
2895
  },
2984
2896
  sideBannerImage: {
2985
2897
  width: '100%',
@@ -2997,19 +2909,22 @@ const useSectionStyles$6 = createUseStyles(theme => ({
2997
2909
  justifyContent: 'center',
2998
2910
  padding: '0px'
2999
2911
  },
3000
- // textContainer: {
3001
- // padding: '20px 20px',
3002
- // height: '100%',
3003
- // width: '100%'
3004
- // // backgroundColor: theme?.palette?.background?.primary
3005
- // },
2912
+ textContainer: {
2913
+ padding: '20px 20px',
2914
+ height: '100%',
2915
+ width: '100%'
2916
+ // backgroundColor: theme?.palette?.background?.primary
2917
+ },
2918
+
3006
2919
  subTitleHeading: {
3007
2920
  color: theme?.palette?.font?.tertiary
3008
2921
  },
3009
2922
  heading: {
2923
+ fontSize: '40px',
3010
2924
  color: theme?.palette?.font?.default
3011
2925
  },
3012
2926
  description: {
2927
+ margin: '16px 0',
3013
2928
  color: theme?.palette?.font?.primary
3014
2929
  },
3015
2930
  centerBgImageContainer: {
@@ -3076,14 +2991,12 @@ const Section$3 = ({
3076
2991
  dangerouslySetInnerHTML: {
3077
2992
  __html: nodeData.description.metadata.value
3078
2993
  }
3079
- }) : null, nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React.createElement("div", {
3080
- className: classes.buttonClass
3081
- }, /*#__PURE__*/React.createElement(Button, {
2994
+ }) : null, nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React.createElement(Button, {
3082
2995
  ref: nodeData?.cta?.refSetter,
3083
2996
  data: nodeData.cta.metadata,
3084
2997
  type: nodeData?.cta?.metadata?.type,
3085
2998
  size: isMobile ? 'small' : 'medium'
3086
- }))) : null), /*#__PURE__*/React.createElement("div", {
2999
+ })) : null), /*#__PURE__*/React.createElement("div", {
3087
3000
  className: classes?.centerBgImageContainer
3088
3001
  }, /*#__PURE__*/React.createElement(NextImageRenderer, {
3089
3002
  src: nodeData.image.metadata.value,
@@ -3125,15 +3038,15 @@ var index$j = /*#__PURE__*/Object.freeze({
3125
3038
  const useSectionStyles$5 = createUseStyles(theme => {
3126
3039
  return {
3127
3040
  section: {
3128
- paddingBottom: theme?.spacing?.padding?.regular,
3041
+ paddingBottom: '70px',
3129
3042
  '&, & *, & *:before, & *:after': {
3130
3043
  fontFamily: theme?.typography?.fontFamily,
3131
3044
  boxSizing: 'border-box'
3132
3045
  },
3133
3046
  '& h2,& h3': {
3134
- fontWeight: theme?.typography?.fontWeight?.medium,
3047
+ fontWeight: '500',
3135
3048
  '& b,& strong': {
3136
- fontWeight: theme?.typography?.fontWeight?.bold
3049
+ fontWeight: '700'
3137
3050
  }
3138
3051
  }
3139
3052
  },
@@ -3147,7 +3060,7 @@ const useSectionStyles$5 = createUseStyles(theme => {
3147
3060
  display: 'flex',
3148
3061
  alignItems: 'center',
3149
3062
  justifyContent: 'center',
3150
- padding: `${theme?.spacing?.padding?.regular}px ${theme?.spacing?.padding?.medium}px 0px ${theme?.spacing?.padding?.medium}px`
3063
+ padding: '140px 70px 0'
3151
3064
  },
3152
3065
  imageContainerDiv: {
3153
3066
  width: '50%',
@@ -3182,20 +3095,20 @@ const useSectionStyles$5 = createUseStyles(theme => {
3182
3095
  objectFit: 'cover'
3183
3096
  },
3184
3097
  textContainer: {
3185
- padding: `0 ${theme?.spacing?.padding?.xSmall}px`,
3098
+ padding: '0 60px',
3186
3099
  textAlign: 'left',
3187
3100
  margin: '0 auto',
3188
3101
  width: '50%'
3189
3102
  },
3190
3103
  subTitleHeading: {
3191
3104
  marginBottom: '8px',
3192
- fontSize: `${theme?.typography?.fontSize?.subHead}px`,
3105
+ fontSize: '16px',
3193
3106
  color: theme?.palette?.font?.tertiary,
3194
3107
  wordBreak: 'break-word'
3195
3108
  },
3196
3109
  heading: {
3197
3110
  margin: '0',
3198
- fontSize: `${theme?.typography?.fontSize?.h1}px`,
3111
+ fontSize: '72px',
3199
3112
  color: theme?.palette?.font?.default,
3200
3113
  wordBreak: 'break-word'
3201
3114
  },
@@ -3210,9 +3123,9 @@ const useSectionStyles$5 = createUseStyles(theme => {
3210
3123
  padding: '0 0 40px'
3211
3124
  },
3212
3125
  centerData: {
3213
- flexDirection: 'column-reverse',
3126
+ flexDirection: 'column',
3214
3127
  width: '100%',
3215
- padding: `${theme?.spacing?.padding?.medium}px ${theme?.spacing?.padding?.regular}px`
3128
+ padding: '0'
3216
3129
  },
3217
3130
  imageContainer: {
3218
3131
  height: 'unset !important',
@@ -3232,11 +3145,11 @@ const useSectionStyles$5 = createUseStyles(theme => {
3232
3145
  height: 'unset !important'
3233
3146
  },
3234
3147
  textContainer: {
3235
- padding: `${theme?.spacing?.padding?.regular}px 0px`,
3148
+ padding: '20px 20px',
3236
3149
  width: 'unset'
3237
3150
  },
3238
3151
  heading: {
3239
- fontSize: `${theme?.typography?.fontSize?.h3}px`
3152
+ fontSize: '40px'
3240
3153
  },
3241
3154
  description: {
3242
3155
  margin: '16px 0'
@@ -3270,6 +3183,8 @@ function Section$2({
3270
3183
  ref: nodeData?.image?.refSetter,
3271
3184
  className: classes.sideBannerImage,
3272
3185
  sectionIndex: sectionIndex
3186
+ }), /*#__PURE__*/React.createElement("div", {
3187
+ className: classes.imageBorder
3273
3188
  }))), /*#__PURE__*/React.createElement("div", {
3274
3189
  className: classes.textContainer
3275
3190
  }, /*#__PURE__*/React.createElement("div", {
@@ -3340,15 +3255,16 @@ const useSectionStyles$4 = createUseStyles(theme => ({
3340
3255
  width: '100%',
3341
3256
  alignItems: 'center',
3342
3257
  justifyContent: 'center',
3343
- padding: ({
3344
- isMobile
3345
- } = {}) => 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',
3346
3259
  '&, & *, & *:before, & *:after': {
3347
3260
  fontFamily: theme?.typography?.fontFamily,
3348
3261
  boxSizing: 'border-box'
3349
3262
  },
3350
3263
  '& h2,& h3': {
3351
- marginTop: '0'
3264
+ fontWeight: '500',
3265
+ '& b,& strong': {
3266
+ fontWeight: '700'
3267
+ }
3352
3268
  }
3353
3269
  },
3354
3270
  newsLetterContainer: {
@@ -3369,16 +3285,15 @@ const useSectionStyles$4 = createUseStyles(theme => ({
3369
3285
  backgroundColor: theme?.palette?.background?.default,
3370
3286
  boxShadow: theme?.shadows?.secondary,
3371
3287
  borderRadius: theme?.shape?.borderRadius?.regular,
3372
- padding: theme.spacing.padding.small,
3288
+ padding: '40px 80px',
3373
3289
  position: 'relative'
3374
3290
  },
3375
3291
  cardHeading: {
3376
- fontSize: theme.typography.fontSize.h2,
3377
- fontWeight: theme.typography.fontWeight.bold,
3292
+ fontSize: '56px',
3378
3293
  lineHeight: '71px',
3379
3294
  letterSpacing: '-3px',
3380
3295
  color: theme?.palette?.font?.secondary,
3381
- marginBottom: theme.spacing.padding.tiny,
3296
+ margin: '0 0 32px 0',
3382
3297
  wordBreak: 'break-word'
3383
3298
  },
3384
3299
  contentContainer: {
@@ -3387,9 +3302,10 @@ const useSectionStyles$4 = createUseStyles(theme => ({
3387
3302
  justifyContent: 'space-between'
3388
3303
  },
3389
3304
  title: {
3390
- fontSize: theme.typography.fontSize.h6,
3305
+ fontSize: '20px',
3391
3306
  lineHeight: '32px',
3392
3307
  color: theme?.palette?.font?.primary,
3308
+ margin: '0 80px 0 0',
3393
3309
  width: 'calc(50% - 80px)',
3394
3310
  wordBreak: 'break-word'
3395
3311
  },
@@ -3427,44 +3343,42 @@ const useSectionStyles$4 = createUseStyles(theme => ({
3427
3343
  section: {
3428
3344
  display: 'flex',
3429
3345
  flexDirection: 'column',
3430
- alignItems: 'center'
3346
+ alignItems: 'center',
3347
+ padding: '30px 20px'
3431
3348
  },
3432
3349
  sectionContainer: {
3433
- borderRadius: theme?.shape?.borderRadius?.large,
3434
- textAlign: 'center',
3435
- display: 'flex',
3436
- alignItems: 'center',
3437
- flexDirection: 'column'
3350
+ padding: '30px 20px',
3351
+ borderRadius: theme?.shape?.borderRadius?.large
3438
3352
  },
3439
3353
  partialBackground: {
3440
3354
  height: '150px'
3441
3355
  },
3442
3356
  title: {
3443
3357
  width: '100%',
3444
- lineHeight: '22px',
3445
- margin: '0px 0px 16px 0px'
3358
+ margin: '0',
3359
+ fontSize: '20px',
3360
+ lineHeight: '32px'
3446
3361
  },
3447
3362
  cardHeading: {
3363
+ fontSize: '24px',
3448
3364
  lineHeight: '32px',
3449
3365
  letterSpacing: '-1px',
3450
- width: '50%',
3451
- lineHeight: 'normal'
3366
+ marginBottom: '20px'
3452
3367
  },
3453
3368
  contentContainer: {
3454
3369
  display: 'flex',
3455
3370
  flexDirection: 'column',
3456
- justifyContent: 'flex-start',
3457
- textAlign: 'center'
3371
+ justifyContent: 'flex-start'
3458
3372
  },
3459
3373
  inputContainer: {
3460
3374
  display: 'block',
3461
3375
  width: '100%',
3376
+ margin: '24px 16px 0 16px',
3462
3377
  position: 'initial'
3463
3378
  },
3464
3379
  btnContainer: {
3465
3380
  right: 'unset',
3466
- position: 'initial',
3467
- marginTop: '4px'
3381
+ position: 'initial'
3468
3382
  }
3469
3383
  }
3470
3384
  }));
@@ -3609,8 +3523,7 @@ function SubscribeToNewsletter({
3609
3523
  } = useContext(PageContext);
3610
3524
  const [nodeData] = sectionData.components;
3611
3525
  const classes = useSectionStyles$4({
3612
- containerWidth,
3613
- isMobile
3526
+ containerWidth
3614
3527
  });
3615
3528
  let formInitialValue = nodeData?.inputField?.metadata?.value;
3616
3529
  const [inputVal, setInputVal] = useState(formInitialValue);
@@ -3723,182 +3636,177 @@ var index$h = /*#__PURE__*/Object.freeze({
3723
3636
  'default': SubscribeToNewsletter
3724
3637
  });
3725
3638
 
3726
- const useTestimonialStyles = createUseStyles(theme => ({
3727
- testimonialContainer: {
3728
- background: theme?.palette?.background?.primary,
3729
- overflow: 'hidden',
3730
- padding: `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
3731
- '&, & *, & *:before, & *:after': {
3732
- fontFamily: theme?.typography?.fontFamily,
3733
- boxSizing: 'border-box'
3734
- },
3735
- '& h3,& p': {
3736
- marginTop: '0'
3737
- }
3738
- },
3739
- sectionContainer: {
3740
- margin: '0 auto',
3741
- maxWidth: ({
3742
- containerWidth
3743
- } = {}) => containerWidth
3744
- },
3745
- testimonialText: {
3746
- color: theme?.palette?.font?.secondary,
3747
- fontSize: theme.typography.fontSize.subHead,
3748
- wordBreak: 'break-word',
3749
- textTransform: 'uppercase'
3750
- },
3751
- testimonialHeader: {
3752
- fontSize: theme.typography.fontSize.h2,
3753
- color: theme?.palette?.font?.default,
3754
- fontWeight: theme.typography.fontWeight.bold,
3755
- marginBottom: theme.spacing.margin.tiny,
3756
- marginTop: '8px',
3757
- overflow: 'hidden',
3758
- wordBreak: 'break-word',
3759
- // whiteSpace: 'nowrap',
3760
- textOverflow: 'ellipsis'
3761
- },
3762
- sliderContainer: {
3763
- marginRight: `-${theme.spacing.margin.regular}px`
3764
- },
3765
- singleCard: {
3766
- // margin: '6px 12px',
3767
- position: 'relative',
3768
- height: 'calc(100% - 12px)',
3769
- width: 'calc(100% - 24px)',
3770
- background: theme?.palette?.background?.default,
3771
- boxShadow: theme?.shadows?.primary,
3772
- borderRadius: theme?.shape?.borderRadius?.regular
3773
- },
3774
- contentRow: {
3775
- display: 'grid',
3776
- gridTemplateColumns: ({
3777
- slidesToShow
3778
- } = {}) => `repeat(${slidesToShow},minmax(0, 1fr))`
3779
- },
3780
- cardDetails: {
3781
- height: '100%',
3782
- display: 'flex',
3783
- flexDirection: 'column',
3784
- justifyContent: 'space-between',
3785
- padding: '48px',
3786
- alignItems: 'flex-start'
3787
- },
3788
- quoteIcon: {
3789
- position: 'absolute',
3790
- right: '20px'
3791
- },
3792
- reviewText: {
3793
- // padding: '48px 41px 0 48px',
3794
- marginBottom: theme.spacing.margin.tiny,
3795
- fontSize: theme.typography.fontSize.subHead,
3796
- wordBreak: 'break-word',
3797
- color: theme?.palette?.font?.primary,
3798
- lineHeight: '22px'
3799
- },
3800
- userContainer: {
3801
- display: 'flex',
3802
- gap: '16px',
3803
- alignItems: 'center'
3804
- },
3805
- userImageContainer: {
3806
- width: '64px',
3807
- height: '64px',
3808
- position: 'relative',
3809
- // paddingBottom: '55px',
3810
- objectFit: 'cover'
3811
- },
3812
- userImageDummy: {
3813
- width: '64px',
3814
- height: '64px',
3815
- borderRadius: '32px',
3816
- background: '#666666',
3817
- marginRight: '16px',
3818
- flexShrink: '0'
3819
- },
3820
- userImage: {
3821
- width: '64px',
3822
- height: '64px',
3823
- borderRadius: '32px',
3824
- marginRight: '16px'
3825
- },
3826
- userName: {
3827
- color: theme?.palette?.font?.default,
3828
- margin: '0',
3829
- fontSize: theme.typography.fontSize.h5,
3830
- // paddingTop: '16px',
3831
- overflow: 'hidden',
3832
- whiteSpace: 'nowrap',
3833
- textOverflow: 'ellipsis'
3834
- },
3835
- buttonContainer: {
3836
- display: 'flex',
3837
- gap: '20px',
3838
- justifyContent: 'center',
3839
- // paddingRight: theme.spacing.padding.medium,
3840
- marginTop: theme.spacing.margin.tiny
3841
- },
3842
- '@media (max-width: 768px)': {
3639
+ const useTestimonialStyles = createUseStyles(theme => {
3640
+ return {
3843
3641
  testimonialContainer: {
3844
- padding: `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px`
3845
- },
3846
- // testimonialCardAndText: {
3847
- // margin: '0 20px'
3848
- // },
3849
-
3850
- // testimonialHeader: {
3851
- // fontSize: '24px',
3852
- // color: theme?.palette?.font?.default,
3853
- // margin: '4px 0 12px 0',
3854
- // overflow: 'hidden',
3855
- // // whiteSpace: 'nowrap',
3856
- // wordBreak: 'break-word',
3857
- // textOverflow: 'ellipsis'
3858
- // },
3859
- userImageDummy: {
3860
- width: '48px',
3861
- height: '48px',
3862
- borderRadius: '24px',
3863
- 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
+ }
3864
3655
  },
3865
- userImage: {
3866
- width: '48px',
3867
- height: '48px',
3868
- borderRadius: '24px',
3869
- marginRight: '16px'
3656
+ sectionContainer: {
3657
+ margin: '0 auto',
3658
+ maxWidth: ({
3659
+ containerWidth
3660
+ } = {}) => containerWidth
3870
3661
  },
3871
- reviewText: {
3872
- marginBottom: '16px'
3662
+ testimonialCardAndText: {
3663
+ marginTop: '70px'
3873
3664
  },
3874
- singleCard: {
3875
- margin: '6px 2px',
3876
- width: 'calc(100% - 14px)'
3665
+ testimonialText: {
3666
+ color: theme?.palette?.font?.secondary,
3667
+ fontSize: '16px',
3668
+ marginLeft: '10px',
3669
+ wordBreak: 'break-word'
3877
3670
  },
3878
- userName: {
3879
- // paddingTop: '8px',
3671
+ testimonialHeader: {
3672
+ fontSize: '56px',
3673
+ color: theme?.palette?.font?.default,
3674
+ margin: '10px 0 40px 10px',
3880
3675
  overflow: 'hidden',
3881
- whiteSpace: 'nowrap',
3676
+ wordBreak: 'break-word',
3677
+ // whiteSpace: 'nowrap',
3882
3678
  textOverflow: 'ellipsis'
3883
3679
  },
3884
- userImageContainer: {
3885
- width: '48px',
3886
- height: '48px'
3680
+ sliderContainer: {
3681
+ marginRight: '-20px'
3887
3682
  },
3888
- cardDetails: {
3889
- padding: '16px'
3890
- }
3891
- // sliderContainer: {
3892
- // marginRight: '-24px'
3893
- // },
3894
- }
3895
- }));
3896
-
3897
- function QuotesComponent() {
3898
- const theme = useTheme();
3899
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
3900
- width: "28px",
3901
- height: "21px",
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))`
3697
+ },
3698
+ cardDetails: {
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
+ }
3801
+ }
3802
+ };
3803
+ });
3804
+
3805
+ function QuotesComponent() {
3806
+ const theme = useTheme();
3807
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
3808
+ width: "28px",
3809
+ height: "21px",
3902
3810
  name: "Quote",
3903
3811
  color: theme?.palette?.primary?.main
3904
3812
  }));
@@ -3920,14 +3828,13 @@ function Section$1({
3920
3828
  const classes = useTestimonialStyles({
3921
3829
  containerWidth,
3922
3830
  cardsCount,
3923
- slidesToShow,
3924
- isMobile
3831
+ slidesToShow
3925
3832
  });
3926
3833
  const settings = {
3927
3834
  className: classes.sliderContainer,
3928
3835
  slidesToShow,
3929
3836
  centerMode: true,
3930
- centerPadding: isMobile ? '0px 0 0' : '80px 0 0'
3837
+ centerPadding: isMobile ? '10px 0 0' : '80px 0 0'
3931
3838
  };
3932
3839
  const carouselContent = carouselList.map((el, idx) =>
3933
3840
  /*#__PURE__*/
@@ -4134,7 +4041,8 @@ const useVideoStyles$1 = createUseStyles(theme => {
4134
4041
  height: '100%',
4135
4042
  width: '100%',
4136
4043
  objectFit: 'cover',
4137
- objectPosition: 'top'
4044
+ objectPosition: 'top',
4045
+ opacity: '0.8'
4138
4046
  },
4139
4047
  '@media (max-width: 767px)': {
4140
4048
  iframe: {
@@ -4169,7 +4077,10 @@ function VideoPlayer(props) {
4169
4077
  }
4170
4078
  }
4171
4079
  return /*#__PURE__*/React.createElement(React.Fragment, null, !isLoaded && /*#__PURE__*/React.createElement("div", {
4172
- className: classes.imgContainer
4080
+ className: classes.imgContainer,
4081
+ onClick: () => {
4082
+ setIsEnableed(true);
4083
+ }
4173
4084
  }, /*#__PURE__*/React.createElement(NextImageRenderer, {
4174
4085
  src: imageUrl,
4175
4086
  sectionIndex: props?.sectionIndex,
@@ -4198,20 +4109,20 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
4198
4109
  videoTestimonialSuperContainer: {
4199
4110
  display: 'flex',
4200
4111
  justifyContent: 'center',
4201
- padding: ({
4202
- isMobile
4203
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
4112
+ padding: '70px',
4204
4113
  '&, & *, & *:before, & *:after': {
4205
- fontFamily: theme?.typography?.fontFamily
4206
- // boxSizing: 'border-box'
4114
+ fontFamily: theme?.typography?.fontFamily,
4115
+ boxSizing: 'border-box'
4207
4116
  },
4208
-
4209
- '& h2,& h3,& p': {
4210
- marginTop: '0'
4117
+ '& h2,& h3': {
4118
+ fontWeight: '500',
4119
+ '& b,& strong': {
4120
+ fontWeight: '700'
4121
+ }
4211
4122
  }
4212
4123
  },
4213
4124
  sectionContainer: {
4214
- // margin: '0 auto',
4125
+ margin: '0 auto',
4215
4126
  maxWidth: ({
4216
4127
  containerWidth
4217
4128
  } = {}) => containerWidth
@@ -4222,28 +4133,29 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
4222
4133
  fontFamily: theme?.typography?.fontFamily
4223
4134
  },
4224
4135
  videoTestimonialHeading: {
4225
- fontSize: theme.typography.fontSize.subHead,
4136
+ fontSize: '16px',
4226
4137
  lineHeight: '20px',
4227
4138
  letterSpacing: '3px',
4228
4139
  textTransform: 'uppercase',
4229
4140
  color: theme.palette.font.tertiary,
4230
- wordBreak: 'break-word',
4231
- marginBottom: '8px'
4141
+ wordBreak: 'break-word'
4232
4142
  },
4233
4143
  videoTestimonialTitle: {
4234
- fontSize: theme.typography.fontSize.h1,
4235
- // lineHeight: '71px',
4144
+ fontSize: '56px',
4145
+ lineHeight: '71px',
4236
4146
  letterSpacing: '-3px',
4237
- fontWeight: theme.typography.fontWeight.bold,
4238
- marginBottom: theme.spacing.margin.tiny,
4147
+ margin: '0',
4239
4148
  color: theme.palette.font.default,
4240
4149
  wordBreak: 'break-word'
4241
4150
  },
4151
+ videoCarouselContainer: {
4152
+ marginTop: '16px'
4153
+ },
4242
4154
  videoCarousel: {
4243
4155
  display: 'flex',
4244
4156
  alignItems: 'center',
4245
4157
  justifyContent: 'flex-start',
4246
- gap: theme.spacing.margin.small
4158
+ gap: '60px'
4247
4159
  },
4248
4160
  iframeSuperContainer: {
4249
4161
  height: '100%',
@@ -4265,49 +4177,57 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
4265
4177
  videoDetails: {
4266
4178
  width: '100%',
4267
4179
  display: 'flex',
4268
- gap: '24px',
4269
4180
  flexDirection: 'column',
4270
4181
  alignItems: 'flex-start'
4271
4182
  },
4272
4183
  videoDetailsHeading: {
4273
- fontSize: theme.typography.fontSize.h3,
4184
+ fontSize: '40px',
4274
4185
  lineHeight: '48px',
4275
4186
  margin: '0',
4276
4187
  letterSpacing: '-1px',
4277
4188
  wordBreak: 'break-word',
4278
- color: theme.palette.font.default,
4279
- fontWeight: theme.typography.fontWeight.bold
4189
+ color: theme.palette.font.default
4280
4190
  },
4281
4191
  videoDetailsContent: {
4282
- fontSize: theme.typography.fontSize.subHead,
4192
+ fontSize: '16px',
4283
4193
  lineHeight: '24px',
4284
4194
  wordBreak: 'break-word',
4285
- color: theme.palette.font.primary
4195
+ color: theme.palette.font.primary,
4196
+ margin: '10px 0 20px'
4286
4197
  },
4287
4198
  videoDetailsSubContent: {
4288
- fontSize: theme.typography.fontSize.subHead,
4199
+ fontSize: '16px',
4289
4200
  lineHeight: '24px',
4290
4201
  margin: '0',
4291
4202
  color: theme.palette.font.primary,
4292
4203
  wordBreak: 'break-word'
4293
4204
  },
4294
4205
  '@media (max-width: 767px)': {
4206
+ videoTestimonialSuperContainer: {
4207
+ padding: '70px 10px 60px 20px'
4208
+ },
4295
4209
  videoCarousel: {
4296
- flexDirection: 'column'
4210
+ flexDirection: 'column',
4211
+ gap: '20px'
4297
4212
  },
4298
4213
  videoCarouselContainer: {
4299
- height: 'max-content'
4214
+ height: 'max-content',
4215
+ paddingRight: '10px'
4300
4216
  },
4301
4217
  videoDetails: {
4302
- width: '100%',
4303
- gap: '16px'
4218
+ width: '100%'
4304
4219
  },
4305
4220
  videoDetailsHeading: {
4221
+ fontSize: '16px',
4306
4222
  lineHeight: '20px'
4307
4223
  },
4308
4224
  videoTestimonialTitle: {
4225
+ fontSize: '24px',
4309
4226
  lineHeight: '36px',
4310
4227
  letterSpacing: '-1px'
4228
+ },
4229
+ videoDetailsContent: {
4230
+ marginTop: '4px'
4311
4231
  }
4312
4232
  }
4313
4233
  };
@@ -4361,12 +4281,10 @@ function VideoTestimonial({
4361
4281
  const {
4362
4282
  layout: {
4363
4283
  containerWidth
4364
- },
4365
- isMobile
4284
+ }
4366
4285
  } = useContext(PageContext);
4367
4286
  const classes = useVideoTestimonialStyles({
4368
- containerWidth,
4369
- isMobile
4287
+ containerWidth
4370
4288
  });
4371
4289
  const [videoData] = sectionData.components;
4372
4290
  const Wrapper = videoData.videoCarousel.components.length > 1 ? Carousel : Fragment;
@@ -4405,16 +4323,17 @@ var index$f = /*#__PURE__*/Object.freeze({
4405
4323
  const useVideoStyles = createUseStyles(theme => {
4406
4324
  return {
4407
4325
  videoSuperContainer: {
4408
- padding: ({
4409
- isMobile
4410
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
4326
+ padding: '70px',
4411
4327
  backgroundColor: theme?.palette?.background?.primary,
4412
4328
  '&, & *, & *:before, & *:after': {
4413
4329
  fontFamily: theme?.typography?.fontFamily,
4414
4330
  boxSizing: 'border-box'
4415
4331
  },
4416
- '& h3': {
4417
- marginTop: '0'
4332
+ '& h2,& h3': {
4333
+ fontWeight: '500',
4334
+ '& b,& strong': {
4335
+ fontWeight: '700'
4336
+ }
4418
4337
  }
4419
4338
  },
4420
4339
  sectionContainer: {
@@ -4423,29 +4342,28 @@ const useVideoStyles = createUseStyles(theme => {
4423
4342
  containerWidth
4424
4343
  } = {}) => containerWidth
4425
4344
  },
4426
- // videoContainer: {
4427
- // marginTop: '70px'
4428
- // },
4429
-
4345
+ videoContainer: {
4346
+ marginTop: '70px'
4347
+ },
4430
4348
  videoHeading: {
4431
- fontSize: theme.typography.fontSize.subHead,
4432
- textTransform: 'uppercase',
4349
+ fontSize: '16px',
4433
4350
  lineHeight: '20px',
4351
+ marginBottom: '4px',
4352
+ letterSpacing: '3px',
4434
4353
  color: theme?.palette?.font?.primary,
4435
4354
  wordBreak: 'break-word'
4436
4355
  },
4437
4356
  videoTitle: {
4438
- fontSize: theme.typography.fontSize.h2,
4439
- fontWeight: theme.typography.fontWeight.bold,
4357
+ fontSize: '56px',
4440
4358
  lineHeight: '71px',
4441
4359
  letterSpacing: '-3px',
4442
- marginBottom: theme.spacing.margin.tiny,
4443
- marginTop: '8px',
4360
+ marginBottom: '20px',
4361
+ marginTop: '0',
4444
4362
  color: theme?.palette?.font?.default,
4445
4363
  wordBreak: 'break-word'
4446
4364
  },
4447
4365
  sliderContainer: {
4448
- marginRight: `-${theme.spacing.padding.medium}px`
4366
+ marginRight: '-35px'
4449
4367
  },
4450
4368
  singleSlideContainer: {
4451
4369
  backgroundColor: theme?.palette?.background?.default,
@@ -4453,7 +4371,7 @@ const useVideoStyles = createUseStyles(theme => {
4453
4371
  width: 'calc(100% - 40px)',
4454
4372
  height: 'calc(100% - 40px)',
4455
4373
  borderRadius: theme?.shape?.borderRadius?.regular,
4456
- padding: '48px',
4374
+ padding: '40px',
4457
4375
  boxShadow: theme?.shadows?.primary
4458
4376
  },
4459
4377
  contentRow: {
@@ -4466,7 +4384,6 @@ const useVideoStyles = createUseStyles(theme => {
4466
4384
  width: '100%',
4467
4385
  borderRadius: theme?.shape?.borderRadius?.regular,
4468
4386
  position: 'relative',
4469
- overflow: 'hidden',
4470
4387
  paddingBottom: '56.25%'
4471
4388
  },
4472
4389
  iframe: {
@@ -4481,32 +4398,43 @@ const useVideoStyles = createUseStyles(theme => {
4481
4398
  margin: '12px 12px 0'
4482
4399
  },
4483
4400
  videoDetailsHeading: {
4484
- fontSize: theme.typography.fontSize.h5,
4485
- fontWeight: theme.typography.fontWeight.bold,
4401
+ fontSize: '24px',
4486
4402
  lineHeight: '32px',
4487
- marginBottom: '8px',
4403
+ margin: '0',
4488
4404
  color: theme?.palette?.font?.default,
4489
4405
  wordBreak: 'break-word'
4490
4406
  },
4491
4407
  videoDetailsSubHeading: {
4492
- fontSize: theme.typography.fontSize.subHead,
4408
+ fontSize: '16px',
4493
4409
  lineHeight: '24px',
4494
4410
  wordBreak: 'break-word',
4495
4411
  color: theme?.palette?.font?.primary
4496
4412
  },
4497
4413
  '@media (max-width: 767px)': {
4414
+ videoSuperContainer: {
4415
+ padding: '70px 20px 60px'
4416
+ },
4498
4417
  videoHeading: {
4499
- lineHeight: '20px'
4418
+ fontSize: '16px',
4419
+ lineHeight: '20px',
4420
+ letterSpacing: '3px'
4421
+ },
4422
+ videoTitle: {
4423
+ fontSize: '24px',
4424
+ lineHeight: '36px',
4425
+ letterSpacing: '-1px',
4426
+ marginBottom: '0',
4427
+ marginTop: '0'
4500
4428
  },
4501
4429
  videoContainer: {
4502
4430
  margin: '0'
4503
4431
  },
4504
4432
  sliderContainer: {
4505
- // marginLeft: '-6px',
4506
- marginRight: '0px'
4433
+ marginLeft: '-6px',
4434
+ marginRight: '-20px'
4507
4435
  },
4508
4436
  singleSlideContainer: {
4509
- padding: '16px',
4437
+ padding: '0',
4510
4438
  width: 'calc(100% - 12px)',
4511
4439
  height: 'calc(100% - 24px)',
4512
4440
  margin: '12px 6px'
@@ -4518,28 +4446,14 @@ const useVideoStyles = createUseStyles(theme => {
4518
4446
  textAlign: 'left',
4519
4447
  margin: '12px 12px 0'
4520
4448
  },
4521
- videoTitle: {
4522
- display: 'flex',
4523
- justifyContent: 'center',
4524
- textAlign: 'center',
4525
- lineHeight: '36px',
4526
- letterSpacing: '-1px'
4449
+ videoDetailsHeading: {
4450
+ fontSize: '18px',
4451
+ margin: '0'
4527
4452
  },
4528
- videoHeading: {
4529
- display: 'flex',
4530
- justifyContent: 'center',
4531
- textAlign: 'center'
4453
+ videoDetailsSubHeading: {
4454
+ fontSize: '12px',
4455
+ paddingBottom: '20px'
4532
4456
  }
4533
-
4534
- // videoDetailsHeading: {
4535
- // fontSize: '18px',
4536
- // margin: '0'
4537
- // },
4538
-
4539
- // videoDetailsSubHeading: {
4540
- // fontSize: '12px',
4541
- // paddingBottom: '20px'
4542
- // }
4543
4457
  }
4544
4458
  };
4545
4459
  });
@@ -4553,7 +4467,10 @@ const SingleSlide$1 = props => {
4553
4467
  className: classes.singleSlideContainer
4554
4468
  }, /*#__PURE__*/React.createElement("div", {
4555
4469
  ref: data?.videoFrame?.refSetter,
4556
- className: classes.iframeContainer
4470
+ className: classes.iframeContainer,
4471
+ style: {
4472
+ background: 'linear-gradient(#333333,rgb(0 0 0))'
4473
+ }
4557
4474
  }, /*#__PURE__*/React.createElement(VideoPlayer, {
4558
4475
  imageUrl: data.videoFrame.metadata?.thumbnail,
4559
4476
  videoUrl: data.videoFrame.metadata?.value
@@ -4589,13 +4506,12 @@ function Video({
4589
4506
  const classes = useVideoStyles({
4590
4507
  containerWidth,
4591
4508
  cardsCount,
4592
- slidesToShow,
4593
- isMobile
4509
+ slidesToShow
4594
4510
  });
4595
4511
  const settings = {
4596
4512
  className: classes.sliderContainer,
4597
4513
  slidesToShow,
4598
- centerPadding: isMobile ? '0px' : '100px 0 0',
4514
+ centerPadding: isMobile ? '40px 0 0' : '100px 0 0',
4599
4515
  centerMode: true
4600
4516
  };
4601
4517
  const carouselContent = videoData.videoCarousel.components.map((data, index) => /*#__PURE__*/React.createElement(SingleSlide$1, {
@@ -4638,7 +4554,7 @@ var index$e = /*#__PURE__*/Object.freeze({
4638
4554
  const useSectionStyles$3 = createUseStyles(theme => ({
4639
4555
  section: {
4640
4556
  position: 'relative',
4641
- padding: `${theme?.spacing?.padding?.regular}px 0px ${theme?.spacing?.padding?.regular}px ${theme?.spacing?.padding?.medium}px`,
4557
+ padding: '70px 0',
4642
4558
  backgroundColor: theme?.palette?.background?.default,
4643
4559
  '&, & *, & *:before, & *:after': {
4644
4560
  fontFamily: theme?.typography?.fontFamily,
@@ -4666,11 +4582,12 @@ const useSectionStyles$3 = createUseStyles(theme => ({
4666
4582
  width: '100%'
4667
4583
  },
4668
4584
  content: {
4669
- position: 'relative'
4585
+ position: 'relative',
4586
+ margin: '0 70px'
4670
4587
  },
4671
4588
  subTitleHeading: {
4672
4589
  width: '100%',
4673
- fontSize: theme.typography.fontSize.subHead,
4590
+ fontSize: '16px',
4674
4591
  color: theme?.palette?.font?.tertiary,
4675
4592
  textAlign: 'left',
4676
4593
  lineHeight: '20px',
@@ -4678,8 +4595,8 @@ const useSectionStyles$3 = createUseStyles(theme => ({
4678
4595
  wordBreak: 'break-word'
4679
4596
  },
4680
4597
  heading: {
4681
- margin: `8px 0 ${theme.spacing.margin.tiny}px`,
4682
- fontSize: theme.typography.fontSize.h2,
4598
+ margin: '8px 0 20px',
4599
+ fontSize: '56px',
4683
4600
  width: '100%',
4684
4601
  lineHeight: '70px',
4685
4602
  color: theme?.palette?.font?.default,
@@ -4701,16 +4618,16 @@ const useSectionStyles$3 = createUseStyles(theme => ({
4701
4618
  height: 'calc(100% - 12px)'
4702
4619
  },
4703
4620
  cardContent: {
4704
- padding: theme.spacing.padding.tiny,
4621
+ padding: '32px',
4705
4622
  height: '100%',
4706
4623
  display: 'flex',
4707
4624
  flexDirection: 'column'
4708
4625
  },
4709
4626
  cardHeading: {
4710
- fontSize: theme.typography.fontSize.h5,
4627
+ fontSize: '24px',
4711
4628
  lineHeight: '32px',
4712
4629
  color: theme?.palette?.font?.default,
4713
- margin: `${theme.spacing.margin.tiny}px 0px`,
4630
+ margin: '32px 0 16px',
4714
4631
  wordBreak: 'break-word'
4715
4632
  },
4716
4633
  imageContainer: {
@@ -4723,7 +4640,7 @@ const useSectionStyles$3 = createUseStyles(theme => ({
4723
4640
  background: theme?.palette?.background?.primary
4724
4641
  },
4725
4642
  cardPara: {
4726
- fontSize: theme.typography.fontSize.subHead,
4643
+ fontSize: '16px',
4727
4644
  lineHeight: '24px',
4728
4645
  color: theme?.palette?.font?.primary,
4729
4646
  margin: '0',
@@ -4739,10 +4656,13 @@ const useSectionStyles$3 = createUseStyles(theme => ({
4739
4656
  '@media screen and (max-width: 767px)': {
4740
4657
  heading: {
4741
4658
  fontSize: '24px',
4742
- margin: `4px 0 ${theme.spacing.margin.tiny}px`,
4659
+ margin: '4px 0 12px',
4743
4660
  lineHeight: '36px',
4744
4661
  padding: '0'
4745
4662
  },
4663
+ content: {
4664
+ margin: '0 20px'
4665
+ },
4746
4666
  sliderContainer: {
4747
4667
  marginLeft: '-6px',
4748
4668
  marginRight: '-20px'
@@ -4757,6 +4677,12 @@ const useSectionStyles$3 = createUseStyles(theme => ({
4757
4677
  slidesToShow,
4758
4678
  cardsCount
4759
4679
  } = {}) => cardsCount > slidesToShow ? `6px 2px 6px 6px` : `6px 0 6px 0`
4680
+ },
4681
+ cardContent: {
4682
+ padding: '20px'
4683
+ },
4684
+ cardHeading: {
4685
+ margin: '14px 0'
4760
4686
  }
4761
4687
  }
4762
4688
  }));
@@ -4853,56 +4779,67 @@ var index$d = /*#__PURE__*/Object.freeze({
4853
4779
 
4854
4780
  const useSectionStyles$2 = createUseStyles(theme => ({
4855
4781
  section: {
4856
- padding: ({
4857
- isMobile
4858
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
4782
+ padding: '70px',
4859
4783
  backgroundColor: theme?.palette?.background?.default,
4860
4784
  '&, & *, & *:before, & *:after': {
4861
4785
  fontFamily: theme?.typography?.fontFamily,
4862
4786
  boxSizing: 'border-box'
4863
4787
  },
4864
- '& h2,& h3,& p': {
4865
- margin: '0'
4788
+ '& h2,& h3': {
4789
+ fontWeight: '500',
4790
+ '& b,& strong': {
4791
+ fontWeight: '700'
4792
+ }
4866
4793
  }
4867
4794
  },
4868
4795
  sectionContainer: {
4796
+ margin: '0 auto',
4869
4797
  maxWidth: ({
4870
4798
  containerWidth
4871
4799
  } = {}) => containerWidth
4872
4800
  },
4873
4801
  subHeading: {
4874
- fontSize: theme.typography.fontSize.subHead,
4802
+ fontSize: '20px',
4875
4803
  marginBottom: '8px',
4876
4804
  color: theme?.palette?.font?.tertiary,
4877
- wordBreak: 'break-word',
4878
- textTransform: 'uppercase',
4879
- letterSpacing: '3px'
4805
+ wordBreak: 'break-word'
4880
4806
  },
4881
4807
  title: {
4882
- fontSize: theme.typography.fontSize.h2,
4883
- fontWeight: theme.typography.fontWeight.bold,
4884
- lineHeight: 'normal',
4808
+ fontSize: '56px',
4809
+ lineHeight: '70px',
4885
4810
  margin: '0',
4886
4811
  color: theme?.palette?.font?.default,
4887
- wordBreak: 'break-word',
4888
- marginBottom: theme.spacing.margin.tiny
4812
+ wordBreak: 'break-word'
4889
4813
  },
4890
4814
  textContent: {
4891
4815
  display: 'grid',
4892
4816
  gridTemplateColumns: '1fr 1fr',
4893
- gap: '48px',
4894
- padding: '48px 0px'
4817
+ gap: '80px'
4895
4818
  },
4896
4819
  textPara: {
4820
+ margin: '20px 0 0 0',
4897
4821
  lineHeight: '24px',
4898
4822
  color: theme?.palette?.font?.primary,
4899
- wordBreak: 'break-word',
4900
- fontSize: theme.typography.fontSize.subHead
4823
+ wordBreak: 'break-word'
4901
4824
  },
4902
4825
  '@media screen and (max-width: 767px)': {
4826
+ section: {
4827
+ padding: '60px 20px'
4828
+ },
4829
+ subHeading: {
4830
+ fontSize: '16px',
4831
+ lineHeight: '20px',
4832
+ marginBottom: '4px'
4833
+ },
4834
+ title: {
4835
+ fontSize: '24px',
4836
+ lineHeight: '36px'
4837
+ },
4903
4838
  textContent: {
4904
- gap: '16px',
4905
- padding: '16px 0px'
4839
+ display: 'block'
4840
+ },
4841
+ textPara: {
4842
+ marginTop: '12px'
4906
4843
  }
4907
4844
  }
4908
4845
  }));
@@ -4913,12 +4850,10 @@ const TextSection = ({
4913
4850
  const {
4914
4851
  layout: {
4915
4852
  containerWidth
4916
- },
4917
- isMobile
4853
+ }
4918
4854
  } = useContext(PageContext);
4919
4855
  const classes = useSectionStyles$2({
4920
- containerWidth,
4921
- isMobile
4856
+ containerWidth
4922
4857
  });
4923
4858
  const [nodeData] = sectionData.components;
4924
4859
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("section", {
@@ -4965,21 +4900,18 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
4965
4900
  return {
4966
4901
  container: {
4967
4902
  background: theme?.palette?.background?.default,
4968
- padding: ({
4969
- isMobile
4970
- } = {}) => 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`,
4903
+ padding: '70px',
4971
4904
  '&, & *, & *:before, & *:after': {
4972
4905
  fontFamily: theme?.typography?.fontFamily,
4973
4906
  boxSizing: 'border-box'
4907
+ },
4908
+ '& h2,& h3': {
4909
+ fontWeight: '500',
4910
+ '& b,& strong': {
4911
+ fontWeight: '700'
4912
+ }
4974
4913
  }
4975
- // '& h2,& h3': {
4976
- // fontWeight: '500',
4977
- // '& b,& strong': {
4978
- // fontWeight: '700'
4979
- // }
4980
- // }
4981
4914
  },
4982
-
4983
4915
  sectionContainer: {
4984
4916
  margin: '0 auto',
4985
4917
  maxWidth: ({
@@ -4988,15 +4920,13 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
4988
4920
  },
4989
4921
  cardHeading: {
4990
4922
  color: theme?.palette?.font?.secondary,
4991
- fontSize: theme.typography.fontSize.subHead,
4923
+ fontSize: '16px',
4992
4924
  letterSpacing: '3px',
4993
- wordBreak: 'break-word',
4994
- textTransform: 'uppercase'
4925
+ wordBreak: 'break-word'
4926
+ },
4927
+ sliderContainer: {
4928
+ marginRight: '-70px'
4995
4929
  },
4996
- // sliderContainer: {
4997
- // marginRight: '-70px'
4998
- // },
4999
-
5000
4930
  singleCard: {
5001
4931
  margin: '0 1px',
5002
4932
  width: 'calc(100% - 2px)',
@@ -5019,26 +4949,24 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
5019
4949
  height: '100%'
5020
4950
  },
5021
4951
  title: {
5022
- fontSize: theme.typography.fontSize.h2,
4952
+ fontSize: '56px',
5023
4953
  lineHeight: '70px',
5024
4954
  letterSpacing: '-3px',
5025
4955
  color: theme?.palette?.font?.default,
5026
- marginTop: '8px',
5027
- marginBottom: theme.spacing.margin.tiny,
4956
+ margin: '8px 0 20px',
5028
4957
  overflow: 'hidden',
5029
4958
  whiteSpace: 'nowrap',
5030
4959
  textOverflow: 'ellipsis'
5031
4960
  },
5032
4961
  '@media (max-width: 768px)': {
5033
- // container: {
5034
- // padding: '60px 20px'
5035
- // },
5036
-
5037
- // cardHeading: {
5038
- // marginLeft: '3px'
5039
- // },
5040
-
4962
+ container: {
4963
+ padding: '60px 20px'
4964
+ },
4965
+ cardHeading: {
4966
+ marginLeft: '3px'
4967
+ },
5041
4968
  title: {
4969
+ fontSize: '24px',
5042
4970
  lineHeight: '36px',
5043
4971
  letterSpacing: '-1px',
5044
4972
  color: theme?.palette?.font?.default,
@@ -5046,11 +4974,10 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
5046
4974
  overflow: 'hidden',
5047
4975
  whiteSpace: 'nowrap',
5048
4976
  textOverflow: 'ellipsis'
4977
+ },
4978
+ sliderContainer: {
4979
+ marginRight: '-20px'
5049
4980
  }
5050
-
5051
- // sliderContainer: {
5052
- // marginRight: '-20px'
5053
- // }
5054
4981
  }
5055
4982
  };
5056
4983
  });
@@ -5072,12 +4999,11 @@ function PhotoGallery({
5072
4999
  const classes = usePhotoGalleryStyles({
5073
5000
  containerWidth,
5074
5001
  cardsCount,
5075
- slidesToShow,
5076
- isMobile
5002
+ slidesToShow
5077
5003
  });
5078
5004
  const settings = {
5079
5005
  className: classes.sliderContainer,
5080
- dots: isMobile,
5006
+ dots: false,
5081
5007
  infinite: true,
5082
5008
  speed: 500,
5083
5009
  slidesToShow,
@@ -5131,69 +5057,64 @@ var index$b = /*#__PURE__*/Object.freeze({
5131
5057
  const useFaqListStyles = createUseStyles(theme => ({
5132
5058
  section: {
5133
5059
  width: '100%',
5134
- padding: ({
5135
- isMobile
5136
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
5060
+ padding: '70px',
5137
5061
  backgroundColor: theme?.palette?.background?.primary,
5138
5062
  '&, & *, & *:before, & *:after': {
5139
5063
  fontFamily: theme?.typography?.fontFamily,
5140
5064
  boxSizing: 'border-box'
5141
5065
  },
5142
5066
  '& h2,& h3': {
5143
- marginTop: '0'
5067
+ fontWeight: '500',
5068
+ '& b,& strong': {
5069
+ fontWeight: '700'
5070
+ }
5144
5071
  }
5145
5072
  },
5146
5073
  sectionContainer: {
5074
+ margin: '0 auto',
5147
5075
  maxWidth: ({
5148
5076
  containerWidth
5149
5077
  } = {}) => containerWidth
5150
5078
  },
5151
5079
  sectionSubheading: {
5152
5080
  color: theme?.palette?.font.tertiary,
5153
- fontSize: theme.typography.fontSize.subHead,
5081
+ fontSize: '16px',
5154
5082
  marginBottom: '8px',
5155
5083
  wordBreak: 'break-word'
5156
5084
  },
5157
5085
  sectionHeading: {
5158
- fontSize: theme.typography.fontSize.h2,
5159
- fontWeight: theme.typography.fontWeight.bold,
5086
+ fontSize: '56px',
5087
+ margin: '0 0 20px',
5160
5088
  wordBreak: 'break-word',
5161
- marginBottom: `${theme.spacing.margin.tiny}px`
5089
+ lineHeight: '71px'
5162
5090
  },
5163
5091
  container: {
5164
5092
  boxShadow: theme?.shadows?.secondary,
5165
5093
  borderRadius: '8px',
5166
- backgroundColor: theme?.palette?.background?.default
5094
+ backgroundColor: theme?.palette?.background?.default,
5095
+ padding: '40px 60px 60px'
5167
5096
  },
5168
5097
  basicCardContainer: {
5169
- borderBottom: theme?.borders?.secondary,
5170
- padding: `${theme.spacing.padding.tiny}px`
5171
- },
5172
- innerContainer: {
5173
- display: 'flex',
5174
- flexDirection: 'column',
5175
- gap: ({
5176
- isSelected
5177
- } = {}) => isSelected ? '16px' : '0'
5178
- },
5179
- arrowButton: {
5180
- marginLeft: theme.spacing.margin.tiny
5098
+ borderBottom: theme?.borders?.secondary
5181
5099
  },
5182
5100
  header: {
5183
5101
  display: 'flex',
5184
5102
  justifyContent: 'space-between',
5185
- alignItems: 'center'
5103
+ alignItems: 'center',
5104
+ padding: '20px 0'
5186
5105
  },
5187
5106
  title: {
5188
5107
  color: theme?.palette?.font.default,
5189
- fontSize: theme.typography.fontSize.h5,
5190
- fontWeight: theme.typography.fontWeight.bold,
5108
+ fontSize: '24px',
5191
5109
  margin: '0',
5192
5110
  wordBreak: 'break-word'
5193
5111
  },
5194
5112
  content: {
5113
+ margin: ({
5114
+ isSelected
5115
+ } = {}) => isSelected ? '0 0 20px 0' : '0',
5195
5116
  color: theme?.palette?.font.primary,
5196
- fontSize: theme.typography.fontSize.subHead,
5117
+ fontSize: '16px',
5197
5118
  lineHeight: '24px',
5198
5119
  maxHeight: ({
5199
5120
  isSelected
@@ -5202,12 +5123,28 @@ const useFaqListStyles = createUseStyles(theme => ({
5202
5123
  overflow: 'hidden'
5203
5124
  },
5204
5125
  '@media screen and (max-width: 767px)': {
5126
+ section: {
5127
+ padding: '60px 20px'
5128
+ },
5129
+ sectionHeading: {
5130
+ fontSize: '36px'
5131
+ },
5132
+ header: {
5133
+ padding: '20px 0'
5134
+ },
5135
+ title: {
5136
+ fontSize: '18px'
5137
+ },
5205
5138
  content: {
5206
5139
  lineHeight: '20px'
5207
5140
  },
5141
+ container: {
5142
+ padding: '0 20px'
5143
+ },
5208
5144
  basicCardContainer: {
5209
5145
  '&:last-child': {
5210
- borderBottom: 'none'
5146
+ borderBottom: 'none',
5147
+ paddingBottom: '1px'
5211
5148
  }
5212
5149
  }
5213
5150
  }
@@ -5220,13 +5157,11 @@ const FAQListing = ({
5220
5157
  const {
5221
5158
  layout: {
5222
5159
  containerWidth
5223
- },
5224
- isMobile
5160
+ }
5225
5161
  } = useContext(PageContext);
5226
5162
  const classes = useFaqListStyles({
5227
5163
  selectedIndex,
5228
- containerWidth,
5229
- isMobile
5164
+ containerWidth
5230
5165
  });
5231
5166
  const [nodeData] = sectionData.components;
5232
5167
  return /*#__PURE__*/React.createElement("section", {
@@ -5269,8 +5204,7 @@ const Accordion = ({
5269
5204
  return /*#__PURE__*/React.createElement("div", {
5270
5205
  className: classes.basicCardContainer
5271
5206
  }, /*#__PURE__*/React.createElement("div", {
5272
- onClick: onClick,
5273
- className: classes.innerContainer
5207
+ onClick: onClick
5274
5208
  }, /*#__PURE__*/React.createElement("div", {
5275
5209
  className: classes.header
5276
5210
  }, /*#__PURE__*/React.createElement("h3", {
@@ -5279,9 +5213,7 @@ const Accordion = ({
5279
5213
  dangerouslySetInnerHTML: {
5280
5214
  __html: item.question.metadata.value
5281
5215
  }
5282
- }), /*#__PURE__*/React.createElement("div", {
5283
- className: classes.arrowButton
5284
- }, /*#__PURE__*/React.createElement(ArrowButton, {
5216
+ }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ArrowButton, {
5285
5217
  down: isSelected,
5286
5218
  up: !isSelected,
5287
5219
  size: "small"
@@ -5301,25 +5233,19 @@ var index$a = /*#__PURE__*/Object.freeze({
5301
5233
 
5302
5234
  const useTextGridStyles = createUseStyles(theme => ({
5303
5235
  section: {
5304
- padding: ({
5305
- isMobile
5306
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
5236
+ padding: '70px',
5307
5237
  backgroundColor: theme?.palette?.background?.primary,
5308
5238
  '&, & *, & *:before, & *:after': {
5309
5239
  fontFamily: theme?.typography?.fontFamily,
5310
5240
  boxSizing: 'border-box'
5311
5241
  },
5312
- '& h2,& h3,& p': {
5313
- marginTop: '0'
5242
+ '& h2,& h3': {
5243
+ fontWeight: '500',
5244
+ '& b,& strong': {
5245
+ fontWeight: '700'
5246
+ }
5314
5247
  }
5315
- // '& h2,& h3': {
5316
- // fontWeight: '500',
5317
- // '& b,& strong': {
5318
- // fontWeight: '700'
5319
- // }
5320
- // }
5321
5248
  },
5322
-
5323
5249
  sectionContainer: {
5324
5250
  margin: '0 auto',
5325
5251
  maxWidth: ({
@@ -5328,27 +5254,24 @@ const useTextGridStyles = createUseStyles(theme => ({
5328
5254
  },
5329
5255
  subheading: {
5330
5256
  color: theme?.palette?.font.tertiary,
5331
- fontSize: theme.typography.fontSize.subHead,
5257
+ fontSize: '16px',
5332
5258
  lineHeight: '20px',
5333
5259
  letterSpacing: '3px',
5334
- wordBreak: 'break-word',
5335
- textTransform: 'uppercase',
5336
- marginBottom: '8px'
5260
+ wordBreak: 'break-word'
5337
5261
  },
5338
5262
  heading: {
5339
- fontSize: theme.typography.fontSize.h2,
5340
- lineHeight: 'normal',
5341
- fontWeight: theme.typography.fontWeight.bold,
5263
+ fontSize: '56px',
5264
+ lineHeight: '70px',
5342
5265
  letterSpacing: '-3px',
5343
- marginBottom: theme.spacing.margin.tiny,
5266
+ margin: '8px 0 16px',
5344
5267
  wordBreak: 'break-word'
5345
5268
  },
5346
5269
  sliderContainer: {
5347
5270
  margin: '0 -10px'
5348
5271
  },
5349
5272
  node: {
5350
- margin: '0 16px',
5351
- padding: '48px',
5273
+ margin: '6px 10px',
5274
+ padding: '40px',
5352
5275
  position: 'relative',
5353
5276
  height: 'calc(100% - 12px)',
5354
5277
  background: theme?.palette?.background?.default,
@@ -5357,16 +5280,16 @@ const useTextGridStyles = createUseStyles(theme => ({
5357
5280
  },
5358
5281
  nodeTitle: {
5359
5282
  color: theme?.palette?.font.secondary,
5360
- fontSize: theme.typography.fontSize.h3,
5361
- fontWeight: theme.typography.fontWeight.bold,
5362
- lineHeight: 'normal',
5283
+ fontSize: '40px',
5284
+ lineHeight: '48px',
5363
5285
  margin: '0 0 20px',
5364
5286
  wordBreak: 'break-word'
5365
5287
  },
5366
5288
  nodePara: {
5367
5289
  color: theme?.palette?.font.tertiary,
5368
- fontSize: theme.typography.fontSize.subHead,
5290
+ fontSize: '16px',
5369
5291
  lineHeight: '24px',
5292
+ margin: '20px 0',
5370
5293
  wordBreak: 'break-word'
5371
5294
  },
5372
5295
  contentRow: {
@@ -5376,21 +5299,27 @@ const useTextGridStyles = createUseStyles(theme => ({
5376
5299
  } = {}) => `repeat(${slidesToShow},minmax(0, 1fr))`
5377
5300
  },
5378
5301
  '@media screen and (max-width: 767px)': {
5302
+ section: {
5303
+ padding: '60px 20px'
5304
+ },
5305
+ heading: {
5306
+ fontSize: '24px',
5307
+ lineHeight: '36px',
5308
+ letterSpacing: '-1px',
5309
+ margin: '4px 0 6px'
5310
+ },
5379
5311
  sliderContainer: {
5380
5312
  margin: '0 -20px 0 -10px'
5381
5313
  },
5382
5314
  node: {
5383
- padding: '16px',
5384
- margin: '0 6px'
5315
+ padding: '20px'
5385
5316
  },
5386
5317
  nodeTitle: {
5387
- marginBottom: '0px'
5388
- },
5389
- nodePara: {
5390
- margin: '16px 0'
5318
+ fontSize: '24px',
5319
+ lineHeight: '36px'
5391
5320
  },
5392
- heading: {
5393
- letterSpacing: '-1px'
5321
+ nodePara: {
5322
+ margin: '12px 0'
5394
5323
  }
5395
5324
  }
5396
5325
  }));
@@ -5410,8 +5339,7 @@ const TextGrid = ({
5410
5339
  const classes = useTextGridStyles({
5411
5340
  containerWidth,
5412
5341
  cardsCount,
5413
- slidesToShow,
5414
- isMobile
5342
+ slidesToShow
5415
5343
  });
5416
5344
  const settings = {
5417
5345
  className: classes.sliderContainer,
@@ -5472,46 +5400,39 @@ const useCourseStyles = createUseStyles(theme => {
5472
5400
  return {
5473
5401
  coursesContainer: {
5474
5402
  overflow: 'hidden',
5475
- padding: ({
5476
- isMobile
5477
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
5478
5403
  '&, & *, & *:before, & *:after': {
5479
5404
  fontFamily: theme?.typography?.fontFamily,
5480
5405
  boxSizing: 'border-box'
5406
+ },
5407
+ '& h2,& h3': {
5408
+ fontWeight: '500',
5409
+ '& b,& strong': {
5410
+ fontWeight: '700'
5411
+ }
5481
5412
  }
5482
- // '& h2,& h3': {
5483
- // fontWeight: '500',
5484
- // '& b,& strong': {
5485
- // fontWeight: '700'
5486
- // }
5487
- // }
5488
5413
  },
5489
-
5490
5414
  sectionContainer: {
5491
5415
  margin: '0 auto',
5492
5416
  maxWidth: ({
5493
5417
  containerWidth
5494
5418
  } = {}) => containerWidth
5495
5419
  },
5496
- // coursesCardAndText: {
5497
- // padding: '70px'
5498
- // },
5499
-
5420
+ coursesCardAndText: {
5421
+ padding: '70px'
5422
+ },
5500
5423
  coursesText: {
5501
5424
  color: theme?.palette?.font?.secondary,
5502
5425
  fontWeight: '400',
5503
- fontSize: theme.typography.fontSize.subHead,
5426
+ fontSize: '16px',
5504
5427
  lineHeight: '20px',
5505
5428
  textAlign: 'center',
5506
- textTransform: 'uppercase',
5507
5429
  wordBreak: 'break-word'
5508
5430
  },
5509
5431
  coursesHeader: {
5510
- fontSize: theme.typography.fontSize.h2,
5432
+ fontSize: '56px',
5511
5433
  lineHeight: '70px',
5512
5434
  color: theme?.palette?.font?.default,
5513
- marginTop: '8px',
5514
- marginBottom: theme.spacing.margin.tiny,
5435
+ margin: '10px 0 40px 10px',
5515
5436
  overflow: 'hidden',
5516
5437
  whiteSpace: 'nowrap',
5517
5438
  textOverflow: 'ellipsis',
@@ -5586,7 +5507,7 @@ const useCourseStyles = createUseStyles(theme => {
5586
5507
  courseCardName: {
5587
5508
  color: theme?.palette?.font?.default,
5588
5509
  fontWeight: '700',
5589
- fontSize: theme.typography.fontSize.h5,
5510
+ fontSize: '24px',
5590
5511
  lineHeight: '32px',
5591
5512
  wordBreak: 'break-word',
5592
5513
  padding: '12px 0px',
@@ -5601,7 +5522,7 @@ const useCourseStyles = createUseStyles(theme => {
5601
5522
  display: 'flex',
5602
5523
  justifyContent: 'flex-start',
5603
5524
  alignItems: 'center',
5604
- fontSize: theme.typography.fontSize.subHead,
5525
+ fontSize: '16px',
5605
5526
  color: theme?.palette?.font?.primary,
5606
5527
  '& img': {
5607
5528
  marginRight: '5px'
@@ -5613,10 +5534,10 @@ const useCourseStyles = createUseStyles(theme => {
5613
5534
  display: 'flex',
5614
5535
  justifyContent: 'space-between',
5615
5536
  alignItems: 'center',
5616
- padding: '12px 0 0 4px'
5537
+ padding: '13px 0 0 4px'
5617
5538
  },
5618
5539
  courseCardPrice: {
5619
- fontSize: theme.typography.fontSize.h5,
5540
+ fontSize: '24px',
5620
5541
  fontWeight: '700'
5621
5542
  },
5622
5543
  coursesAnchorTag: {
@@ -5637,8 +5558,7 @@ const useCourseStyles = createUseStyles(theme => {
5637
5558
  cursor: 'pointer',
5638
5559
  background: theme?.palette?.primary?.main,
5639
5560
  color: theme?.palette?.font?.invertedDefault,
5640
- padding: '8px 16px',
5641
- fontWeight: theme.typography.fontWeight.bold,
5561
+ padding: '12px 16px',
5642
5562
  cursor: 'pointer',
5643
5563
  borderRadius: theme.shape.borderRadius.regular
5644
5564
  },
@@ -5683,7 +5603,7 @@ const useCourseStyles = createUseStyles(theme => {
5683
5603
  //background: theme?.palette?.background?.primary
5684
5604
  },
5685
5605
  coursesCardAndText: {
5686
- // padding: '70px 30px'
5606
+ padding: '70px 30px'
5687
5607
  },
5688
5608
  singleCardContainer: {
5689
5609
  gridTemplateColumns: '1fr'
@@ -5692,7 +5612,7 @@ const useCourseStyles = createUseStyles(theme => {
5692
5612
  margin: '0'
5693
5613
  },
5694
5614
  coursesHeader: {
5695
- // fontSize: '24px',
5615
+ fontSize: '24px',
5696
5616
  lineHeight: '36px',
5697
5617
  color: theme?.palette?.font?.default,
5698
5618
  margin: '4px 0 12px 0',
@@ -5701,8 +5621,8 @@ const useCourseStyles = createUseStyles(theme => {
5701
5621
  textOverflow: 'ellipsis'
5702
5622
  },
5703
5623
  singleCard: {
5704
- margin: '6px 2px'
5705
- // width: 'calc(100% - 12px)'
5624
+ margin: '6px 2px',
5625
+ width: 'calc(100% - 4px)'
5706
5626
  }
5707
5627
  }
5708
5628
  };
@@ -5867,8 +5787,7 @@ function courses({
5867
5787
  const [fallBackImages, setFallbackImages] = useState([]);
5868
5788
  const [showShimmer, setShowShimmer] = useState(true);
5869
5789
  const classes = useCourseStyles({
5870
- containerWidth,
5871
- isMobile
5790
+ containerWidth
5872
5791
  });
5873
5792
  const [nodeData] = sectionData?.components;
5874
5793
  const handleApiCall = () => {
@@ -5920,7 +5839,7 @@ function courses({
5920
5839
  const settings = {
5921
5840
  className: classes.slickContainer,
5922
5841
  infinite: false,
5923
- slidesToShow: isMobile ? 1 : 3.5
5842
+ slidesToShow: isMobile ? 1.1 : 3.25
5924
5843
  };
5925
5844
  const Wrapper = (cardList?.length || fallBackImages?.length) > settings.slidesToShow ? Carousel : SimpleCardsContainer;
5926
5845
  const wrapperProps = (cardList?.length || fallBackImages?.length) > settings.slidesToShow ? {
@@ -5996,16 +5915,17 @@ var index$8 = /*#__PURE__*/Object.freeze({
5996
5915
  const useTeamStyles = createUseStyles(theme => {
5997
5916
  return {
5998
5917
  teamSuperContainer: {
5999
- padding: ({
6000
- isMobile
6001
- } = {}) => 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`,
5918
+ padding: '60px',
6002
5919
  backgroundColor: theme?.palette?.background?.primary,
6003
5920
  '&, & *, & *:before, & *:after': {
6004
5921
  fontFamily: theme?.typography?.fontFamily,
6005
5922
  boxSizing: 'border-box'
6006
5923
  },
6007
5924
  '& h2,& h3': {
6008
- margin: '0'
5925
+ fontWeight: '500',
5926
+ '& b,& strong': {
5927
+ fontWeight: '700'
5928
+ }
6009
5929
  }
6010
5930
  },
6011
5931
  sectionContainer: {
@@ -6015,20 +5935,19 @@ const useTeamStyles = createUseStyles(theme => {
6015
5935
  } = {}) => containerWidth
6016
5936
  },
6017
5937
  teamHeading: {
6018
- fontSize: theme.typography.fontSize.subHead,
6019
- textTransform: 'uppercase',
5938
+ fontSize: '16px',
6020
5939
  lineHeight: '20px',
6021
5940
  letterSpacing: '3px',
6022
- marginBottom: '8px',
5941
+ margin: '0 0 8px',
6023
5942
  color: theme?.palette?.font?.primary,
6024
5943
  wordBreak: 'break-word'
6025
5944
  },
6026
5945
  teamTitle: {
6027
- fontSize: theme.typography.fontSize.h2,
6028
- fontWeight: theme.typography.fontWeight.bold,
5946
+ fontSize: '56px',
6029
5947
  lineHeight: '70px',
6030
5948
  letterSpacing: '-3px',
6031
5949
  wordBreak: 'break-word',
5950
+ margin: '0 ',
6032
5951
  color: theme?.palette?.font?.default
6033
5952
  },
6034
5953
  sliderContainer: {
@@ -6043,11 +5962,10 @@ const useTeamStyles = createUseStyles(theme => {
6043
5962
  singleSlideContainer: {
6044
5963
  backgroundColor: theme?.palette?.background?.default,
6045
5964
  margin: '20px',
6046
- width: 'calc(100% - 32px)',
6047
- // height: 'calc(100% - 40px)',
6048
- border: '3px solid #D8E0F0',
5965
+ width: 'calc(100% - 40px)',
5966
+ height: 'calc(100% - 40px)',
6049
5967
  borderRadius: theme?.shape?.borderRadius?.regular,
6050
- padding: theme.spacing.padding.tiny,
5968
+ padding: '32px',
6051
5969
  boxShadow: theme?.shadows?.primary
6052
5970
  },
6053
5971
  imageContainer: {
@@ -6072,28 +5990,32 @@ const useTeamStyles = createUseStyles(theme => {
6072
5990
  overflowWrap: 'break-word'
6073
5991
  },
6074
5992
  teamDetailsHeading: {
6075
- fontSize: theme.typography.fontSize.h5,
6076
- fontWeight: theme.typography.fontWeight.bold,
5993
+ fontSize: '24px',
6077
5994
  lineHeight: '32px',
6078
5995
  margin: '0',
6079
5996
  color: theme?.palette?.font?.default
6080
5997
  },
6081
5998
  teamDetailsSubHeading: {
6082
- fontSize: theme.typography.fontSize.subHead,
5999
+ fontSize: '16px',
6083
6000
  lineHeight: '24px',
6084
6001
  margin: '12px 0 0',
6085
6002
  color: theme?.palette?.font?.primary
6086
6003
  },
6087
6004
  '@media (max-width: 767px)': {
6088
- // teamSuperContainer: {
6089
- // padding: '60px 20px'
6090
- // },
6005
+ teamSuperContainer: {
6006
+ padding: '60px 20px'
6007
+ },
6091
6008
  teamHeading: {
6092
- lineHeight: '20px'
6009
+ fontSize: '16px',
6010
+ lineHeight: '20px',
6011
+ letterSpacing: '3px',
6012
+ margin: '0'
6093
6013
  },
6094
6014
  teamTitle: {
6015
+ fontSize: '24px',
6095
6016
  lineHeight: '36px',
6096
- letterSpacing: '-1px'
6017
+ letterSpacing: '-1px',
6018
+ margin: '0'
6097
6019
  },
6098
6020
  sliderContainer: {
6099
6021
  margin: '0 -4px'
@@ -6103,17 +6025,18 @@ const useTeamStyles = createUseStyles(theme => {
6103
6025
  margin: '12px 4px'
6104
6026
  },
6105
6027
  teamDetailsContainer: {
6106
- textAlign: 'center'
6107
- // margin: '15px 0 0',
6108
- // paddingBottom: '0'
6028
+ textAlign: 'center',
6029
+ margin: '15px 0 0',
6030
+ paddingBottom: '0'
6109
6031
  },
6110
-
6111
6032
  teamDetailsHeading: {
6033
+ fontSize: '16px',
6112
6034
  lineHeight: '24px',
6113
6035
  margin: '0',
6114
6036
  color: theme?.palette?.font?.default
6115
6037
  },
6116
6038
  teamDetailsSubHeading: {
6039
+ fontSize: '16px',
6117
6040
  color: theme?.palette?.font?.primary
6118
6041
  }
6119
6042
  }
@@ -6168,8 +6091,7 @@ function TeamCard({
6168
6091
  const classes = useTeamStyles({
6169
6092
  containerWidth,
6170
6093
  cardsCount,
6171
- slidesToShow,
6172
- isMobile
6094
+ slidesToShow
6173
6095
  });
6174
6096
  const settings = {
6175
6097
  className: classes.sliderContainer,
@@ -6226,21 +6148,17 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6226
6148
  flexDirection: 'column',
6227
6149
  alignItems: 'center',
6228
6150
  backgroundColor: theme?.palette?.background?.default,
6229
- padding: ({
6230
- isMobile
6231
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
6232
6151
  '&, & *, & *:before, & *:after': {
6233
6152
  fontFamily: theme?.typography?.fontFamily,
6234
6153
  boxSizing: 'border-box'
6154
+ },
6155
+ '& h2,& h3': {
6156
+ fontWeight: '500',
6157
+ '& b,& strong': {
6158
+ fontWeight: '700'
6159
+ }
6235
6160
  }
6236
- // '& h2,& h3': {
6237
- // fontWeight: '500',
6238
- // '& b,& strong': {
6239
- // fontWeight: '700'
6240
- // }
6241
- // }
6242
6161
  },
6243
-
6244
6162
  formContainer: {
6245
6163
  margin: '0 auto',
6246
6164
  maxWidth: ({
@@ -6259,14 +6177,14 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6259
6177
  backgroundColor: theme?.palette?.background?.default,
6260
6178
  boxShadow: theme?.shadows?.secondary,
6261
6179
  borderRadius: theme?.shape?.borderRadius?.regular,
6262
- padding: '48px',
6180
+ margin: '60px 10%',
6181
+ padding: '40px 80px',
6263
6182
  position: 'relative'
6264
6183
  },
6265
6184
  title: {
6266
6185
  margin: '0',
6267
- fontSize: theme.typography.fontSize.h2,
6186
+ fontSize: '56px',
6268
6187
  color: theme?.palette?.font?.secondary,
6269
- fontWeight: theme.typography.fontWeight.bold,
6270
6188
  lineHeight: '71px',
6271
6189
  letterSpacing: '-3px',
6272
6190
  textAlign: 'left',
@@ -6274,19 +6192,16 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6274
6192
  },
6275
6193
  contentContainer: {
6276
6194
  width: '100%',
6277
- display: 'flex'
6278
- // alignItems: 'flex-start',
6195
+ display: 'flex',
6196
+ alignItems: 'flex-start',
6197
+ marginTop: '32px'
6279
6198
  },
6280
-
6281
6199
  leftContainer: {
6282
- width: '65%',
6283
- display: 'flex',
6284
- flexDirection: 'column',
6285
- justifyContent: 'space-between'
6200
+ width: '65%'
6286
6201
  },
6287
6202
  subtitle: {
6288
- // margin: '0 0 40px 0',
6289
- fontSize: theme.typography.fontSize.h6,
6203
+ margin: '0 0 40px 0',
6204
+ fontSize: '20px',
6290
6205
  color: theme?.palette?.font?.primary,
6291
6206
  lineHeight: '32px',
6292
6207
  wordBreak: 'break-word'
@@ -6308,16 +6223,13 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6308
6223
  padding: '4px 8px 0 0'
6309
6224
  },
6310
6225
  addressText: {
6311
- fontSize: theme.typography.fontSize.subHead,
6226
+ fontSize: '16px',
6312
6227
  color: theme?.palette?.font?.default,
6313
6228
  lineHeight: '24px'
6314
6229
  },
6315
6230
  rightContainer: {
6316
6231
  width: '50%',
6317
- padding: '0 0 0 80px',
6318
- display: 'flex',
6319
- flexDirection: 'column',
6320
- justifyContent: 'space-between'
6232
+ padding: '0 0 0 80px'
6321
6233
  },
6322
6234
  inputDiv: {
6323
6235
  margin: '0 0 20px 0',
@@ -6331,8 +6243,8 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6331
6243
  alignItems: 'center'
6332
6244
  },
6333
6245
  sectionContainer: {
6334
- // margin: '26px 16px',
6335
- padding: '16px'
6246
+ margin: '26px 16px',
6247
+ padding: '32px 16px'
6336
6248
  },
6337
6249
  partialBackground: {
6338
6250
  height: '150px'
@@ -6342,32 +6254,26 @@ const useSectionStyles$1 = createUseStyles(theme => ({
6342
6254
  marginTop: '8px'
6343
6255
  },
6344
6256
  leftContainer: {
6345
- width: '100%'
6346
- // padding: '0 16ox'
6257
+ width: '100%',
6258
+ padding: '0 16ox'
6347
6259
  },
6348
-
6349
6260
  rightContainer: {
6350
6261
  width: '100%',
6351
6262
  padding: '0'
6352
6263
  },
6353
6264
  title: {
6354
- // fontSize: '24px',
6265
+ fontSize: '24px',
6355
6266
  lineHeight: '32px',
6356
- letterSpacing: 'initial',
6357
- margin: '0 0 16px 0',
6358
- textAlign: 'center'
6267
+ letterSpacing: 'initial'
6359
6268
  },
6360
6269
  subtitle: {
6361
- margin: '0 0 16px 0',
6362
- lineHeight: '26px',
6363
- textAlign: 'center'
6270
+ margin: '0 0 12px 0'
6364
6271
  },
6365
6272
  inputDiv: {
6366
- margin: '0 0 16px 0'
6273
+ margin: '0 0 10px 0'
6367
6274
  },
6368
6275
  addressRow: {
6369
- padding: '0px',
6370
- margin: '0 0 16px 0'
6276
+ padding: '12px 0'
6371
6277
  }
6372
6278
  }
6373
6279
  }));
@@ -6386,8 +6292,7 @@ function FormEnquiry({
6386
6292
  isEdit
6387
6293
  } = useContext(PageContext);
6388
6294
  const classes = useSectionStyles$1({
6389
- containerWidth,
6390
- isMobile
6295
+ containerWidth
6391
6296
  });
6392
6297
  const [nodeData] = sectionData.components;
6393
6298
  const theme = useTheme();
@@ -6446,10 +6351,6 @@ function FormEnquiry({
6446
6351
  className: classes.partialBackground
6447
6352
  }), /*#__PURE__*/React.createElement("div", {
6448
6353
  className: classes.sectionContainer
6449
- }, /*#__PURE__*/React.createElement("div", {
6450
- className: classes.contentContainer
6451
- }, /*#__PURE__*/React.createElement("div", {
6452
- className: classes.leftContainer
6453
6354
  }, /*#__PURE__*/React.createElement("h2", {
6454
6355
  className: classes.title
6455
6356
  }, /*#__PURE__*/React.createElement("span", {
@@ -6458,6 +6359,10 @@ function FormEnquiry({
6458
6359
  __html: nodeData?.title?.metadata?.value
6459
6360
  }
6460
6361
  })), /*#__PURE__*/React.createElement("div", {
6362
+ className: classes.contentContainer
6363
+ }, /*#__PURE__*/React.createElement("div", {
6364
+ className: classes.leftContainer
6365
+ }, /*#__PURE__*/React.createElement("div", {
6461
6366
  ref: nodeData?.subtitle?.refSetter,
6462
6367
  className: classes.subtitle,
6463
6368
  dangerouslySetInnerHTML: {
@@ -6597,7 +6502,7 @@ function FormEnquiry({
6597
6502
  messageValid: 1
6598
6503
  });
6599
6504
  }
6600
- })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
6505
+ })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React.createElement(Button, {
6601
6506
  ref: nodeData?.cta?.refSetter,
6602
6507
  data: btnDisabled && validData?.messageValid && validData?.emailValid && validData?.nameValid && validData?.phoneValid ? {
6603
6508
  value: 'Submitted'
@@ -6608,7 +6513,7 @@ function FormEnquiry({
6608
6513
  type: nodeData?.cta?.metadata?.type,
6609
6514
  size: isMobile ? 'small' : 'medium',
6610
6515
  disabled: btnDisabled
6611
- })))))));
6516
+ }))))));
6612
6517
  }
6613
6518
 
6614
6519
  var index$6 = /*#__PURE__*/Object.freeze({
@@ -6624,24 +6529,20 @@ const useSectionStyles = createUseStyles(theme => ({
6624
6529
  justifyContent: 'center',
6625
6530
  flexDirection: 'column',
6626
6531
  alignItems: 'center',
6627
- padding: ({
6628
- isMobile
6629
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
6630
6532
  backgroundColor: theme?.palette?.background?.default,
6631
6533
  '&, & *, & *:before, & *:after': {
6632
6534
  fontFamily: theme?.typography?.fontFamily,
6633
6535
  boxSizing: 'border-box'
6536
+ },
6537
+ '& h2,& h3': {
6538
+ fontWeight: '500',
6539
+ '& b,& strong': {
6540
+ fontWeight: '700'
6541
+ }
6634
6542
  }
6635
- // '& h2,& h3': {
6636
- // fontWeight: '500',
6637
- // '& b,& strong': {
6638
- // fontWeight: '700'
6639
- // }
6640
- // }
6641
6543
  },
6642
-
6643
6544
  contactContainer: {
6644
- width: '100%',
6545
+ width: '80%',
6645
6546
  margin: '0 auto',
6646
6547
  maxWidth: ({
6647
6548
  containerWidth
@@ -6659,12 +6560,13 @@ const useSectionStyles = createUseStyles(theme => ({
6659
6560
  backgroundColor: theme?.palette?.background?.default,
6660
6561
  boxShadow: theme?.shadows?.secondary,
6661
6562
  borderRadius: theme?.shape?.borderRadius?.regular,
6662
- padding: '48px',
6563
+ margin: '60px',
6564
+ padding: '40px 80px',
6663
6565
  position: 'relative'
6664
6566
  },
6665
6567
  title: {
6666
6568
  margin: '0',
6667
- fontSize: theme.typography.fontSize.h2,
6569
+ fontSize: '56px',
6668
6570
  color: theme?.palette?.font?.secondary,
6669
6571
  lineHeight: '71px',
6670
6572
  letterSpacing: '-3px',
@@ -6674,37 +6576,36 @@ const useSectionStyles = createUseStyles(theme => ({
6674
6576
  contentContainer: {
6675
6577
  width: '100%',
6676
6578
  display: 'flex',
6677
- justifyContent: 'space-between',
6579
+ alignItems: 'flex-start',
6580
+ marginTop: '32px',
6678
6581
  wordBreak: 'break-word'
6679
6582
  },
6680
6583
  leftContainer: {
6681
- width: '50%',
6682
- display: 'flex',
6683
- flexDirection: 'column',
6684
- justifyContent: 'space-between'
6584
+ width: '50%'
6685
6585
  },
6686
6586
  subtitle: {
6687
- margin: '0 0 auto 0',
6688
- fontSize: theme.typography.fontSize.h6,
6587
+ margin: '0 0 58px 0',
6588
+ fontSize: '20px',
6689
6589
  color: theme?.palette?.font?.primary,
6690
- lineHeight: '32px',
6691
- margin: '20px 0px'
6590
+ lineHeight: '32px'
6692
6591
  },
6693
6592
  addressContainer: {
6694
6593
  display: 'flex',
6695
6594
  alignItems: 'flex-start',
6696
6595
  flexDirection: 'column',
6697
- width: '100%',
6698
- position: 'relative'
6596
+ width: '85%',
6597
+ position: 'relative',
6598
+ paddingBottom: '55%'
6599
+ // '& img': {
6600
+ // width: '80%'
6601
+ // }
6699
6602
  },
6603
+
6700
6604
  telephoneImage: {
6701
6605
  width: '80%'
6702
6606
  },
6703
6607
  rightContainer: {
6704
6608
  width: '50%',
6705
- display: 'flex',
6706
- flexDirection: 'column',
6707
- justifyContent: 'space-between',
6708
6609
  padding: '0 0 0 80px'
6709
6610
  },
6710
6611
  inputDiv: {
@@ -6718,16 +6619,16 @@ const useSectionStyles = createUseStyles(theme => ({
6718
6619
  background: theme?.palette?.background?.default,
6719
6620
  border: `1px solid ${theme?.palette?.border?.secondary}`,
6720
6621
  borderRadius: theme?.shape?.borderRadius?.regular,
6721
- // padding: '14px 12px',
6622
+ padding: '14px 12px',
6722
6623
  display: 'flex',
6723
6624
  fontWeight: '400',
6724
- fontSize: theme.typography.fontSize.subHead,
6625
+ fontSize: '16px',
6725
6626
  lineHeight: '20px',
6726
6627
  fontFamily: 'inherit',
6727
6628
  resize: 'none',
6728
6629
  '&::placeholder': {
6729
6630
  fontWeight: '400',
6730
- fontSize: theme.typography.fontSize.subHead,
6631
+ fontSize: '16px',
6731
6632
  lineHeight: '20px',
6732
6633
  color: theme?.palette?.font?.primary,
6733
6634
  fontFamily: theme?.typography?.fontFamily
@@ -6757,7 +6658,8 @@ const useSectionStyles = createUseStyles(theme => ({
6757
6658
  alignItems: 'center'
6758
6659
  },
6759
6660
  sectionContainer: {
6760
- padding: '16px'
6661
+ margin: '26px 16px',
6662
+ padding: '32px 16px'
6761
6663
  },
6762
6664
  partialBackground: {
6763
6665
  height: '150px'
@@ -6775,17 +6677,15 @@ const useSectionStyles = createUseStyles(theme => ({
6775
6677
  padding: '0'
6776
6678
  },
6777
6679
  title: {
6778
- lineHeight: '26px',
6779
- letterSpacing: 'initial',
6780
- textAlign: 'center'
6680
+ fontSize: '24px',
6681
+ lineHeight: '32px',
6682
+ letterSpacing: 'initial'
6781
6683
  },
6782
6684
  subtitle: {
6783
- margin: '0 0 12px 0',
6784
- textAlign: 'center',
6785
- lineHeight: '26px'
6685
+ margin: '0 0 12px 0'
6786
6686
  },
6787
6687
  addressRow: {
6788
- // padding: '12px 0'
6688
+ padding: '12px 0'
6789
6689
  },
6790
6690
  addressContainer: {
6791
6691
  '& img': {
@@ -6793,7 +6693,7 @@ const useSectionStyles = createUseStyles(theme => ({
6793
6693
  }
6794
6694
  },
6795
6695
  inputDiv: {
6796
- // margin: '0 0 10px 0'
6696
+ margin: '0 0 10px 0'
6797
6697
  },
6798
6698
  inputField: {
6799
6699
  width: '100%',
@@ -6825,8 +6725,7 @@ function Contact({
6825
6725
  let [btnDisabled, setBtnDisabled] = useState(false);
6826
6726
  const [nodeData] = sectionData.components;
6827
6727
  const classes = useSectionStyles({
6828
- containerWidth,
6829
- isMobile
6728
+ containerWidth
6830
6729
  });
6831
6730
  let formInitialValue = {
6832
6731
  name: nodeData?.nameField?.metadata?.value,
@@ -6882,10 +6781,6 @@ function Contact({
6882
6781
  className: classes.partialBackground
6883
6782
  }), /*#__PURE__*/React.createElement("div", {
6884
6783
  className: classes.sectionContainer
6885
- }, /*#__PURE__*/React.createElement("div", {
6886
- className: classes.contentContainer
6887
- }, /*#__PURE__*/React.createElement("div", {
6888
- className: classes.leftContainer
6889
6784
  }, /*#__PURE__*/React.createElement("h2", {
6890
6785
  className: classes.title
6891
6786
  }, /*#__PURE__*/React.createElement("span", {
@@ -6894,6 +6789,10 @@ function Contact({
6894
6789
  __html: nodeData?.title?.metadata?.value
6895
6790
  }
6896
6791
  })), /*#__PURE__*/React.createElement("div", {
6792
+ className: classes.contentContainer
6793
+ }, /*#__PURE__*/React.createElement("div", {
6794
+ className: classes.leftContainer
6795
+ }, /*#__PURE__*/React.createElement("div", {
6897
6796
  ref: nodeData?.subtitle?.refSetter,
6898
6797
  className: classes.subtitle,
6899
6798
  dangerouslySetInnerHTML: {
@@ -6996,9 +6895,7 @@ function Contact({
6996
6895
  messageValid: 1
6997
6896
  });
6998
6897
  }
6999
- })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React.createElement("div", {
7000
- className: classes.btnContainer
7001
- }, /*#__PURE__*/React.createElement(Button, {
6898
+ })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React.createElement(Button, {
7002
6899
  ref: nodeData?.cta?.refSetter,
7003
6900
  data: btnDisabled && validData?.messageValid && validData?.emailValid && validData?.nameValid && validData?.phoneValid ? {
7004
6901
  value: 'Submitted'
@@ -7010,7 +6907,7 @@ function Contact({
7010
6907
  size: isMobile ? 'small' : 'medium',
7011
6908
  disabled: btnDisabled,
7012
6909
  name: "button"
7013
- })))))));
6910
+ }))))));
7014
6911
  }
7015
6912
 
7016
6913
  var index$5 = /*#__PURE__*/Object.freeze({
@@ -7023,15 +6920,16 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7023
6920
  webinarSuperContainer: {
7024
6921
  display: 'flex',
7025
6922
  justifyContent: 'center',
7026
- padding: ({
7027
- isMobile
7028
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
6923
+ padding: '70px',
7029
6924
  '&, & *, & *:before, & *:after': {
7030
6925
  fontFamily: theme?.typography?.fontFamily,
7031
6926
  boxSizing: 'border-box'
7032
6927
  },
7033
- '& h2,& h3,& p': {
7034
- margin: '0'
6928
+ '& h2,& h3': {
6929
+ fontWeight: '500',
6930
+ '& b,& strong': {
6931
+ fontWeight: '700'
6932
+ }
7035
6933
  }
7036
6934
  },
7037
6935
  sectionContainer: {
@@ -7045,34 +6943,30 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7045
6943
  maxWidth: '1440px',
7046
6944
  fontFamily: theme?.typography?.fontFamily
7047
6945
  },
7048
- // videoTestimonialHeading: {
7049
- // fontSize: theme.typography.fontSize.subHead,
7050
- // lineHeight: '20px',
7051
- // letterSpacing: '3px',
7052
- // textTransform: 'uppercase',
7053
- // color: theme.palette.font.tertiary,
7054
- // wordBreak: 'break-word',
7055
- // fontWeight: theme.typography.fontWeight.bold,
7056
- // },
7057
-
7058
- // videoTestimonialTitle: {
7059
- // fontSize: theme.typography.fontSize.h2,
7060
- // lineHeight: '71px',
7061
- // fontWeight: theme.typography.fontWeight.bold,
7062
- // letterSpacing: '-3px',
7063
- // margin: '0',
7064
- // color: theme.palette.font.default,
7065
- // wordBreak: 'break-word'
7066
- // },
7067
-
7068
- // videoCarouselContainer: {
7069
- // marginTop: '16px'
7070
- // },
7071
-
6946
+ videoTestimonialHeading: {
6947
+ fontSize: '16px',
6948
+ lineHeight: '20px',
6949
+ letterSpacing: '3px',
6950
+ textTransform: 'uppercase',
6951
+ color: theme.palette.font.tertiary,
6952
+ wordBreak: 'break-word',
6953
+ fontWeight: '700'
6954
+ },
6955
+ videoTestimonialTitle: {
6956
+ fontSize: '56px',
6957
+ lineHeight: '71px',
6958
+ letterSpacing: '-3px',
6959
+ margin: '0',
6960
+ color: theme.palette.font.default,
6961
+ wordBreak: 'break-word'
6962
+ },
6963
+ videoCarouselContainer: {
6964
+ marginTop: '16px'
6965
+ },
7072
6966
  webinarCarousel: {
7073
6967
  display: 'flex',
7074
6968
  justifyContent: 'flex-start',
7075
- gap: '32px'
6969
+ gap: '20px'
7076
6970
  },
7077
6971
  '@media screen and (max-width: 767px)': {
7078
6972
  webinarCarousel: {
@@ -7087,21 +6981,18 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7087
6981
  alignItems: 'center'
7088
6982
  },
7089
6983
  iframeContainer: {
7090
- width: '100%',
6984
+ width: '90%',
7091
6985
  position: 'relative',
7092
6986
  paddingBottom: '56.25%',
7093
6987
  // top: "6%",
7094
- // left: '5%'
7095
- borderRadius: '8px',
7096
- overflow: 'hidden'
6988
+ left: '5%'
7097
6989
  },
7098
6990
  offerText: {
7099
6991
  textAlign: 'center',
7100
- color: theme.palette.font.primary,
7101
- marginBottom: '5%'
6992
+ color: theme.palette.font.primary
7102
6993
  },
7103
6994
  offerPrice: {
7104
- fontSize: theme.typography.fontSize.h5,
6995
+ fontSize: '28px',
7105
6996
  fontWeight: '600'
7106
6997
  },
7107
6998
  priceContainer: {
@@ -7120,10 +7011,9 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7120
7011
  bottomContainer: {
7121
7012
  display: 'flex',
7122
7013
  justifyContent: 'space-between',
7123
- marginTop: '5%'
7124
- // padding: '0px 5% 0px 5%'
7014
+ marginTop: '5%',
7015
+ padding: '0px 5% 0px 5%'
7125
7016
  },
7126
-
7127
7017
  iframe: {
7128
7018
  position: 'absolute',
7129
7019
  width: '100%',
@@ -7134,12 +7024,10 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7134
7024
  width: '100%',
7135
7025
  display: 'flex',
7136
7026
  flexDirection: 'column',
7137
- alignItems: 'flex-start',
7138
- gap: '20px'
7027
+ alignItems: 'flex-start'
7139
7028
  },
7140
7029
  videoDetailsHeading: {
7141
- fontSize: theme.typography.fontSize.h3,
7142
- fontWeight: theme.typography.fontWeight.bold,
7030
+ fontSize: '40px',
7143
7031
  lineHeight: '48px',
7144
7032
  margin: '0',
7145
7033
  letterSpacing: '-1px',
@@ -7153,7 +7041,7 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7153
7041
  display: 'flex',
7154
7042
  flexDirection: 'column',
7155
7043
  justifyContent: 'start',
7156
- padding: '24px',
7044
+ paddingTop: '20px',
7157
7045
  borderRadius: '10px'
7158
7046
  },
7159
7047
  bannerContainer: {
@@ -7166,12 +7054,14 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7166
7054
  position: 'relative',
7167
7055
  fontSize: '18px',
7168
7056
  transform: 'rotate(180deg)',
7169
- clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 calc(100% - 10px), 15px calc(50% - 10px/2))'
7057
+ clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 calc(100% - 10px), 15px calc(50% - 10px/2))',
7058
+ marginBottom: '16px'
7170
7059
  },
7171
7060
  bannerContainerText: {
7172
7061
  transform: 'rotate(180deg)'
7173
7062
  },
7174
7063
  courseDetailsTags: {
7064
+ marginTop: '16px',
7175
7065
  display: 'flex'
7176
7066
  },
7177
7067
  courseDetailTag: {
@@ -7179,22 +7069,23 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7179
7069
  alignItems: 'center',
7180
7070
  marginRight: '20px',
7181
7071
  '& div': {
7182
- fontSize: theme.typography.fontSize.subHead,
7072
+ fontSize: '14px',
7183
7073
  marginLeft: '10px'
7184
7074
  }
7185
7075
  },
7186
7076
  courseDetailContent: {
7187
- fontSize: theme.typography.fontSize.subHead,
7077
+ marginTop: '16px',
7078
+ fontSize: '16px',
7188
7079
  wordBreak: 'break-word',
7189
7080
  color: theme.palette.font.primary,
7190
- whiteSpace: 'pre-wrap',
7191
- width: '80%'
7081
+ margin: '10px 0 20px',
7082
+ whiteSpace: 'pre-wrap'
7192
7083
  },
7193
7084
  courseDetailViewFullDetails: {
7194
7085
  cursor: 'pointer',
7195
- fontSize: theme.typography.fontSize.subHead,
7086
+ fontSize: '16px',
7196
7087
  lineHeight: '24px',
7197
- marginTop: '-20px',
7088
+ margin: '0',
7198
7089
  color: '#00ADE7',
7199
7090
  wordBreak: 'break-word'
7200
7091
  },
@@ -7202,10 +7093,9 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7202
7093
  color: '#EB5757',
7203
7094
  fontWeight: '600'
7204
7095
  },
7205
- // webinarButtonContainer: {
7206
- // marginBottom: '20px'
7207
- // },
7208
-
7096
+ webinarButtonContainer: {
7097
+ marginBottom: '20px'
7098
+ },
7209
7099
  iconBackground: {
7210
7100
  display: 'flex',
7211
7101
  width: '36px',
@@ -7237,10 +7127,11 @@ const useWebinarPromotionPage = createUseStyles(theme => {
7237
7127
  width: '100%'
7238
7128
  },
7239
7129
  videoDetailsHeading: {
7130
+ fontSize: '16px',
7240
7131
  lineHeight: '20px'
7241
7132
  },
7242
7133
  videoTestimonialTitle: {
7243
- // fontSize: '24px',
7134
+ fontSize: '24px',
7244
7135
  lineHeight: '36px',
7245
7136
  letterSpacing: '-1px'
7246
7137
  },
@@ -7398,7 +7289,8 @@ const SingleVideoSlide$1 = props => {
7398
7289
  className: classes.offerPrice
7399
7290
  }, "\u20B9", data?.effectivePrice), checkForShowDiscount() && (data.offerPriceEndDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React.createElement("p", {
7400
7291
  style: {
7401
- fontSize: '20px'
7292
+ fontSize: '20px',
7293
+ marginTop: '0px'
7402
7294
  }
7403
7295
  }, /*#__PURE__*/React.createElement("span", {
7404
7296
  className: classes.originalPrice
@@ -7432,14 +7324,12 @@ function CoursePromotionPage$1({
7432
7324
  sectionIndex
7433
7325
  }) {
7434
7326
  const {
7435
- isMobile,
7436
7327
  layout: {
7437
7328
  containerWidth
7438
7329
  }
7439
7330
  } = useContext(PageContext);
7440
7331
  const classes = useWebinarPromotionPage({
7441
- containerWidth,
7442
- isMobile
7332
+ containerWidth
7443
7333
  });
7444
7334
  return /*#__PURE__*/React.createElement("div", {
7445
7335
  className: classes.webinarSuperContainer
@@ -7465,21 +7355,18 @@ const useCoursePromotionPage = createUseStyles(theme => {
7465
7355
  courseSuperContainer: {
7466
7356
  display: 'flex',
7467
7357
  justifyContent: 'center',
7468
- padding: ({
7469
- isMobile
7470
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
7358
+ padding: '70px ',
7471
7359
  '&, & *, & *:before, & *:after': {
7472
7360
  fontFamily: theme?.typography?.fontFamily,
7473
7361
  boxSizing: 'border-box'
7362
+ },
7363
+ '& h2,& h3': {
7364
+ fontWeight: '500',
7365
+ '& b,& strong': {
7366
+ fontWeight: '700'
7367
+ }
7474
7368
  }
7475
- // '& h2,& h3': {
7476
- // fontWeight: '500',
7477
- // '& b,& strong': {
7478
- // fontWeight: '700'
7479
- // }
7480
- // }
7481
7369
  },
7482
-
7483
7370
  sectionContainer: {
7484
7371
  margin: '0 auto',
7485
7372
  maxWidth: ({
@@ -7492,7 +7379,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
7492
7379
  fontFamily: theme?.typography?.fontFamily
7493
7380
  },
7494
7381
  videoTestimonialHeading: {
7495
- fontSize: theme.typography.fontSize.subHead,
7382
+ fontSize: '16px',
7496
7383
  lineHeight: '20px',
7497
7384
  letterSpacing: '3px',
7498
7385
  textTransform: 'uppercase',
@@ -7501,7 +7388,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
7501
7388
  fontWeight: '700'
7502
7389
  },
7503
7390
  videoTestimonialTitle: {
7504
- fontSize: theme.typography.fontSize.h2,
7391
+ fontSize: '56px',
7505
7392
  lineHeight: '71px',
7506
7393
  letterSpacing: '-3px',
7507
7394
  margin: '0',
@@ -7509,12 +7396,12 @@ const useCoursePromotionPage = createUseStyles(theme => {
7509
7396
  wordBreak: 'break-word'
7510
7397
  },
7511
7398
  videoCarouselContainer: {
7512
- // marginTop: '16px'
7399
+ marginTop: '16px'
7513
7400
  },
7514
7401
  coursePageCarousel: {
7515
7402
  display: 'flex',
7516
7403
  justifyContent: 'flex-start',
7517
- gap: '32px'
7404
+ gap: '20px'
7518
7405
  },
7519
7406
  '@media screen and (max-width: 767px)': {
7520
7407
  coursePageCarousel: {
@@ -7529,19 +7416,18 @@ const useCoursePromotionPage = createUseStyles(theme => {
7529
7416
  alignItems: 'center'
7530
7417
  },
7531
7418
  iframeContainer: {
7532
- width: '100%',
7419
+ width: '90%',
7533
7420
  position: 'relative',
7534
- paddingBottom: '56.25%'
7421
+ paddingBottom: '56.25%',
7535
7422
  // top: "6%",
7536
- // left: '5%'
7423
+ left: '5%'
7537
7424
  },
7538
-
7539
7425
  offerText: {
7540
7426
  textAlign: 'center',
7541
7427
  color: theme.palette.font.primary
7542
7428
  },
7543
7429
  offerPrice: {
7544
- fontSize: theme.typography.fontSize.h4,
7430
+ fontSize: '28px',
7545
7431
  fontWeight: '700'
7546
7432
  },
7547
7433
  priceContainer: {
@@ -7559,7 +7445,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
7559
7445
  fontWeight: '600'
7560
7446
  },
7561
7447
  bottomContainer: {
7562
- width: '100%',
7448
+ width: '90%',
7563
7449
  marginLeft: 'auto',
7564
7450
  marginRight: 'auto',
7565
7451
  display: 'flex',
@@ -7576,11 +7462,10 @@ const useCoursePromotionPage = createUseStyles(theme => {
7576
7462
  width: '100%',
7577
7463
  display: 'flex',
7578
7464
  flexDirection: 'column',
7579
- alignItems: 'flex-start',
7580
- gap: '20px'
7465
+ alignItems: 'flex-start'
7581
7466
  },
7582
7467
  videoDetailsHeading: {
7583
- fontSize: theme.typography.fontSize.h3,
7468
+ fontSize: '40px',
7584
7469
  lineHeight: '48px',
7585
7470
  margin: '0',
7586
7471
  letterSpacing: '-1px',
@@ -7591,13 +7476,11 @@ const useCoursePromotionPage = createUseStyles(theme => {
7591
7476
  width: '445px',
7592
7477
  backgroundColor: '#f4f9ff',
7593
7478
  display: 'flex',
7594
- padding: '24px',
7595
7479
  flexDirection: 'column',
7596
- borderRadius: '10px'
7597
- // paddingBottom: '10px',
7598
- // paddingTop: '10px'
7480
+ borderRadius: '10px',
7481
+ paddingBottom: '10px',
7482
+ paddingTop: '10px'
7599
7483
  },
7600
-
7601
7484
  bannerContainer: {
7602
7485
  width: '100%',
7603
7486
  background: '#EB5757',
@@ -7606,12 +7489,11 @@ const useCoursePromotionPage = createUseStyles(theme => {
7606
7489
  padding: '10px 10px 23px 40px',
7607
7490
  wordWrap: 'break-word',
7608
7491
  position: 'relative',
7609
- fontSize: theme.typography.fontSize.subHead,
7492
+ fontSize: '18px',
7610
7493
  transform: 'rotate(180deg)',
7611
- clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 calc(100% - 10px), 15px calc(50% - 10px/2))'
7612
- // marginBottom: '16px'
7494
+ clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 calc(100% - 10px), 15px calc(50% - 10px/2))',
7495
+ marginBottom: '16px'
7613
7496
  },
7614
-
7615
7497
  bannerContainerText: {
7616
7498
  transform: 'rotate(180deg)'
7617
7499
  },
@@ -7622,15 +7504,16 @@ const useCoursePromotionPage = createUseStyles(theme => {
7622
7504
  },
7623
7505
  courseEmblem: {
7624
7506
  background: '#F0F4F8',
7625
- fontSize: theme.typography.fontSize.subHead,
7626
7507
  borderRadius: '2.00337px',
7627
7508
  padding: '8px',
7628
7509
  display: 'flex',
7629
7510
  alignItems: 'center',
7630
- justifyContent: 'center'
7511
+ justifyContent: 'center',
7512
+ marginTop: '20px',
7513
+ marginBottom: '20px'
7631
7514
  },
7632
7515
  courseDetailsTags: {
7633
- // marginTop: '16px',
7516
+ marginTop: '16px',
7634
7517
  display: 'flex',
7635
7518
  flexWrap: 'wrap'
7636
7519
  },
@@ -7640,14 +7523,13 @@ const useCoursePromotionPage = createUseStyles(theme => {
7640
7523
  alignItems: 'center',
7641
7524
  marginRight: '20px',
7642
7525
  '& div': {
7643
- fontSize: theme.typography.fontSize.subHead,
7644
- fontWeight: theme.typography.fontWeight.semiBold,
7526
+ fontSize: '14px',
7645
7527
  marginLeft: '10px'
7646
7528
  }
7647
7529
  },
7648
7530
  courseDetailContent: {
7649
- // marginTop: '16px',
7650
- fontSize: theme.typography.fontSize.subHead,
7531
+ marginTop: '16px',
7532
+ fontSize: '16px',
7651
7533
  lineHeight: '24px',
7652
7534
  wordBreak: 'break-word',
7653
7535
  color: theme.palette.font.primary,
@@ -7656,9 +7538,9 @@ const useCoursePromotionPage = createUseStyles(theme => {
7656
7538
  },
7657
7539
  courseDetailViewFullDetails: {
7658
7540
  cursor: 'pointer',
7659
- fontSize: theme.typography.fontSize.subHead,
7541
+ fontSize: '16px',
7660
7542
  lineHeight: '24px',
7661
- marginTop: '-24px',
7543
+ margin: '0',
7662
7544
  color: '#00ADE7',
7663
7545
  wordBreak: 'break-word'
7664
7546
  },
@@ -7705,7 +7587,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
7705
7587
  },
7706
7588
  '@media (max-width: 767px)': {
7707
7589
  bannerContainerText: {
7708
- // fontSize: '16px'
7590
+ fontSize: '16px'
7709
7591
  },
7710
7592
  courseViewContainer: {
7711
7593
  width: '100%',
@@ -7726,12 +7608,12 @@ const useCoursePromotionPage = createUseStyles(theme => {
7726
7608
  width: '100%'
7727
7609
  },
7728
7610
  videoDetailsHeading: {
7729
- // fontSize: '20px',
7611
+ fontSize: '20px',
7730
7612
  fontWeight: '600',
7731
7613
  lineHeight: '20px'
7732
7614
  },
7733
7615
  videoTestimonialTitle: {
7734
- // fontSize: '24px',
7616
+ fontSize: '24px',
7735
7617
  lineHeight: '36px',
7736
7618
  letterSpacing: '-1px'
7737
7619
  },
@@ -7917,7 +7799,7 @@ const SingleVideoSlide = props => {
7917
7799
  className: classes.offerPrice
7918
7800
  }, "\u20B9 ", data.effectivePrice), checkForShowDiscount() && (data.endDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React.createElement("p", {
7919
7801
  style: {
7920
- // fontSize: '20px',
7802
+ fontSize: '20px',
7921
7803
  marginTop: '0px'
7922
7804
  }
7923
7805
  }, /*#__PURE__*/React.createElement("span", {
@@ -7967,14 +7849,12 @@ function CoursePromotionPage({
7967
7849
  sectionIndex
7968
7850
  }) {
7969
7851
  const {
7970
- isMobile,
7971
7852
  layout: {
7972
7853
  containerWidth
7973
7854
  }
7974
7855
  } = useContext(PageContext);
7975
7856
  const classes = useCoursePromotionPage({
7976
- containerWidth,
7977
- isMobile
7857
+ containerWidth
7978
7858
  });
7979
7859
  return /*#__PURE__*/React.createElement("div", {
7980
7860
  className: classes.courseSuperContainer
@@ -7998,9 +7878,7 @@ var index$3 = /*#__PURE__*/Object.freeze({
7998
7878
 
7999
7879
  const useFormPageStyles = createUseStyles(theme => ({
8000
7880
  formPageSection: {
8001
- padding: ({
8002
- isMobile
8003
- } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
7881
+ padding: '35px 70px',
8004
7882
  background: '#F4F9FF',
8005
7883
  '&, & *, & *:before, & *:after': {
8006
7884
  fontFamily: theme?.typography?.fontFamily,
@@ -8011,82 +7889,77 @@ const useFormPageStyles = createUseStyles(theme => ({
8011
7889
  textAlign: 'center'
8012
7890
  },
8013
7891
  formPageTitle: {
8014
- fontSize: theme.typography.fontSize.h2,
8015
- fontWeight: theme.typography.fontWeight.bold
7892
+ fontSize: '50px',
7893
+ fontWeight: '700'
8016
7894
  },
8017
7895
  formPageSubtitle: {
8018
- marginTop: '8px',
8019
- fontSize: theme.typography.fontSize.h6,
7896
+ marginTop: '16px',
7897
+ fontSize: '16px',
8020
7898
  lineHeight: '23px',
8021
7899
  color: 'rgba(51, 51, 51, 0.5)',
8022
- marginBottom: theme.spacing.margin.tiny
7900
+ marginBottom: '32px'
8023
7901
  },
8024
7902
  formPageFormContainer: {
7903
+ marginTop: '32px',
8025
7904
  '& form': {
8026
- padding: '72px',
7905
+ padding: '35px 140px',
8027
7906
  background: '#FFFFFF',
8028
7907
  borderRadius: '8px',
8029
7908
  boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.16)'
8030
7909
  }
8031
7910
  },
8032
7911
  inputField: {
8033
- marginTop: '12px'
8034
- // padding: '12px 16px',
8035
- // border: '1px solid #D8E0F0',
8036
- // borderRadius: '16px'
7912
+ marginTop: '20px',
7913
+ padding: '20px',
7914
+ border: '1px solid #D8E0F0',
7915
+ borderRadius: '16px'
8037
7916
  },
8038
-
8039
7917
  inputFieldLabel: {
8040
7918
  color: '#333',
8041
- fontSize: theme.typography.fontSize.subHead,
8042
- fontWeight: theme.typography.fontWeight.semiBold,
7919
+ fontSize: '20px',
8043
7920
  display: 'block',
8044
- marginTop: '20px',
8045
- marginBottom: '12px'
7921
+ marginBottom: '10px'
8046
7922
  },
8047
7923
  inputFieldControl: {
8048
7924
  width: '100%',
7925
+ height: '50px',
8049
7926
  borderRadius: '8px',
8050
7927
  border: '1px solid #D8E0F0',
8051
- padding: '12px 16px',
7928
+ padding: '5px 10px',
8052
7929
  color: '#7D8592',
8053
- fontSize: theme.typography.fontSize.subHead
7930
+ fontSize: '16px'
8054
7931
  },
8055
7932
  checkboxField: {
8056
- // padding: '20px',
8057
- // border: '1px solid #D8E0F0',
8058
- // borderRadius: '8px'
7933
+ marginTop: '20px',
7934
+ padding: '20px',
7935
+ border: '1px solid #D8E0F0',
7936
+ borderRadius: '8px'
8059
7937
  },
8060
7938
  checkBoxFieldLabel: {
8061
7939
  color: '#333',
8062
- fontSize: theme.typography.fontSize.subHead,
8063
- fontWeight: theme.typography.fontWeight.semiBold,
8064
- marginTop: '20px',
8065
- marginBottom: '12px'
7940
+ fontSize: '20px',
7941
+ margin: '10px 0'
8066
7942
  },
8067
7943
  inputFieldRequired: {
8068
7944
  color: '#F41828'
8069
7945
  },
8070
7946
  checkboxFieldControl: {
8071
- padding: '8px 0',
7947
+ padding: '6px 0',
8072
7948
  '& label': {
8073
- fontSize: theme.typography.fontSize.subHead,
7949
+ fontFamily: '16px',
8074
7950
  marginLeft: '10px',
8075
7951
  color: '#7D8592'
8076
7952
  }
8077
7953
  },
8078
7954
  submitBtnContainer: {
8079
- marginTop: theme.spacing.margin.tiny,
8080
- display: 'flex',
8081
- alignItems: 'center',
8082
- justifyContent: 'center',
7955
+ marginTop: '20px',
8083
7956
  width: '100%',
8084
7957
  margin: '0 auto',
8085
7958
  '& button': {
8086
- // height: '44px',
8087
- padding: '16px 24px',
7959
+ height: '44px',
7960
+ padding: '10px 40px',
8088
7961
  color: '#FFFFFF',
8089
- fontSize: theme.typography.fontSize.subHead,
7962
+ fontSize: '16px',
8090
7963
  cursor: 'pointer',
8091
7964
  borderRadius: '8px'
8092
7965
  }
@@ -8101,14 +7974,8 @@ const useFormPageStyles = createUseStyles(theme => ({
8101
7974
  },
8102
7975
  formPageFormContainer: {
8103
7976
  '& form': {
8104
- padding: '16px'
7977
+ padding: '24px'
8105
7978
  }
8106
- },
8107
- inputFieldLabel: {
8108
- marginBottom: '8px'
8109
- },
8110
- checkBoxFieldLabel: {
8111
- marginBottom: '8px'
8112
7979
  }
8113
7980
  }
8114
7981
  }));
@@ -8155,16 +8022,13 @@ const FormPage = ({
8155
8022
  extraProps = {}
8156
8023
  }) => {
8157
8024
  const [formData, setFormData] = useState({});
8025
+ const classes = useFormPageStyles();
8158
8026
  const [formSubmitted, setformSubmitted] = useState(false);
8159
8027
  const metadata = sectionData?.components?.[0]?.metadata || formPageMock;
8160
8028
  const {
8161
8029
  _id,
8162
- baseURLs,
8163
- isMobile
8030
+ baseURLs
8164
8031
  } = useContext(PageContext);
8165
- const classes = useFormPageStyles({
8166
- isMobile
8167
- });
8168
8032
  const handleSubmit = async e => {
8169
8033
  e.preventDefault();
8170
8034
  let formResponse = [];
@@ -8371,18 +8235,16 @@ const useTilesStyles = createUseStyles(theme => {
8371
8235
  alignItems: 'center',
8372
8236
  display: 'flex',
8373
8237
  flexDirection: 'column',
8374
- padding: ({
8375
- isMobile
8376
- } = {}) => isMobile ? `16px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`
8238
+ marginTop: '20px'
8377
8239
  },
8378
8240
  tileDiv: {
8379
8241
  width: '236px',
8380
- // height: '160px',
8381
- aspectRatio: '3/2',
8242
+ height: '160px',
8382
8243
  position: 'relative',
8383
8244
  borderRadius: '16px',
8384
8245
  overflow: 'hidden',
8385
- cursor: 'pointer'
8246
+ cursor: 'pointer',
8247
+ margin: '1rem'
8386
8248
  },
8387
8249
  tileImg: {
8388
8250
  objectFit: 'cover',
@@ -8397,8 +8259,8 @@ const useTilesStyles = createUseStyles(theme => {
8397
8259
  top: '12%',
8398
8260
  left: '7%',
8399
8261
  color: 'white',
8400
- fontWeight: theme.typography.fontWeight.semiBold,
8401
- fontSize: theme.typography.fontSize.h5,
8262
+ fontWeight: '600',
8263
+ fontSize: '20px',
8402
8264
  width: '150px'
8403
8265
  },
8404
8266
  row: {
@@ -8406,28 +8268,25 @@ const useTilesStyles = createUseStyles(theme => {
8406
8268
  flexDirection: 'row',
8407
8269
  justifyContent: 'center',
8408
8270
  flexWrap: 'wrap',
8409
- width: '100%',
8410
- gap: '24px'
8271
+ width: '85%',
8272
+ marginBottom: '3rem'
8411
8273
  },
8412
8274
  header: {
8413
- fontWeight: theme.typography.fontWeight.bold,
8414
- fontSize: theme.typography.fontSize.h2,
8275
+ fontWeight: '700',
8276
+ fontSize: '46px',
8415
8277
  lineHeight: '46px',
8278
+ marginBottom: '1rem',
8416
8279
  textAlign: 'center',
8280
+ marginTop: '3rem',
8417
8281
  color: '#2D2D2D'
8418
8282
  },
8419
8283
  headerTitle: {
8420
- fontWeight: theme.typography.fontWeight.regular,
8421
- fontSize: theme.typography.fontSize.subHead,
8284
+ fontWeight: '400',
8285
+ fontSize: '24px',
8422
8286
  lineHeight: '46px',
8423
8287
  color: '#7D8592',
8424
- marginBottom: theme.spacing.margin.tiny,
8288
+ marginBottom: '3rem',
8425
8289
  textAlign: 'center'
8426
- },
8427
- '@media screen and (max-width: 767px)': {
8428
- tileDiv: {
8429
- width: 'calc(53% - 24px)'
8430
- }
8431
8290
  }
8432
8291
  };
8433
8292
  });
@@ -8436,6 +8295,7 @@ function Tiles({
8436
8295
  sectionData,
8437
8296
  sectionIndex
8438
8297
  }) {
8298
+ const classes = useTilesStyles({});
8439
8299
  const {
8440
8300
  isMobile,
8441
8301
  layout: {
@@ -8444,9 +8304,6 @@ function Tiles({
8444
8304
  isPreview,
8445
8305
  isEdit
8446
8306
  } = useContext(PageContext);
8447
- const classes = useTilesStyles({
8448
- isMobile
8449
- });
8450
8307
  const nodeData = sectionData.components;
8451
8308
  const tilesList = nodeData[0]?.tilesList.components;
8452
8309
  const handleClick = value => {
@@ -8657,7 +8514,8 @@ function Section({
8657
8514
  style: {
8658
8515
  textAlign: 'center',
8659
8516
  width: '100%',
8660
- backgroundColor: '#ffffff'
8517
+ backgroundColor: '#ffffff',
8518
+ padding: '0px 24px'
8661
8519
  }
8662
8520
  }, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("p", {
8663
8521
  style: {
@@ -8684,10 +8542,10 @@ function Section({
8684
8542
  marginBottom: '15px'
8685
8543
  },
8686
8544
  ref: body?.components[1]?.refSetter
8687
- }, body?.components[1]?.metadata?.text), /*#__PURE__*/React.createElement("p", {
8545
+ }, body?.components[1]?.metadata?.text), /*#__PURE__*/React.createElement("div", {
8688
8546
  style: {
8689
8547
  maxWidth: '435px',
8690
- margin: 'auto',
8548
+ // margin: '0px 10px',
8691
8549
  // fontFamily: 'Roboto',
8692
8550
  fontStyle: 'normal',
8693
8551
  fontWeight: '400',