[GPT-125] [GPT-131] Home Page Revamp with Impact Updates

assets/js/main.js

@@ -25,7 +25,6 @@ $(function () {
     partners();
     featuredBy();
     pagination();
-    quotes();
     video();
     gallery();
     table();
@@ -221,20 +220,6 @@ function featuredBy() {
     glideFeed.mount();
 }
 
-function quotes() {
-    if (body.find('.quotes-feed').length === 0) {
-        return;
-    }
-
-    var glideFeed = new Glide('.quotes-feed', {
-        type: 'carousel',
-        dots: '.glide__bullets',
-        autoplay: 3500,
-        perView: 1,
-    });
-    glideFeed.mount();
-}
-
 function pagination() {
     if (body.hasClass('paged-next')) {
         new InfiniteScroll('.post-feed', {

home.hbs

@@ -14,6 +14,5 @@
         {{> home-get-involved}}
         {{> our-partners}}
         {{> featured-by}}
-        {{> quotes}}
     </main>
 </div>

package.json

@@ -61,19 +61,14 @@
                 "default": false,
                 "group": "homepage"
             },
-            "featured_title": {
-                "type": "text",
-                "default": "Highlights",
-                "group": "homepage"
-            },
             "home_starter_image": {
                 "type": "text",
                 "default": "https://s3-ap-southeast-1.amazonaws.com/advisorysg-ghost/2024/07/home-starter.png",
                 "group": "homepage"
             },
             "home_impact_image": {
                 "type": "text",
-                "default": "https://s3-ap-southeast-1.amazonaws.com/advisorysg-ghost/2024/07/home-impact.png",
+                "default": "https://sampleadvisoryimpact.my.canva.site/media/d77729fa71e7f9b912fde6a591e82afa.jpg",
                 "group": "homepage"
             },
             "show_share_links": {

partials/featured-by.hbs

@@ -1,6 +1,6 @@
 <section class="featuredby-wrapper container pt-8">
     <div class="featuredby-feed glide">
-        <h2 class="featured-title">Featured By</h2>
+        <h2 class="featured-title" style="font-size:3rem;">Featured By</h2>
         <div data-glide-el="controls" style="position: absolute; top: -10px; right: 0px">
             <button data-glide-dir="<" type="button" role="presentation" class="border border-gray-300 py-2 px-2 rounded" >
                 <svg class="icon">

partials/featured.hbs

@@ -2,9 +2,7 @@
     {{#if featured}}
         <section class="featured-wrapper container pt-24">
             <div class="featured-feed glide">
-                {{#if @custom.featured_title}}
-                    <h2 class="featured-title" style="font-size:3rem;">{{@custom.featured_title}}</h2>
-                {{/if}}
+                <h2 class="featured-title" style="font-size:3rem;">Highlights</h2>
                 <div data-glide-el="controls" style="position: absolute; top: -10px; right: 0px">
                     <button data-glide-dir="<" type="button" role="presentation" class="border border-gray-300 py-2 px-2 rounded" >
                         <svg class="icon">

partials/header.hbs

@@ -9,11 +9,11 @@
         </a>
     </div>
     {{#if @site.navigation}}
-        <!--<button class="button-icon hidden-lg hidden-xl js-modal" data-modal="search" aria-label="Search">
+        <a class="button-icon hidden-lg hidden-xl js-modal" data-modal="search" aria-label="Search" href="{{@site.url}}#/search">
             <svg class="icon">
                 <use xlink:href="#magnify"></use>
             </svg>
-        </button>-->
+        </a>
         <div class="burger hidden-lg hidden-xl">
             <div class="burger-bar"></div>
             <div class="burger-bar"></div>
@@ -27,12 +27,12 @@
         </div>
     {{/if}}
     <div class="header-right hidden-xs hidden-sm hidden-md">
-        <!--<button class="button-icon menu-item menu-item-button js-modal" data-modal="search" aria-label="Search">
+        {{navigation}}
+        <a class="button-icon menu-item menu-item-button js-modal" data-modal="search" aria-label="Search" href="{{@site.url}}#/search">
             <svg class="icon">
                 <use xlink:href="#magnify"></use>
             </svg>
-        </button>-->
-        {{navigation}}
+        </a>
     </div>
 </header>
 

partials/home-impact.hbs

@@ -1,6 +1,6 @@
 <style>
 .impact-section {
-    background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url("{{@custom.home_impact_image}}");
+    background-image: linear-gradient( rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55) ), url("{{@custom.home_impact_image}}");
     background-repeat: no-repeat;
     background-size: cover;
     padding-top: 6em;
@@ -25,62 +25,117 @@
     font-size: 18px;
     margin-bottom: 32px;
 }
+
+.impact-section-description-title {
+    margin-top: 16px;
+    color: white;
+    font-weight: bold;
+    font-size: 18px;
+    line-height: 30px;
+}
+
+.impact-section-description-text {
+    color: white;
+    font-size: 18px;
+    margin-bottom: 32px;
+}
 </style>
 
 
-<section class="mb-24 impact-section">  
-    <div class="flex flex-col text-center w-full">
-        <h1 class="impact-section-single-title" style="font-size: 3rem; text-transform:uppercase;">Impact</h1>
+<section class="impact-section mb-24">  
+    <div class="flex flex-col md:w-4/5 lg:w-3/5 m-auto">
+        <h2 class="featured-title" style="font-size:3rem;">Impact</h2>
     </div>
-    <div class="grid gap-16 grid-cols-1 md:grid-cols-2 md:w-4/5 lg:w-3/5 m-auto">
-        <div>
-            <div class="flex flex-col text-center w-full">
-                <center><p class="impact-section-entry-title font-bold">
-                    Since 2016, Advisory has:
-                <br /></p></center>
+    <div class="grid gap-16 grid-cols-1 md:grid-cols-3 md:w-4/5 lg:w-3/5 m-auto p-4">
+        <div class="flex flex-col text-center w-full">
+            <div class="h-36">
+                <p class="impact-section-single-title">15,022</p>
+                <p class="impact-section-entry-title">Mentorship Hours &amp; Sharing</p>
+            </div>
+            <br/>
+            <div class="border border-white p-4 flex-auto">
+                <p class="impact-section-description-title">Every hour goes a long way. </p>
+                <p class="impact-section-description-text">
+                    Consistently delivering quality mentorship and programmes for our youths
+                </p>
+            </div>
+        </div>
+        <div class="flex flex-col text-center w-full">
+            <div class="h-36">
+                <p class="impact-section-single-title">278,549</p>
+                <p class="impact-section-entry-title">Engaged Students &amp; Youths</p>
             </div>
-            <div class="grid grid-cols-2">
-                <div class="w-full"><center>
-                    <p class="impact-section-single-title">491,791</p>
-                    <p class="impact-section-entry-title max-w-[30vw]">Repository Views</p>
-                </center></div>
-                <div class="w-full"><center>
-                    <p class="impact-section-single-title">13,000</p>
-                    <p class="impact-section-entry-title max-w-[30vw]">Mentorship Hours, Consultations & Sharing</p>
-                </center></div>
-                <div class="w-full"><center>
-                    <p class="impact-section-single-title">212,111</p>
-                    <p class="impact-section-entry-title max-w-[30vw]">Engaged Students & Youth</p>
-                </center></div>
-                <div class="w-full"><center>
-                    <p class="impact-section-single-title">212,111</p>
-                    <p class="impact-section-entry-title max-w-[30vw]">Engaged Students & Youth</p>
-                </center></div>
+            <br/>
+            <div class="border border-white p-4 flex-auto">
+                <p class="impact-section-description-title">No one should be left behind.</p>
+                <p class="impact-section-description-text">
+                    Every young person, regardless of background, will continue to have free access to resources. That’s our promise.
+                </p>
             </div>
         </div>
-        <div>
+        <div class="flex flex-col text-center w-full">
+            <div class="h-36">
+                <p class="impact-section-single-title">547,324</p>
+                <p class="impact-section-entry-title">Repository Views</p>
+            </div>
+            <br/>
+            <div class="border border-white p-4 flex-auto">
+                <p class="impact-section-description-title">Anytime. Anywhere.</p>
+                <p class="impact-section-description-text">
+                    Access information from experts anytime, anywhere with our vast free repository.
+                </p>
+            </div>
+        </div>
+    </div>
+    <br>
+    <br>
+    <div class="w-4/5 lg:w-3/5 m-auto"> 
+        <h2 class="featured-title" style="font-size:3rem;">What People Say</h2>
+        <br><br>
+        <div class="grid gap-16 grid-cols-1 md:grid-cols-3 m-auto p-4">
             <div class="flex flex-col text-center w-full">
-                <center><p class="impact-section-entry-title font-bold">
-                    Since 2023, Advisory has:
-                <br /></p></center>
+                <div class="flex-auto text-3xl">
+                    “We have a moral imperative to ensure all young people can get the support they need to thrive in society; 
+                    and that society must be structured to provide diverse pathways for young people to succeed”	
+                </div>
+                <br/>
+                <div class="h-14 text-xl">
+                    <cite>
+                        <span class="font-bold">Dr Aaron Maniam</span>
+                        <br/>
+                        <span>Chair, Board of Advisors</span>
+                    </cite>
+                </div>
             </div>
-            <div class="grid grid-cols-2">
-                <div class="w-full"><center>
-                    <h1 class="impact-section-single-title">68 </h1>
-                    <p class="impact-section-entry-title max-w-[30vw]">Events</p>
-                </center></div>
-                <div class="w-full"><center>
-                    <h1 class="impact-section-single-title" color="#FFFFFF">3,977</h1>
-                    <p class="impact-section-entry-title max-w-[30vw]">Mentorship Hours, Consultations & Sharing</p>
-                </center></div>
-                <div class="w-full"><center>
-                    <h1 class="impact-section-single-title" color="#FFFFFF">2,076</h1>
-                    <p class="impact-section-entry-title max-w-[30vw]">Professional Volunteers</p>
-                </center></div>
-                <div class="w-full"><center>
-                    <h1 class="impact-section-single-title" color="#FFFFFF">2,076</h1>
-                    <p class="impact-section-entry-title max-w-[30vw]">Professional Volunteers</p>
-                </center></div>
+            <div class="flex flex-col text-center w-full">
+                <div class="flex-auto text-3xl">
+                    “It always amazes me how much passion the volunteers at Advisory put into their mission. 
+                    Kudos to the team for their commitment towards helping youths make more informed career choices and 
+                    for connecting youths to opportunities and possibilities.”
+                </div>
+                <br/>
+                <div class="h-14 text-xl">
+                    <cite>
+                        <span class="font-bold">David Lee</span>
+                        <br/>
+                        <span>Assistant Director, Singapore Maritime Foundation</span>
+                    </cite>	
+                </div>
+            </div>
+            <div class="flex flex-col text-center w-full">
+                <div class="flex-auto text-3xl">
+                    “Having a mentor is akin to having a friend from the future who’s in your ideal career path, 
+                    sharing with you advice you need to hear to gear up for your future. 
+                    Through the mentorship I received, I gained loads of skills and knowledge and broadened my connections as well.”	
+                </div>
+                <br/>
+                <div class="h-14 text-xl">
+                    <cite>
+                        <span class="font-bold">Irdina Bte Mohd Fadzli</span>
+                        <br/>
+                        <span>Student</span>
+                    </cite>
+                </div>
             </div>
         </div>
     </div>

partials/our-partners.hbs

@@ -1,33 +1,33 @@
-<section class="partners-wrapper container">
-            <div class="partners-feed glide">
-                <h2 class="featured-title">Our Partners</h2>
-                <div data-glide-el="controls" style="position: absolute; top: -10px; right: 0px">
-                    <button data-glide-dir="<" type="button" role="presentation" class="border border-gray-300 py-2 px-2 rounded" >
-                        <svg class="icon">
-                            <use xlink:href="#chevron-left"></use>
-                        </svg>
-                    </button>
-                    <button data-glide-dir=">" type="button" role="presentation" class="border border-gray-300 py-2 px-2 rounded">
-                        <svg class="icon">
-                            <use xlink:href="#chevron-right"></use>
-                        </svg>
-                    </button>
-                </div>
-                <div class="glide__track" data-glide-el="track">
-                    <div class="glide__slides">
-                        <div class="glide__slide">
-                            <img class="h-44 m-auto" src="https://i0.wp.com/advisory.sg/wp-content/uploads/2018/06/Inspirit.jpg?&ssl=1">
-                        </div>
-                        <div class="glide__slide">
-                            <img class="h-44 m-auto" src="https://i0.wp.com/advisory.sg/wp-content/uploads/2018/06/NYC.jpg?&ssl=1">
-                        </div>
-                        <div class="glide__slide">
-                            <img class="h-44 m-auto" src="https://i0.wp.com/advisory.sg/wp-content/uploads/2018/06/YCS.jpg?&ssl=1">
-                        </div>
-                        <div class="glide__slide">
-                            <img class="h-44 m-auto" src="https://i0.wp.com/advisory.sg/wp-content/uploads/2018/06/YoungNTUC.jpg?&ssl=1">
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
+<section class="partners-wrapper container">
+            <div class="partners-feed glide">
+                <h2 class="featured-title" style="font-size:3rem;">Our Partners</h2>
+                <div data-glide-el="controls" style="position: absolute; top: -10px; right: 0px">
+                    <button data-glide-dir="<" type="button" role="presentation" class="border border-gray-300 py-2 px-2 rounded" >
+                        <svg class="icon">
+                            <use xlink:href="#chevron-left"></use>
+                        </svg>
+                    </button>
+                    <button data-glide-dir=">" type="button" role="presentation" class="border border-gray-300 py-2 px-2 rounded">
+                        <svg class="icon">
+                            <use xlink:href="#chevron-right"></use>
+                        </svg>
+                    </button>
+                </div>
+                <div class="glide__track" data-glide-el="track">
+                    <div class="glide__slides">
+                        <div class="glide__slide">
+                            <img class="h-44 m-auto" src="https://i0.wp.com/advisory.sg/wp-content/uploads/2018/06/Inspirit.jpg?&ssl=1">
+                        </div>
+                        <div class="glide__slide">
+                            <img class="h-44 m-auto" src="https://i0.wp.com/advisory.sg/wp-content/uploads/2018/06/NYC.jpg?&ssl=1">
+                        </div>
+                        <div class="glide__slide">
+                            <img class="h-44 m-auto" src="https://i0.wp.com/advisory.sg/wp-content/uploads/2018/06/YCS.jpg?&ssl=1">
+                        </div>
+                        <div class="glide__slide">
+                            <img class="h-44 m-auto" src="https://i0.wp.com/advisory.sg/wp-content/uploads/2018/06/YoungNTUC.jpg?&ssl=1">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>