Merge branch 'develop' into feature/add-advantages-section

.docker/Dockerfile.dev

@@ -9,6 +9,8 @@ RUN yarn build:dev
 
 
 FROM nginx:latest
+RUN rm /etc/nginx/conf.d/default.conf
+COPY .docker/nginx.conf /etc/nginx/conf.d/
 COPY --from=builder-web /app/build/dist /usr/share/nginx/html
 
 EXPOSE 80

.docker/Dockerfile.prod

@@ -9,6 +9,8 @@ RUN yarn build
 
 
 FROM nginx:latest
+RUN rm /etc/nginx/conf.d/default.conf
+COPY .docker/nginx.conf /etc/nginx/conf.d/
 COPY --from=builder-web /app/build/dist /usr/share/nginx/html
 
 EXPOSE 80

.docker/Dockerfile.stage

@@ -9,6 +9,8 @@ RUN yarn build:stage
 
 
 FROM nginx:latest
+RUN rm /etc/nginx/conf.d/default.conf
+COPY .docker/nginx.conf /etc/nginx/conf.d/
 COPY --from=builder-web /app/build/dist /usr/share/nginx/html
 
 EXPOSE 80

.docker/nginx.conf

@@ -0,0 +1,9 @@
+server {
+    listen       80;
+    listen  [::]:80;
+
+    location / {
+        root   /usr/share/nginx/html;
+        try_files $uri $uri/ /index.html;
+    }
+}

k8s/values/develop.yaml

@@ -5,7 +5,7 @@ deployment:
   image:
     repository: ghcr.io/smartcityflensburg/project-website-dev
     pullPolicy: Always
-    tag: "b3f7098"
+    tag: "9df6e67"
 ingress:
   enabled: true
   className: "traefik"

src/data/processSteps.tsx → src/data/processSteps.ts

@@ -3,19 +3,19 @@ export const steps = [
         label: "Konzepterstellung",
         shortName: "Konzept",
         isCurrent: false,
-        description: "Occaecat in dolor eiusmod fugiat. Excepteur proident nostrud aliquip esse ut nostrud in ut esse. Proident ut consequat consequat consectetur magna."
+        description: "Duis proident veniam minim et labore sit ex laboris consequat ea mollit et. Aute ut fugiat ex commodo voluptate nulla esse esse adipisicing fugiat aliqua aliquip nisi. Eu adipisicing nulla culpa velit fugiat ipsum nostrud elit et cupidatat voluptate pariatur in."
     },
     {
         label: "MVP (Minimum Valible Product)",
         shortName: "MVP",
         isCurrent: true,
-        description: "Occaecat in dolor eiusmod fugiat. Excepteur proident nostrud aliquip esse ut nostrud in ut esse. Proident ut consequat consequat consectetur magna."
+        description: "Occaecat in dolor Test Test test eiusmod fugiat. Excepteur proident nostrud aliquip esse ut nostrud in ut esse. Proident ut consequat consequat consectetur magna."
     },
     {
         label: "Projektvorstellung 01",
         shortName: "Vorstellung 01",
         isCurrent: false,
-        description: "Occaecat in dolor eiusmod fugiat. Excepteur proident nostrud aliquip esse ut nostrud in ut esse. Proident ut consequat consequat consectetur magna."
+        description: "Occaecat in dolor eiusmod fugiat. Excepteur proident nostrud aliquip esse ut nostrud in ut esse. Proident ut consequat consequat consectetur magna. Noch mehr und noch mehr und noch mehr Deserunt eu enim laborum deserunt nisi consequat. Laboris aliqua commodo nisi tempor esse."
     },
     {
         label: "Projektvorstellung 02",

src/tsx/App.tsx

@@ -2,7 +2,7 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import HomePage from "./pages/HomePage";
 import ProjectPage from "./pages/ProjectPage";
 
-export default function App() {
+function App() {
   return (
     <BrowserRouter>
       <Routes>
@@ -14,3 +14,5 @@ export default function App() {
     </BrowserRouter>
   );
 }
+
+export default App;

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/components/sections/Hero.tsx

@@ -19,7 +19,7 @@ const Hero: React.FC<HeroProps> = ({ headline, description, type }) => {
     }
 
     return (
-        <section className={`relative overflow-x-hidden before:bg-cover before:w-4/5 before:h-full before:absolute before:-right-4 before:-top-16 before:-z-10 before:bg-no-repeat before:bg-left-top sm:before:-right-10 xl:before:bg-contain xl:before:bg-center
+        <section className={`relative overflow-hidden before:bg-cover before:w-4/5 before:h-[100vh] before:max-h-[45rem] before:absolute before:-right-4 before:-top-16 before:-z-10 before:bg-no-repeat sm:before:-right-10 lg:before:max-h-[55rem] xl:before:w-[70rem] xl:before:-right-40 2xl:before:right-[10%] 2xl:before:bg-contain
             ${type === 'project' ? 'before:bg-background-light-dot' : ''}`}
         >
             <div className="py-28 px-4 max-w-208 mx-auto md:px-6 lg:py-36 xl:py-44 xl:max-w-screen-lg">

src/tsx/components/sections/Process.tsx

@@ -37,8 +37,8 @@ function Process() {
                 className="md:px-2 lg:mx-auto lg:max-w-screen-lg xl:max-w-screen-xl"
             >
                 {steps.map((step, index) => (
-                    <SplideSlide key={index} className="pb-10 lg:w-1/2 lg:even:ml-auto lg:even:mr-0 lg:even:pl-10 lg:pb-0 lg:odd:pr-10">
-                        <div className="relative">
+                    <SplideSlide key={index} className="pb-14 lg:w-1/2 lg:even:ml-auto lg:even:mr-0 lg:even:pl-10 lg:pb-0 lg:odd:pr-10">
+                        <div className="relative h-[85%] lg:h-auto">
                             <ProcessCard
                                 label={step.label}
                                 description={step.description}

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,6 +1,7 @@
 import Advantages from "../components/sections/Advantages";
 import DashboardPreview from "../components/sections/DashboardPreview";
 import Hero from "../components/sections/Hero";
+import Contact from "../components/sections/Contact";
 
 function ProjectPage() {
     const heroHeadline = "Alles wissenswerte über das Projekt";
@@ -11,6 +12,7 @@ function ProjectPage() {
             <Hero headline={heroHeadline} description={heroDescription} type="project" />
             <DashboardPreview />
             <Advantages />
+            <Contact />
         </main>
     );
 }