Merge pull request #10 from CameraKit/develop

ReDesigned Website

README.md

@@ -1 +1,9 @@
-# camerakit-website
+# CameraKit Webiste
+This is the repository for the CameraKit Project's Website. We ue this as our central open-source website which anyone can contribute to, log bugs for, and help improve.
+
+### Run Instructions
+1. `yarn install`
+2. `yarn server-dev`
+
+### Licensse
+MIT License

src/components/public/floating-footer/index.js

@@ -1,17 +1,16 @@
 import React from 'react';
-import styles from './floating-footer.scss';
-
 import Github from 'static/ic_github.svg';
+import styles from './floating-footer.scss';
 
 const FloatingFooter = () => (
   <div className={styles.footer}>
     <div className={`container container--full ${styles.container}`}>
-      <a className={styles.wonderkiln} target="_blank" href="https://wonderkiln.com">
+      <a className={styles.wonderkiln} target="_blank" href="https://www.wonderkiln.com">
       	A Wonderkiln Project
       </a>
       <a href="https://github.com/CameraKit/camerakit-android">
-      	<img className={styles.icon} src={Github} />
-      	<span className={styles.github}>Github</span>
+        <img className={styles.icon} src={Github} alt="github icon" />
+        <span className={styles.github}>Github</span>
       </a>
     </div>
   </div>

src/components/public/footer/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import Subscribe from '../subscribe';
 import logo from 'static/brand_wonderkiln_logo.svg';
 import footer from 'static/il_footer.png';
+import Subscribe from '../subscribe';
 import styles from './footer.scss';
 
 const Footer = () => (
@@ -19,18 +19,13 @@ const Footer = () => (
             </a>
           </li>
           <li className={styles.listItem}>
-            <a className={styles.link} href="/">
-              Terms of Use
-            </a>
-          </li>
-          <li className={styles.listItem}>
-            <a className={styles.link} href="/">
+            <a className={styles.link} href="https://github.com/CameraKit/camerakit-android/blob/master/LICENSE">
               License
             </a>
           </li>
         </ul>
         <div className={styles.copyright}>
-          © 2017 WonderKiln, Inc
+          © 2018 WonderKiln, Inc
         </div>
       </nav>
     </div>

src/components/public/nav/index.js

@@ -8,10 +8,14 @@ import Menu from './ic_menu.svg';
 const Nav = () => (
   <nav className={styles.nav}>
     <div className={`container container--full ${styles.container}`}>
-      <Logo />
-      <LogoType />
-      <div>
-      	{/*<Menu />*/}
+      <div className={styles.Logo}>
+        <Logo />
+      </div>
+      <div className={styles.Brand}>
+        <LogoType />
+      </div>
+      <div className={styles.Menu}>
+        { /* <Menu /> */ }
       </div>
     </div>
   </nav>

src/components/public/nav/nav.scss

@@ -10,6 +10,21 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  .Logo {
+    flex-basis: 30%;
+    display: flex;
+    justify-content: flex-start;
+  }
+  .Brand {
+    flex-basis: 30%;
+    display: flex;
+    justify-content: center;
+  }
+  .Menu {
+    flex-basis: 30%;
+    display: flex;
+    justify-content: flex-end;
+  }
 }
 
 @media (min-width: 34em) {

src/components/public/news/index.js

@@ -15,14 +15,14 @@ class News extends React.Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     Feed.load('https://cors-anywhere.herokuapp.com/https://medium.com/feed/@camerakit', (err, rss) => {
       if (err) return console.log(err);
       this.setState({ items: rss.items });
     });
   }
 
-  render () {
+  render() {
     return (
       <section className={styles.news}>
         <div className='container'>
@@ -40,8 +40,8 @@ class News extends React.Component {
                 />
               ))}
             </ul>
-          :
-            <p>No recent news.</p>
+            :
+            <p>Hmm... nothing to show just yet! News coming soon!</p>
           }
         </div>
       </section>

src/components/public/subscribe/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import MailchimpSubscribe from "react-mailchimp-subscribe";
+import MailchimpSubscribe from 'react-mailchimp-subscribe';
 import styles from './subscribe.scss';
 
 const url = 'https://wonderkiln.us12.list-manage.com/subscribe/post?u=45b5c2055f100d913f074055b&id=ec9df2ad9a';
@@ -12,12 +12,12 @@ class Subscribe extends React.Component {
         render={({ subscribe, status, message }) => (
           <div className={styles.subscribe}>
             <h2 className="heading--small">Stay Up To Date</h2>
-            <p className={styles.paragraph}>Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </p>
-            <form className={styles.form} onSubmit={(event, data) => {
-              event.preventDefault()
-              console.log(this.email.value);
-              subscribe({ email: this.email.value });
-            }}>
+            <p className={styles.paragraph}>We sometimes send out important updates concerning CameraKit. Provide your email if you are interested in receiving emails from us.</p>
+            <form className={styles.form} 
+              onSubmit={(event, data) => {
+                event.preventDefault()
+                subscribe({ email: this.email.value });
+              }}>
               <div className={styles.inputWrapper}>
                 <input ref={node => (this.email = node)} name="email" className={styles.input} type="email" required />
                 <button className={styles.submit} type="submit">

src/index.js

@@ -16,11 +16,11 @@ export default () => (
       title="CameraKit"
       meta={[{
         name: 'description',
-        content: 'One of the hardest Android APIs made into a high level and easy to use library that solves all of your problems.',
+        content: 'CameraKit is an open-source library to support the Android Camera 1 and 2 APIs. Massively increase stability and reliability of photo and video capture on all Android devices.',
       }]} />
     <Switch>
       <Public exact path="/" component={Home} />
-      <Route path='/jpegkit' component={() => window.location = 'https://github.com/CameraKit/jpegkit-android'}/>
+      <Route path="/jpegkit" component={() => window.location = 'https://github.com/CameraKit/jpegkit-android'}/>
     </Switch>
   </div>
 );

src/pages/public/home/features.js

@@ -8,22 +8,22 @@ import IconVR from './ic_vr_addons.svg';
 export default [
   {
     icon: <IconSimple />,
-    text: 'Easy to implement',
-    description: 'Some text goes here. Some text goes here. Some text goes here.'
+    text: 'Easy Implementation',
+    description: 'CameraKit fits into your existing stack and can be run up almost immediately. Implement the library and start improving reliability immediately.'
   },
   {
     icon: <IconTested />,
     text: 'Extensively Tested',
-    description: 'Some text goes here.'
+    description: 'CameraKit has been tested across thousands of Android devices, major Android OS versions, and is ready for upcoming flagship Android device releases.'
   },
   {
     icon: <IconDualCam />,
     text: 'All Camera Features',
-    description: 'Some text goes here.'
+    description: 'CameraKit supports all camera features, including seamless photo and video capture, auto permission handling, continuous and tap focus, scaling, and more.'
   },
   {
     icon: <IconVR />,
-    text: 'Addons Support',
-    description: 'Some text goes here.'
+    text: 'Camera 1 and 2',
+    description: 'CameraKit supports and improves, hooking in the library in minutes, Camera 1 and 2 APIs while drastically improving stability and reliability for your app.'
   },
 ];

src/pages/public/home/index.js

@@ -18,28 +18,25 @@ import styles from './home.scss';
 import featureStyles from './features.scss';
 import intro from './intro.scss';
 
-function scrollDown () {
+function scrollDown() {
   jump('#features');
 }
 
 const Home = () => (
   <div>
     <FloatingFooter />
     <section className={intro.intro}>
-      <div className='container container--large'>
+      <div className="container container--large">
         <div className={intro.content}>
-          <div className={intro.phone}>
-            {/*<img src={phone} className={intro.phoneImage} alt="" />
-            <h1 className={`heading--large ${intro.heading}`}>The Best Camera API on Android</h1>*/}
-          </div>
+          <div className={intro.phone} />
           <div className={intro.hidden}>
-            <h2 className={`heading--large ${intro.subheading}`}>Completely <br />Open Source</h2>
-            <p>Proudly made by people just like you. Who really like cats. Austin don't forget to change this text.</p>
+            <h2 className={`heading--large ${intro.subheading}`}>Complete <br />Camera Library</h2>
+            <p>CameraKit is an open-source library to support the Android Camera 1 and 2 APIs. Massively increase stability and reliability of photo and video capture on all Android devices.</p>
           </div>
         </div>
       </div>
       <img role="button" src={button} className={`scroll-button ${intro.button}`} onClick={scrollDown} alt="Scroll Down" />
-      <img src={phoneTilted} className={intro.phoneTilted} />
+      <img src={phoneTilted} className={intro.phoneTilted} alt="preview-mockup" />
     </section>
     <section id="features" className={styles.section}>
       <div className="container">
@@ -64,7 +61,7 @@ const Home = () => (
     <News />
     <section className={`${styles.section} ${styles.sponsors}`}>
       <div className="container">
-        <h2 className='heading--small'>Sponsors</h2>
+        <h2 className="heading--small">Support</h2>
         <ul className={`${styles.list} ${styles.sponsorsList}`}>
           {sponsors.map(sponsor => (
             <Sponsor

src/pages/public/home/sponsors.js

@@ -3,7 +3,7 @@ import logoExpensify from 'static/sp_expensify.svg';
 
 export default [
   {
-    name: 'Buddy',
+    name: 'Buddy.Works',
     logo: logoBuddy,
     link: 'https://buddy.works/',
   },