React, Lets go!

frontend/src/components/features18.js

+import React from 'react'
+
+import PropTypes from 'prop-types'
+
+import './features18.css'
+
+const Features18 = (props) => {
+  return (
+    <div className="features18-layout349 thq-section-padding">
+      <div className="features18-max-width thq-section-max-width">
+        <div className="features18-content">
+          <div className="features18-section-title">
+            <span className="thq-body-small">{props.feature1Slogan}</span>
+            <div className="features18-content1">
+              <h2 className="thq-heading-2">{props.feature1Title}</h2>
+              <p className="thq-body-large">{props.feature1Description}</p>
+            </div>
+          </div>
+        </div>
+        <div className="features18-image-container">
+          <img
+            alt={props.feature1ImageAlt}
+            src={props.feature1ImageSrc}
+            className="thq-img-ratio-16-9"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+Features18.defaultProps = {
+  feature1ImageSrc:
+    'https://images.unsplash.com/photo-1480498073050-4c6abeee90c1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w5MTMyMXwwfDF8cmFuZG9tfHx8fHx8fHx8MTcxNTQzMTM1OHw&ixlib=rb-4.0.3&q=80&w=1080',
+  feature1ImageAlt: 'Real-time Weather Updates',
+  feature1Slogan: 'Stay informed with up-to-date weather information',
+  feature1Title: 'Real-time Updates',
+  feature1Description:
+    'Get the latest weather updates for any location instantly',
+}
+
+Features18.propTypes = {
+  feature1ImageSrc: PropTypes.string,
+  feature1ImageAlt: PropTypes.string,
+  feature1Slogan: PropTypes.string,
+  feature1Title: PropTypes.string,
+  feature1Description: PropTypes.string,
+}
+
+export default Features18

frontend/src/components/footer15.css

+.footer15-container {
+  display: flex;
+  position: relative;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+.footer15-max-width {
+  display: flex;
+  flex-direction: column;
+}
+.footer15-content {
+  gap: var(--dl-space-space-twounits);
+  width: 100%;
+  display: flex;
+  align-self: stretch;
+  align-items: flex-start;
+  flex-shrink: 0;
+  padding-top: var(--dl-space-space-twounits);
+  padding-left: 0px;
+  border-radius: var(--dl-radius-radius-radius4);
+  padding-right: 0px;
+  flex-direction: column;
+  padding-bottom: var(--dl-space-space-twounits);
+  justify-content: flex-start;
+}
+.footer15-actions {
+  gap: var(--dl-space-space-oneandhalfunits);
+  width: 100%;
+  display: flex;
+  flex-grow: 1;
+  align-items: flex-start;
+}
+.footer15-newsletter {
+  gap: var(--dl-space-space-oneandhalfunits);
+  width: 50%;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+}
+.footer15-actions1 {
+  gap: 16px;
+  width: 100%;
+  display: flex;
+  align-self: stretch;
+  align-items: flex-start;
+  flex-direction: column;
+}
+.footer15-form {
+  gap: var(--dl-space-space-unit);
+  width: 100%;
+  display: flex;
+  align-self: stretch;
+  align-items: stretch;
+  flex-shrink: 0;
+}
+.footer15-container1 {
+  width: 365px;
+  display: flex;
+  align-items: stretch;
+}
+.footer15-text-input {
+  width: 100%;
+  background-color: transparent;
+}
+.footer15-media {
+  width: 50%;
+  display: flex;
+  align-items: flex-end;
+  flex-direction: column;
+}
+.footer15-container2 {
+  gap: var(--dl-space-space-oneandhalfunits);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+.footer15-image1 {
+  height: 4rem;
+}
+.footer15-social-links {
+  gap: var(--dl-space-space-twounits);
+  display: flex;
+  align-items: flex-start;
+  flex-direction: row;
+}
+.footer15-credits {
+  gap: var(--dl-space-space-oneandhalfunits);
+  width: auto;
+  display: flex;
+  align-self: stretch;
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+.footer15-row {
+  flex: 1;
+  display: flex;
+  align-self: center;
+  align-items: flex-start;
+  flex-shrink: 0;
+  justify-content: space-between;
+}
+.footer15-credits1 {
+  gap: var(--dl-space-space-twounits);
+  flex: 0 0 auto;
+  width: auto;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+.footer15-content3 {
+  align-self: center;
+}
+@media(max-width: 991px) {
+  .footer15-content {
+    flex-direction: row;
+  }
+  .footer15-newsletter {
+    width: 50%;
+  }
+  .footer15-form {
+    width: 100%;
+    flex-direction: column;
+  }
+  .footer15-container1 {
+    width: 100%;
+  }
+  .footer15-button {
+    width: 100%;
+    padding-top: var(--dl-space-space-halfunit);
+    padding-left: var(--dl-space-space-halfunit);
+    padding-right: var(--dl-space-space-halfunit);
+    padding-bottom: var(--dl-space-space-halfunit);
+  }
+  .footer15-media {
+    width: 50%;
+  }
+  .footer15-image1 {
+    height: 4rem;
+  }
+  .footer15-credits {
+    flex-direction: column;
+  }
+  .footer15-row {
+    align-items: center;
+    flex-direction: row;
+    justify-content: center;
+  }
+  .footer15-content3 {
+    align-self: center;
+  }
+}
+@media(max-width: 767px) {
+  .footer15-content {
+    gap: var(--dl-space-space-twounits);
+    width: auto;
+    align-self: stretch;
+    flex-direction: column;
+  }
+  .footer15-actions {
+    width: 100%;
+    align-items: flex-start;
+    flex-direction: column;
+  }
+  .footer15-newsletter {
+    width: 100%;
+  }
+  .footer15-form {
+    width: 100%;
+    flex-direction: row;
+    justify-content: flex-start;
+  }
+  .footer15-container1 {
+    width: 100%;
+  }
+  .footer15-button {
+    width: 208px;
+  }
+  .footer15-media {
+    width: 100%;
+    align-items: center;
+  }
+  .footer15-credits {
+    flex-direction: column;
+  }
+  .footer15-row {
+    padding: 0px;
+    padding-right: 0px;
+    flex-direction: column;
+  }
+  .footer15-credits1 {
+    width: auto;
+    align-self: stretch;
+    justify-content: space-between;
+  }
+}
+@media(max-width: 479px) {
+  .footer15-content {
+    gap: var(--dl-space-space-twounits);
+  }
+  .footer15-newsletter {
+    width: 100%;
+  }
+  .footer15-actions1 {
+    width: 100%;
+  }
+  .footer15-form {
+    width: 100%;
+    flex-direction: column;
+  }
+  .footer15-container1 {
+    width: 100%;
+  }
+  .footer15-button {
+    width: 100%;
+  }
+  .footer15-media {
+    width: 100%;
+  }
+  .footer15-image1 {
+    height: 3rem;
+  }
+  .footer15-social-links {
+    align-items: center;
+    justify-content: center;
+  }
+  .footer15-row {
+    align-items: center;
+    justify-content: center;
+  }
+  .footer15-credits1 {
+    gap: var(--dl-space-space-oneandhalfunits);
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+}

frontend/src/components/footer15.js

+import React from 'react'
+
+import PropTypes from 'prop-types'
+
+import './footer15.css'
+
+const Footer15 = (props) => {
+  return (
+    <div className="footer15-container thq-section-padding">
+      <div className="footer15-max-width thq-section-max-width">
+        <div className="footer15-content">
+          <div className="footer15-actions">
+            <div className="footer15-newsletter">
+              <span className="thq-body-small">{props.content1}</span>
+              <div className="footer15-actions1">
+                <div className="footer15-form">
+                  <div className="footer15-container1">
+                    <input
+                      type="email"
+                      placeholder="Enter your email"
+                      className="footer15-text-input thq-input"
+                    />
+                  </div>
+                  <button className="thq-button-outline footer15-button">
+                    <span className="thq-body-small">{props.action1}</span>
+                  </button>
+                </div>
+                <span className="thq-body-small">{props.content2}</span>
+              </div>
+            </div>
+            <div className="footer15-media">
+              <div className="footer15-container2">
+                <img
+                  alt={props.logoAlt}
+                  src={props.logoSrc}
+                  className="footer15-image1"
+                />
+                <div className="footer15-social-links">
+                  <svg
+                    viewBox="0 0 877.7142857142857 1024"
+                    className="thq-icon-small"
+                  >
+                    <path d="M713.143 73.143c90.857 0 164.571 73.714 164.571 164.571v548.571c0 90.857-73.714 164.571-164.571 164.571h-107.429v-340h113.714l17.143-132.571h-130.857v-84.571c0-38.286 10.286-64 65.714-64l69.714-0.571v-118.286c-12-1.714-53.714-5.143-101.714-5.143-101.143 0-170.857 61.714-170.857 174.857v97.714h-114.286v132.571h114.286v340h-304c-90.857 0-164.571-73.714-164.571-164.571v-548.571c0-90.857 73.714-164.571 164.571-164.571h548.571z"></path>
+                  </svg>
+                  <svg
+                    viewBox="0 0 877.7142857142857 1024"
+                    className="thq-icon-small"
+                  >
+                    <path d="M585.143 512c0-80.571-65.714-146.286-146.286-146.286s-146.286 65.714-146.286 146.286 65.714 146.286 146.286 146.286 146.286-65.714 146.286-146.286zM664 512c0 124.571-100.571 225.143-225.143 225.143s-225.143-100.571-225.143-225.143 100.571-225.143 225.143-225.143 225.143 100.571 225.143 225.143zM725.714 277.714c0 29.143-23.429 52.571-52.571 52.571s-52.571-23.429-52.571-52.571 23.429-52.571 52.571-52.571 52.571 23.429 52.571 52.571zM438.857 152c-64 0-201.143-5.143-258.857 17.714-20 8-34.857 17.714-50.286 33.143s-25.143 30.286-33.143 50.286c-22.857 57.714-17.714 194.857-17.714 258.857s-5.143 201.143 17.714 258.857c8 20 17.714 34.857 33.143 50.286s30.286 25.143 50.286 33.143c57.714 22.857 194.857 17.714 258.857 17.714s201.143 5.143 258.857-17.714c20-8 34.857-17.714 50.286-33.143s25.143-30.286 33.143-50.286c22.857-57.714 17.714-194.857 17.714-258.857s5.143-201.143-17.714-258.857c-8-20-17.714-34.857-33.143-50.286s-30.286-25.143-50.286-33.143c-57.714-22.857-194.857-17.714-258.857-17.714zM877.714 512c0 60.571 0.571 120.571-2.857 181.143-3.429 70.286-19.429 132.571-70.857 184s-113.714 67.429-184 70.857c-60.571 3.429-120.571 2.857-181.143 2.857s-120.571 0.571-181.143-2.857c-70.286-3.429-132.571-19.429-184-70.857s-67.429-113.714-70.857-184c-3.429-60.571-2.857-120.571-2.857-181.143s-0.571-120.571 2.857-181.143c3.429-70.286 19.429-132.571 70.857-184s113.714-67.429 184-70.857c60.571-3.429 120.571-2.857 181.143-2.857s120.571-0.571 181.143 2.857c70.286 3.429 132.571 19.429 184 70.857s67.429 113.714 70.857 184c3.429 60.571 2.857 120.571 2.857 181.143z"></path>
+                  </svg>
+                  <svg
+                    viewBox="0 0 950.8571428571428 1024"
+                    className="thq-icon-small"
+                  >
+                    <path d="M925.714 233.143c-25.143 36.571-56.571 69.143-92.571 95.429 0.571 8 0.571 16 0.571 24 0 244-185.714 525.143-525.143 525.143-104.571 0-201.714-30.286-283.429-82.857 14.857 1.714 29.143 2.286 44.571 2.286 86.286 0 165.714-29.143 229.143-78.857-81.143-1.714-149.143-54.857-172.571-128 11.429 1.714 22.857 2.857 34.857 2.857 16.571 0 33.143-2.286 48.571-6.286-84.571-17.143-148-91.429-148-181.143v-2.286c24.571 13.714 53.143 22.286 83.429 23.429-49.714-33.143-82.286-89.714-82.286-153.714 0-34.286 9.143-65.714 25.143-93.143 90.857 112 227.429 185.143 380.571 193.143-2.857-13.714-4.571-28-4.571-42.286 0-101.714 82.286-184.571 184.571-184.571 53.143 0 101.143 22.286 134.857 58.286 41.714-8 81.714-23.429 117.143-44.571-13.714 42.857-42.857 78.857-81.143 101.714 37.143-4 73.143-14.286 106.286-28.571z"></path>
+                  </svg>
+                  <svg
+                    viewBox="0 0 877.7142857142857 1024"
+                    className="thq-icon-small"
+                  >
+                    <path d="M135.429 808h132v-396.571h-132v396.571zM276 289.143c-0.571-38.857-28.571-68.571-73.714-68.571s-74.857 29.714-74.857 68.571c0 37.714 28.571 68.571 73.143 68.571h0.571c46.286 0 74.857-30.857 74.857-68.571zM610.286 808h132v-227.429c0-121.714-65.143-178.286-152-178.286-70.857 0-102.286 39.429-119.429 66.857h1.143v-57.714h-132s1.714 37.143 0 396.571v0h132v-221.714c0-11.429 0.571-23.429 4-32 9.714-23.429 31.429-48 68-48 47.429 0 66.286 36 66.286 89.714v212zM877.714 237.714v548.571c0 90.857-73.714 164.571-164.571 164.571h-548.571c-90.857 0-164.571-73.714-164.571-164.571v-548.571c0-90.857 73.714-164.571 164.571-164.571h548.571c90.857 0 164.571 73.714 164.571 164.571z"></path>
+                  </svg>
+                  <svg viewBox="0 0 1024 1024" className="thq-icon-small">
+                    <path d="M406.286 644.571l276.571-142.857-276.571-144.571v287.429zM512 152c215.429 0 358.286 10.286 358.286 10.286 20 2.286 64 2.286 102.857 43.429 0 0 31.429 30.857 40.571 101.714 10.857 82.857 10.286 165.714 10.286 165.714v77.714s0.571 82.857-10.286 165.714c-9.143 70.286-40.571 101.714-40.571 101.714-38.857 40.571-82.857 40.571-102.857 42.857 0 0-142.857 10.857-358.286 10.857v0c-266.286-2.286-348-10.286-348-10.286-22.857-4-74.286-2.857-113.143-43.429 0 0-31.429-31.429-40.571-101.714-10.857-82.857-10.286-165.714-10.286-165.714v-77.714s-0.571-82.857 10.286-165.714c9.143-70.857 40.571-101.714 40.571-101.714 38.857-41.143 82.857-41.143 102.857-43.429 0 0 142.857-10.286 358.286-10.286v0z"></path>
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="footer15-credits">
+          <div className="footer15-row">
+            <div className="footer15-credits1">
+              <span className="thq-body-small">{props.privacyLink}</span>
+              <span className="thq-body-small">{props.termsLink}</span>
+              <span className="thq-body-small">{props.cookiesLink}</span>
+            </div>
+          </div>
+          <span className="footer15-content3 thq-body-small">
+            {props.copyright}
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+Footer15.defaultProps = {
+  cookiesLink: 'Cookies',
+  action1: 'Contact Us',
+  copyright: '© 2023 Weather Applikation. All rights reserved.',
+  privacyLink: 'Privacy Policy',
+  termsLink: 'Terms of Use',
+  logoSrc: 'https://presentation-website-assets.teleporthq.io/logos/logo.png',
+  content2: 'Stay updated with the latest weather information.',
+  logoAlt: 'Weather Applikation Logo',
+  content1: 'Get accurate weather forecasts for any location.',
+}
+
+Footer15.propTypes = {
+  cookiesLink: PropTypes.string,
+  action1: PropTypes.string,
+  copyright: PropTypes.string,
+  privacyLink: PropTypes.string,
+  termsLink: PropTypes.string,
+  logoSrc: PropTypes.string,
+  content2: PropTypes.string,
+  logoAlt: PropTypes.string,
+  content1: PropTypes.string,
+}
+
+export default Footer15

frontend/src/components/gallery1.css

+.gallery1-gallery3 {
+  gap: var(--dl-space-space-fiveunits);
+  width: 100%;
+  height: auto;
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  align-items: center;
+  flex-shrink: 0;
+  flex-direction: column;
+}
+.gallery1-max-width {
+  gap: var(--dl-space-space-twounits);
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+.gallery1-section-title {
+  gap: var(--dl-space-space-oneandhalfunits);
+  width: auto;
+  display: flex;
+  max-width: 800px;
+  align-items: center;
+  flex-shrink: 0;
+  flex-direction: column;
+}
+.gallery1-text {
+  text-align: center;
+}
+.gallery1-text1 {
+  text-align: center;
+}
+.gallery1-content {
+  gap: var(--dl-space-space-twounits);
+  width: 100%;
+  display: flex;
+  align-self: stretch;
+  align-items: center;
+  flex-shrink: 0;
+  justify-content: center;
+}
+.gallery1-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.gallery1-container1 {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.gallery1-container2 {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+@media(max-width: 991px) {
+  .gallery1-content {
+    align-items: center;
+    flex-direction: column;
+  }
+}

frontend/src/components/gallery1.js

+import React from 'react'
+
+import PropTypes from 'prop-types'
+
+import './gallery1.css'
+
+const Gallery1 = (props) => {
+  return (
+    <div className="gallery1-gallery3 thq-section-padding">
+      <div className="gallery1-max-width thq-section-max-width">
+        <div className="gallery1-section-title">
+          <h2 className="gallery1-text thq-heading-2">{props.heading1}</h2>
+          <span className="gallery1-text1 thq-body-large">
+            {props.content1}
+          </span>
+        </div>
+        <div className="gallery1-content">
+          <div className="gallery1-container">
+            <img
+              alt={props.image1Alt}
+              src={props.image1Src}
+              className="thq-img-ratio-4-3"
+            />
+          </div>
+          <div className="gallery1-container1">
+            <img
+              alt={props.image2Alt}
+              src={props.image2Src}
+              className="thq-img-ratio-4-3"
+            />
+          </div>
+          <div className="gallery1-container2">
+            <img
+              alt={props.image3Alt}
+              src={props.image3Src}
+              className="thq-img-ratio-4-3"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+Gallery1.defaultProps = {
+  image3Src:
+    'https://images.unsplash.com/photo-1604420958310-273dbd024b4e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w5MTMyMXwwfDF8cmFuZG9tfHx8fHx8fHx8MTcxNTQzMTM1OHw&ixlib=rb-4.0.3&q=80&w=1080',
+  content1:
+    'Explore different weather conditions through images from around the world.',
+  image1Src:
+    'https://images.unsplash.com/photo-1601027191903-f97442c175c2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w5MTMyMXwwfDF8cmFuZG9tfHx8fHx8fHx8MTcxNTQzMTM1OHw&ixlib=rb-4.0.3&q=80&w=1080',
+  image3Alt: 'Snowy landscape in the countryside',
+  image2Alt: 'Rainy day in the city',
+  image2Src:
+    'https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w5MTMyMXwwfDF8cmFuZG9tfHx8fHx8fHx8MTcxNTQzMTM1OXw&ixlib=rb-4.0.3&q=80&w=1080',
+  heading1: 'Photo Gallery of the Services you provide',
+  image1Alt: 'City skyline under clear sky',
+}
+
+Gallery1.propTypes = {
+  image3Src: PropTypes.string,
+  content1: PropTypes.string,
+  image1Src: PropTypes.string,
+  image3Alt: PropTypes.string,
+  image2Alt: PropTypes.string,
+  image2Src: PropTypes.string,
+  heading1: PropTypes.string,
+  image1Alt: PropTypes.string,
+}
+
+export default Gallery1

frontend/src/components/hero3.css

+.hero3-header9 {
+  width: 100%;
+  display: flex;
+  position: relative;
+  align-items: center;
+  flex-direction: column;
+}
+.hero3-content {
+  display: flex;
+  justify-content: center;
+}
+.hero3-max-width {
+  align-self: center;
+  align-items: center;
+}
+.hero3-column {
+  flex: 1;
+  width: auto;
+  display: flex;
+  align-items: flex-start;
+  flex-shrink: 0;
+  flex-direction: column;
+}
+.hero3-column1 {
+  gap: var(--dl-space-space-twounits);
+  flex: 1;
+  width: auto;
+  display: flex;
+  align-items: flex-start;
+  flex-shrink: 0;
+  flex-direction: column;
+}
+.hero3-actions {
+  gap: var(--dl-space-space-unit);
+  display: flex;
+  align-items: flex-start;
+}
+@media(max-width: 991px) {
+  .hero3-column {
+    width: 100%;
+  }
+  .hero3-column1 {
+    width: auto;
+  }
+}
+@media(max-width: 767px) {
+  .hero3-text {
+    text-align: center;
+  }
+  .hero3-text1 {
+    text-align: center;
+  }
+  .hero3-actions {
+    width: 100%;
+    justify-content: center;
+  }
+}
+@media(max-width: 479px) {
+  .hero3-actions {
+    flex-direction: column;
+  }
+  .hero3-button {
+    width: 100%;
+  }
+  .hero3-button1 {
+    width: 100%;
+    padding-left: var(--dl-space-space-oneandhalfunits);
+    padding-right: var(--dl-space-space-oneandhalfunits);
+  }
+}

frontend/src/components/hero3.js

+import React from 'react'
+
+import PropTypes from 'prop-types'
+
+import './hero3.css'
+
+const Hero3 = (props) => {
+  return (
+    <div className="hero3-header9">
+      <img
+        alt={props.placeholderImageAlt}
+        src={props.placeholderImageSrc}
+        className="thq-img-ratio-16-9"
+      />
+      <div className="hero3-content thq-section-padding">
+        <div className="hero3-max-width thq-section-max-width thq-flex-row">
+          <div className="hero3-column">
+            <h1 className="thq-heading-1 hero3-text">{props.heading1}</h1>
+          </div>
+          <div className="hero3-column1">
+            <p className="thq-body-large hero3-text1">{props.content1}</p>
+            <div className="hero3-actions">
+              <button className="thq-button-filled hero3-button">
+                <span className="thq-body-small">{props.action1}</span>
+              </button>
+              <button className="thq-button-outline hero3-button1">
+                <span className="thq-body-small">{props.action2}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+Hero3.defaultProps = {
+  image1Alt: 'Weather App Hero Image',
+  content1: 'Get real-time weather updates for any city or location worldwide',
+  action2: 'Get Started',
+  heading1: 'Plan Your Day with Accurate Weather Forecasts',
+  action1: 'Learn More',
+  image1Src:
+    'https://images.unsplash.com/photo-1569742152946-b802f045df68?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w5MTMyMXwwfDF8cmFuZG9tfHx8fHx8fHx8MTcxNTQzMTM1OHw&ixlib=rb-4.0.3&q=80&w=1080',
+  placeholderImageSrc:
+    'https://images.unsplash.com/photo-1500674425229-f692875b0ab7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w5MTMyMXwwfDF8cmFuZG9tfHx8fHx8fHx8MTcxNTQzMjgxOXw&ixlib=rb-4.0.3&q=80&w=1080',
+  placeholderImageAlt: 'Weather app hero image',
+}
+
+Hero3.propTypes = {
+  image1Alt: PropTypes.string,
+  content1: PropTypes.string,
+  action2: PropTypes.string,
+  heading1: PropTypes.string,
+  action1: PropTypes.string,
+  image1Src: PropTypes.string,
+  placeholderImageSrc: PropTypes.string,
+  placeholderImageAlt: PropTypes.string,
+}
+
+export default Hero3

frontend/src/components/logos1.css

+.logos1-container {
+  gap: var(--dl-space-space-threeunits);
+  width: 100%;
+  display: flex;
+  position: relative;
+  align-items: center;
+  flex-direction: column;
+}
+.logos1-max-width {
+  gap: var(--dl-space-space-twounits);
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+.logos1-text {
+  text-align: center;
+}
+.logos1-logo1 {
+  object-fit: contain;
+}
+.logos1-logo2 {
+  object-fit: contain;
+}
+.logos1-logo3 {
+  object-fit: contain;
+}
+.logos1-logo4 {
+  object-fit: contain;
+}
+.logos1-logo5 {
+  object-fit: contain;
+}
+.logos1-logo6 {
+  object-fit: contain;
+}
+@media(max-width: 767px) {
+  .logos1-container {
+    gap: var(--dl-space-space-twounits);
+  }
+  .logos1-max-width {
+    gap: var(--dl-space-space-twounits);
+  }
+}

frontend/src/components/logos1.js

+import React from 'react'
+
+import PropTypes from 'prop-types'
+
+import './logos1.css'
+
+const Logos1 = (props) => {
+  return (
+    <div className="logos1-container thq-section-padding">
+      <div className="logos1-max-width thq-section-max-width">
+        <h2 className="logos1-text thq-heading-2">{props.heading1}</h2>
+        <div className="thq-grid-6">
+          <img
+            alt={props.logo1Alt}
+            src={props.logo1Src}
+            className="logos1-logo1 thq-img-ratio-16-9"
+          />
+          <img
+            alt={props.logo2Alt}
+            src={props.logo2Src}
+            className="logos1-logo2 thq-img-ratio-16-9"
+          />
+          <img
+            alt={props.logo3Alt}
+            src={props.logo3Src}
+            className="logos1-logo3 thq-img-ratio-16-9"
+          />
+          <img
+            alt={props.logo4Alt}
+            src={props.logo4Src}
+            className="logos1-logo4 thq-img-ratio-16-9"
+          />
+          <img
+            alt={props.logo5Alt}
+            src={props.logo5Src}
+            className="logos1-logo5 thq-img-ratio-16-9"
+          />
+          <img
+            alt={props.logo6Alt}
+            src={props.logo6Src}
+            className="logos1-logo6 thq-img-ratio-16-9"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+Logos1.defaultProps = {
+  logo2Alt: 'Logo2',
+  heading1:
+    "Trusted by the world's best companies social proof to build credibility",
+  logo1Src:
+    'https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/84ec08e8-34e9-42c7-9445-d2806d156403/838a2368-6357-4526-a3f3-57fee519d8ec?org_if_sml=1&q=80&force_format=original',
+  logo3Alt: 'Logo3',
+  logo4Alt: 'Logo4',
+  logo5Src:
+    'https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/84ec08e8-34e9-42c7-9445-d2806d156403/97476fa7-08ff-463d-99d2-c4ceb6ae9222?org_if_sml=1&q=80&force_format=original',
+  logo4Src:
+    'https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/84ec08e8-34e9-42c7-9445-d2806d156403/c78f8e14-cf7b-4e8b-821c-3d6b89ed8db4?org_if_sml=1&q=80&force_format=original',
+  logo3Src:
+    'https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/84ec08e8-34e9-42c7-9445-d2806d156403/49215785-2559-40a7-be66-9dd3bdf5eb7a?org_if_sml=1&q=80&force_format=original',
+  logo5Alt: 'Logo5',
+  logo6Alt: 'Logo6',
+  logo6Src:
+    'https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/84ec08e8-34e9-42c7-9445-d2806d156403/07f56a12-c428-4896-8819-194d1fef39f2?org_if_sml=1&q=80&force_format=original',
+  logo1Alt: 'Weather App Logo',
+  logo2Src:
+    'https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/84ec08e8-34e9-42c7-9445-d2806d156403/2cf31efa-183b-4247-920e-60025ea69bfe?org_if_sml=1&q=80&force_format=original',
+}
+
+Logos1.propTypes = {
+  logo2Alt: PropTypes.string,
+  heading1: PropTypes.string,
+  logo1Src: PropTypes.string,
+  logo3Alt: PropTypes.string,
+  logo4Alt: PropTypes.string,
+  logo5Src: PropTypes.string,
+  logo4Src: PropTypes.string,
+  logo3Src: PropTypes.string,
+  logo5Alt: PropTypes.string,
+  logo6Alt: PropTypes.string,
+  logo6Src: PropTypes.string,
+  logo1Alt: PropTypes.string,
+  logo2Src: PropTypes.string,
+}
+
+export default Logos1

frontend/src/components/navbar4.css

+.navbar4-container {
+  width: 100%;
+  display: flex;
+  position: relative;
+  justify-content: center;
+  background-color: var(--dl-color-theme-neutral-light);
+}
+.navbar4-navbar-interactive {
+  width: 100%;
+  display: flex;
+  max-width: var(--dl-size-size-maxwidth);
+  align-items: center;
+  padding-top: var(--dl-space-space-twounits);
+  padding-left: var(--dl-space-space-threeunits);
+  padding-right: var(--dl-space-space-threeunits);
+  padding-bottom: var(--dl-space-space-twounits);
+  justify-content: flex-start;
+}
+.navbar4-image1 {
+  height: 3rem;
+}
+.navbar4-desktop-menu {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+}
+.navbar4-links {
+  gap: var(--dl-space-space-twounits);
+  flex: 1;
+  display: flex;
+  align-items: center;
+  margin-left: var(--dl-space-space-twounits);
+  flex-direction: row;
+  justify-content: flex-start;
+}
+.navbar4-buttons {
+  gap: var(--dl-space-space-twounits);
+  display: flex;
+  align-items: center;
+  margin-left: var(--dl-space-space-twounits);
+}
+.navbar4-burger-menu {
+  display: none;
+}
+.navbar4-icon {
+  width: var(--dl-size-size-xsmall);
+  height: var(--dl-size-size-xsmall);
+}
+.navbar4-mobile-menu {
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100vh;
+  display: none;
+  padding: var(--dl-space-space-twounits);
+  z-index: 100;
+  position: absolute;
+  flex-direction: column;
+  background-color: var(--dl-color-theme-neutral-light);
+}
+.navbar4-nav {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+}
+.navbar4-top {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--dl-space-space-threeunits);
+  justify-content: space-between;
+}
+.navbar4-logo {
+  height: 3rem;
+}
+.navbar4-close-menu {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.navbar4-icon2 {
+  width: var(--dl-size-size-xsmall);
+  height: var(--dl-size-size-xsmall);
+}
+.navbar4-links1 {
+  gap: var(--dl-space-space-unit);
+  flex: 0 0 auto;
+  display: flex;
+  align-self: flex-start;
+  align-items: flex-start;
+  flex-direction: column;
+}
+.navbar4-buttons1 {
+  gap: var(--dl-space-space-twounits);
+  display: flex;
+  margin-top: var(--dl-space-space-twounits);
+  align-items: center;
+}
+.navbar4-root-class-name {
+  top: 0px;
+  left: 0px;
+  position: static;
+}
+@media(max-width: 767px) {
+  .navbar4-navbar-interactive {
+    padding-left: var(--dl-space-space-twounits);
+    padding-right: var(--dl-space-space-twounits);
+  }
+  .navbar4-desktop-menu {
+    display: none;
+  }
+  .navbar4-burger-menu {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+@media(max-width: 479px) {
+  .navbar4-navbar-interactive {
+    padding: var(--dl-space-space-unit);
+  }
+  .navbar4-mobile-menu {
+    padding: var(--dl-space-space-unit);
+  }
+}

frontend/src/components/navbar4.js

+import React from 'react'
+
+import PropTypes from 'prop-types'
+
+import './navbar4.css'
+
+const Navbar4 = (props) => {
+  return (
+    <div className={`navbar4-container ${props.rootClassName} `}>
+      <header data-thq="thq-navbar" className="navbar4-navbar-interactive">
+        <img
+          alt={props.logoAlt}
+          src="/external/whatsapp%20bild%202024-03-19%20um%2017.00.17_eac967f9-1500h.jpg"
+          className="navbar4-image1"
+        />
+        <div data-thq="thq-navbar-nav" className="navbar4-desktop-menu">
+          <nav className="navbar4-links">
+            <span className="thq-link thq-body-small">{props.link1}</span>
+            <span className="thq-link thq-body-small">{props.link2}</span>
+            <span className="thq-link thq-body-small">{props.link3}</span>
+            <span className="thq-link thq-body-small">{props.link4}</span>
+            <span className="thq-link thq-body-small">{props.link5}</span>
+          </nav>
+          <div className="navbar4-buttons">
+            <button className="thq-button-filled">{props.action1}</button>
+            <button className="thq-button-outline">{props.action2}</button>
+          </div>
+        </div>
+        <div data-thq="thq-burger-menu" className="navbar4-burger-menu">
+          <svg viewBox="0 0 1024 1024" className="navbar4-icon">
+            <path
+              d="M128 554.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM128 298.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM128 810.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667z"
+              className=""
+            ></path>
+          </svg>
+        </div>
+        <div data-thq="thq-mobile-menu" className="navbar4-mobile-menu">
+          <div className="navbar4-nav">
+            <div className="navbar4-top">
+              <img
+                alt={props.logoAlt}
+                src={props.logoSrc}
+                className="navbar4-logo"
+              />
+              <div data-thq="thq-close-menu" className="navbar4-close-menu">
+                <svg viewBox="0 0 1024 1024" className="navbar4-icon2">
+                  <path
+                    d="M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z"
+                    className=""
+                  ></path>
+                </svg>
+              </div>
+            </div>
+            <nav className="navbar4-links1">
+              <span className="thq-link thq-body-small">{props.link1}</span>
+              <span className="thq-link thq-body-small">{props.link2}</span>
+              <span className="thq-link thq-body-small">{props.link3}</span>
+              <span className="thq-link thq-body-small">{props.link4}</span>
+              <span className="thq-link thq-body-small">{props.link5}</span>
+            </nav>
+          </div>
+          <div className="navbar4-buttons1">
+            <button className="thq-button-filled">Login</button>
+            <button className="thq-button-outline">Register</button>
+          </div>
+        </div>
+      </header>
+    </div>
+  )
+}
+
+Navbar4.defaultProps = {
+  link5: 'Link5',
+  link4: 'Link4',
+  link3: 'Contact',
+  link2: 'About',
+  link1: 'Home',
+  logoAlt: 'Weather App',
+  logoSrc:
+    'https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/84ec08e8-34e9-42c7-9445-d2806d156403/fac575ac-7a41-484f-b7ac-875042de11f8?org_if_sml=1&force_format=original',
+  action2: '/about',
+  action1: '/',
+  imageSrc: '23887698-7562-4cff-bf5f-d07a1767f79b',
+  imageAlt: 'image',
+  imageSrc1: '23887698-7562-4cff-bf5f-d07a1767f79b',
+  imageAlt1: 'image',
+  image1Src:
+    'https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/84ec08e8-34e9-42c7-9445-d2806d156403/fac575ac-7a41-484f-b7ac-875042de11f8?org_if_sml=1&force_format=original',
+  rootClassName: '',
+}
+
+Navbar4.propTypes = {
+  link5: PropTypes.string,
+  link4: PropTypes.string,
+  link3: PropTypes.string,
+  link2: PropTypes.string,
+  link1: PropTypes.string,
+  logoAlt: PropTypes.string,
+  logoSrc: PropTypes.string,
+  action2: PropTypes.string,
+  action1: PropTypes.string,
+  imageSrc: PropTypes.string,
+  imageAlt: PropTypes.string,
+  imageSrc1: PropTypes.string,
+  imageAlt1: PropTypes.string,
+  image1Src: PropTypes.string,
+  rootClassName: PropTypes.string,
+}
+
+export default Navbar4

frontend/src/index.js

+import React from 'react'
+import ReactDOM from 'react-dom'
+import {
+  BrowserRouter as Router,
+  Route,
+  Switch,
+  Redirect,
+} from 'react-router-dom'
+
+import './style.css'
+import Home from './views/home'
+import NotFound from './views/not-found'
+
+const App = () => {
+  return (
+    <Router>
+      <Switch>
+        <Route component={Home} exact path="/" />
+        <Route component={NotFound} path="**" />
+        <Redirect to="**" />
+      </Switch>
+    </Router>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('app'))

frontend/src/style.css

+:root {
+  --dl-size-size-large: 144px;
+  --dl-size-size-small: 48px;
+  --dl-size-size-medium: 96px;
+  --dl-size-size-xlarge: 192px;
+  --dl-size-size-xsmall: 16px;
+  --dl-space-space-unit: 16px;
+  --dl-size-size-xxlarge: 288px;
+  --dl-size-size-maxwidth: 1400px;
+  --dl-color-theme-accent1: #C9E8FF;
+  --dl-color-theme-accent2: #B2D1E6;
+  --dl-radius-radius-round: 50%;
+  --dl-color-theme-primary1: #147487;
+  --dl-color-theme-primary2: #0A3A44;
+  --dl-space-space-halfunit: 8px;
+  --dl-space-space-sixunits: 96px;
+  --dl-space-space-twounits: 32px;
+  --dl-radius-radius-radius2: 2px;
+  --dl-radius-radius-radius4: 4px;
+  --dl-radius-radius-radius8: 8px;
+  --dl-space-space-fiveunits: 80px;
+  --dl-space-space-fourunits: 64px;
+  --dl-color-theme-secondary1: #A9D5DD;
+  --dl-color-theme-secondary2: #8FC1D4;
+  --dl-space-space-threeunits: 48px;
+  --dl-color-theme-neutral-dark: #F5F4F4;
+  --dl-radius-radius-cardradius: 8px;
+  --dl-color-theme-neutral-light: #222222;
+  --dl-radius-radius-imageradius: 8px;
+  --dl-radius-radius-inputradius: 24px;
+  --dl-radius-radius-buttonradius: 24px;
+  --dl-space-space-oneandhalfunits: 24px;
+}
+.button {
+  color: var(--dl-color-theme-neutral-dark);
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  border-color: var(--dl-color-theme-neutral-dark);
+  border-width: 1px;
+  border-radius: 4px;
+  background-color: var(--dl-color-theme-neutral-light);
+}
+.input {
+  color: var(--dl-color-theme-neutral-dark);
+  cursor: auto;
+  padding: 0.5rem 1rem;
+  border-color: var(--dl-color-theme-neutral-dark);
+  border-width: 1px;
+  border-radius: 4px;
+  background-color: var(--dl-color-theme-neutral-light);
+}
+.textarea {
+  color: var(--dl-color-theme-neutral-dark);
+  cursor: auto;
+  padding: 0.5rem;
+  border-color: var(--dl-color-theme-neutral-dark);
+  border-width: 1px;
+  border-radius: 4px;
+  background-color: var(--dl-color-theme-neutral-light);
+}
+.list {
+  width: 100%;
+  margin: 1em 0px 1em 0px;
+  display: block;
+  padding: 0px 0px 0px 1.5rem;
+  list-style-type: none;
+  list-style-position: outside;
+}
+.list-item {
+  display: list-item;
+}
+.teleport-show {
+  display: flex !important;
+}
+.thq-input {
+  color: var(--dl-color-theme-neutral-dark);
+  cursor: auto;
+  padding: 0.5rem 1rem;
+  align-self: stretch;
+  text-align: center;
+  border-color: var(--dl-color-theme-neutral-dark);
+  border-width: 1px;
+  border-radius: var(--dl-radius-radius-inputradius);
+  background-color: var(--dl-color-theme-neutral-light);
+}
+.thq-button-filled {
+  color: var(--dl-color-theme-secondary1);
+  cursor: pointer;
+  transition: 0.3s;
+  font-family: Noto Sans;
+  font-weight: bold;
+  padding-top: var(--dl-space-space-halfunit);
+  white-space: nowrap;
+  border-color: var(--dl-color-theme-primary1);
+  padding-left: var(--dl-space-space-oneandhalfunits);
+  border-radius: var(--dl-radius-radius-buttonradius);
+  padding-right: var(--dl-space-space-oneandhalfunits);
+  padding-bottom: var(--dl-space-space-halfunit);
+  background-color: var(--dl-color-theme-primary1);
+}
+.thq-button-filled:hover {
+  color: var(--dl-color-theme-secondary2);
+  border-color: var(--dl-color-theme-primary2);
+  background-color: var(--dl-color-theme-primary2);
+}
+.thq-button-outline {
+  fill: var(--dl-color-theme-primary1);
+  color: var(--dl-color-theme-primary1);
+  border: 1px solid;
+  cursor: pointer;
+  transition: 0.3s;
+  font-weight: bold;
+  padding-top: var(--dl-space-space-halfunit);
+  white-space: nowrap;
+  border-color: var(--dl-color-theme-primary1);
+  padding-left: var(--dl-space-space-oneandhalfunits);
+  border-radius: var(--dl-radius-radius-buttonradius);
+  padding-right: var(--dl-space-space-oneandhalfunits);
+  padding-bottom: var(--dl-space-space-halfunit);
+}
+.thq-button-outline:hover {
+  fill: var(--dl-color-theme-secondary2);
+  color: var(--dl-color-theme-secondary2);
+  background-color: var(--dl-color-theme-primary2);
+}
+.thq-button-flat {
+  gap: var(--dl-space-space-halfunit);
+  fill: var(--dl-color-theme-primary1);
+  color: var(--dl-color-theme-primary1);
+  cursor: pointer;
+  display: flex;
+  transition: 0.3s;
+  align-items: center;
+  font-family: Noto Sans;
+  font-weight: bold;
+  padding-top: var(--dl-space-space-halfunit);
+  padding-left: var(--dl-space-space-oneandhalfunits);
+  border-radius: var(--dl-radius-radius-buttonradius);
+  padding-right: var(--dl-space-space-oneandhalfunits);
+  padding-bottom: var(--dl-space-space-halfunit);
+}
+.thq-button-flat:hover {
+  fill: var(--dl-color-theme-secondary1);
+  color: var(--dl-color-theme-secondary1);
+  border-color: var(--dl-color-theme-primary2);
+  background-color: var(--dl-color-theme-primary2);
+}
+.thq-heading-1 {
+  font-size: 48px;
+  font-family: PT Serif;
+  font-weight: 700;
+  line-height: 1.5;
+}
+.thq-heading-2 {
+  font-size: 35px;
+  font-family: PT Serif;
+  font-weight: 600;
+  line-height: 1.5;
+}
+.thq-heading-3 {
+  font-size: 26px;
+  font-family: PT Serif;
+  font-weight: 600;
+  line-height: 1.5;
+}
+.thq-body-large {
+  font-size: 18px;
+  line-height: 1.5;
+}
+.thq-body-small {
+  font-size: 16px;
+  line-height: 1.5;
+}
+.thq-team-image-round {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  border-radius: 50%;
+}
+.thq-section-padding {
+  width: 100%;
+  display: flex;
+  padding: var(--dl-space-space-fiveunits);
+  position: relative;
+  align-items: center;
+  flex-direction: column;
+}
+.thq-section-max-width {
+  width: 100%;
+  max-width: var(--dl-size-size-maxwidth);
+}
+.thq-img-ratio-1-1 {
+  width: 100%;
+  object-fit: cover;
+  aspect-ratio: 1/1;
+  border-radius: var(--dl-radius-radius-imageradius);
+}
+.thq-img-ratio-16-9 {
+  width: 100%;
+  object-fit: cover;
+  aspect-ratio: 16/9;
+  border-radius: var(--dl-radius-radius-imageradius);
+}
+.thq-img-ratio-4-3 {
+  width: 100%;
+  object-fit: cover;
+  aspect-ratio: 4/3;
+  border-radius: var(--dl-radius-radius-imageradius);
+}
+.thq-img-ratio-4-6 {
+  width: 100%;
+  object-fit: cover;
+  aspect-ratio: 4/6;
+  border-radius: var(--dl-radius-radius-imageradius);
+}
+.thq-img-round {
+  width: 100%;
+  border-radius: var(--dl-radius-radius-round);
+}
+.thq-flex-column {
+  gap: var(--dl-space-space-twounits);
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  align-items: center;
+  flex-direction: column;
+}
+.thq-flex-row {
+  gap: var(--dl-space-space-twounits);
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  align-items: center;
+}
+.thq-grid-6 {
+  display: grid;
+  grid-gap: var(--dl-space-space-twounits);
+  place-items: center;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+}
+.thq-grid-5 {
+  display: grid;
+  grid-gap: var(--dl-space-space-twounits);
+  place-items: center;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+}
+.thq-card {
+  gap: var(--dl-space-space-oneandhalfunits);
+  display: flex;
+  padding: var(--dl-space-space-twounits);
+  align-items: stretch;
+  border-radius: var(--dl-radius-radius-cardradius);
+  flex-direction: column;
+}
+.thq-box-shadow {
+  box-shadow: 5px 5px 10px 0px #d4d4d4;
+}
+.thq-grid-3 {
+  display: grid;
+  grid-gap: var(--dl-space-space-twounits);
+  place-items: center;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+.thq-grid-4 {
+  display: grid;
+  grid-gap: var(--dl-space-space-twounits);
+  place-items: center;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+.thq-grid-2 {
+  width: 100%;
+  display: grid;
+  grid-gap: var(--dl-space-space-twounits);
+  place-items: center;
+  grid-template-columns: 1fr 1fr;
+}
+.thq-checkbox {
+  width: var(--dl-size-size-xsmall);
+  height: var(--dl-size-size-xsmall);
+}
+.thq-select {
+  cursor: pointer;
+  appearance: none;
+  padding-top: var(--dl-space-space-halfunit);
+  padding-left: var(--dl-space-space-unit);
+  border-radius: var(--dl-radius-radius-inputradius);
+  padding-right: var(--dl-space-space-twounits);
+  padding-bottom: var(--dl-space-space-halfunit);
+  background-color: var(--dl-color-theme-neutral-light);
+  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg width%3D%2220%22 height%3D%2220%22 xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 20 20%22 fill%3D%22%23000%22%3E%3Cpath d%3D%22M4.293 7.293a1 1 0 011.414 0L10 11.586l4.293-4.293a1 1 0 111.414 1.414l-5 5a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414z%22/%3E%3C/svg%3E');
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+}
+.thq-divider-horizontal {
+  width: 100%;
+  height: 1px;
+  background-color: var(--dl-color-theme-neutral-dark);
+}
+.thq-icon-small {
+  width: 24px;
+  height: 24px;
+}
+.thq-button-icon {
+  fill: var(--dl-color-theme-secondary1);
+  padding: var(--dl-space-space-halfunit);
+  transition: 0.3s;
+  font-family: Noto Sans;
+  border-radius: var(--dl-radius-radius-buttonradius);
+}
+.thq-button-icon:hover {
+  fill: var(--dl-color-theme-secondary2);
+}
+.thq-icon-medium {
+  width: var(--dl-size-size-small);
+  height: var(--dl-size-size-small);
+}
+.thq-icon-x-small {
+  width: var(--dl-size-size-xsmall);
+  height: var(--dl-size-size-xsmall);
+}
+.thq-link {
+  cursor: pointer;
+  transition: 0.3s;
+  font-weight: 600;
+}
+.thq-link:hover {
+  opacity: 0.8;
+}
+.thq-input::placeholder {
+  text-align: center;
+  vertical-align: middle;
+}
+.Content {
+  font-size: 16px;
+  font-family: Inter Tight;
+  font-weight: 400;
+  line-height: 1.15;
+  text-transform: none;
+  text-decoration: none;
+}
+@media(max-width: 991px) {
+  .thq-flex-row {
+    flex-direction: column;
+  }
+  .thq-grid-4 {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
+@media(max-width: 767px) {
+  .thq-section-padding {
+    padding: var(--dl-space-space-threeunits);
+  }
+  .thq-flex-column {
+    gap: var(--dl-space-space-oneandhalfunits);
+  }
+  .thq-flex-row {
+    gap: var(--dl-space-space-oneandhalfunits);
+  }
+  .thq-grid-6 {
+    grid-gap: var(--dl-space-space-oneandhalfunits);
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+  .thq-grid-5 {
+    grid-gap: var(--dl-space-space-oneandhalfunits);
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+  .thq-card {
+    padding: var(--dl-space-space-oneandhalfunits);
+  }
+  .thq-grid-3 {
+    grid-gap: var(--dl-space-space-oneandhalfunits);
+    grid-template-columns: 1fr 1fr;
+  }
+  .thq-grid-4 {
+    grid-gap: var(--dl-space-space-oneandhalfunits);
+    flex-direction: row;
+    grid-template-columns: 1fr 1fr;
+  }
+  .thq-grid-2 {
+    grid-gap: var(--dl-space-space-oneandhalfunits);
+    grid-template-columns: 1fr;
+  }
+}
+@media(max-width: 479px) {
+  .thq-section-padding {
+    padding: var(--dl-space-space-oneandhalfunits);
+  }
+  .thq-flex-column {
+    gap: var(--dl-space-space-unit);
+  }
+  .thq-flex-row {
+    gap: var(--dl-space-space-unit);
+  }
+  .thq-grid-6 {
+    grid-gap: var(--dl-space-space-unit);
+    grid-template-columns: 1fr 1fr;
+  }
+  .thq-grid-5 {
+    grid-gap: var(--dl-space-space-unit);
+    grid-template-columns: 1fr 1fr;
+  }
+  .thq-grid-3 {
+    grid-gap: var(--dl-space-space-unit);
+    align-items: center;
+    grid-template-columns: 1fr;
+  }
+  .thq-grid-4 {
+    grid-gap: var(--dl-space-space-unit);
+    align-items: center;
+    flex-direction: column;
+    grid-template-columns: 1fr;
+  }
+  .thq-grid-2 {
+    grid-gap: var(--dl-space-space-unit);
+  }
+}

frontend/src/views/home.css

+.home-container {
+  width: 100%;
+  display: flex;
+  overflow: auto;
+  min-height: 100vh;
+  align-items: center;
+  flex-direction: column;
+}
+.home-navbar1 {
+  flex: 0 0 auto;
+  width: 100%;
+  height: auto;
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+}
+.home-hero2 {
+  flex: 0 0 auto;
+  width: 100%;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.home-logos3 {
+  flex: 0 0 auto;
+  width: 100%;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.home-gallery4 {
+  flex: 0 0 auto;
+  width: 100%;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.home-features5 {
+  flex: 0 0 auto;
+  width: 100%;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.home-features6 {
+  flex: 0 0 auto;
+  width: 100%;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.home-features7 {
+  flex: 0 0 auto;
+  width: 100%;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.home-cta8 {
+  flex: 0 0 auto;
+  width: 100%;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.home-faq9 {
+  flex: 0 0 auto;
+  width: 100%;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.home-contact10 {
+  flex: 0 0 auto;
+  width: 100%;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.home-footer11 {
+  flex: 0 0 auto;
+  width: 100%;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

frontend/src/views/home.js

+import React from 'react'
+
+import { Helmet } from 'react-helmet'
+
+import Navbar4 from '../components/navbar4'
+import Hero3 from '../components/hero3'
+import Logos1 from '../components/logos1'
+import Gallery1 from '../components/gallery1'
+import Features17 from '../components/features17'
+import Features18 from '../components/features18'
+import Features171 from '../components/features171'
+import CTA1 from '../components/cta1'
+import FAQ1 from '../components/faq1'
+import Contact4 from '../components/contact4'
+import Footer15 from '../components/footer15'
+import './home.css'
+
+const Home = (props) => {
+  return (
+    <div className="home-container">
+      <Helmet>
+        <title>Flat Dizzy Grasshopper</title>
+        <meta property="og:title" content="Flat Dizzy Grasshopper" />
+      </Helmet>
+      <div className="home-navbar1">
+        <Navbar4 rootClassName="navbar4-root-class-name"></Navbar4>
+      </div>
+      <div className="home-hero2">
+        <Hero3></Hero3>
+      </div>
+      <div className="home-logos3">
+        <Logos1></Logos1>
+      </div>
+      <div className="home-gallery4">
+        <Gallery1></Gallery1>
+      </div>
+      <div className="home-features5">
+        <Features17></Features17>
+      </div>
+      <div className="home-features6">
+        <Features18></Features18>
+      </div>
+      <div className="home-features7">
+        <Features171></Features171>
+      </div>
+      <div className="home-cta8">
+        <CTA1></CTA1>
+      </div>
+      <div className="home-faq9">
+        <FAQ1></FAQ1>
+      </div>
+      <div className="home-contact10">
+        <Contact4></Contact4>
+      </div>
+      <div className="home-footer11">
+        <Footer15></Footer15>
+      </div>
+    </div>
+  )
+}
+
+export default Home

frontend/src/views/not-found.css

+.not-found-container {
+  width: 100%;
+  display: flex;
+  overflow: auto;
+  min-height: 100vh;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+.not-found-container1 {
+  display: flex;
+  position: relative;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+.not-found-text1 {
+  color: rgb(38, 38, 38);
+  font-size: 252px;
+  margin-top: -20px;
+  font-weight: 900;
+  margin-bottom: -20px;
+  letter-spacing: -20px;
+}
+.not-found-container2 {
+  width: 421px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+.not-found-text2 {
+  text-align: center;
+  font-weight: 400;
+}

frontend/src/views/not-found.js

+import React from 'react'
+
+import { Helmet } from 'react-helmet'
+
+import './not-found.css'
+
+const NotFound = (props) => {
+  return (
+    <div className="not-found-container">
+      <Helmet>
+        <title>404 - Not Found</title>
+      </Helmet>
+      <h3>OOPS! PAGE NOT FOUND</h3>
+      <div className="not-found-container1">
+        <h1 className="not-found-text1">404</h1>
+      </div>
+      <div className="not-found-container2">
+        <h2 className="not-found-text2">
+          WE ARE SORRY, BUT THE PAGE YOU REQUESTED WAS NOT FOUND
+        </h2>
+      </div>
+    </div>
+  )
+}
+
+export default NotFound