feedback 1

app/components/Footer.tsx

@@ -1,29 +1,60 @@
 import Link from "next/link"
+import Image from "next/image"
 
 export default function Footer() {
   return (
-    <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; {new Date().getFullYear()} Digitalization Support Hub. All
-              rights reserved.
-            </p>
-          </div>
-          <div className="flex space-x-4">
-            <Link href="#" className="hover:text-blue-400">
+    <footer className="bg-gray-50 py-8">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex flex-wrap justify-between items-center mb-12">
+          <Link href="/" className="text-xl font-bold text-[#1B75BA]">
+            Digitalization Support Hub
+          </Link>
+          <nav className="flex space-x-6">
+            <Link href="#" className="text-gray-600 hover:text-gray-900">
               Privacy Policy
             </Link>
-            <Link href="#" className="hover:text-blue-400">
+            <Link href="#" className="text-gray-600 hover:text-gray-900">
               Terms of Service
             </Link>
-            <Link href="#" className="hover:text-blue-400">
+            <Link href="#" className="text-gray-600 hover:text-gray-900">
               Contact Us
             </Link>
+          </nav>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
+          <div>
+            <p className="text-gray-600 mb-4">Made by:</p>
+            <div className="flex items-center gap-8">
+              <Image src="/supporter1.png" width={120} height={40} alt="EnAccess logo" />
+              <Image src="/supporter1.png" width={120} height={40} alt="GET.invest logo" />
+            </div>
+          </div>
+          <div className="flex flex-col items-start md:items-end">
+            <p className="text-gray-600 mb-4">Funded by:</p>
+            <Image
+              src="/supporter1.png"
+              width={180}
+              height={50}
+              alt="Good Energies Foundation logo"
+            />
+          </div>
+        </div>
+
+        <div className="mb-12">
+          <p className="text-gray-600 mb-4">Other supporters:</p>
+          <div className="flex justify-center gap-8">
+            <Image src="/supporter1.png" width={100} height={30} alt="Supporter 1 logo" />
+            <Image src="/supporter1.png" width={100} height={30} alt="Supporter 2 logo" />
+            <Image src="/supporter1.png" width={100} height={30} alt="Supporter 3 logo" />
           </div>
         </div>
+
+        <div className="text-center text-gray-600 text-sm">
+          © {new Date().getFullYear()} Digitalization Support Hub. All rights reserved.
+        </div>
       </div>
     </footer>
   )
 }
+

app/components/Header.tsx

@@ -2,25 +2,26 @@ import Link from "next/link"
 
 export default function Header() {
   return (
-    <header className="w-full bg-white shadow-md">
-      <nav className="container mx-auto px-6 py-3">
-        <div className="flex items-center justify-between">
-          <div className="text-xl font-bold text-gray-800">
-            Digitalization Support Hub
-          </div>
-          <div className="hidden md:flex space-x-4">
-            <Link href="#" className="text-gray-800 hover:text-blue-600">
-              Home
-            </Link>
-            <Link href="#" className="text-gray-800 hover:text-blue-600">
-              About
-            </Link>
-            <Link href="#" className="text-gray-800 hover:text-blue-600">
-              Contact
-            </Link>
-          </div>
-        </div>
-      </nav>
+    <header className="bg-white shadow-sm py-4">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center justify-center">
+        <Link
+          href="/"
+          className="text-4xl font-bold text-[#1B75BA] text-center mb-4"
+        >
+          Digitalization Support Hub
+        </Link>
+        <nav className="flex items-center space-x-4">
+          <Link href="#" className="text-gray-700 hover:text-[#1B75BA]">
+            About
+          </Link>
+          <Link href="#" className="text-gray-700 hover:text-[#1B75BA]">
+            Services
+          </Link>
+          <Link href="#" className="text-gray-700 hover:text-[#1B75BA]">
+            Contact
+          </Link>
+        </nav>
+      </div>
     </header>
   )
 }

app/components/Hero.tsx

@@ -1,5 +1,3 @@
-import { ArrowRight } from "lucide-react"
-
 export default function Hero() {
   return (
     <section className="w-full bg-gradient-to-r from-[#1B75BA] to-[#1B75BA] text-white py-20">
@@ -14,16 +12,6 @@ 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-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="/banner.png?height=500&width=500"
-              alt="Digital tools and collaboration in renewable energy"
-            />
           </div>
         </div>
       </div>

app/components/Solutions.tsx

@@ -12,7 +12,7 @@ export default function Solutions() {
       icon: Users,
       title: "Pilot Hands-On Support",
       description:
-        "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..",
+        "Pilot hands-on tailored digitalization support to 6–10 SHS, Mini-grid, and Clean Cooking companies to help them overcome key internal and external barriers in digitalization.",
     },
   ]
 

app/layout.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from "next"
 import localFont from "next/font/local"
 import "./globals.css"
+import Footer from "./components/Footer"
+import Header from "./components/Header"
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -28,7 +30,9 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
+        <Header />
         {children}
+        <Footer />
       </body>
     </html>
   )

app/page.tsx

@@ -1,25 +1,19 @@
-import Header from "./components/Header"
 import Hero from "./components/Hero"
 import Context from "./components/Context"
 import Challenges from "./components/Challenges"
 import Solutions from "./components/Solutions"
 import Impact from "./components/Impact"
 import Participation from "./components/Participation"
-import Timeline from "./components/Timeline"
-import Footer from "./components/Footer"
 
 export default function Page() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-between">
-      <Header />
       <Hero />
       <Context />
       <Challenges />
       <Solutions />
       <Impact />
       <Participation />
-      <Timeline />
-      <Footer />
     </main>
   )
 }