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

Basic centered container view #54

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Basic centered container view #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
270646b
Basic centered container view
Jasonvdb May 12, 2022
14d09d3
Added Dockerfile and notes in the readme
May 16, 2022
8714062
Merge pull request #55 from instabot42/docker
Jasonvdb May 16, 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
3 changes: 3 additions & 0 deletions Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
FROM nginx
COPY /build /usr/share/nginx/html
EXPOSE 80
7 changes: 7 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,3 +35,10 @@ It correctly bundles React in production mode and optimizes the build for the be

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!


## Dockerise for Umbrel etc

`docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t <TARGET>:<VERSION> --push .`


108 changes: 3 additions & 105 deletions src/components/full-webpage-container/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,107 +1,5 @@
.halos-container {
.halo-top-left {
position: fixed;
top: -650px;
left: -200px;
z-index: -1;
}

.halo-top {
position: fixed;
top: -200px;
left: 20%;
z-index: -1;
}

.halo-footer {
position: fixed;
bottom: -150px;
right: -40%;
z-index: -1;
}
}

.webpage-container {
.full-webpage-row1 {
position: relative;
min-height: 100vh;
display: flex;
align-content: center;

.info-col {
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;

.info-col-content {
max-width: 320px;
padding: 0px 20px 0px 20px;
max-width: 469px;

img {
max-width: 100%;
margin-bottom: 44px;
}
}
}

.widget-col {
display: flex;
justify-content: center;
padding-bottom: 40px;
padding-top: 40px;
}
}

.webpage-heading {
font-family: Neue Haas Grotesk Display Pro;
font-style: normal;
font-weight: 600;
font-size: 36px;
line-height: 48px;
letter-spacing: -0.4px;
background: -webkit-linear-gradient(60deg, #E46735, #C93250, #CA488C);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 44px;
}

.webpage-subheading {
font-weight: 600;
font-size: 24px;
line-height: 30px;
letter-spacing: -0.5px;
color: rgba(255, 255, 255, 0.98);
margin-bottom: 22px;
}

p {
font-style: normal;
font-weight: normal;
font-size: 17px;
line-height: 25px;
color: #8E8E93;
}

.info-card-col {
display: flex;
justify-content: center;

.info-card {
background: rgba(16, 16, 16, 0.92);
box-shadow: 0px 25px 50px rgba(0, 0, 0, 0.25);
border-radius: 26px;
max-width: 480px;
padding: 40px;
margin-bottom: 40px;

.info-card-heading {
font-weight: 600;
font-size: 24px;
letter-spacing: -0.5px;
color: rgba(255, 255, 255, 0.98);
}
}
}
display: flex;
justify-content: center;
margin-top: 3rem;
}
96 changes: 1 addition & 95 deletions src/components/full-webpage-container/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,100 +1,6 @@
import React, { ReactElement } from 'react';
import { Container, Col, Row } from 'react-bootstrap';
import './index.scss';

const InfoCard = ({
children,
heading
}: {
children: ReactElement | ReactElement[];
heading: string;
}): ReactElement => {
return (
<div className={'info-card'}>
<h4 className={'info-card-heading'}>{heading}</h4>
{children}
</div>
);
};

export default ({ children }): ReactElement => (
<div>
<div className={'halos-container'}>
<img className={'halo-top-left'} src={'/halos/halo-top-left.png'} />
<img className={'halo-top'} src={'/halos/halo-top.png'} />
<img className={'halo-footer'} src={'/halos/halo-footer.png'} />
</div>
<Container className={'webpage-container'}>
<div className={'halo-top'} />
<div className={'halo-footer'} />
<Row className={'full-webpage-row1'}>
<Col xl={6} lg={5} md={12} sm={12} className={'info-col'}>
<div className={'info-col-content'}>
<img src={'/images/logo.svg'} alt={'Blocktank'} />
<h1 className={'webpage-heading'}>Your full-service Lightning Service Provider (LSP)</h1>

<h4 className={'webpage-subheading'}>Lightning Network connections and liquidity at any size, any time.</h4>

<p>
Blocktank allows you to open a connection to the Lightning Network and receive or send
bitcoin instantly. Simply set your inbound capacity (the amount of money you want to
be able to receive) and choose how many sats you want to have ready to spend, then
purchase your channel!
</p>

<p>
Blocktank is available as a web widget and as a full-featured API.{' '}
<a href='mailto:[email protected]?subject=Blocktank information request'>Contact us</a>{' '}
for more information on how to embed and customize this widget, or to gain access to
the <a href='https://synonym.readme.io/'>Blocktank API</a>.
</p>

<p>
You can learn more about our fees in our{' '}
<a href={'/terms-and-conditions'}>Terms & Conditions</a>.
</p>
</div>
</Col>

<Col xl={6} lg={7} md={12} sm={12} className={'widget-col'} id={'widget-col'}>
{children}
</Col>
</Row>

<Row>
<Col xl={6} lg={6} md={6} sm={12} className={'info-card-col'}>
<InfoCard heading={'Blocktank API'}>
<p>
The <a href='https://synonym.readme.io/'>Blocktank API</a> allows any business, app,
or online platform to integrate and automate services from our Lightning node,
including channel purchases, resale of channels, and information about your channels.
Let your customers hold their own keys, offer them instant withdrawals, and tap as
much BTC liquidity as you need.
</p>
<p>
Check the <a href='https://synonym.readme.io/'>Blocktank API docs</a>, test the{' '}
<a href='https://github.com/synonymdev/blocktank-client'>Blocktank Client</a>, or
contact us if you want to be whitelisted for access.
</p>
</InfoCard>
</Col>
<Col xl={6} lg={6} md={6} sm={12} className={'info-card-col'}>
<InfoCard heading={'Blocktank Web Widget'}>
<p>
Empower your visitors by onboarding them onto the Lightning Network as simply,
quickly, and affordably as possible. The{' '}
<a href={'#widget-col'}>Blocktank Web Widget</a> (see above) allows your website
visitors to quickly configure and purchase Lightning channels and liquidity from our
Lightning node.
</p>
<p>
This widget can be embedded into any web page or platform as an iframe.{' '}
<a href='mailto:[email protected]?subject=Blocktank widget implemntation'>Contact us</a>{' '}
if you need help implementing and customizing it!
</p>
</InfoCard>
</Col>
</Row>
</Container>
</div>
<div className={'webpage-container'}>{children}</div>
);