add enaccess brand (#13)

app/components/Challenges.tsx

@@ -10,13 +10,13 @@ export default function Challenges() {
   return (
     <section className="w-full bg-white py-16">
       <div className="container mx-auto px-6">
-        <h2 className="text-3xl font-bold text-center mb-12">
+        <h2 className="text-3xl font-bold text-center mb-12 text-[#174569]">
           Challenges SMEs Face
         </h2>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
           {challenges.map((challenge, index) => (
             <div key={index} className="flex flex-col items-center text-center">
-              <challenge.icon className="w-16 h-16 text-blue-500 mb-4" />
+              <challenge.icon className="w-16 h-16 text-[#28AAE1] mb-4" />
               <p className="text-xl">{challenge.text}</p>
             </div>
           ))}

app/components/Context.tsx

@@ -2,7 +2,7 @@ export default function Context() {
   return (
     <section className="w-full bg-gray-100 py-16">
       <div className="container mx-auto px-6">
-        <h2 className="text-3xl font-bold text-center mb-8">
+        <h2 className="text-3xl font-bold text-center mb-8 text-[#174569]">
           Why Digitalization Matters
         </h2>
         <p className="text-xl text-center max-w-3xl mx-auto">

app/components/Footer.tsx

@@ -2,11 +2,14 @@ import Link from "next/link"
 
 export default function Footer() {
   return (
-    <footer className="w-full bg-gray-800 text-white py-8">
+    <footer className="w-full bg-[#1B75BA] text-white py-8">
       <div className="container mx-auto px-6">
         <div className="flex flex-col md:flex-row justify-between items-center">
           <div className="mb-4 md:mb-0">
-            <p>&copy; 2023 Digitalization Support Hub. All rights reserved.</p>
+            <p>
+              &copy; {new Date().getFullYear()} Digitalization Support Hub. All
+              rights reserved.
+            </p>
           </div>
           <div className="flex space-x-4">
             <Link href="#" className="hover:text-blue-400">

app/components/Hero.tsx

@@ -2,9 +2,9 @@ import { ArrowRight } from "lucide-react"
 
 export default function Hero() {
   return (
-    <section className="w-full bg-gradient-to-r from-blue-500 to-green-500 text-white py-20">
+    <section className="w-full bg-gradient-to-r from-[#1B75BA] to-[#1B75BA] text-white py-20">
       <div className="container mx-auto px-6">
-        <div className="flex flex-col md:flex-row items-center">
+        <div className="flex flex-col md:flex-row items-center  ">
           <div className="md:w-1/2 mb-8 md:mb-0">
             <h1 className="text-4xl md:text-5xl font-bold mb-4">
               Empowering Domestic SMEs in the Renewable Energy Sector Through
@@ -14,16 +14,15 @@ export default function Hero() {
               Join the Digitalization Support Hub – Innovating Operations,
               Driving Growth
             </p>
-            <button className="bg-yellow-400 text-gray-800 font-bold py-2 px-4 rounded-full inline-flex items-center hover:bg-yellow-300 transition duration-300">
+            <button className="bg-yellow-400 text-gray-800 font-bold py-2 px-4 rounded-md inline-flex items-center hover:bg-yellow-300 transition duration-300">
               Learn More
               <ArrowRight className="ml-2" />
             </button>
           </div>
           <div className="md:w-1/2">
             <img
-              src="/placeholder.svg?height=400&width=400"
+              src="/banner.png?height=500&width=500"
               alt="Digital tools and collaboration in renewable energy"
-              className="rounded-lg shadow-lg"
             />
           </div>
         </div>

app/components/Impact.tsx

@@ -18,12 +18,14 @@ export default function Impact() {
   return (
     <section className="w-full bg-white py-16">
       <div className="container mx-auto px-6">
-        <h2 className="text-3xl font-bold text-center mb-12">Our Impact</h2>
+        <h2 className="text-3xl font-bold text-center mb-12 text-[#174569]">
+          Our Impact
+        </h2>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
           {stats.map((stat, index) => (
             <div key={index} className="flex flex-col items-center text-center">
-              <stat.icon className="w-16 h-16 text-yellow-500 mb-4" />
-              <p className="text-4xl font-bold text-blue-600 mb-2">
+              <stat.icon className="w-16 h-16 text-[#28AAE1] mb-4" />
+              <p className="text-4xl font-bold text-[#1B75BA] mb-2">
                 {stat.value}
               </p>
               <p className="text-lg">{stat.text}</p>

app/components/Participation.tsx

@@ -14,7 +14,7 @@ export default function Participation() {
   }
 
   return (
-    <section className="w-full bg-blue-600 text-white py-16">
+    <section className="w-full bg-[#1B75BA]  text-white py-16">
       <div className="container mx-auto px-6">
         <h2 className="text-3xl font-bold text-center mb-8">Get Involved</h2>
         <p className="text-xl text-center mb-8 max-w-2xl mx-auto">

app/components/Solutions.tsx

@@ -5,28 +5,31 @@ export default function Solutions() {
     {
       icon: MapPin,
       title: "Interactive Digital Tools Map",
-      description: "Helping SMEs select tools tailored to their needs.",
+      description:
+        "An intuitive, user-friendly interactive map of digital tools for DRE companies featuring a built-in wizard to assist businesses in selecting the most suitable tools for their needs.",
     },
     {
       icon: Users,
       title: "Pilot Hands-On Support",
       description:
-        "Tailored assistance for selected companies to overcome barriers.",
+        "Pilot hands-on tailored digitalization support to 6-10 SHS,Mini-grid, and Clean Cooking companies,to help them overcome jey internal and external and barriers in digitalization..",
     },
   ]
 
   return (
     <section className="w-full bg-gray-100 py-16">
       <div className="container mx-auto px-6">
-        <h2 className="text-3xl font-bold text-center mb-12">How We Help</h2>
+        <h2 className="text-3xl font-bold text-center mb-12 text-[#174569]">
+          How We Help
+        </h2>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
           {solutions.map((solution, index) => (
             <div
               key={index}
               className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-300"
             >
-              <solution.icon className="w-12 h-12 text-green-500 mb-4" />
-              <h3 className="text-xl font-semibold mb-2">{solution.title}</h3>
+              <solution.icon className="w-12 h-12 text-[#28AAE1] mb-4" />
+              <h3 className="text-xl font-semibold mb-2 ">{solution.title}</h3>
               <p>{solution.description}</p>
             </div>
           ))}

app/components/Timeline.tsx

@@ -1,37 +1,94 @@
-export default function Timeline() {
+"use client"
+import { Timeline } from "antd"
+import Image from "next/image"
+
+export default function TimelineComponent() {
   const steps = [
-    "Ideation",
-    "Validation",
-    "Collaboration",
-    "Research",
-    "Scoping",
-    "Outcomes",
-    "Outlook",
+    {
+      number: 1,
+      title: "Ideation",
+      description:
+        "SHS companies' journey and digital options were identified. TA needs to be defined, and EnAccess will be appointed to lead the process.",
+      imageUrl: "/image1.png",
+    },
+    {
+      number: 2,
+      title: "Validation and refinement",
+      description:
+        "Surveys and interviews with ~30 SMEs performed, funding committed by Good Energies",
+      imageUrl: "/image2.png",
+    },
+    {
+      number: 3,
+      title: "Collaboration/No duplicated efforts",
+      description: "Outreach and exchange with GOGLA, GDC, EnDev, and RLI",
+      imageUrl: "/image3.png",
+    },
+    {
+      number: 4,
+      title: "Research and Design",
+      description:
+        "Information on tools is being gathered, merged, and validated, interoperability is being assessed, Designing and testing of tools map and Wizard",
+      imageUrl: "/image4.png",
+    },
+    {
+      number: 5,
+      title: "Scoping",
+      description:
+        "Based on exchanges with stakeholders, hands-on support is being shaped",
+      imageUrl: "/image4.png",
+    },
+    {
+      number: 6,
+      title: "Outcome",
+      description:
+        "Digital tools map to be launched and accompanying hands-on support provided to selected companies",
+      imageUrl: "/banner.png",
+    },
+    {
+      number: 7,
+      title: "Outlook",
+      description:
+        "Tools map will be a dynamic, evolving resource. Hands-on support shall be replicated and scaled based on the learnings. Funders are being approached.",
+      imageUrl: "/image5.png",
+    },
   ]
 
   return (
     <section className="w-full bg-gray-100 py-16">
       <div className="container mx-auto px-6">
-        <h2 className="text-3xl font-bold text-center mb-12">How It Works</h2>
-        <div className="relative">
-          <div className="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-blue-500"></div>
-          {steps.map((step, index) => (
-            <div key={index} className="relative mb-8">
-              <div className="flex items-center">
-                <div className="flex-1 text-right pr-6">
-                  {index % 2 === 0 && (
-                    <p className="text-lg font-semibold">{step}</p>
-                  )}
-                </div>
-                <div className="w-6 h-6 bg-blue-500 rounded-full z-10"></div>
-                <div className="flex-1 pl-6">
-                  {index % 2 !== 0 && (
-                    <p className="text-lg font-semibold">{step}</p>
-                  )}
+        <h2 className="text-3xl font-bold text-center mb-12 text-[#174569]">
+          How It Works
+        </h2>
+        <div className="container mx-auto px-4 py-16 max-w-4xl">
+          <Timeline mode="alternate">
+            {steps.map((step, index) => (
+              <Timeline.Item key={index} label={step.title}>
+                <div className="flex flex-col items-center text-center">
+                  <div className="w-12 h-12 bg-white border-4 border-[#28AAE1] rounded-full flex items-center justify-center z-10 mb-4">
+                    <span className="text-[#28AAE1] font-bold">
+                      {step.number}
+                    </span>
+                  </div>
+                  <div className="max-w-md">
+                    <h3 className="text-xl font-bold text-[#174569] mb-2">
+                      {step.title}
+                    </h3>
+                    <p className="text-gray-600">{step.description}</p>
+                  </div>
+                  <div className="mt-4">
+                    <Image
+                      src={step.imageUrl || "/placeholder.svg"}
+                      alt={`Step ${step.number} illustration`}
+                      width={96}
+                      height={96}
+                      className="object-contain"
+                    />
+                  </div>
                 </div>
-              </div>
-            </div>
-          ))}
+              </Timeline.Item>
+            ))}
+          </Timeline>
         </div>
       </div>
     </section>