Home page template

content/pages/homepage.md

@@ -1,8 +1,6 @@
-title: Read the Docs
-subtitle: Example subtitle
+title: 
+subtitle: 
 template: readthedocs/homepage
 save_as: index.html
 status: hidden
-description: Read the Docs
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+description: Read the Docs simplifies software documentation by building, versioning, and hosting of your docs, automatically. Think of it as Continuous Documentation.

readthedocs-theme/templates/readthedocs/homepage.html

@@ -3,14 +3,119 @@
 {% block body_id %}home{% endblock %}
 
 {% block content %}
-  <div class="ui container">
-    <div class="ui segment">
-      <h1 class="ui header">
-        {{ page.title }}
-        {% if page.subtitle %}<div class="sub header">{{ page.subtitle }}</div>{% endif %}
-      </h1>
-
-      {{ page.content }}
+
+  <!-- Callout -->
+  <section class="ui vertical segment padded" id="callout">
+
+    <div class="ui container">
+      <div class="ui grid centered middle aligned">
+
+        <div class="row">
+
+          <div class="column seven wide computer nine wide tablet sixteen wide mobile">
+            <h1 class="ui header massive">
+              <span class="ui header">Push your docs, <br>we'll do the rest</span>
+            </h1>
+            <div class="ui basic vertical padded huge segment">
+              <p>
+                Make documentation part of your project workflow with simplified processes that automate building, versioning and hosting of your docs.
+              </p>
+            </div>
+
+            <div>
+              <a href="https://docs.readthedocs.io/page/intro/getting-started-with-sphinx.html" class="ui button large secondary gradient fade">Get started!</a>
+              <a href="./product.html" class="ui button large secondary basic">Learn more</a>
+            </div>
+
+          </div>
+
+          <div class="column seven wide computer nine wide tablet sixteen wide mobile">
+            <img src="/theme/img/shutterstock-concept-of-user-manual-1315141181-2.jpg"/>
+          </div>
+
+        </div>
+
+      </div>
     </div>
-  </div>
+
+  </section>
+
+  <!-- Announcements -->
+  {% include 'readthedocs/includes/announcements.html' %}
+
+  <!-- Infographics -->
+  <section class="ui vertical segment light padded" id="infographics">
+
+    <div class="ui container">
+
+      <div class="ui grid centered">
+        <div class="row">
+          <div class="column fourteen wide computer sixteen wide tablet">
+
+            <h2 class="ui header">How it works</h2>
+
+            <div class="ui grid stackable three column">
+
+              <div class="column center aligned">
+                <div class="ui image">
+                  <img src="/theme/img/infographic-01.png"/> 
+                </div>
+                <p>
+                  Write your documentation easily, using Markdown or reStructuredText, directly in your own IDE, as you work on what matters: your project.
+                </p>
+              </div>
+              <div class="column center aligned">
+                <div class="ui image">
+                  <img src="/theme/img/infographic-02.png"/>
+                </div>
+                <p>
+                  Read the Docs watches your repository and rebuilds your documentation any time you make a change.
+                </p>
+              </div>
+              <div class="column center aligned">
+                <div class="ui image">
+                  <img src="/theme/img/infographic-03.png"/>
+                </div>
+                <p>
+                  Set up your account with Read the Docs, add a <code>.readthedocs.yaml</code> file to set the configuration, and we'll do the rest!
+                </p>
+              </div>
+
+            </div>
+
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+  </section>
+
+  <!-- It works -->
+  <section class="ui vertical segment very padded" id="it-works">
+
+    <div class="ui container">
+      <div class="ui grid center aligned">
+
+        <div class="row">
+          <div class="column twelve wide computer sixteen wide tablet">
+
+            <div class="ui basic vertical huge segment">
+              <p>
+                We generate HTML, PDF, and EPUB formats for your project, and host and manage documentation versions for you.
+                  Whenever you push code, we'll build your docs.
+              </p>
+              <p>
+                <big>Get your docs online in 5 minutes.</big>
+              </p>
+            </div>
+
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+  </section>
+
 {% endblock content %}

readthedocs-theme/templates/readthedocs/includes/announcements.html

@@ -0,0 +1,51 @@
+
+  <section class="ui vertical segment" id="announcements">
+
+    <div class="ui container">
+
+      <div class="ui raised segment">
+        <div class="ui grid stackable three column">
+
+          <div class="column">
+            <div class="ui basic segment">
+              <div><span class="ui label red">Announcement</span></div>
+              <h4>Build errors with docutils 0.18</h4>
+              <p>
+                The latest Docutils and Sphinx updates have been the source of several problems on our builds. If you are experiencing problems related with this read the blog post. Well point you to several solutions.
+              </p>
+              <p>
+                <a href="https://blog.readthedocs.com/build-errors-docutils-0-18/">Learn how to solve it</a>
+              </p>
+            </div>
+          </div>
+          <div class="column">
+            <div class="ui basic segment">
+              <div><span class="ui label primary">News</span></div>
+              <h4>Our Sphinx theme version 1.0.0 is out</h4>
+              <p>
+                We have released a major version 1.0.0 of our Sphinx theme. This adds support for recent versions of Sphinx and docutils among other very cool things. Check out the blog post.
+              </p>
+              <p>
+                <a href="https://blog.readthedocs.com/newsletter-september-2021/">Read more</a>
+              </p>
+            </div>
+          </div>
+          <div class="column">
+            <div class="ui basic segment">
+              <div><span class="ui label">Update</span></div>
+              <h4>You are all up to date</h4>
+              <p>
+                We post important announcements, news and updates in this area. You can also check out our <a href="https://blog.readthedocs.com/">blog</a> or subscribe the newsletter to receive future updates first hand, plus receive our monthly report.
+              </p>
+              <p>
+                <a href="#">Subscribe our newsletter</a>
+              </p>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+
+  </section>