Skip to content

L
landingPage-Nexpie
Commit b0bdb4c4 by OuiAtichat
Options

Initial commit

parent 32fcd5e1
Showing with 898 additions and 136 deletions
.babelrc 0 → 100644
{
"presets": ["react-app"],
"plugins": [
[
"react-intl",
{
"messagesDir": "./build/messages",
"extractSourceLocation": true
}
]
]
}
css/mystyles.css 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
jsconfig.json 0 → 100644
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"components/*": ["src/components/*"],
"assets/*": ["src/assets/*"]
}
}
}
package.json
{ {
"name": "homepage_nexpie", "name": "homepage_nexpie",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"react": "^16.8.6", "@babel/cli": "^7.5.5",
"react-dom": "^16.8.6", "babel-plugin-react-intl": "^4.1.3",
"react-scripts": "3.0.1" "bulma": "^0.7.5",
}, "node-sass": "^4.12.0",
"scripts": { "node-sass-chokidar": "1.3.5",
"start": "react-scripts start", "prop-types": "^15.7.2",
"build": "react-scripts build", "react": "^16.8.6",
"test": "react-scripts test", "react-bulma-components": "^3.0.1-6",
"eject": "react-scripts eject" "react-country-flag": "^1.0.2",
}, "react-dom": "^16.8.6",
"eslintConfig": { "react-full-page": "^0.1.7",
"extends": "react-app" "react-full-snap": "^1.0.1",
}, "react-icons": "^3.7.0",
"browserslist": { "react-intl": "^2.9.0",
"production": [ "react-particles-js": "^2.7.0",
">0.2%", "react-redux": "^7.1.0",
"not dead", "react-scripts": "3.0.1",
"not op_mini all" "redux": "^4.0.4",
], "redux-thunk": "^2.3.0"
"development": [ },
"last 1 chrome version", "scripts": {
"last 1 firefox version", "build-css": "node-sass-chokidar --include-path ./src/scss --include-path ./node_modules src/scss/ -o src/",
"last 1 safari version" "watch-css": "build-css && node-sass-chokidar --include-path ./src/scss --include-path ./node_modules src/scss/ -o src/ --watch --recursive",
] "extract-messages": "NODE_ENV=production babel ./src --out-file /dev/null",
} "start": "react-scripts start ",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
} }
public/index.html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<!--
<!--
manifest.json provides metadata used when your web app is installed on a 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/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML. Only files inside the `public` folder can be referenced from the HTML.
...@@ -19,12 +20,12 @@ ...@@ -19,12 +20,12 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>React App</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<!-- <!--
This HTML file is a template. This HTML file is a template.
If you open it directly in the browser, you will see an empty page. If you open it directly in the browser, you will see an empty page.
...@@ -33,6 +34,5 @@ ...@@ -33,6 +34,5 @@
To begin the development, run `npm start` or `yarn start`. To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`. To create a production bundle, use `npm run build` or `yarn build`.
--> --></body>
</body>
</html> </html>
src/App.css deleted 100644 → 0
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 40vmin;
pointer-events: none;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
src/App.js
import React from 'react'; import React, { Component } from 'react';
import logo from './logo.svg'; import { IntlProvider } from 'react-intl';
import './App.css';
function App() { import messages_en from './translations/en.json';
return ( import messages_th from './translations/th.json';
<div className="App"> import { connect } from 'react-redux';
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" /> import Header from 'components/Header';
<p> import Fullpage from 'components/Fullpage';
Edit <code>src/App.js</code> and save to reload. import './scss/style.scss';
</p>
<a const App = () => {
className="App-link" return (
href="https://reactjs.org" <div>
target="_blank" <Header />
rel="noopener noreferrer" <Fullpage />
> </div>
Learn React );
</a> };
</header>
</div> const messages = {
); en: messages_en,
th: messages_th,
};
class IntlApp extends Component {
render() {
const { language } = this.props;
return (
<IntlProvider defaultLocale='en' locale={language} key={language} messages={messages[language]}>
<App />
</IntlProvider>
);
}
} }
export default App; const mapStateToProps = state => {
return {
language: state.localeReducer.language,
};
};
export default connect(mapStateToProps)(IntlApp);
src/App.test.js deleted 100644 → 0
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
src/_variables.sass 0 → 100644
$primary: #42b3e5;
$light: #f2f2f2
$dropdown-item-active-color: #ffffff;
$dropdown-item-active-background-color: $primary;
// $dropdown-menu-min-width: 5rem;
src/components/Flag.js 0 → 100644
import React from 'react';
import ReactCountryFlag from 'react-country-flag';
const Flag = ({ nation }) => (
<ReactCountryFlag
styleProps={{
width: 16,
height: 16,
borderRadius: 8,
alignItems: 'center',
marginBottom: 4,
marginRight: 8,
}}
code={nation}
svg
/>
);
export default Flag;
src/components/Fullpage.js 0 → 100644
import React, { Component } from 'react';
// import PropTypes from 'prop-types';
// import Navbar from 'react-bulma-components/lib/components/navbar';
// import Image from 'react-bulma-components/lib/components/image';
// import Button from 'react-bulma-components/lib/components/button';
// import Dropdown from 'react-bulma-components/lib/components/dropdown';
// import { FormattedMessage } from 'react-intl';
// import { connect } from 'react-redux';
// import { setLanguage } from '../redux/actions/localeAction';
// import logo from 'assets/logo.png';
// import Flag from './Flag';
import { FullPage, Slide } from 'react-full-page';
// class HeaderComponent extends Component {
// static defaultProps = {
// className: 'full-page-controls',
// style: {
// left: '50%',
// paddingTop: '10px',
// position: 'fixed',
// transform: 'translateX(-50%)',
// },
// };
// state = {
// activeIndex: 0,
// open: false,
// };
// ButtonNavs = [
// { index: 1, name: <FormattedMessage id='BottomNav.Home' /> },
// { index: 2, name: <FormattedMessage id='BottomNav.Docs' /> },
// { index: 3, name: <FormattedMessage id='BottomNav.Features' /> },
// { index: 4, name: <FormattedMessage id='BottomNav.Benefits' /> },
// { index: 5, name: <FormattedMessage id='BottomNav.Packages' /> },
// ];
// renderSlidesNumbers(currentSlideIndex) {
// const { slidesCount, scrollToSlide } = this.props;
// const slidesNumbers = [];
// for (let i = 0; i < slidesCount; i++) {
// const buttonProps = {
// color: currentSlideIndex === i ? 'primary' : 'white',
// key: i,
// onClick: () => scrollToSlide(i),
// };
// slidesNumbers.push(
// <Navbar.Item key={`Button${i}`} renderAs='a' href='#'>
// <Button
// fullwidth
// // color={index === activeIndex ? 'primary' : 'white'}
// style={{ paddingVertical: '0.2em' }}
// {...buttonProps}
// >
// {i + 1}
// </Button>
// </Navbar.Item>
// // <button type='button' {...buttonProps}>
// // {i + 1}
// // </button>
// );
// }
// return slidesNumbers;
// }
// render() {
// const { getCurrentSlideIndex, slidesCount, style, className, language } = this.props;
// const { open } = this.state;
// const currentSlideIndex = getCurrentSlideIndex();
// return (
// // <div className={className} style={style}>
// // </div>
// <Navbar fixed={'top'} transparent={true} active={open}>
// <Navbar.Brand>
// <Navbar.Item renderAs='a' href='#'>
// <Image src={logo} style={{ width: 170 }} />
// </Navbar.Item>
// <Navbar.Burger onClick={() => this.setState(prevState => ({ open: !prevState.open }))} />
// </Navbar.Brand>
// <Navbar.Menu>
// <Navbar.Container position='end'>
// {this.renderSlidesNumbers(currentSlideIndex)}
// <Navbar.Item
// style={{ display: 'flex', flex: 1, justifyContent: 'center', alignContent: 'center' }}
// href='#'
// >
// <Dropdown
// value={language}
// color={'white'}
// onChange={value => {
// this.props.setLanguage(value);
// }}
// >
// <Dropdown.Item value='en'>
// <Flag nation='gb' />
// EN
// </Dropdown.Item>
// <Dropdown.Item value='th'>
// <Flag nation='th' />
// TH
// </Dropdown.Item>
// </Dropdown>
// </Navbar.Item>
// <Navbar.Item href='#'>
// <Button style={{ paddingVertical: '0.2em' }} fullwidth color={'light'}>
// Go to Dashboard
// </Button>
// </Navbar.Item>
// </Navbar.Container>
// </Navbar.Menu>
// </Navbar>
// );
// }
// }
// const mapDispatchToProps = {
// setLanguage,
// };
// const mapStateToProps = state => ({ language: state.localeReducer.language });
// const WrappedHeader = connect(
// mapStateToProps,
// mapDispatchToProps
// )(HeaderComponent);
class FullPageComponent extends Component {
constructor(props) {
super(props);
this.fullPageRef = React.createRef();
}
onControlsClick = () => {
this.fullPageRef.current.scrollToSlide(1);
};
render() {
const baseStyle = {
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
};
return (
<div style={{ width: '100vw', height: '100vh' }}>
{/* <button style={{ position: 'fixed' }} onClick={this.onControlsClick} type='button'>
Controls
</button> */}
<FullPage ref={this.fullPageRef}>
<Slide
style={{
...baseStyle,
background: '#2ECC40',
}}
>
<h1>Custom Controls</h1>
</Slide>
<Slide
style={{
...baseStyle,
background: '#0074D9',
}}
>
<h1>2</h1>
</Slide>
<Slide
style={{
...baseStyle,
background: '#00c4ff',
}}
>
<h1>3</h1>
</Slide>
<Slide
style={{
...baseStyle,
background: '#d52685',
}}
>
<h1>4</h1>
</Slide>
</FullPage>
</div>
);
}
}
export default FullPageComponent;
src/components/Header.js 0 → 100644
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Navbar from 'react-bulma-components/lib/components/navbar';
// import { Navbar } from 'react-bulma-components';
// import Hero from 'react-bulma-components/lib/components/hero';
// import Container from 'react-bulma-components/lib/components/container';
import Image from 'react-bulma-components/lib/components/image';
import Button from 'react-bulma-components/lib/components/button';
import Dropdown from 'react-bulma-components/lib/components/dropdown';
import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { setLanguage } from '../redux/actions/localeAction';
import logo from 'assets/logo.png';
import Flag from './Flag';
const ButtonNavs = [
{ index: 1, name: <FormattedMessage id='BottomNav.Home' /> },
{ index: 2, name: <FormattedMessage id='BottomNav.Docs' /> },
{ index: 3, name: <FormattedMessage id='BottomNav.Features' /> },
{ index: 4, name: <FormattedMessage id='BottomNav.Benefits' /> },
{ index: 5, name: <FormattedMessage id='BottomNav.Packages' /> },
];
class HeaderComponent extends Component {
state = {
activeIndex: 0,
open: false,
};
renderButtonNavs = () => {
const { language } = this.props;
let NavItems = [];
NavItems = ButtonNavs.map((ButtonNav, index) => {
const { activeIndex } = this.state;
return (
<Navbar.Item key={`Button${index}`} renderAs='a' href='#'>
<Button
fullwidth
color={index === activeIndex ? 'primary' : 'white'}
style={{ paddingVertical: '0.2em' }}
>
{ButtonNav.name}
</Button>
</Navbar.Item>
);
});
NavItems.push(
<Navbar.Item
style={{ display: 'flex', flex: 1, justifyContent: 'center', alignContent: 'center' }}
href='#'
>
<Dropdown
value={language}
color={'white'}
onChange={value => {
this.props.setLanguage(value);
}}
>
<Dropdown.Item value='en'>
<Flag nation='gb' />
EN
</Dropdown.Item>
<Dropdown.Item value='th'>
<Flag nation='th' />
TH
</Dropdown.Item>
</Dropdown>
</Navbar.Item>,
<Navbar.Item href='#'>
<Button style={{ paddingVertical: '0.2em' }} fullwidth color={'light'}>
Go to Dashboard
</Button>
</Navbar.Item>
);
return NavItems;
};
render() {
const { open } = this.state;
return (
<Navbar fixed={'top'} transparent={true} active={open}>
<Navbar.Brand>
<Navbar.Item renderAs='a' href='#'>
<Image src={logo} style={{ width: 170 }} />
</Navbar.Item>
<Navbar.Burger onClick={() => this.setState(prevState => ({ open: !prevState.open }))} />
</Navbar.Brand>
<Navbar.Menu>
<Navbar.Container position='end'>{this.renderButtonNavs()}</Navbar.Container>
</Navbar.Menu>
</Navbar>
);
}
}
// export default class NavbarComponent extends Component {
// render() {
// return (
// <Navbar fixed={'top'} style={{ backgroundColor: '#f8f8f8', padding: '0px 4%' }}>
// <IconContext.Provider value={{ color: '#999999' }}>
// <Navbar.Container>
// <Navbar.Item href='#' renderAs='span'>
// <FiMapPin />
// <Text>Thai Summit Tower 14th Floor</Text>
// </Navbar.Item>
// <Navbar.Item href='#' renderAs='span'>
// <FiSmartphone />
// <Text>+6661-421-1289</Text>
// </Navbar.Item>
// <Navbar.Item href='#' renderAs='span'>
// <FiMail />
// <Text>contact@nexpie.com</Text>
// </Navbar.Item>
// </Navbar.Container>
// </IconContext.Provider>
// );
// }
// }
// const Text = ({ children }) => <p style={{ marginLeft: 10, color: '#999999' }}>{children}</p>;
// class HeaderComponent extends Component {
// static defaultProps = {
// className: 'full-page-controls',
// style: {
// left: '50%',
// paddingTop: '10px',
// position: 'fixed',
// transform: 'translateX(-50%)',
// },
// };
// state = {
// activeIndex: 0,
// open: false,
// };
// ButtonNavs = [
// { index: 1, name: <FormattedMessage id='BottomNav.Home' /> },
// { index: 2, name: <FormattedMessage id='BottomNav.Docs' /> },
// { index: 3, name: <FormattedMessage id='BottomNav.Features' /> },
// { index: 4, name: <FormattedMessage id='BottomNav.Benefits' /> },
// { index: 5, name: <FormattedMessage id='BottomNav.Packages' /> },
// ];
// renderSlidesNumbers(currentSlideIndex) {
// const { slidesCount, scrollToSlide } = this.props;
// const slidesNumbers = [];
// for (let i = 0; i < slidesCount; i++) {
// const buttonProps = {
// color: currentSlideIndex === i ? 'primary' : 'white',
// key: i,
// onClick: () => scrollToSlide(i),
// };
// slidesNumbers.push(
// <Navbar.Item key={`Button${i}`} renderAs='a' href='#'>
// <Button
// fullwidth
// // color={index === activeIndex ? 'primary' : 'white'}
// style={{ paddingVertical: '0.2em' }}
// {...buttonProps}
// >
// {this.ButtonNav.name}
// </Button>
// </Navbar.Item>
// // <button type='button' {...buttonProps}>
// // {i + 1}
// // </button>
// );
// }
// return slidesNumbers;
// }
// render() {
// const { getCurrentSlideIndex, slidesCount, style, className, language } = this.props;
// const { open } = this.state;
// const currentSlideIndex = getCurrentSlideIndex();
// return (
// // <div className={className} style={style}>
// // </div>
// <Navbar fixed={'top'} transparent={true} active={open}>
// <Navbar.Brand>
// <Navbar.Item renderAs='a' href='#'>
// <Image src={logo} style={{ width: 170 }} />
// </Navbar.Item>
// <Navbar.Burger onClick={() => this.setState(prevState => ({ open: !prevState.open }))} />
// </Navbar.Brand>
// <Navbar.Menu>
// <Navbar.Container position='end'>
// {this.renderSlidesNumbers(currentSlideIndex)}
// <Navbar.Item
// style={{ display: 'flex', flex: 1, justifyContent: 'center', alignContent: 'center' }}
// href='#'
// >
// <Dropdown
// value={language}
// color={'white'}
// onChange={value => {
// this.props.setLanguage(value);
// }}
// >
// <Dropdown.Item value='en'>
// <Flag nation='gb' />
// EN
// </Dropdown.Item>
// <Dropdown.Item value='th'>
// <Flag nation='th' />
// TH
// </Dropdown.Item>
// </Dropdown>
// </Navbar.Item>
// <Navbar.Item href='#'>
// <Button style={{ paddingVertical: '0.2em' }} fullwidth color={'light'}>
// Go to Dashboard
// </Button>
// </Navbar.Item>
// </Navbar.Container>
// </Navbar.Menu>
// </Navbar>
// );
// }
// }
const mapDispatchToProps = {
setLanguage,
};
const mapStateToProps = state => ({ language: state.localeReducer.language });
export default connect(
mapStateToProps,
mapDispatchToProps
)(HeaderComponent);
src/components/Navbar.js 0 → 100644
import React, { Component } from 'react';
import Navbar from 'react-bulma-components/lib/components/navbar';
import { IconContext } from 'react-icons';
import { FiMapPin, FiSmartphone, FiMail } from 'react-icons/fi';
export default class NavbarComponent extends Component {
render() {
return (
<Navbar fixed={'top'} style={{ backgroundColor: '#f8f8f8', padding: '0px 4%' }}>
<IconContext.Provider value={{ color: '#999999' }}>
<Navbar.Container>
<Navbar.Item href='#' renderAs='span'>
<FiMapPin />
<Text>Thai Summit Tower 14th Floor</Text>
</Navbar.Item>
<Navbar.Item href='#' renderAs='span'>
<FiSmartphone />
<Text>+6661-421-1289</Text>
</Navbar.Item>
<Navbar.Item href='#' renderAs='span'>
<FiMail />
<Text>contact@nexpie.com</Text>
</Navbar.Item>
</Navbar.Container>
</IconContext.Provider>
</Navbar>
);
}
}
const Text = ({ children }) => <p style={{ marginLeft: 10, color: '#999999' }}>{children}</p>;
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { FullPage, Slide } from 'react-full-page';
class CustomControls extends Component {
static propTypes = {
className: PropTypes.string,
getCurrentSlideIndex: PropTypes.func.isRequired,
onNext: PropTypes.func.isRequired,
onPrev: PropTypes.func.isRequired,
scrollToSlide: PropTypes.func.isRequired,
slidesCount: PropTypes.number.isRequired,
style: PropTypes.object,
};
static defaultProps = {
className: 'full-page-controls',
style: {
left: '50%',
paddingTop: '10px',
position: 'fixed',
transform: 'translateX(-50%)',
},
};
renderSlidesNumbers(currentSlideIndex) {
const { slidesCount, scrollToSlide } = this.props;
const slidesNumbers = [];
for (let i = 0; i < slidesCount; i++) {
const buttonProps = {
disabled: currentSlideIndex === i,
key: i,
onClick: () => scrollToSlide(i),
};
slidesNumbers.push(
<button type='button' {...buttonProps}>
{i + 1}
</button>
);
}
return slidesNumbers;
}
render() {
const { getCurrentSlideIndex, slidesCount, style, className } = this.props;
const currentSlideIndex = getCurrentSlideIndex();
return (
<div className={className} style={style}>
<button type='button' disabled={currentSlideIndex === 0} onClick={this.props.onPrev}>
previous
</button>
{this.renderSlidesNumbers(currentSlideIndex)}
<button type='button' disabled={currentSlideIndex === slidesCount - 1} onClick={this.props.onNext}>
next
</button>
</div>
);
}
}
src/components/Particles.js 0 → 100644
import React from 'react';
import Particles from 'react-particles-js';
class ParticlesComponent extends Component {
render() {
return <Particles params={particleParams} />;
}
}
export default ParticlesComponent;
const particleParams = {
particles: {
number: {
value: 80,
density: {
enable: true,
value_area: 2886.1417095579413,
},
},
color: {
value: '#ffffff',
},
shape: {
type: 'circle',
stroke: {
width: 0,
color: '#000000',
},
polygon: {
nb_sides: 5,
},
image: {
src: 'img/github.svg',
width: 100,
height: 100,
},
},
opacity: {
value: 0.8898936937803652,
random: true,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false,
},
},
size: {
value: 3,
random: true,
anim: {
enable: false,
speed: 40,
size_min: 0.1,
sync: false,
},
},
line_linked: {
enable: true,
distance: 150,
color: '#ffffff',
opacity: 0.4,
width: 1,
},
move: {
enable: true,
speed: 6,
direction: 'none',
random: true,
straight: false,
out_mode: 'out',
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200,
},
},
},
interactivity: {
detect_on: 'canvas',
events: {
onhover: {
enable: false,
mode: 'repulse',
},
onclick: {
enable: false,
mode: 'push',
},
resize: true,
},
modes: {
grab: {
distance: 400,
line_linked: {
opacity: 1,
},
},
bubble: {
distance: 400,
size: 40,
duration: 2,
opacity: 8,
speed: 3,
},
repulse: {
distance: 200,
duration: 0.4,
},
push: {
particles_nb: 4,
},
remove: {
particles_nb: 2,
},
},
},
retina_detect: true,
};
src/index.css deleted 100644 → 0
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
src/index.js
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import './index.css'; // import './scss/overrideStyle.scss';
import App from './App'; import App from './App';
import * as serviceWorker from './serviceWorker'; import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import allReducers from './redux/reducers';
import { addLocaleData } from 'react-intl';
import locale_en from 'react-intl/locale-data/en';
import locale_th from 'react-intl/locale-data/th';
ReactDOM.render(<App />, document.getElementById('root')); addLocaleData([...locale_en, ...locale_th]);
// If you want your app to work offline and load faster, you can change const rootReducer = createStore(allReducers, applyMiddleware(thunk));
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA ReactDOM.render(
serviceWorker.unregister(); <Provider store={rootReducer}>
<App />
</Provider>,
document.getElementById('root')
);
serviceWorker.register();
src/logo.svg deleted 100644 → 0
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
<g fill="#61DAFB">
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
<circle cx="420.9" cy="296.5" r="45.7"/>
<path d="M520.5 78.1z"/>
</g>
</svg>
src/redux/actions/localeAction.js 0 → 100644
export const SET_LANGUAGE = 'SET_LANGUAGE';
export const getLanguage = language => ({
type: SET_LANGUAGE,
language,
});
export const setLanguage = language => dispatch => {
// localStorage.alhubLang = lang;
dispatch(getLanguage(language));
};
src/redux/reducers/index.js 0 → 100644
import { combineReducers } from 'redux';
import localeReducer from './localeReducer';
const allReducers = combineReducers({
localeReducer,
});
export default allReducers;
src/redux/reducers/localeReducer.js 0 → 100644
import { SET_LANGUAGE } from '../actions/localeAction';
const localeReducer = (state = { language: 'en' }, action = {}) => {
switch (action.type) {
case SET_LANGUAGE:
return { ...state, language: action.language };
default:
return state;
}
};
export default localeReducer;
src/scss/overrideStyle.scss 0 → 100644
.dropdown-menu {
min-width: 5rem;
}
src/scss/style.scss 0 → 100644
@import '~react-bulma-components/src/index.sass';
// @import '../../node_modules/bulma/bulma.sass';
// @import '../../node_modules/bulma/sass/utilities/_all.sass';
// @import '../../node_modules/bulma/sass/base/_all.sass';
// @import '../../node_modules/bulma/sass/elements/button.sass';
// @import '../../node_modules/bulma/sass/elements/container.sass';
// @import '../../node_modules/bulma/sass/elements/title.sass';
// @import '../../node_modules/bulma/sass/form/_all.sass';
.dropdown-menu {
min-width: 5rem;
}
.button.is-white {
background-color: white;
border-color: transparent;
color: #4a4a4a;
}
// .dropdown-item {
// display: 'flex';
// flex: 1;
// justify-content: 'center';
// align-content: 'center';
// }
// @import '~bulma/sass/components/navbar.sass';
// @import '../../node_modules/bulma/sass/layout/hero.sass';
// @import '../../node_modules/bulma/sass/layout/section.sass';
src/translations/en.json 0 → 100644
{
"BottomNav.Home": "HOME",
"BottomNav.Docs": "DOCS",
"BottomNav.Features": "FEATURES",
"BottomNav.Benefits": "BENEFITS",
"BottomNav.Packages": "PACKAGES"
}
src/translations/th.json 0 → 100644
{
"BottomNav.Home": "หน้าหลัก",
"BottomNav.Docs": "เอกสาร",
"BottomNav.Features": "ฟีเจอร์",
"BottomNav.Benefits": "BENEFITS",
"BottomNav.Packages": "PACKAGES"
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment