diff --git a/src/components/carousel/carousel.json b/src/components/carousel/carousel.json
index b9cc3c9f6..9278fe006 100644
--- a/src/components/carousel/carousel.json
+++ b/src/components/carousel/carousel.json
@@ -5,15 +5,14 @@
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
- "projectId": "1000"
+ "href": "/projects/1000/"
},
{
"id": 2,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
- "creator": "raimondious",
- "projectId": "1000"
+ "href": "/projects/1000/"
},
{
"id": 3,
@@ -21,7 +20,7 @@
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
- "projectId": "1000"
+ "href": "/projects/1000/"
},
{
"id": 4,
@@ -29,7 +28,7 @@
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
- "projectId": "1000"
+ "href": "/projects/1000/"
},
{
"id": 5,
@@ -37,7 +36,7 @@
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
- "projectId": "1000"
+ "href": "/projects/1000/"
},
{
"id": 6,
@@ -45,6 +44,6 @@
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
- "projectId": "1000"
+ "href": "/projects/1000/"
}
]
\ No newline at end of file
diff --git a/src/components/carousel/carousel.jsx b/src/components/carousel/carousel.jsx
index 9b0823df1..041b76e80 100644
--- a/src/components/carousel/carousel.jsx
+++ b/src/components/carousel/carousel.jsx
@@ -31,9 +31,10 @@ module.exports = React.createClass({
{this.props.items.map(function(item) {
return (
+ src={item.thumbnailUrl}
+ extra={item.creator ? 'by ' + item.creator:null} />
);
})}
diff --git a/src/components/thumbnail/thumbnail.jsx b/src/components/thumbnail/thumbnail.jsx
index b52d150ff..21287ec52 100644
--- a/src/components/thumbnail/thumbnail.jsx
+++ b/src/components/thumbnail/thumbnail.jsx
@@ -15,7 +15,7 @@ module.exports = React.createClass({
};
},
render: function () {
- var className = this.props.className + " thumbnail";
+ var className = this.props.className + ' thumbnail';
return (
diff --git a/src/views/splash/featured.json b/src/views/splash/featured.json
new file mode 100644
index 000000000..1607a6875
--- /dev/null
+++ b/src/views/splash/featured.json
@@ -0,0 +1,314 @@
+[
+ {
+ "title": "Featured Projects",
+ "items": [
+ {
+ "id": 1,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ },
+ {
+ "id": 2,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ },
+ {
+ "id": 3,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ },
+ {
+ "id": 4,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ },
+ {
+ "id": 5,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ },
+ {
+ "id": 6,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ }
+ ]
+ },
+ {
+ "title": "Featured Studios",
+ "items": [
+ {
+ "id": 1,
+ "type": "studio",
+ "title": "Example Studio",
+ "thumbnailUrl": "http://www.lorempixel.com/170/100/",
+ "href": "/studios/1000/"
+ },
+ {
+ "id": 2,
+ "type": "studio",
+ "title": "Example Studio",
+ "thumbnailUrl": "http://www.lorempixel.com/170/100/",
+ "href": "/studios/1000/"
+ },
+ {
+ "id": 3,
+ "type": "studio",
+ "title": "Example Studio",
+ "thumbnailUrl": "http://www.lorempixel.com/170/100/",
+ "href": "/studios/1000/"
+ },
+ {
+ "id": 4,
+ "type": "studio",
+ "title": "Example Studio",
+ "thumbnailUrl": "http://www.lorempixel.com/170/100/",
+ "href": "/studios/1000/"
+ },
+ {
+ "id": 5,
+ "type": "studio",
+ "title": "Example Studio",
+ "thumbnailUrl": "http://www.lorempixel.com/170/100/",
+ "href": "/studios/1000/"
+ },
+ {
+ "id": 6,
+ "type": "studio",
+ "title": "Example Studio",
+ "thumbnailUrl": "http://www.lorempixel.com/170/100/",
+ "href": "/studios/1000/"
+ }
+ ]
+ },
+ {
+ "title": "Projects Curated by raimondious",
+ "items": [
+ {
+ "id": 1,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ },
+ {
+ "id": 2,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ },
+ {
+ "id": 3,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ },
+ {
+ "id": 4,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ },
+ {
+ "id": 5,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ },
+ {
+ "id": 6,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ }
+ ]
+ },
+ {
+ "title": "Scratch Design Studio - \"Custom Block Madness!\"",
+ "items": [
+ {
+ "id": 1,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ },
+ {
+ "id": 2,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ },
+ {
+ "id": 3,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ },
+ {
+ "id": 4,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ },
+ {
+ "id": 5,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ },
+ {
+ "id": 6,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ }
+ ]
+ },
+ {
+ "title": "What the Community is Remixing",
+ "items": [
+ {
+ "id": 1,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ },
+ {
+ "id": 2,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ },
+ {
+ "id": 3,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ },
+ {
+ "id": 4,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ },
+ {
+ "id": 5,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ },
+ {
+ "id": 6,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ }
+ ]
+ },
+ {
+ "title": "What the Community is Loving",
+ "items": [
+ {
+ "id": 1,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ },
+ {
+ "id": 2,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ },
+ {
+ "id": 3,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ },
+ {
+ "id": 4,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ },
+ {
+ "id": 5,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ },
+ {
+ "id": 6,
+ "type": "project",
+ "title": "Example Project",
+ "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+ "creator": "raimondious",
+ "href": "/projects/1000/"
+ }
+ ]
+ }
+]
\ No newline at end of file
diff --git a/src/views/splash/splash.jsx b/src/views/splash/splash.jsx
index 7c9719004..ee5c68bb4 100644
--- a/src/views/splash/splash.jsx
+++ b/src/views/splash/splash.jsx
@@ -3,6 +3,8 @@ var React = require('react');
var Api = require('../../mixins/api.jsx');
var Session = require('../../mixins/session.jsx');
+var Box = require('../../components/box/box.jsx');
+var Carousel = require('../../components/carousel/carousel.jsx');
var News = require('../../components/news/news.jsx');
require('./splash.scss');
@@ -16,7 +18,7 @@ var View = React.createClass({
return {
activity: [],
news: [],
- featured: []
+ featured: require('./featured.json')
};
},
componentDidMount: function () {
@@ -30,7 +32,15 @@ var View = React.createClass({
-
+ {this.state.featured.map(function(set){
+ return (
+
+
+
+ );
+ })}
);
}
diff --git a/src/views/splash/splash.scss b/src/views/splash/splash.scss
index d40c56fb9..277e92830 100644
--- a/src/views/splash/splash.scss
+++ b/src/views/splash/splash.scss
@@ -1,3 +1,5 @@
#view {
-
+ .box {
+ margin-bottom: 20px;
+ }
}