<commit_before>import React, { Component } from "react";
import { HashRouter as Router, Route, Link, Switch } from "react-router-dom";
import { Grid, Row, Col, Clearfix } from 'react-bootstrap';
import gitLogo from './../assets/images/git-black.png';
import sendLogo from './../assets/images/send-logo.png';
import ButtonPrimary from './../components/common/ButtonPrimary';
import GotStuck from './../components/common/GotStuck';
import './landing.css';

const styles = {
    titleContainer: {
	marginTop: 41
    },
    subTitleContainer: {
	marginTop: 25
    },
    greyText: {
	color: '#999999',
	opacity: 0.8,
	fontSize: 20,
	fontFamily: 'SF Display Regular',
	textAlign: 'center',	
    },    
    formContainer: {
	maxWidth: 450,
	margin: 'auto',
	marginBottom: 50,
	marginTop: 120,
	height: 350,
	paddingLeft: 57,
	paddingRight: 57,
	paddingTop: 43,
	paddingBottom: 37,
	borderRadius: 10,
	boxShadow: '0px 0px 30px rgba(0, 0, 0, 0.1)'
    },
    formTitle: {
	fontSize: 24,
	fontFamily: 'SF Display Black',
	textAlign: 'center',
    },
    sendLogo: {
	width: '100%'
    },
    // sendButtonLink: {
    // 	textDecoration: 'none'
    // },
    // sendButton: {
    // 	width: 336,
    // 	margin: 'auto'
    // }
}


const TitleBlock = () => (
    <div>
      <div className="title" style={styles.titleContainer}>
	Send Ether to anyone<br/>
        simply by phone number
      </div>
      <div className="text" style={styles.subTitleContainer}>
	Eth2Phone allows you to send Ether to anyone just verifying him by phone number. The recipient even without a wallet could receive the assets using special link.
      </div>
    </div>
)


const Buttons = () => (
    <div> 
      <Row className="buttons-row">
	<Col xs={12}>
	  <div style={{display: 'inline-block'}}>
	    <div style={{marginTop: 8.5}}>	  
	      <Link className="text link" to="faq">
		How it works?
	      </Link>
	    </div>
	  </div>		    
	  
	  <div style={{display: 'inline-block', float: 'right'}}>
            <a href="https://github.com/eth2phone/eth2phone-dapp" target="_blank" className="github-button">
	      <div className="github-btn-container">
		<img src={gitLogo}></img>
		<div className="text">View source</div>
	      </div>
	    </a>
	  </div>
	</Col>
      </Row>
      <Row>
	<Col xs={12}>
	  <GotStuck />
	</Col>
      </Row>
    </div>
)

    
const Form = () => (
      <div className="hidden-xs" style={styles.formContainer}>
        <div style={styles.formTitle}>Send Ether</div>
        <div style={{marginTop: 37, marginBottom: 48}}>
	  <img style={styles.sendLogo} src={sendLogo}></img>
	</div>
	<div style={{marginBottom: 25}}>
          <Link to="send" style={styles.sendButtonLink} className="send-button">
            <ButtonPrimary buttonColor="#0099ff">Send</ButtonPrimary>
          </Link>
	</div>
        <div style={styles.greyText}>You should have metamask installed</div>
      </div>
    
)

class FormBlock extends React.Component {


    render() {
        return (
              <Row>
                <Col xs={12} sm={6}>
		  <div className="landing-title-container">
		    <TitleBlock/>
		    <Buttons/>
		  </div>
                </Col>
		<Col xs={12} sm={6}>
		  <Form/>
		</Col>		<commit_msg>send button for mobile on /about addded<commit_after>import React, { Component } from "react";
import { HashRouter as Router, Route, Link, Switch } from "react-router-dom";
import { Grid, Row, Col, Clearfix } from 'react-bootstrap';
import gitLogo from './../assets/images/git-black.png';
import sendLogo from './../assets/images/send-logo.png';
import ButtonPrimary from './../components/common/ButtonPrimary';
import GotStuck from './../components/common/GotStuck';
import './landing.css';

const styles = {
    titleContainer: {
	marginTop: 41
    },
    subTitleContainer: {
	marginTop: 25
    },
    greyText: {
	color: '#999999',
	opacity: 0.8,
	fontSize: 20,
	fontFamily: 'SF Display Regular',
	textAlign: 'center',	
    },    
    formContainer: {
	maxWidth: 450,
	margin: 'auto',
	marginBottom: 50,
	marginTop: 120,
	height: 350,
	paddingLeft: 57,
	paddingRight: 57,
	paddingTop: 43,
	paddingBottom: 37,
	borderRadius: 10,
	boxShadow: '0px 0px 30px rgba(0, 0, 0, 0.1)'
    },
    formTitle: {
	fontSize: 24,
	fontFamily: 'SF Display Black',
	textAlign: 'center',
    },
    sendLogo: {
	width: '100%'
    },
}


const SendButton = () => (
    <Link to="send" className="send-button">
      <ButtonPrimary buttonColor="#0099ff">Send</ButtonPrimary>
    </Link>    
);

const TitleBlock = () => (
    <div>
      <div className="title" style={styles.titleContainer}>
	Send Ether to anyone<br/>
        simply by phone number
      </div>
      <div className="hidden-sm hidden-md hidden-lg">
	<div style={{marginTop: 32.5, marginBottom: 2.5}}>
	  <SendButton/>
	</div>
      </div>
      <div className="text" style={styles.subTitleContainer}>
	Eth2Phone allows you to send Ether to anyone just verifying him by phone number. The recipient even without a wallet could receive the assets using special link.
      </div>
    </div>
)


const Buttons = () => (
    <div> 
      <Row className="buttons-row">
	<Col xs={12}>
	  <div style={{display: 'inline-block'}}>
	    <div style={{marginTop: 8.5}}>	  
	      <Link className="text link" to="faq">
		How it works?
	      </Link>
	    </div>
	  </div>		    
	  
	  <div style={{display: 'inline-block', float: 'right'}}>
            <a href="https://github.com/eth2phone/eth2phone-dapp" target="_blank" className="github-button">
	      <div className="github-btn-container">
		<img src={gitLogo}></img>
		<div className="text">View source</div>
	      </div>
	    </a>
	  </div>
	</Col>
      </Row>
      <Row>
	<Col xs={12}>
	  <GotStuck />
	</Col>
      </Row>
    </div>
)

    
const Form = () => (
      <div className="hidden-xs" style={styles.formContainer}>
        <div style={styles.formTitle}>Send Ether</div>
        <div style={{marginTop: 37, marginBottom: 48}}>
	  <img style={styles.sendLogo} src={sendLogo}></img>
	</div>
	<div style={{marginBottom: 25}}>
	  <SendButton/>
  	</div>
        <div style={styles.greyText}>You should have metamask installed</div>
      </div>
    
)

class FormBlock extends React.Component {


    render() {
        return (
              <Row>
                <Col xs={12} sm={6}>
		  <div className="landing-title-container">
		    <TitleBlock/>
		    <Buttons/>
		  </div>
                </Col>
		<Col xs={12} sm={6}>
		  <Form/>
		</Col>		
{'fraction_non_alphanumeric': 0.1673109633524045, 'fraction_numerical': 0.02412246791402505, 'mean_word_length': 2.7129735935706085, 'pattern_counts': {'":': 0, '<': 129, '<?xml version=': 0, '>': 136, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6052242', 'n_tokens_mistral': 2375, 'n_tokens_neox': 2164, 'n_words': 538}