whats flitchpay final boss(card) done, and some text highlights fix

Solana-Hyperdrive · Nov 7, 2023 · b6e6a8f · b6e6a8f
1 parent 3571b93
commit b6e6a8f
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 8 deletions.
diff --git a/public/images/FlitchPayLaptop.webp b/public/images/FlitchPayLaptop.webp
diff --git a/public/images/FlitchPayMobile.webp b/public/images/FlitchPayMobile.webp
diff --git a/src/components/WhatsFlitchPay.tsx b/src/components/WhatsFlitchPay.tsx
@@ -6,20 +6,23 @@ import { VectorRight } from "@/public/svgs/VectorRight";
 import Link from "next/link";
 import discussion from "@/public/images/discussions.png";
 import pullRequests from "@/public/images/pull-requests.png";
+import laptop from "@/public/images/FlitchPayLaptop.webp";
+import mobile from "@/public/images/FlitchPayMobile.webp";
 import React from "react";
 import Image from "next/image";
 
 export function WhatsFlitchPay() {
   return (
     <section className="flex items-center bg-background py-12 md:py-24 lg:pt-32 ">
-      <div className="container mx-auto flex flex-col items-center md:px-36 ">
+      <div className="container mx-auto flex flex-col items-center gap-4 md:px-48 ">
         <HeadComponent />
-        <div className="mt-14 flex flex-wrap gap-4 md:flex-nowrap md:px-14 md:text-lg">
-          <div className="flex flex-col justify-between gap-8 rounded-md bg-secondary md:w-1/2 ">
-            <div className="flex flex-col justify-between gap-6  px-6 pt-6 md:pt-14">
+        <div className="mt-14 flex flex-wrap gap-4 md:flex-nowrap md:text-lg">
+          {/* card1 */}
+          <div className="flex flex-col font-semibold justify-between gap-8 rounded-md bg-secondary md:w-1/2 ">
+            <div className="flex flex-col justify-between gap-6  px-6 pt-6 md:px-14 md:pt-14">
               <div>
                 Sophisticated Checkouts
-                <span className="text-muted-foreground">
+                <span className="text-muted-foreground font-normal">
                   {" "}
                   create space to ask questions and have open-ended
                   conversations.
@@ -37,11 +40,12 @@ export function WhatsFlitchPay() {
               <Image src={discussion} alt="App" className="" />
             </div>
           </div>
-          <div className="flex flex-col gap-12 rounded-md bg-secondary md:w-1/2 md:gap-16 ">
-            <div className="flex flex-col justify-between gap-8  px-6 pt-6 md:pt-14">
+          {/* card2 */}
+          <div className="flex flex-col font-semibold gap-12 rounded-md bg-secondary md:w-1/2 md:gap-16 ">
+            <div className="flex flex-col justify-between gap-8  px-6 pt-6 md:px-14 md:pt-14">
               <div>
                 On Make products & Sell
-                <span className="text-muted-foreground">
+                <span className="text-muted-foreground font-normal">
                   {" "}
                   allow communication and collaboration about code changes.
                 </span>
@@ -59,6 +63,34 @@ export function WhatsFlitchPay() {
             </div>
           </div>
         </div>
+        {/* card3 */}
+        <div className="flex font-semibold w-full gap-12 rounded-md bg-secondary md:gap-16 md:text-lg ">
+          <div className="flex w-full flex-wrap md:flex-nowrap">
+            <div className="pl-6 pt-6 md:w-5/12 md:pl-14 md:pt-14">
+              On premise Messaging & Real-time Payments
+              <span className="text-muted-foreground font-normal">
+                {" "}
+                lets you support your favorite open source maintainers and
+                projects.
+              </span>
+              <Link href={""}>
+                <div className="mt-6 flex text-base transition-colors hover:text-muted-foreground">
+                  Invest with GitHub Sponsors {"->"}
+                  {/* Right Arrow */}
+                  <span className="sr-only">Invest with GitHub Sponsors</span>
+                </div>
+              </Link>
+            </div>
+            <div className="mt-8 flex overflow-hidden md:mt-0">
+              <div className="-me-20 md:-me-52">
+                <Image src={laptop} alt="laptop"></Image>
+              </div>
+              <div className="md:-me-14 ">
+                <Image src={mobile} alt="mobile"></Image>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </section>
   );