initial commit

.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

components/article/article.js

@@ -0,0 +1,13 @@
+export default function ArticleSection(props) {
+    return(
+    <main className="padding--top--header">
+        <article className="margin--top--layout-05 flex-direction--column flex--align-items--center">
+            <div className="bx--grid flex-direction--column flex--align-items--center">
+                <p className="col-7 margin--top--spacing-05 font-weight--500 color--grey-60">{props.category}</p>
+                <h1 className="margin--top--spacing-04 expressive-heading-05 font-weight--500 font-family--serif col-7">{props.title}</h1>
+                <p className="col-7 font-weight--500 margin--top--spacing-06 font-family--serif">{props.subtitle}</p>
+            </div>
+        </article>
+    </main>
+    );
+}

components/footer/footer.js

@@ -0,0 +1,27 @@
+import React, {Component, Fragment} from "react";
+import styles from './footer.module.css';
+import Link from 'next/link'
+
+export function Footer() {
+    return(
+        <footer className={`come-in flex--justify-content--center ${styles["footer"]}`}>
+            <div className="bx--grid flex flex--justify-content--space-between flex-direction--column">
+                <div className="margin--top--layout-05">
+                    <p className="expressive-heading-05 color--white">Any questions?</p>
+                    <p className="expressive-heading-05 margin--top--spacing-06"><span
+                        className="a--internal hover--opacity">
+                        <a href="mailto:[email protected]" className="color--white">Contact us</a></span>
+                    </p>
+                </div>
+                <section className="margin--bottom--layout-05 margin--top--layout-05">
+                    <p className="color--grey-60">Zurich, Switzerland</p>
+                    <Link href="/privacy">
+                        <a className="color--white hover--opacity margin--top--spacing-06">Privacy Policy</a>
+                    </Link>
+                </section>
+            </div>
+        </footer>
+    );
+}
+
+export default Footer;

components/footer/footer.module.css

@@ -0,0 +1,5 @@
+.footer {
+    background-color: var(--black);
+    padding-top: var(--layout-02);
+    padding-bottom: var(--layout-02);
+}

components/head/globalhead.js

@@ -0,0 +1,9 @@
+export default function GlobalHead() {
+    return(
+        <>
+            <meta name="author" content="Wyona" />
+            <meta httpEquiv="content-language" content="en" />
+            <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet"/>
+        </>
+    )
+}

components/header/header.js

@@ -0,0 +1,31 @@
+/* props.color=white is for white backgrounds and will render a grey bottom border, black links and a black logo background
+* props.color=black is for black backgrounds and will render no grey bottom border, white links and a white logo background*/
+import React, {Component, Fragment} from "react";
+import Link from 'next/link'
+
+import SearchField from "../search/searchfield";
+
+export function Header(props) {
+    return(
+        <header className={props.color}>
+            <div className="bx--grid flex flex--justify-content--space-between">
+                <Link href="/">
+                    <div className="hover--pointer hover--opacity logo__container">
+                        <a className="margin--top--spacing-04 heading--03 font-weight--700}">WYONA</a>
+                    </div>
+                </Link>
+
+                <nav className="flex flex--align-items--center">
+                    <Link href="mailto:[email protected]">
+                        <a className="hover--opacity heading--03 margin--left--layout-05 font-weight--500">Contact</a>
+                    </Link>
+                    <Link href="/investors">
+                        <a className="hover--opacity heading--03 margin--left--layout-05 font-weight--500">Investors</a>
+                    </Link>
+                </nav>
+            </div>
+        </header>
+    );
+}
+
+export default Header;

components/header/header.module.css

@@ -0,0 +1,31 @@
+.header {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    z-index: 5;
+    justify-content: center;
+}
+
+.header.white {
+    border-bottom: 2px solid var(--grey-10);
+}
+
+.header.white .logo__container {
+    background-color: black;
+    color: white;
+}
+
+.header.black nav a {
+    color: white;
+}
+
+.header.black .logo__container {
+    background-color: white;
+}
+
+.header a {
+    display: inherit;
+    align-items: inherit;
+}

components/main/main.js

@@ -0,0 +1,20 @@
+import styles from "./main.module.css"
+
+export function Main() {
+    return(
+        <main>
+            <section style={{position: "relative", height: "100vh", width: "100%"}} className="flex--justify-content--center background-color--grey-100">
+                <img className={styles.heroimage} src={"/media/hero-gradient.png"}></img>
+                <div className={`padding--top--header bx--grid flex flex-wrap--wrap margin--top--layout-07 margin--bottom--layout-06 ${styles.hero}`}>
+
+                    <h1 className="display-01 margin--top--spacing-06 color--white">Hello, we're Wyona. We develop <span
+                        className="a--internal hover--opacity">
+                        <a href="mailto:[email protected]" className="color--white">Katie</a></span>, a hybrid intelligence based bot, to support human communication.</h1>
+
+                </div>
+            </section>
+        </main>
+    );
+}
+
+export default Main;

components/main/main.module.css

@@ -0,0 +1,10 @@
+.hero {
+    position: absolute;
+    z-index: 1;
+
+}
+
+.heroimage {
+    width: 100%;
+    height: 100%;
+}

components/postitem/postitem.js

@@ -0,0 +1,17 @@
+import Link from "next/link";
+import styles from "./postitem.module.css"
+
+export default function PostItem(props) {
+    return(
+        <li key={props.id} className={`come-in hover--opacity ${styles.border}`}>
+            <Link href={"/"}>
+                <a>
+                    <div className={"line-height--zero"}>
+                        <p className="color--grey-60 col-3 display--inline-block">{props.date}</p>
+                        <h3 className="heading--03 display--inline-block">{props.title}</h3>
+                    </div>
+                </a>
+            </Link>
+        </li>
+    );
+}

components/postitem/postitem.module.css

@@ -0,0 +1,4 @@
+.border {
+    border-top: 2px solid var(--grey-10);
+    padding: 16px 0;
+}

components/search/searchfield.js

@@ -0,0 +1,10 @@
+import styles from "./searchfield.module.css"
+
+export default function SearchField() {
+    return(
+        <form className={styles.container}>
+            <img className={styles.searchicon} src={"/media/search-24px.svg"}/>
+            <input className={styles.input} placeholder="Search"></input>
+        </form>
+    );
+}

components/search/searchfield.module.css

@@ -0,0 +1,29 @@
+.container {
+    border: 2px solid rgba(255, 255, 255, 0.8);
+    background: transparent;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+}
+
+.searchicon {
+    fill: #c8c8c8;
+}
+
+.input {
+    height: 100%;
+    -webkit-appearance: none;
+    outline: none;
+    border: none;
+    background: transparent;
+    font-size: 18px;
+    color: white;
+    width: 100px;
+}
+
+.input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+    color: white;
+    opacity: 1; /* Firefox */
+}

lib/posts.js

@@ -0,0 +1,35 @@
+import fs from 'fs'
+import path from 'path'
+import matter from 'gray-matter'
+
+const postsDirectory = path.join(process.cwd(), 'posts')
+
+export function getSortedPostsData() {
+    // Get file names under /posts
+    const fileNames = fs.readdirSync(postsDirectory)
+    const allPostsData = fileNames.map(fileName => {
+        // Remove ".md" from file name to get id
+        const id = fileName.replace(/\.md$/, '')
+
+        // Read markdown file as string
+        const fullPath = path.join(postsDirectory, fileName)
+        const fileContents = fs.readFileSync(fullPath, 'utf8')
+
+        // Use gray-matter to parse the post metadata section
+        const matterResult = matter(fileContents)
+
+        // Combine the data with the id
+        return {
+            id,
+            ...matterResult.data
+        }
+    })
+    // Sort posts by date
+    return allPostsData.sort((a, b) => {
+        if (a.date < b.date) {
+            return 1
+        } else {
+            return -1
+        }
+    })
+}