Commit ecb8e77f authored by Michael Henretty's avatar Michael Henretty
Browse files

add main robot and copy to the page

parent be9457ab
......@@ -22,7 +22,7 @@
--page-margin: 1rem;
--hamburger: calc(var(--header-height) * 0.7);
--transition-default: 0.3s;
--desktop-width: 700px;
--desktop-width: 50rem;
--hero-height: 15.3rem;
--hero-height-mobile: 12.5rem;
--bounce-curve: cubic-bezier(0.000, 1.430, 0.700, 0.940);
......@@ -700,21 +700,72 @@ {
.robot {
height: 15rem;
height: 19rem;
margin: 0 auto;
bottom: -4rem;
bottom: -7rem;
position: absolute;
left: 0;
right: 0;
z-index: var(--middle-z-index);
transition: transform 0.2s ease-in-out;
transition-delay: 0.2s;
@media (max-width: 600px) {
.robot {
height: 12rem;
bottom: -3.5rem;
right: 3.5rem;
.record .robot {
transform: translate(5.5rem, 5rem);
@media (max-width: 600px) {
.record .robot {
transform: translate(1.85rem, 1rem);
.speech-bubble {
font-weight: bold;
position: absolute;
height: 5rem;
padding-left: 3rem;
padding-right: 2rem;
top: 13rem;
left: 60%;
background-image: url("/img/speech-bubble.png");
background-size: 100%;
background-repeat: no-repeat;
text-align: center;
display: flex;
align-items: center;
animation: throb-size 2s ease-in-out infinite;
cursor: pointer;
visibility: hidden;
@media (max-width: 600px) {
.speech-bubble {
top: 8rem;
left: 50%;
background-size: cover;
padding-left: 2rem;
.home .speech-bubble {
visibility: visible;
@keyframes throb-size {
50%{ transform: scale(1.05); }
#about-container {
padding: 0.3rem 1rem;
......@@ -761,6 +812,10 @@ {
line-height: 1.55;
#home-layout .left-column p:first-child {
margin-bottom: 1rem;
#home-layout .left-column > button {
float: right;
......@@ -789,10 +844,10 @@ {
margin: 0 auto;
padding: 0 5rem;
height: 3rem;
animation: throb 3.5s ease-in-out infinite;
animation: throb-color 3.5s ease-in-out infinite;
@keyframes throb {
@keyframes throb-color {
50%{background-color: var(--color-speak-light);}

124 KB | W: | H:


38.9 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
......@@ -116,7 +116,7 @@ export default class Pages extends Component<PagesProps, PagesState> {
render() {
let pageName = this.getCurrentPageName();
return <div id="main" className={pageName}>
return <div id="main" className={pageName ? pageName : 'home'}>
<header className={(this.state.isMenuVisible || this.state.scrolled ?
'active' : '')}>
<Logo navigate={this.props.navigate}/>
......@@ -129,7 +129,8 @@ export default class Pages extends Component<PagesProps, PagesState> {
<div id="scroller"><div id="scrollee">
<div class="hero">
<img className="robot" src="/img/robot.png" />
<div class="divider"></div>
<div onClick={e => {this.props.navigate('/record'); }}
class="speech-bubble">CLICK HERE<br />TO HELP ME LEARN!</div>
<div class="hero-space"></div>
<div id="content" className={this.state.pageTransitioning ?
......@@ -12,20 +12,16 @@ export default class Home extends Component<Props, void> {
<h1 id="home-title">Project Common Voice</h1>
<div id="home-layout">
<div className="left-column">
<p>Build the world's most diverse set of voice data that researchers
and others can use for free to create better voice technologies for
the Internet.
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book.</p>
<p>Voice is natural, voice is human. That’s why we’re fascinated with creating usable voice technology for our machines. But most of that technology is locked up in a few big corporations and isn’t available to the majority of developers. We think that stifles innovation so we’re launching Project Common Voice, a project to help make voice recognition open to everyone. Now you can donate your voice to help us build an open-source voice recognition engine that anyone can use to make innovative apps for devices and the web.</p>
<p>Read a sentence to help our machine learn how real people speak. Check its work to help it improve. It’s that simple.</p>
<div className="right-column">
<p class="strong">You can also help by validating donations!</p>
<div id="donate">
<button onClick={evt => {
this.props.navigate('/record')}}>Get started!</button>
this.props.navigate('/record')}}>Donate your voice!</button>
<div id="try-it-container">
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