Merge pull request #306 from gitcoinco/feat/about

Feat/about: add testimonials

Author: cristinalare

src/app/about/page.tsx

@@ -1,9 +1,11 @@
 import type { Metadata } from "next";
 import Image from "next/image";
+import Script from "next/script";
 import { ArrowUpRight } from "lucide-react";
 import { Button } from "@/components/ui";
 import { CTASection } from "@/components/layouts";
 import { pageSeo } from "@/lib/page-seo";
+import Tweet from "@/components/Tweet";
 
 export const metadata: Metadata = pageSeo.about;
 
@@ -489,6 +491,69 @@ export default function AboutPage() {
         </div>
       </section>
 
+      {/* ── TWEETS ───────────────────────────────────────────────────────── */}
+      <section className="mx-auto w-full max-w-[1166px] px-4 py-16 sm:px-6 xl:px-0">
+        <div className="grid gap-x-6 gap-y-10 md:grid-cols-3">
+          <Tweet
+            url="https://twitter.com/VitalikButerin/status/1539887980776751107?ref_src=twsrc%5Etfw"
+            author="vitalik.eth (@VitalikButerin)"
+            date="June 23, 2022"
+            noConversation
+          >
+            IMO all donors to the gitcoin matching pool deserve to get big
+            beautiful statues in the metaverse honoring their contributions.
+          </Tweet>
+
+          <Tweet
+            url="https://twitter.com/LefterisJP/status/1538948370286489600?ref_src=twsrc%5Etfw"
+            author="Lefteris Karapetsas | Hiring for @rotkiapp (@LefterisJP)"
+            date="June 20, 2022"
+          >
+            Don&apos;t praise working for no money. This is not the spirit of{" "}
+            <a href="https://twitter.com/hashtag/opensource?src=hash&amp;ref_src=twsrc%5Etfw">
+              #opensource
+            </a>
+            .<br />
+            <br />
+            Work should be paid, and work made in the open should even be paid
+            more.
+            <br />
+            <br />
+            Instead of perpetuating the legend of the poor opensource maintainer
+            let&apos;s find ways to sustainably fund{" "}
+            <a href="https://twitter.com/hashtag/opensource?src=hash&amp;ref_src=twsrc%5Etfw">
+              #opensource
+            </a>
+            .<br />
+            <br />
+            ❤️{" "}
+            <a href="https://twitter.com/gitcoin?ref_src=twsrc%5Etfw">
+              @gitcoin
+            </a>
+          </Tweet>
+
+          <Tweet
+            url="https://twitter.com/sassal0x/status/1543809081630085121?ref_src=twsrc%5Etfw"
+            author="sassal.eth 🦇🔊 (@sassal0x)"
+            date="July 4, 2022"
+          >
+            I would love to see more non-speculative Ethereum apps take off
+            during this bear market.
+            <br />
+            <br />
+            So far the most popular ones I can think of (that have actual active
+            users) are Gitcoin, POAP and ENS.
+            <br />
+            <br />
+            What else is there?
+          </Tweet>
+        </div>
+      </section>
+      <Script
+        src="https://platform.twitter.com/widgets.js"
+        strategy="afterInteractive"
+      />
+
       {/* ── CTA ──────────────────────────────────────────────────────────── */}
       <CTASection
         title="Ready to Contribute?"

src/app/globals.css

@@ -301,9 +301,13 @@ code:not(pre code) {
 }
 
 /* Blockquotes - Playfair Display, white border */
-blockquote {
+blockquote:not(.twitter-tweet) {
   @apply border-l-2 border-gray-25 pl-6 my-6;
-  @apply text-xl italic text-gray-500;
+  @apply text-xl italic text-gray-300;
+}
+
+blockquote.twitter-tweet {
+  @apply text-gray-200 not-italic border-l-2 border-gray-500 pl-5 my-0;
 }
 
 /* Tables */

src/components/Tweet.tsx

@@ -0,0 +1,20 @@
+interface TweetProps {
+  url: string;
+  author: string;
+  date: string;
+  noConversation?: boolean;
+  children: React.ReactNode;
+}
+
+export default function Tweet({ url, author, date, noConversation, children }: TweetProps) {
+  return (
+    <blockquote
+      className="twitter-tweet"
+      {...(noConversation ? { "data-conversation": "none" } : {})}
+    >
+      <p lang="en" dir="ltr">{children}</p>
+      &mdash; {author}{" "}
+      <a href={url}>{date}</a>
+    </blockquote>
+  );
+}