kylefang/booster_site
1
0
Fork 0
mirror of https://github.com/tappollo/booster_site.git synced 2026-04-29 18:16:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1 from tappollo/feat/update-home-page

Browse Source 
feat: update home page
This commit is contained in:
Zhigang Fang
2019-08-26 11:17:41 +08:00
committed by GitHub
parent a318e96d3c 97e7be3f42
commit 4520466403
20 changed files with 232 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@@ -12,7 +12,7 @@
<meta content="#ffffff" name="theme-color">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Booster</title>
<link href="https://fonts.googleapis.com/css?family=Barlow+Condensed:600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Hind+Guntur:400,600,700|Montserrat:300,400,700|Barlow+Condensed:600|Alegreya+Sans:900&display=swap" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

BIN
src/assets/images/firebase-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 942 B

BIN
src/assets/images/firebase-logo@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
src/assets/images/firebase-logo@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
src/assets/images/react-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/assets/images/react-logo@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
src/assets/images/react-logo@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
src/assets/images/with-booster-graph.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
src/assets/images/with-booster-graph@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
src/assets/images/with-booster-graph@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
src/assets/images/without-booster-graph.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
src/assets/images/without-booster-graph@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
src/assets/images/without-booster-graph@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

5
src/pages/home/HomePage.tsx
View File

@@ -1,13 +1,16 @@
import React from "react";
import WhoWeArePage from "./components/WhoWeArePage";
import WhoWeArePage, { WithWithoutBooster } from "./components/WhoWeArePage";
import BenefitsPage from "./components/BenefitsPage";
import FeaturesPage, { ImageBackground, SectionTitle } from "./components/FeaturesPage";
import ContactPage from "./components/ContacPage";
import GithubButton from "./components/GithubButton";
import NavigationRow from "./components/NavigationRow";
export default () => (
<div>
<NavigationRow />
<WhoWeArePage />
<WithWithoutBooster />
<BenefitsPage />
<SectionTitle>Prebuilt components</SectionTitle>
<ImageBackground>

14
src/pages/home/components/BenefitsPage.tsx
View File

@@ -104,8 +104,13 @@ const Cell = (props: {
});
return () => {
Lottie.destroy(props.benefit.title);
}
}, [props.benefit.assetPath, props.benefit.animation, mobileLayout]);
};
}, [
props.benefit.assetPath,
props.benefit.animation,
props.benefit.title,
mobileLayout
]);
useEffect(() => {
if (props.active) {
animation.current!.goToAndPlay(0);
@@ -130,16 +135,17 @@ const Cell = (props: {
};
Cell.Subtitle = styled.p`
font-family: "SF Compact Display", sans-serif;
font-family: "Hind Guntur", sans-serif;
font-size: 15px;
text-align: center;
line-height: 20px;
@media (min-width: ${layoutBreak}px) {
text-align: left;
}
`;
Cell.Title = styled.h2`
font-family: "SF Compact Display", sans-serif;
font-family: "Hind Guntur", sans-serif;
font-weight: bold;
font-size: 24px;
margin-bottom: 5px;

4
src/pages/home/components/ContacPage.tsx
View File

@@ -9,7 +9,7 @@ const Container = styled.div`
`;
const Title = styled.h3`
font-family: "SF Compact Display", sans-serif;
font-family: "Hind Guntur", sans-serif;
font-weight: 600;
font-size: 50px;
margin-bottom: 80px;
@@ -42,7 +42,7 @@ const Name = styled.h3`
const Info = styled.p`
font-size: 20px;
font-family: "SF Compact Display", sans-serif;
font-family: "Hind Guntur", sans-serif;
line-height: 26px;
a {
color: white;

6
src/pages/home/components/FeaturesPage.tsx
View File

@@ -84,7 +84,7 @@ Cell.Info = styled.div`
Cell.Subtitle = styled.p<{ reversed: boolean }>`
text-align: center;
font-family: "SF Compact Display", sans-serif;
font-family: "Hind Guntur", sans-serif;
font-weight: normal;
font-size: 15px;
line-height: 18px;
@@ -96,7 +96,7 @@ Cell.Subtitle = styled.p<{ reversed: boolean }>`
Cell.Title = styled.h3<{ reversed: boolean }>`
text-align: center;
font-family: "SF Compact Display", sans-serif;
font-family: "Hind Guntur", sans-serif;
font-weight: bold;
font-size: 22px;
margin-bottom: 16px;
@@ -134,7 +134,7 @@ Cell.Container = styled.div<{ reversed: boolean }>`
export const SectionTitle = styled.h1`
align-self: center;
font-family: "SF Compact Display", sans-serif;
font-family: "Hind Guntur", sans-serif;
font-weight: 600;
font-size: 30px;
text-transform: uppercase;

2
src/pages/home/components/GithubButton.tsx
View File

@@ -24,7 +24,7 @@ const Icon = styled.img.attrs({
`;
const Title = styled.h4`
font-family: "SF Compact Display", sans-serif;
font-family: "Hind Guntur", sans-serif;
font-weight: 600;
margin-right: 30px;
text-align: right;

78
src/pages/home/components/NavigationRow.tsx
View File

@@ -1,6 +1,7 @@
import styled from "styled-components";
import React from "react";
import { layoutBreak, shrinkBreak } from "../../../functions/styles";
import Content from "../../../components/Content";
const Container = styled.div`
flex-direction: row;
@@ -32,46 +33,57 @@ const Title = styled.div`
`;
const Button = styled.div`
font-family: "SF Compact Display", sans-serif;
font-family: "Hind Guntur", sans-serif;
margin-left: 60px;
font-size: 16px;
cursor: pointer;
`;
const MakeItFloat = styled.div`
width: 100%;
background-color:#001d47;
position: fixed;
z-index: 1000;
`;
const NavigationRow = () => {
return (
<Container>
<Logo />
<Title>BOOSTER</Title>
<div style={{ flex: 1 }} />
<Button
onClick={() =>
document.getElementById("benefits")!.scrollIntoView({
behavior: "smooth"
})
}
>
Benefits
</Button>
<Button
onClick={() =>
document.getElementById("features")!.scrollIntoView({
behavior: "smooth"
})
}
>
Features
</Button>
<Button
onClick={() =>
document.getElementById("contacts")!.scrollIntoView({
behavior: "smooth"
})
}
>
Contact us
</Button>
</Container>
<MakeItFloat>
<Content>
<Container>
<Logo />
<Title>BOOSTER</Title>
<div style={{ flex: 1 }} />
<Button
onClick={() =>
document.getElementById("benefits")!.scrollIntoView({
behavior: "smooth"
})
}
>
Benefits
</Button>
<Button
onClick={() =>
document.getElementById("features")!.scrollIntoView({
behavior: "smooth"
})
}
>
Features
</Button>
<Button
onClick={() =>
document.getElementById("contacts")!.scrollIntoView({
behavior: "smooth"
})
}
>
Contact us
</Button>
</Container>
</Content>
</MakeItFloat>
);
};

184
src/pages/home/components/WhoWeArePage.tsx
View File

@@ -3,7 +3,6 @@ import * as React from "react";
import { layoutBreak, shrinkBreak, useMobileLayout } from "../../../functions/styles";
import styled, { css } from "styled-components";
import WhoWeAreAnimation from "./WhoWeAreAnimation";
import NavigationRow from "./NavigationRow";
const Container = styled.div`
flex-direction: column-reverse;
@@ -96,30 +95,26 @@ const PlatformImg = styled.img`
const Desc = (props: any) => (
<Desc.P {...props}>
Scaffolding code, prebuilt UI components and integrated Cl/CD (continuous
integration/continuous delivery) for rapid development in iOS, Android and
web. Booster helps you develop native apps for all platforms in half the
time and half the manpower.
Integrated scaffolding codes, UI components, integration and delivery
pipeline for fast prototyping in iOS, android and mobile web.
</Desc.P>
);
Desc.P = styled.p`
font-family: "SF Compact Display", sans-serif;
font-size: 15px;
font-weight: normal;
font-family: "Hind Guntur", sans-serif;
font-weight: 700;
font-size: 20px;
margin-bottom: 15px;
@media (min-width: ${shrinkBreak}px) {
font-size: 20px;
font-weight: bold;
}
@media (min-width: ${layoutBreak}px) and (max-width: ${shrinkBreak}px) {
font-size: 18px;
font-weight: 500;
}
`;
const GetStarted = styled.a`
font-family: "SF Compact Display", sans-serif;
font-family: "Hind Guntur", sans-serif;
background-color: #ffb000;
margin: 15px 0 30px;
color: white;
@@ -128,12 +123,12 @@ const GetStarted = styled.a`
text-align: center;
width: 200px;
height: 50px;
line-height: 50px;
line-height: 56px;
font-size: 23px;
@media (min-width: ${shrinkBreak}px) {
width: 240px;
height: 60px;
line-height: 60px;
line-height: 66px;
font-size: 27px;
}
`;
@@ -167,20 +162,172 @@ Github.Title = styled.div`
`;
Github.Container = styled.div`
margin-bottom: 40px;
margin-bottom: 30px;
flex-direction: row;
align-items: center;
font-family: "SF Compact Display", sans-serif;
justify-content: flex-end;
font-family: "Hind Guntur", sans-serif;
font-weight: 400;
font-size: 15px;
`;
const PowerBy = () => {
return (
<PowerBy.Container>
<PowerBy.Text>Powered by&nbsp;&nbsp;&nbsp;</PowerBy.Text>
<PowerBy.React />
<PowerBy.ReactText>React Native</PowerBy.ReactText>
<PowerBy.Text>&nbsp;&nbsp;&&nbsp;&nbsp;&nbsp;</PowerBy.Text>
<PowerBy.Firebase />
<PowerBy.FirebaseText>Firebase</PowerBy.FirebaseText>
</PowerBy.Container>
);
};
PowerBy.Container = styled.div`
flex-direction: row;
margin: 30px 0;
align-items: center;
`;
PowerBy.Text = styled.span`
font-family: "Hind Guntur", sans-serif;
font-weight: 700;
font-size: 15px;
color: #ffffff;
`;
PowerBy.ReactText = styled.span`
font-family: "Hind Guntur", sans-serif;
font-size: 15px;
font-weight: 700;
color: #5bcef0;
letter-spacing: 0.15px;
`;
PowerBy.React = styled.img.attrs({
src: require("../../../assets/images/react-logo@3x.png"),
alt: "React"
})`
width: 24px;
height: 21px;
margin-right: 8px;
transform: translate(0px, -3px);
`;
PowerBy.FirebaseText = styled.span`
font-family: "Hind Guntur", sans-serif;
font-size: 15px;
color: #ffca2a;
font-weight: 700;
letter-spacing: 0.15px;
`;
PowerBy.Firebase = styled.img.attrs({
src: require("../../../assets/images/firebase-logo@3x.png"),
alt: "Firebase"
})`
width: 19px;
height: 25px;
transform: translate(0px, -4px);
margin-right: 8px;
`;
export const WithWithoutBooster = () => {
return (
<div style={{ backgroundColor: "#06142C", marginBottom: 20 }}>
<Content>
<WithWithoutBooster.Container>
<WithWithoutBooster.Row>
<WithWithoutBooster.Head>
<WithWithoutBooster.Square
style={{ backgroundColor: "#660C6E" }}
/>
<WithWithoutBooster.TitleWithout>
Without Booster
</WithWithoutBooster.TitleWithout>
</WithWithoutBooster.Head>
<WithWithoutBooster.WithoutBoosterImage />
</WithWithoutBooster.Row>
<WithWithoutBooster.Row>
<WithWithoutBooster.Head>
<WithWithoutBooster.Square
style={{ backgroundColor: "#FF00C9" }}
/>
<WithWithoutBooster.TitleWith>
With Booster
</WithWithoutBooster.TitleWith>
</WithWithoutBooster.Head>
<WithWithoutBooster.WithBoosterImage />
</WithWithoutBooster.Row>
</WithWithoutBooster.Container>
</Content>
</div>
);
};
WithWithoutBooster.Container = styled.div`
position: relative;
flex-direction: column;
margin: 0;
padding: 20px;
@media (min-width: ${layoutBreak}px) {
flex-direction: row;
padding: 40px;
}
`;
WithWithoutBooster.Row = styled.div`
margin: 20px 40px;
`;
WithWithoutBooster.Head = styled.div`
flex-direction: row;
align-items: center;
margin-bottom: 20px;
`;
WithWithoutBooster.Square = styled.div`
height: 14px;
width: 12px;
margin-right: 10px;
`;
WithWithoutBooster.TitleWith = styled.span`
font-family: "HindGuntur", sans-serif;
font-weight: 700;
font-size: 26px;
color: #ff00c9;
letter-spacing: 0.41px;
`;
WithWithoutBooster.TitleWithout = styled.span`
font-family: "HindGuntur", sans-serif;
font-weight: 400;
font-size: 26px;
opacity: 0.62;
color: #b620e0;
letter-spacing: 0.29px;
`;
WithWithoutBooster.WithoutBoosterImage = styled.img.attrs({
src: require("../../../assets/images/without-booster-graph@2x.png"),
alt: "Without Booster"
})`
max-width: 100%;
height: auto;
`;
WithWithoutBooster.WithBoosterImage = styled.img.attrs({
src: require("../../../assets/images/with-booster-graph@2x.png"),
alt: "Without Booster"
})`
max-width: 100%;
height: auto;
`;
const WhoWeArePage = () => {
const mobileLayout = useMobileLayout();
return (
<Content>
<NavigationRow />
<Container
style={{ minHeight: mobileLayout ? "none" : window.innerHeight - 80 }}
style={{
minHeight: mobileLayout ? "none" : window.innerHeight - 40,
marginTop: mobileLayout ? 0 : 40
}}
>
<Left>
{!mobileLayout && <Header />}
@@ -188,11 +335,12 @@ const WhoWeArePage = () => {
<GetStarted href="https://tappollo.github.io/booster" target="_blank">
Documentation
</GetStarted>
<Github />
<PowerBy />
</Left>
<div style={{ height: 30, width: 30 }} />
<Right>
{mobileLayout && <Header />}
<Github />
<WhoWeAreAnimation />
</Right>
</Container>