Issue#23 Payment Page updates

src/components/PaymentHelp.jsx

@@ -0,0 +1,38 @@
+/* This example requires Tailwind CSS v2.0+ */
+import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'
+
+export default function PaymentHelp() {
+  return (
+    <div className="relative bg-gray-800">
+      <div className="h-56 bg-indigo-600 sm:h-72 md:absolute md:left-0 md:h-full md:w-1/2">
+        <img
+          className="w-full h-full object-cover"
+          src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&q=60&blend=6366F1&sat=-100&blend-mode=multiply"
+          alt=""
+        />
+      </div>
+      <div className="relative max-w-7xl mx-auto px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
+        <div className="md:ml-auto md:w-1/2 md:pl-10">
+          <h2 className="text-lg font-semibold text-gray-300">Award winning support</h2>
+          <p className="mt-2 text-white text-3xl font-bold tracking-tight sm:text-4xl">We’re here to help</p>
+          <p className="mt-3 text-lg text-gray-300">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et, egestas tempus tellus etiam sed. Quam a
+            scelerisque amet ullamcorper eu enim et fermentum, augue. Aliquet amet volutpat quisque ut interdum
+            tincidunt duis.
+          </p>
+          <div className="mt-8">
+            <div className="inline-flex rounded-md shadow">
+              <a
+                href="#"
+                className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-gray-900 bg-white hover:bg-gray-50"
+              >
+                Visit the help center
+                <ArrowTopRightOnSquareIcon className="-mr-1 ml-3 h-5 w-5 text-gray-400" aria-hidden="true" />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/PreferredPayment.jsx

@@ -0,0 +1,43 @@
+export default function PreferredPayment () {
+    return (
+      <div className="bg-white">
+        <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
+          <p className="text-center text-lg font-semibold text-gray-600">
+            Trusted by over 5 very average small businesses
+          </p>
+          <div className="mt-6 grid grid-cols-2 gap-0.5 md:grid-cols-3 lg:mt-8">
+            <div className="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
+              <img
+                className="max-h-12"
+                src="https://tailwindui.com/img/logos/transistor-logo-gray-400.svg"
+                alt="Workcation"
+              />
+            </div>
+            <div className="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
+              <img className="max-h-12" src="https://tailwindui.com/img/logos/mirage-logo-gray-400.svg" alt="Mirage" />
+            </div>
+            <div className="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
+              <img className="max-h-12" src="https://tailwindui.com/img/logos/tuple-logo-gray-400.svg" alt="Tuple" />
+            </div>
+            <div className="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
+              <img className="max-h-12" src="https://tailwindui.com/img/logos/laravel-logo-gray-400.svg" alt="Laravel" />
+            </div>
+            <div className="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
+              <img
+                className="max-h-12"
+                src="https://tailwindui.com/img/logos/statickit-logo-gray-400.svg"
+                alt="StaticKit"
+              />
+            </div>
+            <div className="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
+              <img
+                className="max-h-12"
+                src="https://tailwindui.com/img/logos/statamic-logo-gray-400.svg"
+                alt="Statamic"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }

src/pages/payment.jsx

@@ -0,0 +1,17 @@
+
+import HeroSection from "@/components/HeroSection"
+import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+import  PreferredPayment  from "@/components/PreferredPayment"
+import PaymentHelp from "@/components/PaymentHelp"
+export default function Payment() {
+
+    return (
+      <>
+      <Header/>
+      <HeroSection/>
+      <PreferredPayment/>
+      <PaymentHelp/>
+     <Footer/>
+      </>
+    )}