add new highlighted rewards

(cherry picked from commit 427776f)

Author: davidbeig

Resources/templates/responsive/project/partials/highlighted_rewards.php

@@ -0,0 +1,13 @@
+<?php
+# Show three rewards in widgets in a responsive way (mobile first)
+$project = $this->project;
+?>
+
+<div class="row">
+    <div class="highlighted-rewards">
+        <?= $this->insert('project/partials/reward_widget', ['reward' => $this->individual_rewards[0]]) ?>
+        <?= $this->insert('project/partials/reward_widget', ['reward' => $this->individual_rewards[1]]) ?>
+        <?= $this->insert('project/partials/reward_widget', ['reward' => $this->individual_rewards[2]]) ?>
+    </div>
+</div>
+

Resources/templates/responsive/project/partials/reward_widget.php

@@ -0,0 +1,26 @@
+<?php
+    $project = $this->project;
+    $reward = $this->reward
+?>
+
+<article class="card reward-info">
+    <div class="card-header">
+        <h2 title="<?= $reward->reward ?>"><?= $reward->reward ?></h2>
+    </div>
+    <div class="card-body">
+        <div class="amount-box text-center text-uppercase">
+            <span class="amount"><?= amount_format($reward->amount) ?></span>
+        </div>
+
+        <p>
+            <?= $this->markdown($reward->description) ?>
+        </p>
+    </div>
+    <div class="card-footer">
+        <div class="reward-donate text-center">
+            <a class="btn btn-lg btn-cyan text-uppercase" href="/invest/<?= $project->id ?>/<?= $reward->id ?>">
+                <?= $this->text('project-regular-support') ?>
+            </a>
+        </div>
+    </div>
+</article>

public/assets/sass/layouts/_project.scss

@@ -40,6 +40,47 @@ body.project {
           }
         }
       }
+
+      div.highlighted-rewards {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        grid-gap: 1rem;
+        margin: 2rem 2rem;
+        grid-row-gap: 2rem;
+
+        article.reward-info {
+          background-color: white;
+          border: 1px solid $color-light-grey;
+          border-radius: 1rem;
+          width: 100%;
+          height: 40rem;
+          padding: 2rem;
+          font-size: 1.5rem;
+
+          .card-header {
+            h2 {
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+          }
+
+          .amount-box {
+            color: $color-dark-green;
+            font-size: 40px;
+            font-weight: bold;
+          }
+
+          img {
+            width: 100%;
+          }
+
+          &:hover {
+            border: $background-light-green 2px solid;
+            height: fit-content;
+            transition: 0.5s;
+          }
+        }
+      }
     }
 
   }
@@ -75,7 +116,6 @@ body.project {
     }
   }
 
-
   // Impact Calculator landing
   &.impact-calculator {
     background-color: $background-light-green;