whatsflitchpay2 layout and left card done

public/svgs/Book.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+export function Book() {
+  return (
+    <svg
+      width="23"
+      height="31"
+      viewBox="0 0 23 31"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="SVG">
+        <path
+          id="Vector"
+          d="M4.44629 21.9345V8.68097C4.44629 8.09513 4.67901 7.53328 5.09327 7.11903C5.50752 6.70477 6.06937 6.47205 6.65522 6.47205H18.5834V24.1435H6.65522C6.06937 24.1435 5.50752 23.9108 5.09327 23.4965C4.67901 23.0822 4.44629 22.5204 4.44629 21.9345ZM4.44629 21.9345C4.44629 21.3487 4.67901 20.7869 5.09327 20.3726C5.50752 19.9583 6.06937 19.7256 6.65522 19.7256H18.5834"
+          stroke="#2A2B3A"
+          stroke-width="1.76714"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+    </svg>
+  );
+}

public/svgs/Rocket.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+export function Rocket() {
+  return (
+    <svg
+      width="22"
+      height="31"
+      viewBox="0 0 22 31"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="SVG">
+        <path
+          id="Vector"
+          d="M4.12945 19.2839C2.80409 20.3972 2.3623 23.7017 2.3623 23.7017C2.3623 23.7017 5.66686 23.2599 6.78016 21.9346C7.4075 21.1924 7.39866 20.0526 6.70064 19.3634C6.3572 19.0356 5.9048 18.8462 5.43027 18.8315C4.95573 18.8168 4.49249 18.9779 4.12945 19.2839Z"
+          stroke="#2A2B3A"
+          stroke-width="1.76714"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          id="Vector_2"
+          d="M10.7552 17.9585L8.10449 15.3078C8.57468 14.0879 9.16673 12.9186 9.87164 11.8177C10.9012 10.1716 12.3347 8.81621 14.0359 7.88055C15.7371 6.94488 17.6494 6.46001 19.5909 6.47205C19.5909 8.87537 18.9017 13.0988 14.2895 16.1913C13.1734 16.8971 11.9894 17.4891 10.7552 17.9585Z"
+          stroke="#2A2B3A"
+          stroke-width="1.76714"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          id="Vector_3"
+          d="M8.10438 15.3078H3.68652C3.68652 15.3078 4.17249 12.6305 5.45367 11.7735C6.88505 10.8192 9.87153 11.7735 9.87153 11.7735"
+          stroke="#2A2B3A"
+          stroke-width="1.76714"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          id="Vector_4"
+          d="M10.7559 17.9585V22.3763C10.7559 22.3763 13.4331 21.8904 14.2901 20.6092C15.2444 19.1778 14.2901 16.1913 14.2901 16.1913"
+          stroke="#2A2B3A"
+          stroke-width="1.76714"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+    </svg>
+  );
+}

src/app/page.tsx

@@ -11,6 +11,8 @@ import Customize from "../components/Customize";
 import { useMediaQuery } from "@mantine/hooks";
 import { OrgTestimonials } from "../components/OrgTestimonials";
 import { WhatsFlitchPay } from "../components/WhatsFlitchPay";
+import { WhatsFlitchPay2 } from "../components/WhatsFlitchPay2";
+
 import { FlitchPayFinal } from "../components/FlitchPayFinal";
 
 export default function LandingPage() {
@@ -21,6 +23,7 @@ export default function LandingPage() {
       {/* {!isMobile ? <Timeline /> : null} */}
       <OrgTestimonials />
       <WhatsFlitchPay />
+      <WhatsFlitchPay2 />
       <FlitchPayFinal/>
       {/* <Authlite />
       <Showcase />

src/components/FlitchPayFinal.tsx

@@ -7,7 +7,7 @@ import Link from "next/link";
 export function FlitchPayFinal() {
   return (
     <section className="flex items-center">
-      <div className="md:min-w-[768px] md:max-w-[1600px] md:mx-auto items-center" >
+      <div className="items-center md:mx-auto md:min-w-[768px] md:max-w-[1600px]">
         <div
           style={{
             background:

src/components/WhatsFlitchPay.tsx

@@ -18,11 +18,11 @@ export function WhatsFlitchPay() {
         <HeadComponent />
         <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-8 rounded-md bg-secondary font-semibold 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 font-normal">
+                <span className="font-normal text-muted-foreground">
                   {" "}
                   create space to ask questions and have open-ended
                   conversations.
@@ -41,11 +41,11 @@ export function WhatsFlitchPay() {
             </div>
           </div>
           {/* 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 gap-12 rounded-md bg-secondary font-semibold 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 font-normal">
+                <span className="font-normal text-muted-foreground">
                   {" "}
                   allow communication and collaboration about code changes.
                 </span>
@@ -64,11 +64,11 @@ export function WhatsFlitchPay() {
           </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 gap-12 rounded-md bg-secondary font-semibold 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">
+              <span className="font-normal text-muted-foreground">
                 {" "}
                 lets you support your favorite open source maintainers and
                 projects.
@@ -100,7 +100,7 @@ function HeadComponent() {
   return (
     <div className="mt-1 flex flex-col gap-3 px-4 text-center sm:px-0">
       <a
-        className="mx-auto hidden rounded-full bg-gradient-to-r from-[#5157E6] to-[#FFB800] p-[1px] brightness-90 contrast-150 focus:outline-none focus:ring-blue-600 focus-visible:ring-2 dark:brightness-125 dark:contrast-100 sm:block"
+        className="mx-auto rounded-full bg-gradient-to-r from-[#5157E6] to-[#FFB800] p-[1px] brightness-90 contrast-150 focus:outline-none focus:ring-blue-600 focus-visible:ring-2 dark:brightness-125 dark:contrast-100 "
         href="#features"
       >
         <div className="flex items-center rounded-full bg-background/80 px-3 py-1">

src/components/WhatsFlitchPay2.tsx

@@ -0,0 +1,150 @@
+import { Button } from "@/components/ui/button";
+import { FeaturesStar } from "@/public/svgs/FeaturesStar";
+import Link from "next/link";
+import React from "react";
+import inboundRelay from "@/public/images/inbound-relay.png";
+import Image from "next/image";
+import { Book } from "@/public/svgs/Book";
+import { Rocket } from "@/public/svgs/Rocket";
+
+export function WhatsFlitchPay2() {
+  return (
+    <section className="flex items-center bg-white py-12 text-black md:py-24 lg:pt-32 ">
+      <div className="container mx-auto flex flex-col items-center gap-16 md:gap-28 md:px-48 ">
+        <HeadComponent />
+        <div className="w-full">
+          <div className="flex items-center justify-between text-xs">
+            <div className="text-base font-semibold md:text-xl">
+              Inbound Payments
+            </div>
+            <div>
+              <Link
+                href="/"
+                className="items-center rounded-full bg-violet-600 px-4 py-2  text-[0.6rem] text-white backdrop-filter-none hover:bg-violet-700 md:text-base "
+              >
+                Create Inbound Payments
+              </Link>
+            </div>
+          </div>
+          <div
+            className="mt-4 flex flex-wrap justify-between overflow-hidden rounded-[4rem] md:mt-14 md:flex-nowrap"
+            style={{ border: "1px solid hsla(234, 49%, 92%, 1)" }}
+          >
+            {/* card1 */}
+            <div
+              className="flex flex-col gap-4 p-6 pt-8 md:w-1/2 md:p-9"
+              style={{ border: "1px solid hsla(234, 49%, 92%, 1)" }}
+            >
+              <div className="text-lg font-medium">
+                Encrypt or Redact your Data
+              </div>
+              <div
+                className="text-sm "
+                style={{ color: "hsla(236, 16%, 20%, 1)" }}
+              >
+                Inbound Relay is a proxy that intercepts and encrypts or redacts
+                selected fields in an HTTPS request before forwarding the
+                request to its original destination.
+              </div>
+              <div
+                className="flex flex-wrap gap-4 rounded-[2rem] p-6 md:flex-nowrap"
+                style={{ border: "1px solid hsla(234, 49%, 92%, 1)" }}
+              >
+                <div className="text-[0.84rem] md:mt-8 md:w-1/2">
+                  <p style={{ color: "hsla(236, 16%, 20%, 1)" }}>
+                    Create an Inbound Relay with an onboarding tutorial.
+                  </p>
+                  <div className="mt-2">
+                    <Link
+                      href="/"
+                      className="items-center rounded-full bg-violet-600 px-2.5 py-1.5 text-[0.775rem]  text-white hover:bg-violet-700"
+                    >
+                      Get Started
+                    </Link>
+                  </div>
+                </div>
+                <Image className="md:w-1/2" src={inboundRelay} alt="" />
+              </div>
+              <div className="flex flex-wrap md:flex-nowrap gap-2 md:gap-4">
+                <Link
+                  href="/"
+                  className="flex w-full md:w-1/2 items-center justify-between rounded-full px-2.5 py-0.5 md:text-[0.775rem] text-[0.7rem] hover:bg-gray-200"
+                  style={{ border: "1px solid hsla(234, 49%, 92%, 1)" }}
+                >
+                  <div className="flex items-center gap-2 ">
+                    <span>
+                      <Book />
+                    </span>
+                    Get Started
+                  </div>
+                  <div className="font-semibold" style={{color:"hsla(236, 16%, 20%, 1)"}}>{">"}</div>
+                </Link>
+                <Link
+                  href="/"
+                  className="flex w-full md:w-1/2 items-center justify-between rounded-full px-2.5 py-0.5 md:text-[0.775rem] text-[0.7rem] hover:bg-gray-200"
+                  style={{ border: "1px solid hsla(234, 49%, 92%, 1)" }}
+                >
+                  <div className="flex items-center gap-2 ">
+                    <span>
+                      <Rocket />
+                    </span>
+                    Follow a Quickstart
+                  </div>
+                  <div className="font-semibold" style={{color:"hsla(236, 16%, 20%, 1)"}}>{">"}</div>
+                </Link>
+              </div>
+            </div>
+            {/* card2 */}
+            <div
+              className="flex  flex-col gap-4 p-6 md:w-1/2 md:p-10"
+              style={{
+                border: "1px solid hsla(234, 49%, 92%, 1)",
+                backgroundColor: "hsla(234, 49%, 92%, 1)",
+              }}
+            >
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam,
+              blanditiis cupiditate, quidem culpa id, officiis earum aperiam
+              quae dolor pariatur iusto. Dignissimos illo repellat vitae? Nisi
+              necessitatibus sunt vero unde quia! Nulla molestias esse deleniti
+              necessitatibus, quasi est nihil id omnis fugit aspernatur? Placeat
+              pariatur facere quibusdam hic aliquam eaque, iusto eum libero
+              consequatur? Velit laborum quidem earum consectetur! Itaque amet
+              nobis neque accusamus nulla ut provident consectetur cum et
+              explicabo incidunt dolores eos aperiam doloremque odit
+              perspiciatis tempore asperiores obcaecati, laudantium quos
+              aspernatur modi quod optio. Sunt, pariatur praesentium. Non
+              cupiditate incidunt nisi, cum consequatur blanditiis eius officia
+              ut?
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function HeadComponent() {
+  return (
+    <div className="mt-1 flex flex-col gap-3 px-4 text-center sm:px-0">
+      <a
+        className="mx-auto rounded-full bg-gradient-to-r from-[#161FF2] to-[#F00] p-[1px] brightness-90 contrast-150 focus:outline-none focus:ring-blue-600 focus-visible:ring-2 dark:brightness-125 dark:contrast-100 "
+        href="#features"
+      >
+        <div className="flex items-center rounded-full bg-white/60 px-3 py-1">
+          <div className="-mb-1">
+            <FeaturesStar />
+          </div>
+          <span className="bg-gradient-to-r from-[#161FF2] to-[#F00] bg-clip-text text-transparent">
+            many features, wow{" "}
+          </span>
+        </div>
+      </a>
+      <h1 className="text-3xl font-bold md:text-4xl">
+        {"What's"} in FlitchPay
+      </h1>
+      <p className="" style={{ color: "hsla(0, 0%, 10%, 0.5)" }}>
+        All you need to become a TypeScript menace
+      </p>
+    </div>
+  );
+}