Skip to content

Commit 068dde1

Browse files
Rendani-MultiSafepayRendani-MultiSafepay
authored
Merge pull request #2846 from MultiSafepay/DOCS-3884
DOCS-3884: Improve landing page
2 parents 05d7431 + 67b3539 commit 068dde1

File tree

1 file changed

+246
-5
lines changed

1 file changed

+246
-5
lines changed

‎landing-page/landing-page.html

+246-5
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,257 @@
11
<!-- First HTML block -->
22

33
<section style="margin: 50px 0 75px !important">
4-
<h1>MultiSafepay Docs</h1>
4+
<h1>Welcome to docs</h1>
55
<div class="center">
66
<h3>Payment solutions for all businesses. Use our ready-made integrations, or build your own.</h3>
77
<a href="/docs/getting-started-guide" class="white-text" style="text-decoration: none;">
88
<div class="call-to-action-button">
9-
Get started &rarr;
9+
Explore our docs &rarr;
1010
</div>
1111
</a>
1212
</div>
1313

1414
</section>
1515

16+
<section class="grey-background">
17+
<div class="flex-container">
18+
<div class="flex-item padded-block" style="background:linear-gradient(to bottom, #ffffff 0%, #ffffff 90%, rgba(122,91,186,1) 91%, rgba(122,91,186,1) 100%);border-radius:10px">
19+
<img src="../static/img/Banks.png" style="max-height:40px" />
20+
<h2 class="text">My account</h2>
21+
<br />
22+
<p>
23+
<a href="/docs/create-account">Create an
24+
account</a><br />
25+
<a href="/docs/onboarding">Onboard my account</a><br />
26+
<a href="/docs/manage-account">Manage my account</a><br />
27+
</p>
28+
</div>
29+
<div class="flex-item padded-block" style="background:linear-gradient(to bottom, #ffffff 0%, #ffffff 90%, rgba(147,196,125,1) 91%, rgba(147,196,125,1) 100%);border-radius:10px">
30+
<img src="../static/img/PrepaidCards.png" style="max-height:40px" />
31+
<h2 class="text">Payments</h2>
32+
<br />
33+
<p>
34+
<a href="/docs/payment-methods">Activate payment methods</a><br />
35+
<a href="/docs/payment-statuses">Payment
36+
statuses</a><br />
37+
<a href="/docs/testing-payments">Test payment methods</a><br />
38+
</p>
39+
</div>
40+
<div class="flex-item padded-block" style="background:linear-gradient(to bottom, #ffffff 0%, #ffffff 90%, rgba(250,189,0,1) 91%, rgba(250,189,0,1) 100%);border-radius:10px">
41+
<img src="../static/img/Pantone.svg" style="max-height:40px" />
42+
<h2 class="text">Integrations</h2>
43+
<br />
44+
<a href="/docs/integrations">Plugin integrations</a><br />
45+
<a href="/docs/api-integrations">API integrations </a><br />
46+
<a href="/docs//reference/introduction">API reference</a><br />
47+
<p></p>
48+
</div>
49+
<div class="flex-item padded-block" style="background:linear-gradient(to bottom, #ffffff 0%, #ffffff 90%, rgba(248,84,129,1) 91%, rgba(248,84,129,1) 100%);border-radius:10px">
50+
<img src="../static/img/Wallet.png" style="max-height:40px" />
51+
<h2 class="text">Finance</h2>
52+
<br />
53+
<p>
54+
<a href="/docs/reports">Reports</a><br />
55+
<a href="/docs/api-reconciliation">Reconciliation via API</a><br />
56+
<a href="/docs/accounting-integrations">Accounting
57+
integrations</a><br />
58+
</p>
59+
</div>
60+
<div class="flex-item padded-block" style="background:linear-gradient(to bottom, #ffffff 0%, #ffffff 90%, rgba(6,55,83,1) 91%, rgba(6,55,83,1) 100%);border-radius:10px">
61+
<img src="../static/img/Solutions.svg" style="max-height:40px" />
62+
<h2 class="text">Checkout solutions</h2>
63+
<br />
64+
<p>
65+
<a href="/docs/docs/overview">Point of sale</a><br />
66+
<a href="/docs/payment-links">Payment links</a><br />
67+
<a href="/docs/payment-pages">Payment pages</a><br />
68+
</p>
69+
</div>
70+
</div>
71+
</section>
72+
73+
<section class="footer" style="margin:5px 0 0 0 !important">
74+
<div>
75+
<p class="footer-text">
76+
© 2023 Multisafepay.com - All rights reserved.
77+
</p>
78+
</div>
79+
</section>
80+
81+
82+
83+
84+
85+
<style>
86+
li {
87+
list-style-type: disc;
88+
}
89+
90+
p {
91+
font-size: 1rem;
92+
margin: 0;
93+
padding:0;
94+
}
95+
96+
section {
97+
margin: 50px 0;
98+
}
99+
100+
section.news {
101+
margin: 0 0 80px;
102+
}
103+
104+
.white-text {
105+
color: white !important;
106+
}
107+
108+
.blue-notice {
109+
background: linear-gradient(to right, rgba(0, 171, 238, 1) 0%, rgba(0, 171, 238, 1) 1.5%, rgba(0, 171, 238, 0.1) 1.5%, rgba(0, 171, 238, 0.1) 100%);
110+
border-radius: 8px;
111+
padding: 20px 50px 10px;
112+
margin: 0 0 10px;
113+
}
114+
115+
.yellow-notice {
116+
background: linear-gradient(to right, rgba(250, 189, 0, 1) 0%, rgba(250, 189, 0, 1) 1.5%, rgba(250, 189, 0, 0.1) 1.5%, rgba(250, 189, 0, 0.1) 100%);
117+
border-radius: 8px;
118+
padding: 20px 50px 10px;
119+
margin: 0 0 10px;
120+
}
121+
122+
.call-to-action-button {
123+
margin: 30px auto 0;
124+
padding: 12px 35px;
125+
background: #00ABEE;
126+
border-radius: 10px;
127+
display: inline-block;
128+
font-size: 1rem;
129+
}
130+
131+
.call-to-action-button:hover {
132+
background: #00A0D1;
133+
}
134+
135+
h1 {
136+
text-align: center;
137+
font-size: 2.2rem;
138+
}
139+
140+
h2{
141+
margin-bottom: 0!important;
142+
}
143+
144+
h3 {
145+
margin-bottom: 0!important;
146+
margin-top: 0!important;
147+
font-weight: 300 !important;
148+
}
149+
150+
.flex-container {
151+
display: grid;
152+
grid-template-columns: 1fr 1fr 1fr;
153+
justify-content: space-evenly;
154+
align-items: normal;
155+
gap: 20px;
156+
157+
}
158+
159+
.vertical-center {
160+
display: flex;
161+
flex-wrap: wrap;
162+
gap: 20px;
163+
justify-content: space-evenly;
164+
align-items: normal;
165+
gap: 20px;
166+
align-items: center !important;
167+
}
168+
169+
.flex-item {
170+
padding: 10px;
171+
}
172+
173+
.center {
174+
text-align: center;
175+
}
176+
177+
.grey {
178+
color: #979797 !important;
179+
font-size: 1rem;
180+
}
181+
182+
.padded-block {
183+
padding: 25px 50px !important;
184+
border: solid 1.5px #bdbdbd !important;
185+
/* this adds the "card" effect */
186+
flex-grow: 1;
187+
}
188+
189+
.vertical-margin {
190+
margin: 50px 0;
191+
}
192+
193+
.subheading {
194+
font-size: 1.2rem;
195+
margin: 0 0 15px 0;
196+
}
197+
198+
.no-bottom-margin {
199+
margin-bottom: 0px !important;
200+
}
201+
202+
b {
203+
color: #384248 !important;
204+
}
205+
206+
.auto-grid {
207+
--auto-grid-min-size: 250px;
208+
209+
display: grid;
210+
grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
211+
grid-gap: 1rem;
212+
margin: 25px 0;
213+
}
214+
215+
.card-container {
216+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
217+
/* this adds the "card" effect */
218+
padding: 16px;
219+
text-align: center;
220+
background-color: #fff;
221+
border-radius: 5px;
222+
}
223+
224+
.footer{
225+
height: 25px;
226+
position: absolute;
227+
line-height: 25px;
228+
text-align: center;
229+
width: 100%;}
230+
231+
.footer-text{
232+
margin-top: 20px;
233+
font-size: 12px;}
234+
235+
.centered {
236+
display: flex;
237+
align-items: center;
238+
justify-content: center;
239+
}
240+
241+
.dark-blue-background {
242+
background-color: #004A71;
243+
padding: 50px;
244+
border-radius: 10px;
245+
}
246+
247+
@media screen and (max-width: 935px) {
248+
.grey-background {
249+
background: none;
250+
}
251+
}
252+
</style>
253+
254+
<!--
16255
<section class="grey-background">
17256
<div class="flex-container">
18257
<div class="flex-item padded-block"
@@ -152,6 +391,7 @@ <h2 class="no-bottom-margin">Build your integration</h2>
152391
<p class="subheading">with our API, SDKs, or wrappers</p>
153392
</div>
154393
394+
155395
<style>
156396
p {
157397
font-size: 1rem;
@@ -279,8 +519,8 @@ <h2 class="no-bottom-margin">Build your integration</h2>
279519
}
280520
</style>
281521
282-
<!-- Second HTML block -->
283-
522+
Second HTML block -->
523+
<!--
284524
<div class="auto-grid">
285525
<div class="card-container">
286526
<a href="https://www.multisafepay.com/contact/merchant-support" target="_blank"
@@ -317,4 +557,5 @@ <h4><b>Our blog</b></h4>
317557
</div>
318558
</a>
319559
</div>
320-
</div>
560+
</div>
561+
-->

0 commit comments

Comments
 (0)