Product page template

content/pages/homepage.md

@@ -5,4 +5,3 @@ 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.

content/pages/product.md

@@ -0,0 +1,6 @@
+title: Product
+subtitle: 
+template: readthedocs/product
+save_as: product.html
+status: hidden
+description: 

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">Continuous documentation for technical projects</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">Start your docs</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 .md or .rst, directly in your own IDE, as you work on what maters: your project.
+                </p>
+              </div>
+              <div class="column center aligned">
+                <div class="ui image">
+                  <img src="/theme/img/infographic-02.png"/>
+                </div>
+                <p>
+                  Upload your work to your favorite source code repository hosting service. We support GitHub, GitLab, BitBucket and more.
+                </p>
+              </div>
+              <div class="column center aligned">
+                <div class="ui image">
+                  <img src="/theme/img/infographic-03.png"/>
+                </div>
+                <p>
+                  Setup your account with Read the Docs, add a .config file to tell us your preferences 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, host and manage your documentation versions for you, outputting both html and pdf formats. 
+                Whenever you push code, we'll build your docs.
+              </p>
+              <p>
+                <big>It Just works.</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>