2 files changed, 59 insertions, 0 deletions

diff --git a/site/templates/_variables.html b/site/templates/_variables.html
new file mode 100644
index 0000000..3fd05b4
--- /dev/null
+++ b/site/templates/_variables.html
@@ -0,0 +1,15 @@
+<style>
+    :root {
+        /* Primary theme color */
+        --primary-color: #F8D12F;
+        /* Primary theme text color */
+        --primary-text-color: #1E2329;
+        /* Primary theme link color */
+        --primary-link-color: #2F57F7;
+        /* Secondary color: the background body color */
+        --secondary-color: #FAFAFA;
+        --secondary-text-color: #303030;
+        /* Highlight text color of table of content */
+        --toc-highlight-text-color: #d46e13;
+    }
+</style>
diff --git a/site/templates/index.html b/site/templates/index.html
new file mode 100644
index 0000000..70223a5
--- /dev/null
+++ b/site/templates/index.html
@@ -0,0 +1,44 @@
+{% extends "juice/templates/index.html" %}
+
+{% block hero %}
+<section class="text-center">
+    <h1 class="heading-text" style="font-size: 50px">
+        Mine your own grades
+    </h1>
+    <h3 class="title-text">
+        <b style="color: deepskyblue">Gradecoin</b> is the latest cutting edge blockchain technology agile grading framework that drives organic engagement and other buzzwords, with big data mining search engine optimization
+    </h3>
+    <div>
+        <!-- <a class="github-button" href="https://github.com/huhu/juice" data-size="large" data-show-count="true" -->
+        <!--                                                                                 aria-label="Star huhu/juice on GitHub">Star</a> -->
+        <!-- <a class="github-button" href="https://github.com/huhu/juice/fork" data-size="large" -->
+        <!--                                                                    data-show-count="true" aria-label="Fork huhu/juice on GitHub">Fork</a> -->
+    </div>
+</section>
+<img class="hero-image" style="width: 50%" src="{{ get_url(path="gradecoin.png") }}">
+
+<div class="explore-more text"
+     onclick="document.getElementById('features').scrollIntoView({behavior: 'smooth'})">
+    ⇩ Learn How ⇩
+</div>
+<style>
+.hero section {
+    padding: 0 5rem;
+}
+                    @media screen and (max-width: 768px) {
+                        .hero section {
+                            padding: 0 2rem;
+                        }
+
+                    .hero-image {
+                        display: none
+                    }
+                }
+</style>
+{% endblock hero %}
+
+{% block footer %}
+<footer>
+    ⁂
+</footer>
+{% endblock footer %}