/
payment-gateways.html
132 lines (123 loc) · 7.78 KB
/
payment-gateways.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!doctype html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-CEVX2SLENS"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-CEVX2SLENS');
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-TZZPD49');</script>
<!-- End Google Tag Manager -->
<meta name="google-site-verification" content="QyzRhR9f4u41ua5XJksjItnBUUquJvU_gCz8Hz3z2fc" />
<title>GAPP Blocks-Payment Gateway</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="output.css" rel="stylesheet">
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script>
$(function () {
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TZZPD49"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- This example requires Tailwind CSS v2.0+ -->
<div class="relative bg-gray-50">
<div id="header"></div>
<main class="lg:relative">
<div class="relative">
<div class="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100"></div>
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="relative shadow-xl sm:rounded-2xl sm:overflow-hidden">
<div class="absolute inset-0">
<img class="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 class="absolute inset-0 bg-gradient-to-r from-purple-800 to-indigo-700 mix-blend-multiply"></div>
</div>
<div class="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
<h1 class="text-center text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
<span class="block text-white">Simple payment, anytime. Anywhere</span>
</h1>
<p class="mt-6 max-w-lg mx-auto text-center text-xl text-indigo-200 sm:max-w-3xl">Connect your default payment and delivery methods, such as Stripe, PayPal, Square, and others, by making use of one of our many available blocks.</p>
<div class="mt-10 max-w-sm mx-auto sm:max-w-none sm:flex sm:justify-center">
<div class="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5">
<a href="pricing.html" class="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="https://www.youtube.com/watch?v=XFIVGcBnSQE" class="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 class="bg-gray-100">
<div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
<p class="text-center text-base font-semibold text-gray-500">Choose Your Preferred Way of Payment</p>
<p class="text-center text-base font-semibold text-gray-500"><b>A descriptive carousel indicator</b></p>
<div class="mt-6 grid grid-cols-5 gap-8 md:grid-cols-6 lg:grid-cols-5">
<div class="col-span-1 flex justify-center md:col-span-2 lg:col-span-1">
<img class="h-12" src="https://tailwindui.com/img/logos/tuple-logo-gray-400.svg" alt="Tuple">
</div>
<div class="col-span-1 flex justify-center md:col-span-2 lg:col-span-1">
<img class="h-12" src="https://tailwindui.com/img/logos/mirage-logo-gray-400.svg" alt="Mirage">
</div>
<div class="col-span-1 flex justify-center md:col-span-2 lg:col-span-1">
<img class="h-12" src="https://tailwindui.com/img/logos/statickit-logo-gray-400.svg" alt="StaticKit">
</div>
<div class="col-span-1 flex justify-center md:col-span-2 md:col-start-2 lg:col-span-1">
<img class="h-12" src="https://tailwindui.com/img/logos/transistor-logo-gray-400.svg" alt="Transistor">
</div>
<div class="col-span-2 flex justify-center md:col-span-2 md:col-start-4 lg:col-span-1">
<img class="h-12" src="https://tailwindui.com/img/logos/workcation-logo-gray-400.svg" alt="Workcation">
</div>
</div>
</div>
</div>
</main>
</div>
<!-- CTA Section -->
<div class="relative bg-gray-800">
<div class="h-56 bg-indigo-600 sm:h-72 md:absolute md:left-0 md:h-full md:w-1/2">
<img class="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 class="relative max-w-7xl mx-auto px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
<div class="md:ml-auto md:w-1/2 md:pl-10">
<a href="contact.html" class="mt-2 text-white text-3xl font-bold tracking-tight sm:text-4xl">Trouble finding what you’re looking for?</a>
<p class="mt-3 text-lg text-gray-300">Make a request to a GAPP Consultant for individualized assistance with the integration of the Shipping Method of your choosing.</p>
<div class="mt-8">
<div class="inline-flex rounded-md shadow">
<a href="contact.html" class="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">
We’re here to help
<!-- Heroicon name: solid/external-link -->
<svg class="-mr-1 ml-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
<path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="footer"></div>
<!-- Start of HubSpot Embed Code -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/21922964.js"></script>
<!-- End of HubSpot Embed Code -->
</body>
</html>