Testimonials done

css/main.css

@@ -509,6 +509,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-right: auto;
 }
 
+.my-16 {
+  margin-top: 4rem;
+  margin-bottom: 4rem;
+}
+
 .mt-10 {
   margin-top: 2.5rem;
 }
@@ -517,6 +522,18 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-bottom: 8rem;
 }
 
+.mt-32 {
+  margin-top: 8rem;
+}
+
+.mt-24 {
+  margin-top: 6rem;
+}
+
+.-mt-14 {
+  margin-top: -3.5rem;
+}
+
 .block {
   display: block;
 }
@@ -529,6 +546,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   display: none;
 }
 
+.w-16 {
+  width: 4rem;
+}
+
 .max-w-md {
   max-width: 28rem;
 }
@@ -537,6 +558,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   max-width: 24rem;
 }
 
+.max-w-6xl {
+  max-width: 72rem;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -593,6 +618,12 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
 .self-baseline {
   align-self: baseline;
 }
@@ -601,6 +632,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-radius: 9999px;
 }
 
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
 .rounded-l-full {
   border-top-left-radius: 9999px;
   border-bottom-left-radius: 9999px;
@@ -674,10 +709,19 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-bottom: 0.5rem;
 }
 
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
 .pt-2 {
   padding-top: 0.5rem;
 }
 
+.text-left {
+  text-align: left;
+}
+
 .text-center {
   text-align: center;
 }
@@ -701,6 +745,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   line-height: 1.75rem;
 }
 
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -735,6 +784,12 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: hsl(227 12% 61% / var(--tw-text-opacity));
 }
 
+@media (min-width: 480px) {
+  .sm\:hidden {
+    display: none;
+  }
+}
+
 @media (min-width: 768px) {
   .md\:mb-4 {
     margin-bottom: 1rem;
@@ -756,6 +811,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     width: 50%;
   }
 
+  .md\:w-1\/3 {
+    width: 33.333333%;
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }
@@ -793,5 +852,16 @@ Ensure the default browser behavior of the `hidden` attribute.
     font-size: 3rem;
     line-height: 1;
   }
+
+  .md\:shadow-orange-50 {
+    --tw-shadow-color: #fff7ed;
+    --tw-shadow: var(--tw-shadow-colored);
+  }
+}
+
+@media (min-width: 976px) {
+  .lg\:text-left {
+    text-align: left;
+  }
 }
 

index.html

@@ -116,22 +116,18 @@
                         <div class="px-4 py-2 text-center text-white rounded-full md:py-1 bg-brightRed">02</div>
                         <!-- To overcome some alignment issues we hide this on md+ screens and use a different method -->
                         <h3 class="text-base font-bold md:mb-4 md:hidden">
-                            Number two
+                            Advanced Builtin Reports
                         </h3>
                     </div>
                 </div>
                 <div>
                     <!-- Repeats that H3 as mentioned to correct that layout issue so we hide this one on small screens -->
                     <!-- md:block shows it on larger screens -->
-                    <h3 class="hidden text-lg font-bold md:block">Number two </h3>
+                    <h3 class="hidden text-lg font-bold md:block">Advanced Builtin Reports</h3>
                     <p class="text-darkGrayishBlue">
-                        See how your day-to-day tasks fit into the wider
+                        Set internal delivery estimates and track progress toward company goals.
-                        vision. Go from
+                        Our customisable helps you build out the reports you need  to keep stakeholders
-                        tracking progress at the milestone level to all the way
+                        informed.
-                        done to the
-                        smallest of details. Never lose sight of the bigger 
-                        picture
-                        again.
                     </p>
                 </div>
             </div>
@@ -145,27 +141,71 @@
                         <div class="px-4 py-2 text-center text-white rounded-full md:py-1 bg-brightRed">03</div>
                         <!-- To overcome some alignment issues we hide this on md+ screens and use a different method -->
                         <h3 class="text-base font-bold md:mb-4 md:hidden">
-                            Number 3
+                            Everything you need in one place
                         </h3>
                     </div>
                 </div>
                 <div class="">
                     <!-- Repeats that H3 as mentioned to correct that layout issue so we hide this one on small screens -->
                     <!-- md:block shows it on larger screens -->
-                    <h3 class="hidden text-lg font-bold md:block">Number 3 </h3>
+                    <h3 class="hidden text-lg font-bold md:block">Everything you need in one place</h3>
                     <p class="text-darkGrayishBlue">
-                        See how your day-to-day tasks fit into the wider
+                        Stop jumping from one service to another to communicate, store files, track tasks, 
-                        vision. Go from
+                        and share documents. Manage offers an all-in-one team productivity tool.
-                        tracking progress at the milestone level to all the way
-                        done to the
-                        smallest of details. Never lose sight of the bigger 
-                        picture
-                        again.
                     </p>
                 </div>
             </div>
           </div>
       </div>
   </section>
+  <!-- Testimonials -->
+  <section id="testimonials">
+      <!-- Container for heading and testimonial cards -->
+      <!-- Notice we only show one card on mobile because they would overlap each other.  -->
+      <!-- Or you could add some margin but will will just hide the other two -->
+      <div class="max-w-6xl px-5 mx-auto mt-32 text-center">
+          <!-- Heading -->
+          <h2 class="text-4xl font-bold text-center">
+              What are people saying about Manage? 
+          </h2>
+          <!-- Testimonial Container -->
+          <div class="flex flex-col mt-24 md:flex-row md:space-x-6">
+              <!-- Testimonial One -->
+              <div class="flex flex-col items-center p-6 space-y-6 rounded-lg bg-veryLightGray md:w-1/3">
+                  <!-- NOTICE the use of a negative margin that places the picture of the user at the top of the card -->
+                  <img src="img/avatar-anisha.png" class="w-16 -mt-14" alt="">
+                  <h5 class="text-lg font-bold">Anisha Li </h5>
+                  <p class="text-sm text-darkGrayishBlue">
+                      "Manage has supercharged our team's workflow. The ability to 
+                      maintain visibility on larger milestones at all times keeps 
+                      everyone motivated"
+                  </p>
+              </div>
+              <!-- Testimonial Two -->
+              <!-- The md:flex is what overrides it from being hidden -->
+              <div class="hidden md:flex flex-col items-center p-6 space-y-6 rounded-lg bg-veryLightGray md:w-1/3">
+                <img src="img/avatar-ali.png" class="w-16 -mt-14" alt="">
+                <h5 class="text-lg font-bold">Ali Bravo</h5>
+                <p class="text-sm text-darkGrayishBlue">
+                    "We have been able to cancel so many other subscriptions since using Manage.
+                    There is no more cross-channel confusion and everyone is much more focused."
+                </p>
+            </div>
+            <!-- Testimonial 3 -->
+            <div class="hidden md:flex  flex-col items-center p-6 space-y-6 rounded-lg bg-veryLightGray md:w-1/3">
+                <!-- NOTICE the use of a negative margin that places the picture of the user at the top of the card -->
+                <img src="img/avatar-richard.png" class="w-16 -mt-14" alt="">
+                <h5 class="text-lg font-bold">Richard Watts</h5>
+                <p class="text-sm text-darkGrayishBlue">
+                    "Manage has supercharged our team's workflow. The ability to 
+                    maintain visibility on larger milestones at all times keeps 
+                    everyone motivated"
+                </p>
+            </div>
+          </div>
+          <!-- End Testimonial Container -->
+          <div class="my-16"><a href="#" class="p-3 px-6 pt-2 text-white bg-brightRed rounded-full align-baseline hover:bg-brightRedLight">Get Started</a></div>
+      </div>
+  </section>
 </body>
 </html>