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 (
+
+
+
+ {/* Hero card */}
+
+
+
+
+
+
+
+
+
+
+ Take control of your
+ customer support
+
+
+ Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt
+ amet fugiat veniam occaecat fugiat aliqua.
+
+
+
+
+
+
+
+ {/* Logo cloud */}
+
+
+
+ Trusted by over 5 very average small businesses
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* More main page content here... */}
+
+
+ )
+}
\ 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 (
+ <>
+
+
+
+
+ >
+ )}
\ No newline at end of file