From cb60ba71fdb776535c8e12913762b41d37b7a785 Mon Sep 17 00:00:00 2001
From: Ellpeck <me@ellpeck.de>
Date: Sat, 7 Sep 2024 12:20:53 +0200
Subject: [PATCH] added reviews section to website

---
 web/_data/reviews.json   | 32 ++++++++++++++++++++++++++++++++
 web/_includes/about.html | 35 +++++++++++++++++++++++------------
 web/style.css            | 13 +++++++++++++
 3 files changed, 68 insertions(+), 12 deletions(-)
 create mode 100644 web/_data/reviews.json

diff --git a/web/_data/reviews.json b/web/_data/reviews.json
new file mode 100644
index 0000000..74e04ec
--- /dev/null
+++ b/web/_data/reviews.json
@@ -0,0 +1,32 @@
+[
+    {
+        "description": "The best game like The Sims to play right now.",
+        "name": "Lauren Morton",
+        "website": "PC Gamer",
+        "link": "https://www.pcgamer.com/games/life-sim/with-life-by-you-canceled-and-paralives-not-out-until-2025-this-lo-fi-life-sim-is-the-best-game-like-the-sims-to-play-right-now/"
+    },
+    {
+        "description": "A viable alternative for The Sims that captures the simple joy of the life simulator genre.",
+        "name": "Leah J. Williams",
+        "website": "GamesHub",
+        "link": "https://www.gameshub.com/news/features/the-sims-rival-life-simulators-2642288/"
+    },
+    {
+        "description": "You'll be in your nostalgic element with this delightful little indie.",
+        "name": "Katharine Castle",
+        "website": "Rock Paper Shotgun",
+        "link": "https://www.rockpapershotgun.com/our-101-most-anticipated-games-of-2023"
+    },
+    {
+        "description": "An excellent alternative for fans of the genre both in its visual style and more open design.",
+        "name": "Will Nelson",
+        "website": "PCGamesN",
+        "link": "https://www.pcgamesn.com/tiny-life/demo-the-sims-4"
+    },
+    {
+        "description": "I had a really great time playing with this. This very much makes me feel the way that The Sims 1 did.",
+        "name": "Plumbella",
+        "website": "YouTube",
+        "link": "https://www.youtube.com/watch?v=MKYHTuTpTYQ"
+    }
+]
diff --git a/web/_includes/about.html b/web/_includes/about.html
index 6f47990..8cc3920 100644
--- a/web/_includes/about.html
+++ b/web/_includes/about.html
@@ -4,23 +4,34 @@
     <p>In the game, you control a set of people that live together in a household. You take care of their daily needs, build their skills, forge new relationships... or just mess up their entire life in whatever way you can think of!</p>
 
     {% for item in site.data.features %}
-    <div class="feature">
-        <div class="feature-banner">
-            <div class="feature-title">
-                <h2>{{ item.title }}</h2>
+        <div class="feature">
+            <div class="feature-banner">
+                <div class="feature-title">
+                    <h2>{{ item.title }}</h2>
+                </div>
+                <img src="media/banners/{{ item.value }}" alt="{{ item.alt }}" width="100%">
             </div>
-            <img src="media/banners/{{ item.value }}" alt="{{ item.alt }}" width="100%">
+            <ul>
+                {% for line in item.text %}
+                    <li>{{ line }}</li>
+                {% endfor %}
+            </ul>
         </div>
-        <ul>
-            {% for line in item.text %}
-            <li>{{ line }}</li>
-            {% endfor %}
-        </ul>
-    </div>
     {% endfor %}
 
-    <h2>Watch the Trailer</h2>
+    <h2 id="trailer">📺 Watch the Trailer</h2>
     <div class="video-embed">
         <iframe src="https://www.youtube.com/embed/dl4JCzOpnGE" title="Tiny Life Trailer" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
     </div>
+
+    <h2 id="reviews">🏆 Praise for Tiny Life</h2>
+    {% for review in site.data.reviews %}
+        <div class="review">
+            {% capture quote %}"{{ review.description }}"{% endcapture %}
+            <blockquote>{{ quote | smartify }}</blockquote>
+            <span class="text-muted review-author">
+                {{ review.name }}, <a href="{{ review.link }}">{{ review.website }}</a>
+            </span>
+        </div>
+    {% endfor %}
 </div>
diff --git a/web/style.css b/web/style.css
index 80b9532..c69e053 100644
--- a/web/style.css
+++ b/web/style.css
@@ -190,6 +190,7 @@ a:visited.wide-link {
     width: 100%;
     height: 0;
     padding-bottom: 56.25%;
+    margin-bottom: 40px;
 }
 
 .video-embed iframe {
@@ -247,6 +248,18 @@ a:visited.wide-link {
     height: 600px !important;
 }
 
+.review {
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.review blockquote {
+    margin-left: 0;
+    margin-bottom: 0.5em;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+}
+
 h1 .anchor-heading, h2 .anchor-heading, h3 .anchor-heading, h4 .anchor-heading, h5 .anchor-heading, h6 .anchor-heading {
     visibility: hidden;
 }