From 44d1e82819ff76674ca9a8f60a664da1bf4336ae Mon Sep 17 00:00:00 2001
From: Sebastian Moder <moder.sebastian@gmail.com>
Date: Thu, 21 Nov 2024 23:51:35 +0100
Subject: [PATCH] Refactor hero section and improve accessibility

---
 app/page.tsx | 136 +++++++++++++++++++++++++++++++--------------------
 1 file changed, 83 insertions(+), 53 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 7184ac8..5936205 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -5,69 +5,93 @@ import InstitutionLogos from "@/components/Institutionlogos";
 import Featurecard from "@/components/Featurecard";
 import Headings from "@/components/Doubleheadings";
 
-const features = [
+const projectDeliverables = [
   {
     title: "SAGE",
     description: "Strategies for AI-Guided Education",
-    icon: <GiWizardStaff size={32} />,
+    icon: (
+      <GiWizardStaff
+        size={32}
+        aria-hidden="true"
+      />
+    ),
     link: "https://sage.ai-pathfinder.eu",
   },
   {
     title: "GUARD",
     description: "Generative Universal Assistant for Resourceful Development",
-    icon: <GiBorderedShield size={32} />,
+    icon: (
+      <GiBorderedShield
+        size={32}
+        aria-hidden="true"
+      />
+    ),
     link: "/guard",
   },
   {
     title: "ARTISAN",
     description:
       "AI Readiness Training for Insightful Systematic Adaptation and Navigation",
-    icon: <GiBroadsword size={32} />,
+    icon: (
+      <GiBroadsword
+        size={32}
+        aria-hidden="true"
+      />
+    ),
     link: "/artisan",
   },
 ];
 
+const Hero = () => (
+  <section className="py-16 bg-white">
+    <div className="container mx-auto px-6 lg:px-12 flex flex-col-reverse md:flex-row items-center gap-12">
+      {/* Left Side */}
+      <div className="text-center md:text-left md:w-1/2 space-y-6">
+        <h1 className="text-4xl sm:text-5xl font-bold leading-tight text-gray-900">
+          Welcome to the
+          <br />
+          Erasmus+ Pathfinder Project
+        </h1>
+        <p className="text-lg text-gray-800 leading-relaxed">
+          Pioneering AI Technology in Higher Education to Facilitate Innovation and
+          Nurture the Development of Entrepreneurial Resources
+        </p>
+        <Link
+          href="#deliverables"
+          className="inline-block bg-eu-blue hover:bg-blue-500 text-white text-lg font-semibold py-3 px-6 rounded-lg transition">
+          Learn More
+        </Link>
+      </div>
+
+      {/* Right Side */}
+      <div className="relative w-full md:w-1/2 max-w-lg">
+        <Image
+          src="/images/hero-image.jpeg"
+          alt="Hero Image"
+          width={600}
+          height={400}
+          className="rounded-3xl shadow-lg object-cover"
+          priority
+        />
+      </div>
+    </div>
+  </section>
+);
+
 export default function Home() {
   return (
     <div className="">
       {/* Hero Section */}
-
-      <section className="py-16">
-        <div className="container mx-auto px-5 flex flex-col items-center md:flex-row">
-          {/* Left Side */}
-          <div className="text-center flex flex-col items-center md:pr-16 md:items-start md:text-left lg:flex-grow md:w-1/2 lg:pr-24">
-            <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium">
-              Welcome to the
-              <br />
-              Erasmus+ Pathfinder Project
-            </h1>
-            <p className="mb-8 leading-relaxed">
-              Pioneering AI Technology in Higher Education to Facilitate Innovation and
-              Nurture the Development of Entrepreneurial Resources
-            </p>
-          </div>
-
-          {/* Right Side */}
-          <div className="w-5/6 md:w-1/2 lg:max-w-lg lg:w-full">
-            <Image
-              src="/images/hero-image.jpeg"
-              alt="Hero Image"
-              width={600}
-              height={400}
-              className="object-cover object-center rounded-2xl"
-            />
-          </div>
-        </div>
-      </section>
+      <Hero />
 
       {/* <!-- Objectives Section --> */}
-      <section className="py-16 bg-slate-100">
-        <div className="w-5/6 md:w-1/2 lg:max-w-2xl lg:w-full mx-auto">
+      <section className="py-16 bg-blue-50">
+        <div className="max-w-4xl mx-auto space-y-6 px-6">
           <Headings
             top="PROJECT OBJECTIVE"
             bottom="Empowering Education Through AI"
           />
-          <p className="mb-8">
+          <p className="text-lg text-gray-800">
             Pathfinder is an Erasmus+ project that aims to advance the understanding and
             adoption of Artificial Intelligence (AI) technology in higher education. We
             equip educators and students with the knowledge, resources, and tools to
@@ -75,12 +99,12 @@ export default function Home() {
             learning.
           </p>
 
-          <p className="mb-4">
+          <p className="text-lg text-gray-800">
             Our mission is to foster digital readiness, promote entrepreneurial
             innovation, and enhance employability by:
           </p>
 
-          <ul className="mb-8">
+          <ul className="text-left space-y-2 text-gray-800 list-disc list-inside">
             <li>Developing strategic guidelines for AI integration (SAGE)</li>
             <li>
               Creating AI-based tools for lesson planning and teaching support (GUARD)
@@ -89,7 +113,7 @@ export default function Home() {
               Providing a learning journey to enhance students&apos; AI literacy (ARTISAN)
             </li>
           </ul>
-          <p className="mb-8">
+          <p className="text-lg text-gray-800">
             Explore our website to learn more about our innovative approach to
             transforming higher education through AI.
           </p>
@@ -97,14 +121,16 @@ export default function Home() {
       </section>
 
       {/* Deliverables Section */}
-      <section className="py-16">
+      <section
+        className="py-16 bg-gradient-to-b from-white to-blue-50"
+        id="deliverables">
         <div className="container px-5 mx-auto">
           <Headings
             top="PROJECT DELIVERABLES"
             bottom="Meet the Pathfinders"
           />
           <div className="flex flex-wrap -m-4">
-            {features.map((feature, index) => (
+            {projectDeliverables.map((feature, index) => (
               <Featurecard
                 key={index}
                 title={feature.title}
@@ -118,19 +144,23 @@ export default function Home() {
       </section>
 
       {/* <!-- Contact Section --> */}
-      <section className="py-16 mx-auto">
-        <Headings
-          top="PROJECT CONSORTIUM"
-          bottom="Participating Organizations"
-        />
-        <div className="text-center">
-          <InstitutionLogos />
-          <p className="my-8">Feel free to get in touch with us for more information.</p>
-          <Link
-            href="/about"
-            className="bg-eu-blue hover:bg-blue-500 text-white font-bold py-2 px-4 rounded-full">
-            Contact Us
-          </Link>
+      <section className="py-16 mx-auto ">
+        <div className="max-w-5xl mx-auto text-center space-y-8">
+          <Headings
+            top="PROJECT CONSORTIUM"
+            bottom="Participating Organizations"
+          />
+          <div className="text-center">
+            <InstitutionLogos />
+            <p className="text-lg text-gray-800 mt-8 mb-8">
+              Feel free to get in touch with us for more information.
+            </p>
+            <Link
+              href="/about"
+              className="bg-eu-blue hover:bg-blue-500 text-white font-bold py-2 px-4 rounded-full transition">
+              Contact Us
+            </Link>
+          </div>
         </div>
       </section>
     </div>