mirrors/thunderhub
1
0
Fork 0
mirror of https://github.com/apotdevin/thunderhub.git synced 2025-02-22 22:25:21 +01:00
Code Issues Projects Releases Wiki Activity

chore: styling seo and ico changes

Browse source
This commit is contained in:
AP 2020-02-05 07:49:43 +01:00
parent 8caefa6066
commit 155d0b4461
11 changed files with 127 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/apple-touch-icon-152x152.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
public/favicon.ico
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

22
public/index.html
View file

@ -7,9 +7,27 @@
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
property="og:description"
content="Manage and monitor your lightning network node right inside your browser"
/>
<link rel="apple-touch-icon" href="logo192.png" />
<meta
property="og:title"
content="ThunderHub - Lightning Node Manager"
/>
<meta name="robots" content="index, follow" />
<link rel="apple-touch-icon" href="apple-touch-icon-152x152.png" />
<link rel="canonical" href="https://thunderhub.io/" />
<meta property="og:url" content="https://thunderhub.io" />
<meta
name="twitter:title"
content="ThunderHub - Lightning Node Manager"
/>
<meta
name="twitter:description"
content="Manage and monitor your lightning network node right inside your browser"
/>
<meta name="twitter:site" content="@thunderhubio" />
<meta name="twitter:creator" content="@thunderhubio" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

BIN
public/logo192.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 8.4 KiB

BIN
public/logo512.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 22 KiB

13
public/manifest.json
View file

@ -1,6 +1,6 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"short_name": "ThunderHub",
"name": "ThunderHub - Lightning Node Manager",
"icons": [
{
"src": "favicon.ico",
@ -8,14 +8,9 @@
"type": "image/x-icon"
},
{
"src": "logo192.png",
"src": "apple-touch-icon-152x152.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
"sizes": "152x152"
}
],
"start_url": ".",

54
src/views/entry/homepage/HomePage.tsx
View file

@ -1,65 +1,15 @@
import React from 'react';
import {
Headline,
LeftHeadline,
StyledImage,
HomeButton,
Title,
Text,
} from './HomePage.styled';
import { Zap } from '../../../components/generic/Icons';
import { headerColor, inverseTextColor } from '../../../styles/Themes';
import { Link } from 'react-router-dom';
import { DetailSection } from './Sections/DetailSection';
import { ContactSection } from 'views/other/ContactSection';
import { Compatible } from './Sections/Compatible';
import { Section } from 'components/section/Section';
import { InfoSection } from './Sections/InfoSection';
import { CallToAction } from './Sections/CallToAction';
import {
FullWidth,
SlantedWrapper,
SlantedEdge,
Padding,
} from './Sections/Sections.styled';
import { TopSection } from './Sections/Top';
export const HomePageView = () => {
return (
<>
<Section color={headerColor} textColor={inverseTextColor}>
<Headline>
<LeftHeadline>
<Title>Control The Power of Lighting</Title>
<FullWidth>
<Text>
Take full control of your lightning node for
quick monitoring and management inside your
browser.
</Text>
</FullWidth>
<FullWidth>
<Link
to="/login"
style={{ textDecoration: 'none' }}
>
<HomeButton>
<Padding>
<Zap
fillcolor={'white'}
color={'white'}
/>
</Padding>
Control The Lightning
</HomeButton>
</Link>
</FullWidth>
</LeftHeadline>
<StyledImage />
</Headline>
</Section>
<SlantedWrapper>
<SlantedEdge />
</SlantedWrapper>
<TopSection />
<DetailSection />
<Compatible />
<InfoSection />

8
src/views/entry/homepage/Sections/CallToAction.tsx
View file

@ -1,7 +1,7 @@
import React from 'react';
import { Center } from 'views/other/OtherViews.styled';
import { Section } from 'components/section/Section';
import { Padding } from './Sections.styled';
import { Padding, StyledH2, StyledH1 } from './Sections.styled';
import { themeColors } from 'styles/Themes';
import { Link } from 'react-router-dom';
import { HomeButton } from '../HomePage.styled';
@ -17,12 +17,14 @@ export const CallToAction = () => {
<>
<Section color={themeColors.grey} padding={'80px 0'}>
<Center>
<h1>And much more...</h1>
<StyledH1>And much more...</StyledH1>
</Center>
</Section>
<Section color={themeColors.grey2} padding={'80px 0'}>
<Center>
<h2>Ready to take control of your Lightning Node?</h2>
<StyledH2>
Ready to take control of your Lightning Node?
</StyledH2>
</Center>
<Center>
<Link to="/login" style={{ textDecoration: 'none' }}>

16
src/views/entry/homepage/Sections/Compatible.tsx
View file

@ -1,21 +1,23 @@
import React from 'react';
import { Center } from 'views/other/OtherViews.styled';
import { Section } from 'components/section/Section';
import { WrapSingleLine } from './Sections.styled';
import { WrapSingleLine, StyledH2, StyledP } from './Sections.styled';
import { themeColors } from 'styles/Themes';
export const Compatible = () => {
return (
<Section color={themeColors.grey2} padding={'40px 0'}>
<Center>
<h2>Compatible with the latest LND node versions.</h2>
<StyledH2>
Compatible with the latest LND node versions.
</StyledH2>
</Center>
<WrapSingleLine>
<p>v0.7.1-beta</p>
<p>v0.8.0-beta</p>
<p>v0.8.1-beta</p>
<p>v0.8.2-beta</p>
<p>v0.9.0-beta</p>
<StyledP>v0.7.1-beta</StyledP>
<StyledP>v0.8.0-beta</StyledP>
<StyledP>v0.8.1-beta</StyledP>
<StyledP>v0.8.2-beta</StyledP>
<StyledP>v0.9.0-beta</StyledP>
</WrapSingleLine>
</Section>
);

14
src/views/entry/homepage/Sections/Sections.styled.tsx
View file

@ -1,6 +1,6 @@
import styled from 'styled-components';
import { SingleLine } from 'components/generic/Styled';
import { headerColor, mediaWidths } from 'styles/Themes';
import { headerColor, mediaWidths, inverseTextColor } from 'styles/Themes';
export const Padding = styled.div`
padding: 4px 4px 0 0;
@ -83,3 +83,15 @@ export const WrapSingleLine = styled(SingleLine)`
justify-content: space-around;
flex-grow: 1;
`;
export const StyledH1 = styled.h1`
color: ${inverseTextColor};
`;
export const StyledH2 = styled.h2`
color: ${inverseTextColor};
`;
export const StyledP = styled.p`
color: ${inverseTextColor};
`;

60
src/views/entry/homepage/Sections/Top.tsx Normal file
View file

@ -0,0 +1,60 @@
import React from 'react';
import {
Headline,
LeftHeadline,
StyledImage,
HomeButton,
Title,
Text,
} from '../HomePage.styled';
import { Zap } from '../../../../components/generic/Icons';
import { headerColor, inverseTextColor } from '../../../../styles/Themes';
import { Link } from 'react-router-dom';
import { Section } from 'components/section/Section';
import {
FullWidth,
Padding,
SlantedWrapper,
SlantedEdge,
} from './Sections.styled';
export const TopSection = () => {
return (
<>
<Section color={headerColor} textColor={inverseTextColor}>
<Headline>
<LeftHeadline>
<Title>Control The Power of Lighting</Title>
<FullWidth>
<Text>
Take full control of your lightning node for
quick monitoring and management inside your
browser.
</Text>
</FullWidth>
<FullWidth>
<Link
to="/login"
style={{ textDecoration: 'none' }}
>
<HomeButton>
<Padding>
<Zap
fillcolor={'white'}
color={'white'}
/>
</Padding>
Control The Lightning
</HomeButton>
</Link>
</FullWidth>
</LeftHeadline>
<StyledImage />
</Headline>
</Section>
<SlantedWrapper>
<SlantedEdge />
</SlantedWrapper>
</>
);
};