Merge pull request #46 from SmartCityFlensburg/feature/add-contact-se…

…ction

feat: add contact section

src/tsx/components/Button.tsx

@@ -5,19 +5,21 @@ interface ButtonProps {
   children: ReactNode;
   ariaLabel: string;
   isExternalLink?: boolean;
+  isDark?: boolean;
 }
 
-const Button: React.FC<ButtonProps> = ({ href, children, ariaLabel, isExternalLink = false }) => {
-    return (
-        <a
-            href={href}
-            aria-label={ariaLabel}
-            target={isExternalLink ? '_blank' : '_self'}
-            className="flex items-center justify-center gap-x-4 rounded-2xl w-max font-semibold px-5 py-2 bg-transparent border border-white text-white group transition-color ease-in-out duration-300 hover:bg-green-light-900 hover:border-green-light-900"
-        >
-            {children}
-        </a>
-    );
+const Button: React.FC<ButtonProps> = ({ href, children, ariaLabel, isExternalLink = false, isDark = false, }) => {
+  return (
+    <a
+      href={href}
+      aria-label={ariaLabel}
+      target={isExternalLink ? '_blank' : '_self'}
+      className={`flex items-center justify-center gap-x-4 rounded-2xl w-max font-semibold px-5 py-2 group transition-color ease-in-out duration-300 text-white hover:bg-green-light-900 hover:border-green-light-900
+        ${isDark ? 'bg-green-dark-900' : 'bg-transparent border border-white'}`}
+    >
+      {children}
+    </a>
+  );
 };
 
 export default Button;

src/tsx/components/sections/Contact.tsx

@@ -0,0 +1,27 @@
+import Button from "../Button";
+
+function Contact() {
+  return (
+    <section className="px-4 max-w-screen-lg mx-auto my-28 md:grid md:grid-cols-2 md:gap-x-10 md:px-6 lg:my-36 xl:max-w-screen-xl xl:my-44">
+        <h2 className="font-lato font-bold text-2xl mb-6 lg:mb-10 lg:text-3xl">
+            Hast du weitere Fragen, Feedback oder ein Anliegen?
+        </h2>
+        <article>
+            <p className="mb-6 lg:mb-10">
+                Konnten deine Fragen nicht beantwortet werden oder hast du möchtest du mehr Informationen erfahren?
+                Bei Fragen, Anregungen oder Anliegen kannst du uns gern kontaktieren.
+                Unser Team wird sich schnellstmöglich bei dir melden.
+            </p>
+
+            <Button href="mailto:[email protected]" ariaLabel="Kontaktiere uns gern per Mail" isDark>
+                <img
+                    src="/assets/svg/socials/mail.svg"
+                    className="w-6 h-6" alt="" loading="lazy"/>
+                <span>Kontakt</span>
+            </Button>
+        </article>
+    </section>
+  );
+}
+
+export default Contact;

src/tsx/layout/Footer.tsx

@@ -13,12 +13,12 @@ function Footer() {
                     Consequat occaecat adipisicing culpa.
                 </p>
                 <div className="flex flex-wrap gap-6 mt-8">
-                    {/* <Button href="mailto:" ariaLabel="Kontaktiere uns gern per Mail">
+                    <Button href="mailto:[email protected]" ariaLabel="Kontaktiere uns gern per Mail">
                         <img
                             src="/assets/svg/socials/mail.svg"
                             className="w-6 h-6" alt="" loading="lazy"/>
                         <span>Kontakt</span>
-                    </Button> */}
+                    </Button>
                     <Button href="https://github.com/SmartCityFlensburg" ariaLabel="Besuche uns auf GitHub" isExternalLink>
                         <img
                             src="/assets/svg/socials/github.svg"

src/tsx/pages/HomePage.tsx

@@ -1,3 +1,4 @@
+import Contact from "../components/sections/Contact";
 import Faq from "./../components/sections/Faq";
 import Introduction from "./../components/sections/Introduction";
 import Process from "./../components/sections/Process";
@@ -10,6 +11,7 @@ function HomePage() {
         <Process />
         <Stakeholder />
         <Faq />
+        <Contact />
     </main>
   );
 }

src/tsx/pages/ProjectPage.tsx

@@ -1,4 +1,5 @@
 import Hero from "../components/Hero";
+import Contact from "../components/sections/Contact";
 
 function ProjectPage() {
     const heroHeadline = "Alles wissenswerte über das Projekt";
@@ -7,6 +8,7 @@ function ProjectPage() {
     return (
         <main>
             <Hero headline={heroHeadline} description={heroDescription} type="project" />
+            <Contact />
         </main>
     );
 }