Fix links and add new images

naiirad · Dec 1, 2023 · f9891be · f9891be
1 parent 42ca11b
commit f9891be
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 31 deletions.
diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Link from "next/link";
 import { hardhat } from "viem/chains";
 import { SwitchTheme } from "~~/components/SwitchTheme";
 import { getTargetNetwork } from "~~/utils/scaffold-eth";
@@ -21,7 +22,7 @@ export const Footer = () => {
         <ul className="menu menu-horizontal w-full">
           <div className="flex justify-center items-center gap-2 text-sm w-full">
             <div className="text-center">
-              <a href="https://github.com/scaffold-eth/se-2" target="_blank" rel="noreferrer" className="link">
+              <a href="https://t.me/MantaCare" target="_blank" rel="noreferrer" className="link">
                 Telegram
               </a>
             </div>
@@ -33,9 +34,9 @@ export const Footer = () => {
             </div>
             <span>·</span>
             <div className="text-center">
-              <a href="https://t.me/joinchat/KByvmRe5wkR-8F_zz6AjpA" target="_blank" rel="noreferrer" className="link">
-                Impressum
-              </a>
+              <Link href="/Impressum">
+                <a className="link">Impressum</a>
+              </Link>
             </div>
           </div>
         </ul>

diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -28,7 +28,7 @@ export const menuLinks: HeaderMenuLink[] = [
   },
   {
     label: "Das Projekt",
-    href: "/MantaCare",
+    href: "/mantacare",
   },
 ];
 

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
@@ -17,6 +17,8 @@ const Home: NextPage = () => {
     { id: 0, name: "Medical Response Crew", imageUrl: "/mrc.jpg" },
     { id: 1, name: "Crisis Relief Team", imageUrl: "/crt.png" },
     { id: 2, name: "Humanitas in Centro", imageUrl: "/hic.jpg" },
+    { id: 3, name: "MantaCare", imageUrl: "/mantacare_logo_bg.png" },
+    { id: 4, name: "Projektvorschlag", imageUrl: "/next.png", isSpecial: true },
     // Weitere Projekte hinzufügen mit ihren Bildpfaden
   ];
 
@@ -27,13 +29,7 @@ const Home: NextPage = () => {
   return (
     <div className="relative max-w-screen-2xl mx-auto">
       <div className="background-container">
-        <Image
-          src="/MantaCare_Hintergrund.png"
-          alt="Hintergrund"
-          width={572} // Ersetzen Sie dies durch die tatsächliche Breite Ihres Bildes
-          height={572} // Ersetzen Sie dies durch die tatsächliche Höhe Ihres Bildes
-          layout="responsive"
-        />
+        <Image src="/MantaCare_Hintergrund.png" alt="Hintergrund" width={572} height={572} layout="responsive" />
       </div>
 
       <div className="text-over-image absolute top-1/3 -left-96 right-32 transform -translate-y-1/2">
@@ -44,30 +40,40 @@ const Home: NextPage = () => {
       </div>
 
       <main className="container mx-auto -my-32 p-16 relative mb-8">
-        <section className="grid grid-cols-1 md:grid-cols-3 gap-8">
+        <section className="grid grid-cols-1 md:grid-cols-4 gap-8">
           {projects.map(project => (
-            <div key={project.id} className="bg-secondary p-4 rounded-xl shadow-md w-3/4 mx-auto">
-              <img
+            <div
+              key={project.id}
+              className={`bg-secondary p-4 rounded-xl shadow-md w-full mx-auto ${
+                project.isSpecial ? "bg-special cursor-pointer" : ""
+              }`}
+              style={{ opacity: project.isSpecial ? 0.5 : 1 }}
+              onClick={() => (project.isSpecial ? (window.location.href = "/projektvorschlag") : null)}
+            >
+              <Image
                 src={project.imageUrl}
                 alt={`Project ${project.name}`}
-                className="rounded-md w-full h-auto" // Tailwind CSS Klassen für Breite und Höhe
-                // style={{ width: '100%', height: 'auto' }} // Alternativ Inline-Style
+                width={250}
+                height={150}
+                layout="responsive"
               />
               <h2 className="text-xl font-semibold dark:text-white text-black mt-4">{project.name}</h2>
-              <div className="mt-4">
-                <button
-                  className="bg-accent dark:text-white text-black p-2 rounded hover:bg-primary"
-                  onClick={() => openDonateModal(project.id)}
-                >
-                  Donate
-                </button>
-                <Link
-                  href={getProjectPath(project.name)}
-                  className="bg-primary dark:text-white text-black p-2 rounded ml-2 hover:bg-accent"
-                >
-                  Details
-                </Link>
-              </div>
+              {!project.isSpecial && (
+                <div className="mt-4">
+                  <button
+                    className="bg-accent dark:text-white text-black p-2 rounded hover:bg-primary"
+                    onClick={() => openDonateModal(project.id)}
+                  >
+                    Donate
+                  </button>
+                  <Link
+                    href={getProjectPath(project.name)}
+                    className="bg-primary dark:text-white text-black p-2 rounded ml-2 hover:bg-accent"
+                  >
+                    Details
+                  </Link>
+                </div>
+              )}
             </div>
           ))}
         </section>

diff --git a/packages/nextjs/public/mantacare_logo_bg.png b/packages/nextjs/public/mantacare_logo_bg.png
diff --git a/packages/nextjs/public/next.png b/packages/nextjs/public/next.png
-Original file line number
+Diff line change
@@ Expand Up / @@ -28,7 +28,7 @@ export const menuLinks: HeaderMenuLink[] = [ @@
       },
       {
         label: "Das Projekt",
-        href: "/MantaCare",
+        href: "/mantacare",
       },
     ];
@@ Expand Down @@