Add Partener Section

next_webapp/package.json

@@ -10,7 +10,6 @@
     "test": "jest"
   },
   "dependencies": {
-    "-": "^0.0.1",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
@@ -53,11 +52,11 @@
     "autoprefixer": "^10.0.1",
     "babel-cli": "^6.26.0",
     "babel-jest": "^29.7.0",
-    "cypress": "^13.14.2",
+    "cypress": "^0.0.1",
     "eslint": "^8",
-    "eslint-config-next": "14.1.3",
+    "eslint-config-next": "^16.1.6",
     "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "jest-environment-jsdom": "^30.3.0",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
     "typescript": "^5.4.4"

next_webapp/src/app/[locale]/page.tsx

@@ -3,6 +3,8 @@ import Footer from "../../components/Footer";
 import Dashboard from "../../components/Dashboard";
 import Chatbot from "../chatbot/chatbot";
 import SocialMediaFeed from "@/components/SocialMediaFeed";
+import PartnersSection from "@/components/PartnersSection";
+
 import CityMetricCard from "@/components/CityMetricCard";
 import Insights from "@/components/Insights";
 
@@ -12,9 +14,11 @@ const Home = () => {
       <Header />
       <Dashboard />
       <Insights />
+      <PartnersSection />
       <SocialMediaFeed />
       <Chatbot />
       <Footer />
+
     </div>
   );
 };

next_webapp/src/components/Dashboard.tsx

@@ -705,7 +705,7 @@ const Dashboard = () => {
 								placeholder="blur"
 							/>
 						</div>
-
+{/* hero contact section */}
 						<div className="hero-content">
 							<h1 className="hero-title">{t_hero("hero-top")}</h1>
 							<p className="hero-subtitle">{t_hero("hero-sub")}</p>
@@ -809,6 +809,7 @@ const Dashboard = () => {
 							<ChevronDown size={40} />
 						</div>
 					</section>
+					{/* City Metric Solution  */}
 					<section className="city-metrics-section bg-gray-50 dark:bg-gray-900 py-12">
 						<div className="container mx-auto px-4">
 							<h2 className="text-3xl font-bold text-center mb-8 text-gray-800 dark:text-white">
@@ -822,7 +823,7 @@ const Dashboard = () => {
 						</div>
 					</section>
 
-
+{/* Our vision section */}
 					<section className="our-vision-section">
 						<div className="img-div">
 							<Image src={secondimage} alt="Second Image" />
@@ -832,7 +833,7 @@ const Dashboard = () => {
 							<p>{t("intro")}</p>
 						</div>
 					</section>
-
+{/* Explore by category  */}
 					<section className="w-full max-w-6xl mx-auto mt-10 px-2 md:px-0">
             			<h3 className="text-xl font-semibold mb-3">Explore by category</h3>
               				<div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-7 gap-4 mb-2">
@@ -900,13 +901,25 @@ const Dashboard = () => {
 									</div>
 								))}
 							</Carousel>
+
 						</section>
-					</section>
+
+
+
+						</section>
+
+
+
+
 				</div>
+
 			</div>
+
+
 		</>
 	);
 
+
 };
 
 export default Dashboard;

next_webapp/src/components/PartnersSection.tsx

@@ -0,0 +1,147 @@
+// "use client";
+
+// import Image from "next/image";
+
+// const partners = [
+//   { name: "Deakin University", logo: "/partners/deakin.png" },
+//   { name: "City of Melbourne", logo: "/partners/melbourne.png" },
+//   { name: "Data.gov.au", logo: "/partners/data-gov.png" },
+//   { name: "Open Data Victoria", logo: "/partners/open-data.png" },
+// ];
+
+// export default function PartnersSection() {
+//   return (
+//     <section className="w-full bg-white dark:bg-[#263238] py-14">
+//       <div className="max-w-6xl mx-auto px-4 text-center">
+//         <h2 className="text-3xl font-bold text-gray-800 dark:text-white mb-3">
+//           Our Partners
+//         </h2>
+//         <p className="text-gray-600 dark:text-gray-300 mb-10">
+//           Organizations supporting and collaborating with this project.
+//         </p>
+
+//         <div className="grid grid-cols-2 md:grid-cols-4 gap-6 items-center">
+//           {partners.map((partner, index) => (
+//             <div
+//               key={index}
+//               className="bg-gray-50 dark:bg-gray-800 rounded-2xl shadow-sm p-6 flex items-center justify-center hover:shadow-md transition duration-300"
+//             >
+//               <Image
+//                 src={partner.logo}
+//                 alt={partner.name}
+//                 width={140}
+//                 height={70}
+//                 className="object-contain grayscale hover:grayscale-0 transition duration-300"
+//               />
+//             </div>
+//           ))}
+//         </div>
+//       </div>
+//     </section>
+//   );
+// }
+
+
+"use client";
+
+import Image from "next/image";
+
+const partners = [
+  { name: "UFC", logo: "/partners/ufc.png" },
+  { name: "X", logo: "/partners/x.png" },
+  { name: "Deakin", logo: "/partners/deakin.png" },
+  { name: "Lenovo", logo: "/partners/lenovo.png" },
+    { name: "Energy", logo: "/partners/energy.png" },
+  { name: "Amazon", logo: "/partners/amazon.png" },
+  { name: "Shell", logo: "/partners/shell.png" },
+  { name: "Melbourne", logo: "/partners/melbourne.png" },
+    { name: "Post", logo: "/partners/post.png" },
+
+];
+
+export default function PartnersSection() {
+  const repeatedPartners = [...partners, ...partners];
+
+  return (
+    <section className="w-full bg-white dark:bg-[#263238] py-14 overflow-hidden">
+      <div className="max-w-6xl mx-auto px-4 text-center mb-8">
+        <h2 className="text-4xl font-bold text-gray-800 dark:text-white mb-3">
+          Our Partners
+        </h2>
+        <p className="text-gray-600 dark:text-gray-300 mb-4">
+          Organizations supporting and collaborating with this project.
+        </p>
+      </div>
+
+      <div className="marquee mt-4">
+        <div className="marquee-track">
+          {repeatedPartners.map((partner, index) => (
+            <div key={index} className="logo-item">
+              <Image
+                src={partner.logo}
+                alt={partner.name}
+                width={160}
+                height={80}
+                className="logo-img"
+              />
+            </div>
+          ))}
+
+          {repeatedPartners.map((partner, index) => (
+            <div key={`dup-${index}`} className="logo-item">
+              <Image
+                src={partner.logo}
+                alt={partner.name}
+                width={160}
+                height={80}
+                className="logo-img"
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <style jsx>{`
+        .marquee {
+          width: 100%;
+          overflow: hidden;
+          position: relative;
+        }
+
+        .marquee-track {
+          display: flex;
+          align-items: center;
+          width: max-content;
+          animation: scroll 25s linear infinite;
+        }
+
+        .logo-item {
+          flex: 0 0 auto;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0 32px;
+        }
+
+        .logo-img {
+          width: auto;
+          height: 70px;
+          object-fit: contain;
+        }
+
+        .marquee-track:hover {
+          animation-play-state: paused;
+        }
+
+        @keyframes scroll {
+          from {
+            transform: translateX(0);
+          }
+          to {
+            transform: translateX(-50%);
+          }
+        }
+      `}</style>
+    </section>
+  );
+}