From f9e63a6d27d6798f4217561171cd8239d849d29d Mon Sep 17 00:00:00 2001 From: Awais <awaisghaffar77@gmail.com> Date: Sun, 28 Aug 2022 12:57:51 -0400 Subject: [PATCH] Issue#23 Payment Page updates --- src/components/PaymentHelp.jsx | 38 +++++++++++++++++++++++++ src/components/PreferredPayment.jsx | 43 +++++++++++++++++++++++++++++ src/pages/payment.jsx | 17 ++++++++++++ 3 files changed, 98 insertions(+) create mode 100644 src/components/PaymentHelp.jsx create mode 100644 src/components/PreferredPayment.jsx create mode 100644 src/pages/payment.jsx diff --git a/src/components/PaymentHelp.jsx b/src/components/PaymentHelp.jsx new file mode 100644 index 0000000..3ae86a9 --- /dev/null +++ b/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> + ) +} \ No newline at end of file diff --git a/src/components/PreferredPayment.jsx b/src/components/PreferredPayment.jsx new file mode 100644 index 0000000..742d1b7 --- /dev/null +++ b/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> + ) + } \ No newline at end of file diff --git a/src/pages/payment.jsx b/src/pages/payment.jsx new file mode 100644 index 0000000..8adc881 --- /dev/null +++ b/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/> + </> + )} \ No newline at end of file