feat: remade tweet section

community-heroes-cache.json

@@ -1 +1 @@
-{"hash":"8932b1eafcc44b99eb5c1a1bc52a22b673779ba7"}
+{ "hash": "204d09bbc5ee2c932499e2630fe4a119a0265740" }

src/api/hubspot.js

@@ -30,7 +30,7 @@ const handler = async (req, res) => {
 
     return res.status(200).json({ sent: true });
   } catch (error) {
-    const errMessage = error instanceof Error ? error?.message ?? error?.toString() ?? '' : '';
+    const errMessage = error instanceof Error ? (error?.message ?? error?.toString() ?? '') : '';
 
     return res.status(500).json({ error: true, message: errMessage });
   }

src/components/pages/add-notifications/related-content/data.js

@@ -1,13 +1,13 @@
 const relatedContentItems = [
   {
     name: 'Send Multi-Channel Notifications',
-    description:
-      'Reach Your Audience Where They Are: Multi-Channel Notification Solutions',
+    description: 'Reach Your Audience Where They Are: Multi-Channel Notification Solutions',
     linkUrl: 'https://novu.co/usecases/multi-channel-notifications/',
   },
   {
     name: 'Notification Content Management',
-    description: 'Unify notification content in one place and easily interact with it without the need for development resources',
+    description:
+      'Unify notification content in one place and easily interact with it without the need for development resources',
     linkUrl: 'https://novu.co/usecases/content-management/',
   },
   {

src/components/pages/community/get-involved/get-involved.jsx

@@ -7,7 +7,6 @@ import discordIcon from 'icons/discord.svg';
 import githubIcon from 'icons/github.svg';
 import novuIcon from 'icons/novu-gradient-logo.svg';
 
-
 const TITLE = 'Get involved: start, engage, contribute';
 
 const ITEMS = [

src/components/pages/content-management/related-content/data.js

@@ -1,8 +1,7 @@
 const relatedContentItems = [
   {
     name: 'Send Multi-Channel Notifications',
-    description:
-      'Reach Your Audience Where They Are: Multi-Channel Notification Solutions',
+    description: 'Reach Your Audience Where They Are: Multi-Channel Notification Solutions',
     linkUrl: 'https://novu.co/usecases/multi-channel-notifications/',
   },
   {

src/components/pages/hacktoberfest/issues/issues.jsx

@@ -15,7 +15,7 @@ const DESCRIPTION =
 const Issues = ({ className }) => {
   const [isShownMore, setIsShownMore] = useState(false);
 
-  const data = []
+  const data = [];
   // FIXME: If necessary - To get this data it is necessary to uncomment a part of the code that fetches and organizes this data at the gatsby-node file level.
   // const {
   //   hacktoberfestIssues: { data },

src/components/pages/home/reviews/reviews.css

@@ -0,0 +1,31 @@
+.reviews {
+  & .slick-track {
+    @apply !flex;
+  }
+
+  & .slick-slide {
+    @apply px-4 float-none shrink-0 h-auto md:px-[10px] sm:px-2 xs:px-5;
+  }
+
+  & .slick-slide > div {
+    @apply h-full;
+  }
+
+  & .slick-dots {
+    @apply !flex justify-center items-center -bottom-11;
+
+    li {
+      @apply m-0;
+
+      button {
+        @apply relative flex justify-center before:relative before:content-[''] before:border before:border-gray-5 before:w-2 before:h-2 before:rounded before:opacity-100 before:transition-colors before:duration-300;
+      }
+
+      &.slick-active {
+        button {
+          @apply before:border-white before:bg-white;
+        }
+      }
+    }
+  }
+}

src/components/pages/home/reviews/reviews.jsx

@@ -1,8 +1,11 @@
-import clsx from 'clsx';
 import { StaticImage } from 'gatsby-plugin-image';
 import React from 'react';
+import Slider from 'react-slick';
 
 import Link from 'components/shared/link';
+import ArrowIcon from 'icons/review-arrow.inline.svg';
+
+import Heading from '../../../shared/heading';
 
 import aeswibon from './images/aeswibon.jpg';
 import csabaKissi from './images/csaba-kissi.jpg';
@@ -14,11 +17,16 @@ import nikkisiapno from './images/nikkisiapno.jpg';
 import pontusab from './images/pontusab.jpg';
 // import psteinroe from './images/psteinroe.jpg';
 import rauchg from './images/rauchg.jpg';
+// import ArrowIcon from 'icons/chevron.inline.svg';
 // import nathanTarbert from './images/nathan-tarbert.jpg';
 // import fgribreau from './images/fgribreau.jpg';
 // import merlindru from './images/merlindru.jpg';
 // import vishucodes from './images/vishucodes.jpg';
 
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+import './reviews.css';
+
 const TITLE = 'Loved by developers and product teams';
 const DESCRIPTION =
   "Explore tweets from developers and non-technical users and see why they're fans of our open-source notifications framework.";
@@ -139,7 +147,7 @@ const ITEMS = [
       username: '@merlindru',
       avatar: merlindru,
     },
-  }, 
+  },
   {
     text: 'Amazon Simple Notification Service: <span>@novuhq</span>',
     linkUrl: 'https://twitter.com/nathan_tarbert/status/1692654472952959300',
@@ -161,61 +169,144 @@ const ITEMS = [
 */
 ];
 
-const Reviews = () => (
-  <section className="reviews safe-paddings mt-40 lg:mt-28 md:mt-16 sm:mt-20">
-    <div className="container">
-      <h3 className="text-center text-6xl leading-tight text-white md:text-3xl">{TITLE}</h3>
-      <p className="mx-auto mt-5 max-w-[720px] text-center text-lg leading-snug text-gray-9 lg:mt-3 lg:text-base">
-        {DESCRIPTION}
-      </p>
-      <ul className="mt-10 flex h-[687px] w-full flex-col flex-wrap content-between gap-10 lg:h-[760px] lg:gap-7 md:h-[662px] sm:mt-6 sm:h-auto sm:flex-nowrap sm:gap-5">
-        {ITEMS.map(({ text, image, author, linkUrl }, index) => (
-          <li
-            key={index}
-            className={clsx(
-              index % 4 === 0 && 'order-1',
-              index % 4 === 1 && 'order-2',
-              index % 4 === 2 && 'order-3',
-              index % 4 === 3 && 'order-4',
-              index % 3 === 0 && 'lg:order-1',
-              index % 3 === 1 && 'lg:order-2',
-              index % 3 === 2 && 'lg:order-3',
-              'relative w-[calc(25%-30px)] overflow-hidden rounded-xl md:w-[calc(33%-13px)] sm:order-none sm:w-full'
-            )}
-          >
-            <Link
-              className="relative z-10 block bg-gradient-to-b from-gray-2 to-gray-2/70 px-7 py-6 transition-colors duration-300 hover:bg-gray-3 lg:px-6 lg:pt-5"
-              to={linkUrl}
-              target="_blank"
-              rel="nofollow noopener"
-            >
-              <p
-                className="text-lg leading-snug lg:text-base [&>span]:text-primary-1"
-                dangerouslySetInnerHTML={{ __html: text }}
-              />
-              {image && image}
-              <div className="mt-8 flex items-center gap-x-3 lg:mt-6">
-                <img
-                  className="h-12 w-12 rounded-full lg:h-11 lg:w-11"
-                  src={author.avatar}
-                  alt={author.name}
-                  width={48}
-                  height={48}
-                  loading="lazy"
-                />
-                <div>
-                  <span className="block leading-tight lg:text-sm">{author.name}</span>
-                  <span className="mt-1 block leading-tight text-gray-8 lg:text-sm">
-                    {author.username}
-                  </span>
-                </div>
+const NextArrow = (props) => {
+  const { onClick } = props;
+
+  return (
+    <button
+      className="
+            group absolute -right-12 inset-y-1/2 -translate-y-1/2 flex justify-center items-center w-8 h-8 rounded-2xl transition-all duration-300
+            p-[1px] bg-gradient-to-br from-[#333347]/60 to-[#2B2B3B]/40
+            hover:from-[#272730] hover:via-[#5C638A]/50 hover:to-[#5C638A]
+          "
+      type="button"
+      aria-label="Prev testimonial"
+      onClick={onClick}
+    >
+      <span
+        className="w-full h-full rounded-full bg-[#111018] transition-all duration-300 flex justify-center items-center
+            group-hover:bg-gradient-to-br group-hover:from-[#111018] group-hover:via-[#302D43] group-hover:to-[#464C6D]
+          "
+      >
+        <ArrowIcon
+          className="rotate-180 w-full h-auto [&>path]:stroke-[#666666] group-hover:[&>path]:stroke-[#C7C9D1] transition-colors duration-300"
+          aria-hidden
+        />
+      </span>
+    </button>
+  );
+};
+
+const PrevArrow = (props) => {
+  const { onClick } = props;
+
+  return (
+    <button
+      className="
+            group absolute -left-12 inset-y-1/2 -translate-y-1/2 flex justify-center items-center w-8 h-8 rounded-2xl transition-all duration-300
+            p-[1px] bg-gradient-to-br from-[#333347]/60 to-[#2B2B3B]/40
+            hover:from-[#272730] hover:via-[#5C638A]/50 hover:to-[#5C638A]
+          "
+      type="button"
+      aria-label="Prev testimonial"
+      onClick={onClick}
+    >
+      <span
+        className="w-full h-full rounded-full bg-[#111018] transition-all duration-300 flex justify-center items-center
+            group-hover:bg-gradient-to-br group-hover:from-[#111018] group-hover:via-[#302D43] group-hover:to-[#464C6D]
+          "
+      >
+        <ArrowIcon
+          className="w-full h-auto [&>path]:stroke-[#666666] group-hover:[&>path]:stroke-[#C7C9D1] transition-colors duration-300"
+          aria-hidden
+        />
+      </span>
+    </button>
+  );
+};
+
+const Reviews = () => {
+  const settings = {
+    dots: false,
+    infinite: true,
+    slidesToShow: 3,
+    slidesToScroll: 1,
+    nextArrow: <NextArrow />,
+    prevArrow: <PrevArrow />,
+    responsive: [
+      {
+        breakpoint: 1023,
+        settings: {
+          slidesToShow: 2,
+        },
+      },
+      {
+        breakpoint: 639,
+        settings: {
+          slidesToShow: 1,
+          dots: true,
+          arrows: false,
+        },
+      },
+    ],
+  };
+
+  return (
+    <section className="reviews safe-paddings mt-[200px] md:mt-36 sm:mt-20">
+      <div className="container-lg xl:px-0 lg:px-8 lg:w-full lg:max-w-5xl md:max-w-3xl sm:px-5">
+        <Heading
+          className="text-center leading-denser tracking-snug font-medium md:text-[40px] sm:text-[32px] xs:text-[29px]"
+          size="44"
+          tag="h3"
+        >
+          {TITLE}
+        </Heading>
+        <p className="mx-auto max-w-xl text-center text-[17px] leading-snug font-book text-gray-9 mt-3.5 md:text-base">
+          {DESCRIPTION}
+        </p>
+        <div className="relative -mx-4 mt-14 xl:mx-12 md:mt-12 md:mx-[42px] sm:mt-10 sm:mx-10 xs:mt-9 xs:-mx-5">
+          <Slider className="flex w-full" {...settings}>
+            {ITEMS.map(({ text, author, linkUrl }, index) => (
+              <div key={index} className="relative h-full">
+                <Link
+                  className="
+                          relative z-10 flex flex-col h-full rounded-xl border border-[rgba(51,51,71,0.60)] bg-[#111018] px-6 py-5 transition-colors duration-300 hover:bg-[#15141D]
+                          xs:px-5 xs:pb-4
+                        "
+                  to={linkUrl}
+                  target="_blank"
+                  rel="nofollow noopener"
+                >
+                  <p
+                    className="text-base leading-snug [&>span]:text-primary-1 mb-5 line-clamp-5 md:text-[15px] xs:mb-4.5"
+                    dangerouslySetInnerHTML={{ __html: text }}
+                  />
+                  <div className="mt-auto pt-5 border-t border-t-[#333347] flex items-center gap-x-3">
+                    <img
+                      className="h-9 w-9 rounded-full"
+                      src={author.avatar}
+                      alt={author.name}
+                      width={36}
+                      height={36}
+                      loading="lazy"
+                    />
+                    <div>
+                      <span className="block text-base text-gray-9 leading-none md:text-[15px]">
+                        {author.name}
+                      </span>
+                      <span className="mt-[6px] block text-sm leading-none text-gray-8 md:text-sm">
+                        {author.username}
+                      </span>
+                    </div>
+                  </div>
+                </Link>
               </div>
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </div>
-  </section>
-);
+            ))}
+          </Slider>
+        </div>
+      </div>
+    </section>
+  );
+};
 
 export default Reviews;

src/components/pages/improve-communication-experience/related-content/data.js

@@ -1,13 +1,13 @@
 const relatedContentItems = [
   {
     name: 'Send Multi-Channel Notifications',
-    description:
-      'Reach Your Audience Where They Are: Multi-Channel Notification Solutions',
+    description: 'Reach Your Audience Where They Are: Multi-Channel Notification Solutions',
     linkUrl: 'https://novu.co/usecases/multi-channel-notifications/',
   },
   {
     name: 'Notification Content Management',
-    description: 'Unify notification content in one place and easily interact with it without the need for development resources',
+    description:
+      'Unify notification content in one place and easily interact with it without the need for development resources',
     linkUrl: 'https://novu.co/usecases/content-management/',
   },
   {

src/components/pages/pricing/faq/question/question.jsx

@@ -5,7 +5,6 @@ import React, { useState } from 'react';
 import ChevronIcon from 'icons/chevron.inline.svg';
 import { buttonClick } from 'utils/use-landing-simple-tracking';
 
-
 const ANIMATION_DURATION = 0.3;
 
 const variantsAnimation = {

src/components/pages/timeline/timeline/timeline.css

@@ -48,7 +48,9 @@
       inset: 0;
       border-radius: 6px;
       border: 1px solid transparent;
-      -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+      -webkit-mask:
+        linear-gradient(#fff 0 0) padding-box,
+        linear-gradient(#fff 0 0);
       -webkit-mask-composite: xor;
       mask-composite: exclude;
       transition: all 0.7s;
@@ -87,7 +89,11 @@
   .timeline-progress-bar-circle {
     border: 1px solid #fff;
     border-radius: 100%;
-    box-shadow: 0 0 1px #fff, 0 0 1px #e300bd, 0 0 15px #e300bd, inset 0 0 10px #e300bd;
+    box-shadow:
+      0 0 1px #fff,
+      0 0 1px #e300bd,
+      0 0 15px #e300bd,
+      inset 0 0 10px #e300bd;
     height: calc(100% - 36px);
 
     &::before {

src/components/pages/use-case/content/content.jsx

@@ -33,7 +33,11 @@ const Content = ({ content, templateId }) => {
         <PortableText value={content} components={components} />
       </div>
       <div className="mt-14 flex justify-end">
-        <Button to={`https://dashboard.novu.co/?blueprintId=${templateId}`} theme="primary" size="sm">
+        <Button
+          to={`https://dashboard.novu.co/?blueprintId=${templateId}`}
+          theme="primary"
+          size="sm"
+        >
           Build with Novu
         </Button>
       </div>

src/components/pages/use-case/workflow/workflow.jsx

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-
 import getChannelName from 'utils/get-channel-name';
 
 import addIcon from './images/add.svg';