Merge remote-tracking branch 'origin/main' into epic-dataroom

src/components/Blog/Socials/index.tsx

@@ -4,30 +4,21 @@ import { type Entry } from 'contentful'
 import { type TypeAuthorSkeleton } from '@/contentful/types'
 import { IconButton, SvgIcon } from '@mui/material'
 import css from '../styles.module.css'
-import { useEffect, useState } from 'react'
-
-const twitterSharingUrl = (currentUrl: string, sharingText: string) =>
-  `https://twitter.com/intent/tweet?url=${encodeURIComponent(currentUrl)}&text=${encodeURIComponent(sharingText)}`
+import useCurrentUrl from '@/hooks/useCurrentUrl'
+import { xSharingUrl } from '@/lib/xSharingUrl'
 
 const linkedInSharingUrl = (currentUrl: string) =>
   `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(currentUrl)}`
 
 const Socials = ({ title, authors }: { title: string; authors: Entry<TypeAuthorSkeleton, undefined, string>[] }) => {
-  const [currentUrl, setCurrentUrl] = useState('')
-
-  useEffect(() => {
-    // Check if running in the browser environment
-    if (typeof window !== 'undefined') {
-      setCurrentUrl(window.location.href)
-    }
-  }, [])
+  const currentUrl = useCurrentUrl()
 
   const sharingText = `${title} by @${authors
     .map((author) => author.fields.name)
     .join(', @')
     .toString()}`
 
-  const xUrl = twitterSharingUrl(currentUrl, sharingText)
+  const xUrl = xSharingUrl(currentUrl, sharingText)
   const linkedInUrl = linkedInSharingUrl(currentUrl)
 
   return (

src/components/Blog/styles.module.css

@@ -110,6 +110,7 @@
 .socials svg {
   width: 24px;
   height: 24px;
+  color: var(--mui-palette-text-primary);
 }
 
 .questionBox {

src/components/GasStation/Hero/index.tsx

@@ -0,0 +1,37 @@
+import type { BaseBlock } from '@/components/Home/types'
+import Slider from '@/components/GasStation/Slider'
+import { Button, Typography } from '@mui/material'
+import clsx from 'clsx'
+import css from './styles.module.css'
+
+const Hero = ({ title, text, link }: BaseBlock) => {
+  return (
+    <div className={css.videoWrapper}>
+      <div className={css.gradientBase} />
+      <video autoPlay muted playsInline loop poster="/images/GasStation/gas-station.png" className={css.video}>
+        <source src="/videos/GasStation/gas-station.webm" type="video/webm" />
+        <source src="/videos/GasStation/gas-station.mp4" type="video/mp4" />
+        <img src="/images/GasStation/gas-station.png" alt="Safe Gas Station" />
+      </video>
+
+      <div className={css.sliderWrapper}>
+        <Slider text={text} />
+      </div>
+
+      <div className={css.textContainer}>
+        <Typography variant="h2" mb={4}>
+          {title}
+        </Typography>
+
+        {link && (
+          <Button key={link.href} href={link.href} target="_blank" rel="noreferrer" variant="contained" size="large">
+            {link.title}
+          </Button>
+        )}
+      </div>
+      <div className={clsx(css.gradientBase, css.gradientFlipped)} />
+    </div>
+  )
+}
+
+export default Hero

src/components/GasStation/Hero/styles.module.css

@@ -0,0 +1,55 @@
+.videoWrapper {
+  position: relative;
+  z-index: -1;
+}
+
+.video {
+  width: 100%;
+}
+
+.sliderWrapper {
+  margin-top: -8px;
+}
+
+.textContainer {
+  text-align: center;
+  padding: 0 16px;
+}
+
+@media (min-width: 900px) {
+  .gradientBase {
+    position: absolute;
+    width: 94px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    background: linear-gradient(270deg, rgba(18, 19, 18, 0) 0%, var(--mui-palette-background-default) 100%);
+    z-index: 1;
+  }
+
+  .gradientFlipped {
+    left: auto;
+    right: 0;
+    bottom: 0;
+    width: 138px;
+    transform: scaleX(-1);
+  }
+
+  .videoWrapper {
+    margin-top: calc(-1 * var(--header-height));
+  }
+
+  .textContainer {
+    position: absolute;
+    top: 32%;
+    left: calc(50% - 450px);
+    max-width: 900px;
+  }
+}
+
+@media (min-width: 1440px) {
+  .videoWrapper {
+    margin-left: -104px;
+    margin-right: -104px;
+  }
+}

src/components/GasStation/ImageTextTop/index.tsx

@@ -0,0 +1,25 @@
+import type { BaseBlock } from '@/components/Home/types'
+import useResponsiveImages, { type ImageObj } from '@/hooks/useResponsiveImages'
+import { Container, Typography } from '@mui/material'
+import layoutCss from '@/components/common/styles.module.css'
+import css from './styles.module.css'
+
+export const ImageTextTop = ({
+  title,
+  backgroundImage,
+}: BaseBlock & {
+  backgroundImage: ImageObj
+}) => {
+  const [bgImage] = useResponsiveImages(backgroundImage)
+
+  return (
+    <Container className={`${layoutCss.containerShort} ${css.container}`}>
+      <div className={css.spot1} />
+      <div className={css.bg} style={{ backgroundImage: `url(${bgImage})` }}>
+        <Typography variant="h2">{title}</Typography>
+      </div>
+    </Container>
+  )
+}
+
+export default ImageTextTop

src/components/GasStation/ImageTextTop/styles.module.css

@@ -0,0 +1,29 @@
+.container {
+  position: relative;
+}
+
+.bg {
+  background-repeat: no-repeat;
+  overflow: hidden;
+  background-size: contain;
+  min-height: 500px;
+  max-height: 90vh;
+  background-position: center top 190px;
+}
+
+@media (min-width: 900px) {
+  .bg {
+    min-height: 650px;
+    background-position: center top;
+  }
+
+  .spot1 {
+    position: absolute;
+    left: -300px;
+    z-index: -1;
+    width: 1000px;
+    height: 1000px;
+    background-image: radial-gradient(at left, rgba(18, 255, 128, 0.4) 0%, rgba(246, 247, 248, 0) 80%);
+    filter: blur(50px);
+  }
+}

src/components/GasStation/LinkCard/index.tsx

@@ -0,0 +1,30 @@
+import { Typography } from '@mui/material'
+import LinkButton from '@/components/common/LinkButton'
+import SafeLink from '@/components/common/SafeLink'
+import css from './styles.module.css'
+import type { Link } from '@/components/Home/types'
+
+export type CardProps = {
+  title: string | JSX.Element
+  link?: Link
+}
+
+const LinkCard = ({ title, link }: CardProps) => (
+  <div className={css.card}>
+    <div className={css.cardBody}>
+      <Typography variant="h5" className={css.title}>
+        {title}
+      </Typography>
+
+      {link ? (
+        <SafeLink href={link?.href}>
+          <LinkButton underline={false} fullSize>
+            {link.title}
+          </LinkButton>
+        </SafeLink>
+      ) : null}
+    </div>
+  </div>
+)
+
+export default LinkCard

src/components/GasStation/LinkCard/styles.module.css

@@ -0,0 +1,60 @@
+.card {
+  background: var(--mui-palette-border-background);
+  outline: 1px solid var(--mui-palette-border-light);
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+  border-radius: 8px;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transition-duration: var(--transition-duration);
+}
+
+.card::before {
+  content: '';
+  position: absolute;
+  border-radius: 8px;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  z-index: -1;
+  background: linear-gradient(to bottom left, #12ff80, #5fddff);
+  opacity: 0;
+}
+
+.card:hover::before {
+  opacity: 1;
+}
+
+.cardBody {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* Outline */
+.outline:hover {
+  box-shadow: inset 0 0 0 2px var(--mui-palette-primary-main);
+}
+
+.outline:hover .arrow path {
+  fill: var(--mui-palette-primary-main);
+}
+
+.outline .link div::after {
+  background-color: var(--mui-palette-primary-main) !important;
+}
+
+.outline .link:hover path {
+  fill: var(--mui-palette-primary-main) !important;
+}
+
+@media (min-width: 600px) {
+  .card {
+    width: 410px;
+    height: min-content;
+  }
+}

src/components/GasStation/PartnersCardsImage/index.tsx

@@ -0,0 +1,58 @@
+import { Container, Grid, Typography } from '@mui/material'
+import clsx from 'clsx'
+import type { BaseBlock, BlockWithVariant } from '@/components/Home/types'
+import layoutCss from '@/components/common/styles.module.css'
+import css from './styles.module.css'
+import LinkCard from '@/components/GasStation/LinkCard'
+
+export type PartnersCardsImageProps = BaseBlock &
+  BlockWithVariant & {
+    partnersImage: BaseBlock['image']
+  }
+
+const PartnersCardsImage = ({
+  caption,
+  partnersImage,
+  items,
+  variant,
+  mobileVariant,
+  image,
+}: PartnersCardsImageProps) => {
+  return (
+    <Container className={css.container}>
+      <div className={css.spot1} />
+      <Grid
+        container
+        className={clsx(
+          layoutCss.containerMedium,
+          variant === 'image-text' ? css.imageFirst : css.textFirst,
+          mobileVariant === 'text-image' ? css.textFirstMobile : null,
+        )}
+        spacing="60px"
+        justifyContent="space-between"
+      >
+        <Grid item xs={12} md={6} display="flex" flexDirection="column" justifyContent="center" gap={{ xs: 3, md: 4 }}>
+          {caption && (
+            <Typography variant="caption" className={css.gradientCaption}>
+              {caption}
+            </Typography>
+          )}
+
+          {partnersImage ? <img src={partnersImage.src} alt={partnersImage.alt} className={css.partnersImage} /> : null}
+
+          {items?.map((item, index) => (
+            <LinkCard key={index} title={item.title || ''} link={item.link} />
+          ))}
+        </Grid>
+
+        {image ? (
+          <Grid item xs={12} md={6}>
+            <img src={image.src} alt={image.alt} className={css.image} />
+          </Grid>
+        ) : null}
+      </Grid>
+    </Container>
+  )
+}
+
+export default PartnersCardsImage

src/components/GasStation/PartnersCardsImage/styles.module.css

@@ -0,0 +1,45 @@
+.container {
+  position: relative;
+}
+
+.textBlock a {
+  text-decoration: underline;
+  color: var(--mui-palette-primary-main);
+}
+
+.textFirst,
+.imageFirst {
+  flex-direction: column-reverse;
+}
+
+.textFirstMobile {
+  flex-direction: column;
+}
+
+.gradientCaption {
+  background: linear-gradient(to left, #12ff80, #5fddff);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+@media (min-width: 600px) {
+  .textFirst {
+    flex-direction: row;
+  }
+
+  .imageFirst {
+    flex-direction: row-reverse;
+  }
+
+  .spot1 {
+    position: absolute;
+    right: -50px;
+    top: -650px;
+    z-index: -1;
+    width: 1600px;
+    height: 1600px;
+    background-image: radial-gradient(at right, rgba(18, 255, 128, 0.3) 0%, rgba(246, 247, 248, 0) 50%);
+    filter: blur(70px);
+  }
+}