Skip to content

Commit 270646b

Browse files
JasonvdbJasonvdb
committed
Basic centered container view
1 parent 3c93081 commit 270646b

File tree

2 files changed

+4
-200
lines changed

2 files changed

+4
-200
lines changed

‎src/components/full-webpage-container/index.scss

+3-105
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,5 @@
1-
.halos-container {
2-
.halo-top-left {
3-
position: fixed;
4-
top: -650px;
5-
left: -200px;
6-
z-index: -1;
7-
}
8-
9-
.halo-top {
10-
position: fixed;
11-
top: -200px;
12-
left: 20%;
13-
z-index: -1;
14-
}
15-
16-
.halo-footer {
17-
position: fixed;
18-
bottom: -150px;
19-
right: -40%;
20-
z-index: -1;
21-
}
22-
}
23-
241
.webpage-container {
25-
.full-webpage-row1 {
26-
position: relative;
27-
min-height: 100vh;
28-
display: flex;
29-
align-content: center;
30-
31-
.info-col {
32-
margin-top: 20px;
33-
display: flex;
34-
justify-content: center;
35-
align-items: center;
36-
37-
.info-col-content {
38-
max-width: 320px;
39-
padding: 0px 20px 0px 20px;
40-
max-width: 469px;
41-
42-
img {
43-
max-width: 100%;
44-
margin-bottom: 44px;
45-
}
46-
}
47-
}
48-
49-
.widget-col {
50-
display: flex;
51-
justify-content: center;
52-
padding-bottom: 40px;
53-
padding-top: 40px;
54-
}
55-
}
56-
57-
.webpage-heading {
58-
font-family: Neue Haas Grotesk Display Pro;
59-
font-style: normal;
60-
font-weight: 600;
61-
font-size: 36px;
62-
line-height: 48px;
63-
letter-spacing: -0.4px;
64-
background: -webkit-linear-gradient(60deg, #E46735, #C93250, #CA488C);
65-
-webkit-background-clip: text;
66-
-webkit-text-fill-color: transparent;
67-
margin-bottom: 44px;
68-
}
69-
70-
.webpage-subheading {
71-
font-weight: 600;
72-
font-size: 24px;
73-
line-height: 30px;
74-
letter-spacing: -0.5px;
75-
color: rgba(255, 255, 255, 0.98);
76-
margin-bottom: 22px;
77-
}
78-
79-
p {
80-
font-style: normal;
81-
font-weight: normal;
82-
font-size: 17px;
83-
line-height: 25px;
84-
color: #8E8E93;
85-
}
86-
87-
.info-card-col {
88-
display: flex;
89-
justify-content: center;
90-
91-
.info-card {
92-
background: rgba(16, 16, 16, 0.92);
93-
box-shadow: 0px 25px 50px rgba(0, 0, 0, 0.25);
94-
border-radius: 26px;
95-
max-width: 480px;
96-
padding: 40px;
97-
margin-bottom: 40px;
98-
99-
.info-card-heading {
100-
font-weight: 600;
101-
font-size: 24px;
102-
letter-spacing: -0.5px;
103-
color: rgba(255, 255, 255, 0.98);
104-
}
105-
}
106-
}
2+
display: flex;
3+
justify-content: center;
4+
margin-top: 3rem;
1075
}

‎src/components/full-webpage-container/index.tsx

+1-95
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,6 @@
11
import React, { ReactElement } from 'react';
2-
import { Container, Col, Row } from 'react-bootstrap';
32
import './index.scss';
43

5-
const InfoCard = ({
6-
children,
7-
heading
8-
}: {
9-
children: ReactElement | ReactElement[];
10-
heading: string;
11-
}): ReactElement => {
12-
return (
13-
<div className={'info-card'}>
14-
<h4 className={'info-card-heading'}>{heading}</h4>
15-
{children}
16-
</div>
17-
);
18-
};
19-
204
export default ({ children }): ReactElement => (
21-
<div>
22-
<div className={'halos-container'}>
23-
<img className={'halo-top-left'} src={'/halos/halo-top-left.png'} />
24-
<img className={'halo-top'} src={'/halos/halo-top.png'} />
25-
<img className={'halo-footer'} src={'/halos/halo-footer.png'} />
26-
</div>
27-
<Container className={'webpage-container'}>
28-
<div className={'halo-top'} />
29-
<div className={'halo-footer'} />
30-
<Row className={'full-webpage-row1'}>
31-
<Col xl={6} lg={5} md={12} sm={12} className={'info-col'}>
32-
<div className={'info-col-content'}>
33-
<img src={'/images/logo.svg'} alt={'Blocktank'} />
34-
<h1 className={'webpage-heading'}>Your full-service Lightning Service Provider (LSP)</h1>
35-
36-
<h4 className={'webpage-subheading'}>Lightning Network connections and liquidity at any size, any time.</h4>
37-
38-
<p>
39-
Blocktank allows you to open a connection to the Lightning Network and receive or send
40-
bitcoin instantly. Simply set your inbound capacity (the amount of money you want to
41-
be able to receive) and choose how many sats you want to have ready to spend, then
42-
purchase your channel!
43-
</p>
44-
45-
<p>
46-
Blocktank is available as a web widget and as a full-featured API.{' '}
47-
<a href='mailto:[email protected]?subject=Blocktank information request'>Contact us</a>{' '}
48-
for more information on how to embed and customize this widget, or to gain access to
49-
the <a href='https://synonym.readme.io/'>Blocktank API</a>.
50-
</p>
51-
52-
<p>
53-
You can learn more about our fees in our{' '}
54-
<a href={'/terms-and-conditions'}>Terms & Conditions</a>.
55-
</p>
56-
</div>
57-
</Col>
58-
59-
<Col xl={6} lg={7} md={12} sm={12} className={'widget-col'} id={'widget-col'}>
60-
{children}
61-
</Col>
62-
</Row>
63-
64-
<Row>
65-
<Col xl={6} lg={6} md={6} sm={12} className={'info-card-col'}>
66-
<InfoCard heading={'Blocktank API'}>
67-
<p>
68-
The <a href='https://synonym.readme.io/'>Blocktank API</a> allows any business, app,
69-
or online platform to integrate and automate services from our Lightning node,
70-
including channel purchases, resale of channels, and information about your channels.
71-
Let your customers hold their own keys, offer them instant withdrawals, and tap as
72-
much BTC liquidity as you need.
73-
</p>
74-
<p>
75-
Check the <a href='https://synonym.readme.io/'>Blocktank API docs</a>, test the{' '}
76-
<a href='https://github.com/synonymdev/blocktank-client'>Blocktank Client</a>, or
77-
contact us if you want to be whitelisted for access.
78-
</p>
79-
</InfoCard>
80-
</Col>
81-
<Col xl={6} lg={6} md={6} sm={12} className={'info-card-col'}>
82-
<InfoCard heading={'Blocktank Web Widget'}>
83-
<p>
84-
Empower your visitors by onboarding them onto the Lightning Network as simply,
85-
quickly, and affordably as possible. The{' '}
86-
<a href={'#widget-col'}>Blocktank Web Widget</a> (see above) allows your website
87-
visitors to quickly configure and purchase Lightning channels and liquidity from our
88-
Lightning node.
89-
</p>
90-
<p>
91-
This widget can be embedded into any web page or platform as an iframe.{' '}
92-
<a href='mailto:[email protected]?subject=Blocktank widget implemntation'>Contact us</a>{' '}
93-
if you need help implementing and customizing it!
94-
</p>
95-
</InfoCard>
96-
</Col>
97-
</Row>
98-
</Container>
99-
</div>
5+
<div className={'webpage-container'}>{children}</div>
1006
);

0 commit comments

Comments
 (0)