index.js

import crayon from 'crayon';
import react from 'crayon/react';
import transition from 'crayon/transition';
import { Home } from './pages/home'
import { More } from './pages/more'
import { About } from './pages/about'
import './index.css'

const app = crayon.create()

app.use(react.router())
app.use(transition.loader())
app.use(crayon.animate({
    name: transition.fade,
    duration: 300,
    routes: [
        { from: '/**', to: '/more', name: transition.slideLeft },
        { from: '/more', to: '/**', name: transition.slideRight }
    ]
}))

app.path('/', (req, res) => res.redirect('/home'))

app.path('/home', (req, res) => 
    res.mount(Home(req, app))
)

app.path('/about', (req, res) =>
    res.mount(About(req, app))
) 

app.path('/more', (req, res) =>
    res.mount(More(req, app))
)


app.load()