Updated descriptions on home page descriptions

assets/components/Website/Pages/Home/HomeList.vue

@@ -0,0 +1,24 @@
+<script setup>
+const { list, heading } = defineProps({
+  list: Array,
+  heading: String,
+});
+</script>
+
+<template>
+  <h2 class="font-work-sans text-5xl font-bold text-white">{{ heading }}</h2>
+  <ul class="mt-4">
+    <li v-for="line in list" :key="line" class="group">
+      <div class="py-2">
+        <div class="mr-16 pl-1 text-white">
+          <div class="flex items-start text-base text-pink-600 text-nowrap">
+            <svg class="ml-1 mr-2 mt-0.5 h-5 w-5 flex-none" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+            </svg>
+            <p class="text-white"><span class="text-pink-600 font-semibold">{{ line.title }}: </span>{{ line.description }}</p>
+          </div>
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>

assets/components/Website/Pages/PageHome.vue

@@ -15,7 +15,8 @@ import InfoSection from "./Home/InfoSection.vue";
 import GettingStarted from "./Home/Section/GettingStarted.vue";
 import TheWorkshops from "./Home/Section/TheWorkshops.vue";
 import BuildYourOwn from "./Home/Section/BuildYourOwn.vue";
-import { ChevronRightIcon } from "@heroicons/vue/24/solid";
+import HomeList from "./Home/HomeList.vue";
+
 
 import { SparklesIcon } from "@heroicons/vue/24/solid";
 import { useStudentStore } from "../../../stores/student";
@@ -117,6 +118,73 @@ onUnmounted(() => {
   window.removeEventListener("scroll", checkImages);
   window.removeEventListener("resize", debouncedCheckImages);
 });
+
+const phpSchoolBreakdown = {
+  openSource: {
+    heading: "Open-Source Gateway To PHP Mastery",
+    list: [
+    {
+      title: "Interactive Workshops",
+      description: "Engaging sessions covering beginner to advanced topics in PHP"
+    },
+    {
+      title: "Hands-On Learning",
+      description: "Solve real-world problems through coding exercises"
+    },
+    {
+      title: "Community Collaboration",
+      description: "Contribute, fix bugs, and create your own workshops"
+    },
+    {
+      title: "Open Source Education",
+      description: "Access all workshops for free and learn at your own pace"
+    }
+  ]
+  },
+  editor: {
+    heading: "Seamless Online Coding Experience",
+    list: [
+      {
+        title: "Effortless Access",
+        description: "Login with your GitHub account and seamlessly navigate through workshops and exercises",
+      },
+      {
+        title: "No Setup Hassle",
+        description: "Say goodbye to complex setups and installations; our IDE is ready to use right from your browser",
+      },
+      {
+        title: "Streamlined Interface",
+        description: "Jump straight into coding with our intuitive web-based text editor, no additional tools or dependencies required",
+      },
+      {
+        title: "Instant Start",
+        description: "Begin coding instantly without the need for downloading or installing text editors, dependencies, or plugins",
+      }
+    ]
+  },
+  assignments: {
+    heading: "Work On Practical Assignments",
+    list: [
+      {
+        title: "Real-World Challenges",
+        description: "Complete practical problems that you will be sure to encounter in your respective field",
+      },
+      {
+        title: "Level Up Your Problem Solving Skills",
+        description: "Gain hands-on experience and develop critical problem-solving skills through immersive assignments"
+      },
+      {
+        title: "Guided Progression",
+        description: "Access detailed descriptions, code samples, and curated resources to support your problem-solving process"
+      },
+      {
+        title: "Career Preparation",
+        description: "Equip yourself with the skills necessary to excel in your chosen career path, ensuring readiness for the challenges ahead"
+      }
+    ]
+  },
+};
+ 
 </script>
 
 <template>
@@ -130,11 +198,11 @@ onUnmounted(() => {
       <!-- Section 1 -->
       <InfoSection>
         <template #left>
-          <div class="mx-auto w-full lg:w-2/3">
+          <div class="mx-auto w-full lg:w-2/3 lg:mb-36">
             <div class="relative flex items-center justify-center">
               <img class="cover" src="../../../img/cloud/pattern-bg-square.svg" alt="" />
               <div class="absolute mx-auto scale-75 sm:scale-100 md:left-auto">
-                <div :ref="transitions.exerciseList" class="fadeIn translate-y-6 opacity-0 transition-all duration-[1000ms] ease-in lg:mb-36">
+                <div :ref="transitions.exerciseList" class="fadeIn translate-y-6 opacity-0 transition-all duration-[1000ms] ease-in">
                   <MockWorkshopExerciseList />
                 </div>
               </div>
@@ -152,17 +220,7 @@ onUnmounted(() => {
 
         <template #right>
           <div class="mt-28 w-full space-y-8 text-left sm:px-5 md:mt-36 lg:mt-0 lg:w-1/3">
-            <h2 class="font-work-sans text-5xl font-bold text-white">Open-Source Gateway To PHP Mastery</h2>
-            <div class="grid grid-cols-4">
-              <div class="p-2 col-span-1 text-right w-4"><span class=" text-pink-600 text-xl font-semibold">&#62;</span></div>
-              <div class="p-2 col-span-3 text-white xl:-ml-24 "><span class="text-pink-600 font-semibold">Interactive Workshops:</span><span> Engaging sessions covering beginner to advanced topics in PHP</span></div>
-              <div class="p-2 col-span-1 text-right w-4"><span class=" text-pink-600 text-xl font-semibold">&#62;</span></div>
-              <div class="p-2 col-span-3 text-white xl:-ml-24 "><span class="text-pink-600 font-semibold">Hands-On Learning:</span><span class="col-span-1"> Solve real-world problems through coding exercises</span></div>
-              <div class="p-2 col-span-1 text-right w-4"><span class=" text-pink-600 text-xl font-semibold">&#62;</span></div>
-              <div class="p-2 col-span-3 text-white xl:-ml-24 "><span class="text-pink-600 font-semibold">Community Collaboration:</span><span class="col-span-1"> Contribute, fix bugs, and create your own workshops</span></div>
-              <div class="p-2 col-span-1 text-right w-4"><span class=" text-pink-600 text-xl font-semibold">&#62;</span></div>
-              <div class="p-2 col-span-3 text-white xl:-ml-24 "><span class="text-pink-600 font-semibold">Open Source Education:</span><span class="col-span-1"> Access all workshops for free and learn at your own pace</span></div>
-            </div>
+            <HomeList :heading="phpSchoolBreakdown.openSource.heading" :list="phpSchoolBreakdown.openSource.list"></HomeList>
 
             <div class="flex justify-start">
               <PrimaryButton to="/online">GET STARTED</PrimaryButton>
@@ -175,11 +233,7 @@ onUnmounted(() => {
       <InfoSection>
         <template #left>
           <div class="order-2 mt-8 w-full space-y-8 text-left sm:px-5 lg:order-1 lg:mt-0 lg:w-1/3">
-            <h2 class="balanced font-work-sans text-5xl font-bold text-white">Online Browser Based IDE</h2>
-            <p class="font-base font-work-sans text-lg text-white">
-              Login in with your GitHub account, select a workshop, an exercise then jump straight in to our web based text editor (IDE). No complicated setup, no need to install tools, dependencies
-              and text editors. Just jump in and start coding.
-            </p>
+            <HomeList :heading="phpSchoolBreakdown.editor.heading" :list="phpSchoolBreakdown.editor.list"></HomeList>
             <div class="flex justify-start">
               <PrimaryButton to="/online" class="flex items-center">
                 <span v-if="studentStore.student">TO THE WORKSHOPS</span>
@@ -215,7 +269,7 @@ onUnmounted(() => {
       <!-- Section 3 -->
       <InfoSection>
         <template #left>
-          <div class="relative mx-auto mt-20 w-full lg:w-2/3">
+          <div class="relative mx-auto mt-8 w-full lg:w-2/3">
             <div class="relative flex items-center justify-center">
               <img class="" src="../../../img/cloud/pattern-bg-square-alt.svg" alt="" />
               <div :ref="transitions.mockProblemModal" class="fadeIn absolute translate-y-6 opacity-0 transition-all duration-[1000ms] ease-in">
@@ -236,11 +290,7 @@ onUnmounted(() => {
 
         <template #right>
           <div class="mt-28 w-full space-y-8 text-left sm:mt-40 sm:px-5 lg:mb-40 lg:w-1/3">
-            <h2 class="font-work-sans text-5xl font-bold text-white">Work on practical assignments</h2>
-            <p class="font-base font-work-sans text-lg text-white">
-              Level up your problem solving skills whilst tackling practical problems that you will be sure to encounter in your chosen career path as a software developer. Each exercise comes with a
-              description, code samples to get you started, links to documentation and other resources to help you solve the problem.
-            </p>
+            <HomeList :heading="phpSchoolBreakdown.assignments.heading" :list="phpSchoolBreakdown.assignments.list"></HomeList>
             <div class="flex justify-start">
               <PrimaryButton to="/online">GET STARTED</PrimaryButton>
             </div>