-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
144 lines (138 loc) · 5.27 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html>
<head>
<title>Contentjet - Open source headless CMS</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:400,700" media="screen" charset="utf-8">
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<header class="main-header">
<a class="logo" href="/">
<img src="/images/contentjet-logo-white.svg" alt="contentjet" />
</a>
<nav class="main-nav">
<ul class="main-nav__list">
<li class="main-nav__item">
<a class="main-nav__anchor" href="https://github.com/contentjet/contentjet-api">
<img src="/images/github-mark.svg" />
<span>API</span>
</a>
</li>
<li class="main-nav__item">
<a class="main-nav__anchor" href="https://github.com/contentjet/contentjet-ui">
<img src="/images/github-mark.svg" />
<span>UI</span>
</a>
</li>
<li class="main-nav__item">
<a class="main-nav__anchor" href="/documentation">Documentation</a>
</li>
</ul>
</nav>
</header>
<div class="main">
<section class="hero">
<div class="hero__inner">
<div class="hero__content">
<h1 id="open-source-headless-content-management-system">Open source headless content management system</h1>
<h2 id="deliver-content-to-any-web-mobile-or-iot-device-via-an-easy-to-use-restful-api-">Deliver content to any web, mobile or IOT device via an easy to use RESTful API.</h2>
</div>
<div class="hero__image-holder">
<transition name="carousel">
<img class="hero__image" :key="activeSrc" :src="activeSrc" height="550" />
</transition>
</div>
</div>
</section>
<section class="features">
<h1 class="features__title">Features</h1>
<ul class="features-list">
<li class="features-item">
<i class="fa fa-feed" aria-hidden="true"></i>
<h3>Headless RESTful API</h3>
<p>Access your content as structured JSON from any device</p>
</li>
<li class="features-item">
<i class="fa fa-puzzle-piece" aria-hidden="true"></i>
<h3>Custom entry types</h3>
<p>Create your own entry types with 13 unique field types to choose from</p>
</li>
<li class="features-item">
<i class="fa fa-cubes" aria-hidden="true"></i>
<h3>One CMS. Multiple projects.</h3>
<p>Use projects to group your content. No need for separate CMS installs per domain.</p>
</li>
<li class="features-item">
<i class="fa fa-heart" aria-hidden="true"></i>
<h3>Node + PostgreSQL</h3>
<p>Combines the power of Node's non-blocking asynchronous architecture and PostgreSQL's solid RDB features. Awesome!</p>
</li>
<li class="features-item">
<i class="fa fa-users" aria-hidden="true"></i>
<h3>Simple per-project user management</h3>
<p>Create a project and invite your clients as editors. Great for digital agencies.</p>
</li>
<li class="features-item">
<i class="fa fa-mouse-pointer" aria-hidden="true"></i>
<h3>Easy to use UI</h3>
<p>React based single page application for interacting with contentjet's API</p>
</li>
<li class="features-item">
<i class="fa fa-file-image-o" aria-hidden="true"></i>
<h3>Media management</h3>
<p>Upload media to any project with automatic thumbnail generation of images</p>
</li>
<li class="features-item">
<i class="fa fa-unlock-alt" aria-hidden="true"></i>
<h3>100% free & open source</h3>
<p>MIT licensed. Fork it. Hack it. Whatever.</p>
</li>
</ul>
</section>
<section class="call-to-action">
<a href="/documentation" class="button button-primary get-started-button">Get started</a>
</section>
</div>
<div class="image-loader">
<img src="/images/hero1.png" />
<img src="/images/hero2.png" />
<img src="/images/hero3.png" />
</div>
<script>
const carousel = new Vue({
el: '.hero__image-holder',
data() {
return {
intervalId: null,
activeIndex: 0,
images: [
'/images/hero1.png',
'/images/hero2.png',
'/images/hero3.png'
]
}
},
mounted() {
this.intervalId = window.setInterval(this.transition, 7000);
},
beforeDestroy() {
window.clearInterval(this.intervalId);
},
computed: {
activeSrc() {
return this.images[this.activeIndex]
}
},
methods: {
transition() {
this.activeIndex++;
if (this.activeIndex > this.images.length - 1) this.activeIndex = 0;
}
}
});
</script>
</body>
</html>