From d8ac1e01ee2a93b8efadff40b1206d1a25f5f0d5 Mon Sep 17 00:00:00 2001
From: Awais <awaisghaffar77@gmail.com>
Date: Sun, 28 Aug 2022 13:19:59 -0400
Subject: [PATCH] Issue#22 Shipping Page updates

---
 src/components/ShippingMainCard.jsx | 141 ++++++++++++++++++++++++++++
 src/pages/shipping.jsx              |  15 +++
 2 files changed, 156 insertions(+)
 create mode 100644 src/components/ShippingMainCard.jsx
 create mode 100644 src/pages/shipping.jsx

diff --git a/src/components/ShippingMainCard.jsx b/src/components/ShippingMainCard.jsx
new file mode 100644
index 0000000..8fbe3a5
--- /dev/null
+++ b/src/components/ShippingMainCard.jsx
@@ -0,0 +1,141 @@
+/* This example requires Tailwind CSS v2.0+ */
+import { Fragment } from 'react'
+import { Popover, Transition } from '@headlessui/react'
+import {
+  Bars3Icon,
+  ChatBubbleBottomCenterTextIcon,
+  ChatBubbleLeftRightIcon,
+  InboxIcon,
+  QuestionMarkCircleIcon,
+  XMarkIcon,
+} from '@heroicons/react/24/outline'
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
+
+const solutions = [
+  {
+    name: 'Inbox',
+    description: 'Get a better understanding of where your traffic is coming from.',
+    href: '#',
+    icon: InboxIcon,
+  },
+  {
+    name: 'Messaging',
+    description: 'Speak directly to your customers in a more meaningful way.',
+    href: '#',
+    icon: ChatBubbleBottomCenterTextIcon,
+  },
+  {
+    name: 'Live Chat',
+    description: "Your customers' data will be safe and secure.",
+    href: '#',
+    icon: ChatBubbleLeftRightIcon,
+  },
+  {
+    name: 'Knowledge Base',
+    description: "Connect with third-party tools that you're already using.",
+    href: '#',
+    icon: QuestionMarkCircleIcon,
+  },
+]
+const navigation = [
+  { name: 'Pricing', href: '#' },
+  { name: 'Partners', href: '#' },
+  { name: 'Company', href: '#' },
+]
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export default function ShippingMainCard() {
+  return (
+    <div className="bg-white">
+      <main>
+        <div>
+          {/* Hero card */}
+          <div className="relative">
+            <div className="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100" />
+            <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
+              <div className="relative shadow-xl sm:rounded-2xl sm:overflow-hidden">
+                <div className="absolute inset-0">
+                  <img
+                    className="h-full w-full object-cover"
+                    src="https://images.unsplash.com/photo-1521737852567-6949f3f9f2b5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2830&q=80&sat=-100"
+                    alt="People working on laptops"
+                  />
+                  <div className="absolute inset-0 bg-indigo-700 mix-blend-multiply" />
+                </div>
+                <div className="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
+                  <h1 className="text-center text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
+                    <span className="block text-white">Take control of your</span>
+                    <span className="block text-indigo-200">customer support</span>
+                  </h1>
+                  <p className="mt-6 max-w-lg mx-auto text-center text-xl text-indigo-200 sm:max-w-3xl">
+                    Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt
+                    amet fugiat veniam occaecat fugiat aliqua.
+                  </p>
+                  <div className="mt-10 max-w-sm mx-auto sm:max-w-none sm:flex sm:justify-center">
+                    <div className="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5">
+                      <a
+                        href="#"
+                        className="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-indigo-700 bg-white hover:bg-indigo-50 sm:px-8"
+                      >
+                        Get started
+                      </a>
+                      <a
+                        href="#"
+                        className="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70 sm:px-8"
+                      >
+                        Live demo
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Logo cloud */}
+          <div className="bg-gray-100">
+            <div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
+              <p className="text-center text-base font-semibold text-gray-500">
+                Trusted by over 5 very average small businesses
+              </p>
+              <div className="mt-6 grid grid-cols-2 gap-8 md:grid-cols-6 lg:grid-cols-5">
+                <div className="col-span-1 flex justify-center md:col-span-2 lg:col-span-1">
+                  <img className="h-12" src="https://tailwindui.com/img/logos/tuple-logo-gray-400.svg" alt="Tuple" />
+                </div>
+                <div className="col-span-1 flex justify-center md:col-span-2 lg:col-span-1">
+                  <img className="h-12" src="https://tailwindui.com/img/logos/mirage-logo-gray-400.svg" alt="Mirage" />
+                </div>
+                <div className="col-span-1 flex justify-center md:col-span-2 lg:col-span-1">
+                  <img
+                    className="h-12"
+                    src="https://tailwindui.com/img/logos/statickit-logo-gray-400.svg"
+                    alt="StaticKit"
+                  />
+                </div>
+                <div className="col-span-1 flex justify-center md:col-span-2 md:col-start-2 lg:col-span-1">
+                  <img
+                    className="h-12"
+                    src="https://tailwindui.com/img/logos/transistor-logo-gray-400.svg"
+                    alt="Transistor"
+                  />
+                </div>
+                <div className="col-span-2 flex justify-center md:col-span-2 md:col-start-4 lg:col-span-1">
+                  <img
+                    className="h-12"
+                    src="https://tailwindui.com/img/logos/workcation-logo-gray-400.svg"
+                    alt="Workcation"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* More main page content here... */}
+      </main>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/pages/shipping.jsx b/src/pages/shipping.jsx
new file mode 100644
index 0000000..844007c
--- /dev/null
+++ b/src/pages/shipping.jsx
@@ -0,0 +1,15 @@
+
+import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+import PaymentHelp from "@/components/PaymentHelp"
+import ShippingMainCard from "@/components/ShippingMainCard"
+export default function Payment() {
+
+    return (
+      <>
+      <Header/>
+      <ShippingMainCard/>
+      <PaymentHelp/>
+     <Footer/>
+      </>
+    )}
\ No newline at end of file