Merge pull request #80 from payjoin/testimonials

Add testimonial marquee
payjoin · Aug 15, 2024 · ab8d210 · ab8d210
2 parents 50b72e2 + f9f9555
commit ab8d210
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 23 deletions.
diff --git a/src/components/HeaderContent/index.tsx b/src/components/HeaderContent/index.tsx
@@ -1,9 +1,10 @@
-// Button component that accounts for the differences between the two buttons using props
-// Using the given tailwind classes below
+import Marquee from "react-fast-marquee";
+
+// Button component remains unchanged
 export function Button({ children, variant }) {
   return (
     <button
-      className={`text-2xl text-white px-12 py-4 rounded-lg cursor-pointer transition-all w-80 ${
+      className={`text-xl text-white px-12 py-4 rounded-lg cursor-pointer transition-all w-80 ${
         variant === "primary"
           ? "bg-primary  hover:bg-pink-500 border-none"
           : "border-solid bg-secondary border-white hover:border-pink-200 hover:text-pink-200"
@@ -14,28 +15,76 @@ export function Button({ children, variant }) {
   );
 }
 
+const Testimonial = ({ text, name, image }) => (
+  <div className="flex flex-col items-start justify-between gap-4 mx-4 w-96 bg-tertiary rounded-lg p-6 shadow-lg">
+    <blockquote className="border-l-secondary text-left italic text-sm">{text}</blockquote>
+    <div className="flex items-center">
+      <img src={image} alt={name} className="w-8 h-8 rounded-full mr-4" />
+      <span className="font-bold">{name}</span>
+    </div>
+  </div>
+);
+
 export default function HeaderContent() {
   return (
-    <div className="min-h-screen flex items-center justify-center flex-col gap-8 max-sm:m-20">
-      <img
-        src="/svg/monad.svg"
-        alt="Monad Logo"
-        className="w-32 text-primary"
-      />
-      <h1 className="text-7xl">Payjoin</h1>
-      <div className="flex flex-col">
-        <h2 className="text-4xl">
-          Scale Bitcoin, save fees, and preserve privacy all at once.
-        </h2>
+    <div className="min-h-screen flex items-center justify-center flex-col gap-24 max-sm:m-20 overflow-hidden w-screen">
+      <div className="flex flex-col gap-4 justify-center items-center">
+        <img
+          src="/svg/monad.svg"
+          alt="Monad Logo"
+          className="w-24 text-primary"
+        />
+        <h1 className="text-6xl">Payjoin</h1>
+        <div className="flex flex-col">
+          <h2 className="text-2xl">
+            Scale Bitcoin, save fees, and preserve privacy all at once.
+          </h2>
+        </div>
+        <div className="flex gap-4 flex-col sm:flex-row">
+          <a href="./docs/how-payjoin-saves">
+            <Button variant="primary">Learn More</Button>
+          </a>
+          <a target="_blank" href="https://payjoindevkit.org/">
+            <Button variant="secondary">Developer Kit</Button>
+          </a>
+        </div>
       </div>
-      <div className="flex gap-4 flex-col sm:flex-row">
-        <a href="./docs/how-payjoin-saves">
-          <Button variant="primary">Learn More</Button>
-        </a>
-        <a target="_blank" href="https://payjoindevkit.org/">
-          <Button variant="secondary">Developer Kit</Button>
-        </a>
+      <div className="w-full overflow-hidden">
+        <Marquee
+          gradient={true}
+          gradientColor="#46192b"   
+        >
+          <div className="flex items-start">
+            <Testimonial
+              text="Payjoin usage improves the privacy of all bitcoiners by breaking the common input ownership heuristic - you can no longer assume all inputs belong to the sender."
+              name="ODELL"
+              image="https://avatars.githubusercontent.com/u/50266466?v=4"
+            />
+            <Testimonial
+              text="Payjoin doesn't even have to be widely used to make the common input ownership heuristic unusable. Since payjoins are indistinguishable on-chain, it should suffice to have payjoin optionally available in most wallets."
+              name="El Flaco"
+              image="https://pbs.twimg.com/profile_images/1819046599768612871/S2BADZaw_400x400.jpg"
+            />
+            <Testimonial
+              text="More payjoin adoption would be a good thing. payjoin = https"
+              name="Gigi"
+              image="https://dergigi.com/assets/images/avatar.jpg"
+            />
+            <Testimonial
+              text="Wallet side p2p PayJoin is the future IMO... Bitcoin needs more PayJoin and p2p capable PayJoin wallet interop."
+              name="Adam Back"
+              image="https://pbs.twimg.com/profile_images/1364645619705511936/IGTT_tnL_400x400.jpg"
+            />
+            <Testimonial
+              text="Using Payjoin when spending is so underrated.
+
+The ability to break common-input-ownership heuristic *and* completely obfuscate amount sent is extremely powerful."
+              name="Seth For Privacy"
+              image="https://pbs.twimg.com/profile_images/1507020330954489862/MNnJ320U_400x400.jpg"
+            />
+          </div>
+        </Marquee>
       </div>
     </div>
   );
-}
+}
diff --git a/src/components/UsedBy/index.tsx b/src/components/UsedBy/index.tsx
@@ -14,7 +14,7 @@ export default function WalletsUsingPayjoin() {
         <h1 className="text-6xl">Wallets Using Payjoin</h1>
       </div>
       <Marquee
-        className="bg-tertiary w-32 h-[12vh]"
+        className="bg-tertiary w-32 h-[24vh]"
         gradient={true}
         gradientColor="#46192b"
       >