about

frontend/src/components/homepage/features_about1.css

+.features17-layout349 {
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  align-items: center;
+  flex-direction: column;
+}
+.features17-max-width {
+  gap: var(--dl-space-space-fiveunits);
+  display: flex;
+  align-items: center;
+}
+.features17-image-container {
+  flex: 1;
+  display: flex;
+  position: relative;
+  align-items: center;
+}
+.features17-content {
+  gap: var(--dl-space-space-oneandhalfunits);
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+}
+.features17-section-title {
+  gap: var(--dl-space-space-oneandhalfunits);
+  display: flex;
+  align-self: stretch;
+  align-items: flex-start;
+  flex-direction: column;
+}
+.features17-content1 {
+  gap: var(--dl-space-space-oneandhalfunits);
+  display: flex;
+  align-self: stretch;
+  align-items: flex-start;
+  flex-direction: column;
+}
+@media(max-width: 991px) {
+  .features17-max-width {
+    gap: var(--dl-space-space-twounits);
+    flex-direction: column;
+  }
+}

frontend/src/components/homepage/features_about1.js

+import React from "react";
+
+import PropTypes from "prop-types";
+
+import "./features_about1.css";
+
+const Features17 = (props) => {
+  return (
+    <div className="features17-layout349 thq-section-padding">
+      <div className="features17-max-width thq-section-max-width">
+        <div className="features17-image-container">
+          <img
+            alt={props.feature1ImageAlt}
+            src="/external/HFT-logo-klein-Aplustext.jpg"
+            className="thq-img-ratio-16-9"
+          />
+        </div>
+        <div className="features17-content">
+          <div className="features17-section-title">
+            <span className="thq-body-small">{props.feature1Slogan}</span>
+            <div className="features17-content1">
+              <h2 className="thq-heading-2">{props.feature1Title}</h2>
+              <p className="thq-body-large">{props.feature1Description}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Features17.defaultProps = {
+  feature1Title: "About Us...",
+  feature1ImageSrc: "/external/HFT-logo-klein-Aplustext.jpg",
+  feature1ImageAlt: "Accurate Weather Forecast Image",
+  feature1Description:
+    "We are a group of students from the Bachelor's program 'Digitalisierung und Informationsmanagement' at the University of Applied Sciences Stuttgart. Our common goal is to provide accurate and comprehensive weather data, both historical and current information. These data should be easily accessible to everyone and available for further analysis and applications.",
+};
+
+Features17.propTypes = {
+  feature1Title: PropTypes.string,
+  feature1ImageSrc: PropTypes.string,
+  feature1ImageAlt: PropTypes.string,
+  feature1Description: PropTypes.string,
+};
+
+export default Features17;

frontend/src/components/homepage/features_about2.css

+.features17-layout349 {
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  align-items: center;
+  flex-direction: column;
+}
+.features17-max-width {
+  gap: var(--dl-space-space-fiveunits);
+  display: flex;
+  align-items: center;
+}
+.features17-image-container {
+  flex: 1;
+  display: flex;
+  position: relative;
+  align-items: center;
+}
+.features17-content {
+  gap: var(--dl-space-space-oneandhalfunits);
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+}
+.features17-section-title {
+  gap: var(--dl-space-space-oneandhalfunits);
+  display: flex;
+  align-self: stretch;
+  align-items: flex-start;
+  flex-direction: column;
+}
+.features17-content1 {
+  gap: var(--dl-space-space-oneandhalfunits);
+  display: flex;
+  align-self: stretch;
+  align-items: flex-start;
+  flex-direction: column;
+}
+@media(max-width: 991px) {
+  .features17-max-width {
+    gap: var(--dl-space-space-twounits);
+    flex-direction: column;
+  }
+}

frontend/src/components/homepage/features_about2.js

+import React from "react";
+
+import PropTypes from "prop-types";
+
+import "./features_about2.css";
+
+const Features17 = (props) => {
+  return (
+    <div className="features17-layout349 thq-section-padding">
+      <div className="features17-max-width thq-section-max-width">
+        <div className="features17-content">
+          <div className="features17-section-title">
+            <span className="thq-body-small">{props.feature1Slogan}</span>
+            <div className="features17-content1">
+              <h2 className="thq-heading-2">{props.feature1Title}</h2>
+              <p className="thq-body-large">{props.feature1Description}</p>
+            </div>
+          </div>
+        </div>
+        <div className="features17-image-container">
+          <img
+            alt={props.feature1ImageAlt}
+            src="/external/project.jpg"
+            className="thq-img-ratio-16-9"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Features17.defaultProps = {
+  feature1Title: "Information about the project",
+  feature1ImageSrc: "/external/project.jpg",
+  feature1ImageAlt: "Accurate Weather Forecast Image",
+  feature1Description:
+    "Join us on a fascinating journey through the diverse weather events of recent years. In the business world, data is indispensable, and we provide it to you quickly and free of charge via our website - whether it's accessible locally or stored in a database. With us, you gain access to comprehensive weather data, and we strive to make it easily accessible to everyone. Our platform offers a user-friendly interface to quickly access local weather data, whether for research purposes, business analysis, or simply out of personal interest.",
+};
+
+Features17.propTypes = {
+  feature1Title: PropTypes.string,
+  feature1ImageSrc: PropTypes.string,
+  feature1ImageAlt: PropTypes.string,
+  feature1Description: PropTypes.string,
+};
+
+export default Features17;

frontend/src/views/about.js

@@ -2,6 +2,8 @@ import React from "react";
 
 import Navbar4 from "../components/homepage/navbar4";
 import Footer15 from "../components/homepage/footer15";
+import Features_about1 from "../components/homepage/features_about1";
+import Features_about2 from "../components/homepage/features_about2";
 import "./home.css";
 
 const About = (props) => {
@@ -12,7 +14,12 @@ const About = (props) => {
       <div className="home-navbar1">
         <Navbar4 rootClassName="navbar4-root-class-name"></Navbar4>
       </div>
-
+      <div className="home-features5">
+        <Features_about1></Features_about1>
+      </div>
+      <div className="home-features6">
+        <Features_about2></Features_about2>
+      </div>
       <div className="home-footer11">
         <Footer15></Footer15>
       </div>
@@ -20,4 +27,4 @@ const About = (props) => {
   );
 };
 
-export default About;
\ No newline at end of file
+export default About;