add testimonial component

components/home/HomePage.tsx

@@ -18,6 +18,7 @@ import HeadingTagline from '../shared/HeadingTagline'
 import SectionWrapper from '../shared/SectionWrapper'
 import Steps from '../shared/Steps'
 import HomeTopSection from './HomeTopSection'
+import Testimonials from './Testimonials'
 
 const STEPS = [
   {
@@ -196,6 +197,17 @@ const HomePage = () => {
         </div>
         <Steps steps={STEPS} />
       </SectionWrapper>
+      <SectionWrapper>
+        <div className="grid grid-cols-12 gap-8 md:gap-12 flex flex-col sm:flex-row items-end mb-8 md:mb-16">
+          <div className="col-span-12 sm:col-span-6">
+            <h2>{t('home:crypto-loves-mango')}</h2>
+          </div>
+          <div className="col-span-12 sm:col-span-6 flex justify-end">
+            <HeadingTagline text={t('home:saying-about-us')} />
+          </div>
+        </div>
+        <Testimonials />
+      </SectionWrapper>
     </>
   )
 }

components/home/Testimonials.tsx

@@ -0,0 +1,96 @@
+import 'react-responsive-carousel/lib/styles/carousel.min.css'
+import { Carousel } from 'react-responsive-carousel'
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/20/solid'
+
+const TESTIMONIALS: TestimonialItem[] = [
+  {
+    description: 'Co-founder of Solana',
+    name: 'Anatoly Yakovenko',
+    profileImgSrc:
+      'https://pbs.twimg.com/profile_images/1626708518698127361/EmBuqBoT_400x400.jpg',
+    testimonial: 'Yeah dude',
+    twitterHandle: 'aeyakovenko',
+  },
+  {
+    description: 'cool',
+    name: 'Space Monkey',
+    profileImgSrc:
+      'https://pbs.twimg.com/profile_images/1608831847802306560/msFvPpcD_400x400.jpg',
+    testimonial: 'Yeah dude',
+    twitterHandle: 'RealSpaceMonkey',
+  },
+]
+
+const Testimonials = () => {
+  return (
+    <Carousel
+      autoPlay
+      infiniteLoop
+      interval={5000}
+      showIndicators={false}
+      showStatus={false}
+      renderArrowNext={(clickHandler, hasPrev) => {
+        return (
+          <div
+            className={`${
+              hasPrev ? 'absolute' : 'hidden'
+            } top-0 bottom-0 right-0 flex justify-center items-center p-3 cursor-pointer z-20 text-th-fgd-3 md:hover:text-th-fgd-1 default-transition`}
+            onClick={clickHandler}
+          >
+            <ChevronRightIcon className="w-7 h-7" />
+          </div>
+        )
+      }}
+      renderArrowPrev={(clickHandler, hasPrev) => {
+        return (
+          <div
+            className={`${
+              hasPrev ? 'absolute' : 'hidden'
+            } top-0 bottom-0 left-0 flex justify-center items-center p-3 cursor-pointer z-20 text-th-fgd-3 md:hover:text-th-fgd-1 default-transition`}
+            onClick={clickHandler}
+          >
+            <ChevronLeftIcon className="w-7 h-7" />
+          </div>
+        )
+      }}
+    >
+      {TESTIMONIALS.map((item) => (
+        <Testimonial key={item.name} item={item} />
+      ))}
+    </Carousel>
+  )
+}
+
+export default Testimonials
+
+interface TestimonialItem {
+  description: string
+  name: string
+  profileImgSrc: string
+  testimonial: string
+  twitterHandle: string
+}
+
+const Testimonial = ({ item }: { item: TestimonialItem }) => {
+  const { description, name, profileImgSrc, testimonial, twitterHandle } = item
+  return (
+    <div className="flex flex-col items-center h-72">
+      <div className="w-24 h-24 mb-3">
+        <img
+          className="w-full h-full rounded-full"
+          src={profileImgSrc}
+          alt="Profile Image"
+        />
+      </div>
+      <h3 className="mb-1">{name}</h3>
+      <a
+        className="font-mono mb-1 text-sm text-th-fgd-4"
+        href={`https://twitter.com/${twitterHandle}`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >{`@${twitterHandle}`}</a>
+      <p className="text-sm mb-4">{description}</p>
+      <p className="text-th-fgd-2 max-w-[800px]">{testimonial}</p>
+    </div>
+  )
+}

components/shared/HeadingTagline.tsx

@@ -1,6 +1,6 @@
 const HeadingTagline = ({ text }: { text: string }) => {
   return (
-    <div className="border-l-4 border-th-fgd-4 max-w-[204px]">
+    <div className="border-l-4 border-th-fgd-4 max-w-[320px]">
       <p className="text-xl ml-4">{text}</p>
     </div>
   )

package.json

@@ -40,6 +40,7 @@
     "react-dom": "^18.2.0",
     "react-fast-marquee": "^1.2.1",
     "react-i18next": "^12.1.5",
+    "react-responsive-carousel": "^3.2.23",
     "recharts": "^2.4.3",
     "zustand": "^3.4.1"
   },

public/locales/en/home.json

@@ -18,6 +18,7 @@
     "connect-mango-desc": "Connect your wallet to Mango and we’ll step you through setting up your account and making your first deposit.",
     "cross-margin": "Cross-margin accounts.",
     "cross-margin-desc": "Leverage across all your positions. Open multiple accounts to isolate your risk.",
+    "crypto-loves-mango": "Crypto loves Mango.",
     "deeply-liquid": "Deeply liquid markets.",
     "deeply-liquid-desc": "Get the best price with access to all of the liquidity on Solana.",
     "deposit-now": "Deposit Now",
@@ -41,6 +42,7 @@
     "new-to-mango": "New to Mango?",
     "risk-engine": "Sophisticated risk engine.",
     "risk-engine-desc": "The risk engine for v4 is at the core of its design. Features include, manipulation resistent price oracles, insurance fund, partial liquidations, DAO governed risk parameters and emergency reduce-only mode.",
+    "saying-about-us": "See what the community is saying about us.",
     "swap-desc": "The simplicity of swap with the power of leverage.",
     "swap-heading": "Swap it like it's hot.",
     "swap-highlight-1-desc": "Mango Swap implements flash loans to let you lever up your swaps.",

yarn.lock

@@ -5508,7 +5508,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.2, prop-types@^15.8.1:
+prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -5568,6 +5568,13 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-easy-swipe@^0.0.21:
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz#ce9384d576f7a8529dc2ca377c1bf03920bac8eb"
+  integrity sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg==
+  dependencies:
+    prop-types "^15.5.8"
+
 react-fast-marquee@^1.2.1:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/react-fast-marquee/-/react-fast-marquee-1.3.5.tgz#e53995027102fbec92da90606d7ca89703db9903"
@@ -5603,6 +5610,15 @@ react-resize-detector@^7.1.2:
   dependencies:
     lodash "^4.17.21"
 
+react-responsive-carousel@^3.2.23:
+  version "3.2.23"
+  resolved "https://registry.yarnpkg.com/react-responsive-carousel/-/react-responsive-carousel-3.2.23.tgz#4c0016ff54603e604bb5c1f9e7ef2d1eda133f1d"
+  integrity sha512-pqJLsBaKHWJhw/ItODgbVoziR2z4lpcJg+YwmRlSk4rKH32VE633mAtZZ9kDXjy4wFO+pgUZmDKPsPe1fPmHCg==
+  dependencies:
+    classnames "^2.2.5"
+    prop-types "^15.5.8"
+    react-easy-swipe "^0.0.21"
+
 react-smooth@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-2.0.1.tgz#74c7309916d6ccca182c4b30c8992f179e6c5a05"