Merge pull request #286 from php-school/home-edits

Home edits

Author: AydinHassan

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/Home/Section/TheWorkshops.vue

@@ -30,7 +30,7 @@ const { loggedIn } = defineProps({
         <h4 class="mb-4 mt-0 p-0 font-work-sans text-2xl font-bold capitalize not-italic text-white">Community</h4>
         <p class="text-balance mb-4 text-base text-white">
           Community workshops are those created by, well, you! They are not officially maintained by the PHP School team and not all of them are compatible with the online system. Compatible ones are
-          labeled, otherwise, you can always run run them
+          labeled, otherwise, you can always run them
           <router-link class="text-[#e91e63] hover:underline" to="/offline">offline</router-link>
           .
         </p>

assets/components/Website/Pages/PageHome.vue

@@ -15,6 +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 HomeList from "./Home/HomeList.vue";
+
 
 import { SparklesIcon } from "@heroicons/vue/24/solid";
 import { useStudentStore } from "../../../stores/student";
@@ -116,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>
@@ -129,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>
@@ -151,12 +220,8 @@ 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 educational PHP Workshops</h2>
-            <p class="font-base font-work-sans text-lg text-white">
-              PHP School is a set of workshops each designed to teach a specific topic, tool, technology. Some beginner, some advanced. Each workshop consists of multiple exercises where your task is
-              to code a solution to solve a problem. All our workshops are open source and you can contribute to them with spelling & bug fixes, new exercises. You can even build and publish your own
-              workshop.
-            </p>
+            <HomeList :heading="phpSchoolBreakdown.openSource.heading" :list="phpSchoolBreakdown.openSource.list"></HomeList>
+
             <div class="flex justify-start">
               <PrimaryButton to="/online">GET STARTED</PrimaryButton>
             </div>
@@ -168,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>
@@ -208,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">
@@ -229,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>