Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modify Shipping Page #82

Merged
merged 2 commits into from
Aug 30, 2022
Merged

Modify Shipping Page #82

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
10574ec
Modify Shipping Page
Afrasyabafzal Aug 30, 2022
b432ccf
Merge branch 'main' into 74-shipping-page
MZO9400 Aug 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 60 additions & 30 deletions src/components/PaymentHelp.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,68 @@
/* This example requires Tailwind CSS v2.0+ */
import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'
import {
SparklesIcon,
} from '@heroicons/react/24/outline'

export default function PaymentHelp() {
return (
<div className="relative bg-gray-800">
<div className="h-56 bg-accent 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 className="mt-24">
<div className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8">
<div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-2 lg:mx-0 lg:max-w-none lg:py-32 lg:px-0">
<div>
<div>
<span className="flex h-12 w-12 items-center justify-center rounded-md bg-gradient-to-r from-purple-600 to-indigo-600">
<SparklesIcon className="h-6 w-6 text-white" aria-hidden="true" />
</span>
</div>
<div className="mt-6">
<h2 className="text-3xl font-bold tracking-tight text-gray-900">
Better understand your customers
</h2>
<p className="mt-4 text-lg text-gray-500">
Semper curabitur ullamcorper posuere nunc sed. Ornare iaculis bibendum malesuada faucibus lacinia
porttitor. Pulvinar laoreet sagittis viverra duis. In venenatis sem arcu pretium pharetra at.
Lectus viverra dui tellus ornare pharetra.
</p>
<div className="mt-6">
<a
href="#"
className="inline-flex rounded-md border border-transparent bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border px-4 py-2 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
>
Get started
</a>
</div>
</div>
</div>
</div>
<div className="mt-12 sm:mt-16 lg:col-start-1 lg:mt-0">
<div className="-ml-48 pr-4 sm:pr-6 md:-ml-16 lg:relative lg:m-0 lg:h-full lg:px-0">
<img
className="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:right-0 lg:h-full lg:w-auto lg:max-w-none"
src="https://tailwindui.com/img/component-images/inbox-app-screenshot-2.jpg"
alt="Customer profile user interface"
/>
</div>
</div>
</div>
</div>
<div className="bg-indigo-50 mt-20">
<div className="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-24 lg:px-8">
<h2 className="text-3xl font-bold tracking-tight text-gray-900 md:text-4xl">
<span className="block">Ready to dive in?</span>
<span className="block text-indigo-600">Start your free trial today.</span>
</h2>
<div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<div className="inline-flex rounded-md shadow">
<a
href="#"
className="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white hover:bg-indigo-700"
>
Get started
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</>
)
}
225 changes: 225 additions & 0 deletions src/components/ShippingMainCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ import {
InboxIcon,
QuestionMarkCircleIcon,
XMarkIcon,
BoltIcon,
EnvelopeIcon,
GlobeAltIcon,
ScaleIcon,
} from '@heroicons/react/24/outline'
import { ChevronDownIcon } from '@heroicons/react/20/solid'

Expand Down Expand Up @@ -42,6 +46,45 @@ const navigation = [
{ name: 'Partners', href: '#' },
{ name: 'Company', href: '#' },
]
const transferFeatures = [
{
id: 1,
name: 'Competitive exchange rates',
description:
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.',
icon: GlobeAltIcon,
},
{
id: 2,
name: 'No hidden fees',
description:
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.',
icon: ScaleIcon,
},
{
id: 3,
name: 'Transfers are instant',
description:
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.',
icon: BoltIcon,
},
]
const communicationFeatures = [
{
id: 1,
name: 'Mobile notifications',
description:
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.',
icon: ChatBubbleBottomCenterTextIcon,
},
{
id: 2,
name: 'Reminder emails',
description:
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.',
icon: EnvelopeIcon,
},
]

function classNames(...classes) {
return classes.filter(Boolean).join(' ')
Expand Down Expand Up @@ -133,7 +176,189 @@ export default function ShippingMainCard() {
</div>
</div>
</div>
<div className="overflow-hidden bg-gray-50 py-16 lg:py-24">
<div className="relative mx-auto max-w-xl px-4 sm:px-6 lg:max-w-7xl lg:px-8">
<svg
className="absolute left-full hidden -translate-x-1/2 -translate-y-1/4 transform lg:block"
width={404}
height={784}
fill="none"
viewBox="0 0 404 784"
aria-hidden="true"
>
<defs>
<pattern
id="b1e6e422-73f8-40a6-b5d9-c8586e37e0e7"
x={0}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect x={0} y={0} width={4} height={4} className="text-gray-200" fill="currentColor" />
</pattern>
</defs>
<rect width={404} height={784} fill="url(#b1e6e422-73f8-40a6-b5d9-c8586e37e0e7)" />
</svg>

<div className="relative">
<h2 className="text-center text-3xl font-bold leading-8 tracking-tight text-gray-900 sm:text-4xl">
A better way to send money
</h2>
<p className="mx-auto mt-4 max-w-3xl text-center text-xl text-gray-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus magnam voluptatum cupiditate veritatis in,
accusamus quisquam.
</p>
</div>

<div className="relative mt-12 lg:mt-24 lg:grid lg:grid-cols-2 lg:items-center lg:gap-8">
<div className="relative">
<h3 className="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">Transfer funds world-wide</h3>
<p className="mt-3 text-lg text-gray-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur minima sequi recusandae, porro maiores
officia assumenda aliquam laborum ab aliquid veritatis impedit odit adipisci optio iste blanditiis facere.
Totam, velit.
</p>
</div>

<div className="relative -mx-4 mt-10 lg:mt-0" aria-hidden="true">
<svg
className="absolute left-1/2 -translate-x-1/2 translate-y-16 transform lg:hidden"
width={784}
height={404}
fill="none"
viewBox="0 0 784 404"
>
<defs>
<pattern
id="ca9667ae-9f92-4be7-abcb-9e3d727f2941"
x={0}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect x={0} y={0} width={4} height={4} className="text-gray-200" fill="currentColor" />
</pattern>
</defs>
<rect width={784} height={404} fill="url(#ca9667ae-9f92-4be7-abcb-9e3d727f2941)" />
</svg>
<img
className="relative mx-auto"
width={490}
src="https://tailwindui.com/img/features/feature-example-1.png"
alt=""
/>
</div>
</div>

<svg
className="absolute right-full hidden translate-x-1/2 translate-y-12 transform lg:block"
width={404}
height={784}
fill="none"
viewBox="0 0 404 784"
aria-hidden="true"
>
<defs>
<pattern
id="64e643ad-2176-4f86-b3d7-f2c5da3b6a6d"
x={0}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect x={0} y={0} width={4} height={4} className="text-gray-200" fill="currentColor" />
</pattern>
</defs>
<rect width={404} height={784} fill="url(#64e643ad-2176-4f86-b3d7-f2c5da3b6a6d)" />
</svg>

<div className="relative mt-12 sm:mt-16 lg:mt-24">
<div className="lg:grid lg:grid-flow-row-dense lg:grid-cols-2 lg:items-center lg:gap-8">
<div className="lg:col-start-2">
<h3 className="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">Always in the loop</h3>
<p className="mt-3 text-lg text-gray-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit ex obcaecati natus eligendi delectus,
cum deleniti sunt in labore nihil quod quibusdam expedita nemo.
</p>
</div>

<div className="relative -mx-4 mt-10 lg:col-start-1 lg:mt-0">
<svg
className="absolute left-1/2 -translate-x-1/2 translate-y-16 transform lg:hidden"
width={784}
height={404}
fill="none"
viewBox="0 0 784 404"
aria-hidden="true"
>
<defs>
<pattern
id="e80155a9-dfde-425a-b5ea-1f6fadd20131"
x={0}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect x={0} y={0} width={4} height={4} className="text-gray-200" fill="currentColor" />
</pattern>
</defs>
<rect width={784} height={404} fill="url(#e80155a9-dfde-425a-b5ea-1f6fadd20131)" />
</svg>
<img
className="relative mx-auto"
width={490}
src="https://tailwindui.com/img/features/feature-example-2.png"
alt=""
/>
</div>
</div>
</div>
<div className="relative mt-12 lg:mt-24 lg:grid lg:grid-cols-2 lg:items-center lg:gap-8">
<div className="relative">
<h3 className="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">Transfer funds world-wide</h3>
<p className="mt-3 text-lg text-gray-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur minima sequi recusandae, porro maiores
officia assumenda aliquam laborum ab aliquid veritatis impedit odit adipisci optio iste blanditiis facere.
Totam, velit.
</p>
</div>

<div className="relative -mx-4 mt-10 lg:mt-0" aria-hidden="true">
<svg
className="absolute left-1/2 -translate-x-1/2 translate-y-16 transform lg:hidden"
width={784}
height={404}
fill="none"
viewBox="0 0 784 404"
>
<defs>
<pattern
id="ca9667ae-9f92-4be7-abcb-9e3d727f2941"
x={0}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect x={0} y={0} width={4} height={4} className="text-gray-200" fill="currentColor" />
</pattern>
</defs>
<rect width={784} height={404} fill="url(#ca9667ae-9f92-4be7-abcb-9e3d727f2941)" />
</svg>
<img
className="relative mx-auto"
width={490}
src="https://tailwindui.com/img/features/feature-example-1.png"
alt=""
/>
</div>
</div>
</div>
</div>
{/* More main page content here... */}
</main>
</div>
Expand Down