From 04f7fdc236b50218af2e42e643b372a0dee5acec Mon Sep 17 00:00:00 2001
From: alex <alex@roese.dev>
Date: Thu, 30 May 2024 14:03:19 +0200
Subject: [PATCH] better title

---
 src/App.css |   4 +-
 src/App.js  | 224 ++++++++++++++++++++++++++--------------------------
 2 files changed, 114 insertions(+), 114 deletions(-)

diff --git a/src/App.css b/src/App.css
index 7b4ff5d..260ca13 100644
--- a/src/App.css
+++ b/src/App.css
@@ -9,6 +9,7 @@
 .container {
   width: 100%;
   max-width: 1100px;
+  padding: 12px;
 }
 
 .subtitle {
@@ -33,7 +34,7 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
-  padding: 20px;
+  padding-top: 20px;
   width: 100%;
   max-width: 800px;
 }
@@ -42,6 +43,7 @@
   background-color: #fff;
   padding: 16px 20px;
   border-radius: 40px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
 }
 
 .card span {
diff --git a/src/App.js b/src/App.js
index dfc77a9..0064f72 100644
--- a/src/App.js
+++ b/src/App.js
@@ -181,7 +181,7 @@ function App() {
     setInterval(() => fetchProducts(), 5000);
   }, []);
 
-  // function to send the height to the iframe
+  // send the height to the iframe
   function sendPageHeightToIframe() {
     const height = document.body.scrollHeight;
 
@@ -193,11 +193,11 @@ function App() {
 
   return (
     <div className="app">
-      <div className="container" style={{ paddingTop: 20 }}>
-        <span className="subtitle">Immer auf dem aktuellen Stand sein</span>
-        <h1 className="header">Neue Produkte</h1>
+      <div className="container">
+        <span className="subtitle">Auf dem Laufenden bleiben</span>
+        <h1 className="header">Unsere neuesten Produkte</h1>
 
-        <div className="cards-container" style={{ paddingBottom: 20 }}>
+        <div className="cards-container" style={{ paddingBottom: 40 }}>
           <div className="cards">
             {products.NewProducts.length > 0 ? (
               <>
@@ -235,10 +235,10 @@ function App() {
           </div>
         </div>
 
-        <span className="subtitle">Was als nächstes kommt</span>
+        <span className="subtitle">Bald bei uns erhältlich</span>
         <h1 className="header">Aktuell in Arbeit</h1>
 
-        <div className="cards-container" style={{ paddingBottom: 20 }}>
+        <div className="cards-container" style={{ paddingBottom: 40 }}>
           <div className="cards">
             {products.InWorkProducts.length > 0 ? (
               <>
@@ -272,121 +272,119 @@ function App() {
           </div>
         </div>
 
-        <span className="subtitle">Jede Stimme zählt</span>
+        <span className="subtitle">Jetzt abstimmen</span>
         <h1 className="header">Zukünftige Produkte</h1>
+        <Flex justify="center" style={{ marginTop: 4 }}>
+          <span style={{ color: "#474747", maxWidth: 800 }}>
+            Gestalte unser Sortiment mit! Hier hast du die Möglichkeit, für das
+            nächste Produkt abzustimmen und die Reihenfolge zukünftiger Produkte
+            mit deiner Stimme zu beeinflussen. Deine Meinung zählt!
+          </span>
+        </Flex>
 
         <div className="cards-container">
-          <div className="cards">
+          <div className="cards" style={{ paddingBottom: 20 }}>
             {products.FutureProducts.length > 0 ? (
               <>
-                {products.FutureProducts
-                  /*.sort((a, b) =>
-              a.Name.localeCompare(b.Name)
-            )*/
-                  .sort((a, b) => b.Votes - a.Votes)
-                  .map(
-                    (product, index) =>
-                      (showMore.futureProducts || index < 5) && (
-                        <motion.div
-                          key={product.Name}
-                          layout
-                          initial={{ opacity: 0 }}
-                          animate={{ opacity: 1 }}
-                          exit={{ opacity: 0 }}
-                          transition={{ duration: 0.5 }}
-                        >
-                          <Card
-                            name={product.Name}
-                            rankingPosition={index + 1}
-                            productVariant={product.Variant}
-                            productCharacteristics={product.Characteristics}
-                            rightComponent={
-                              <div style={{ display: "flex", gap: 12 }}>
-                                <DislikeOutlined
-                                  style={{
-                                    color:
-                                      votes.findIndex(
-                                        (vote) =>
-                                          vote.n === product.Name &&
-                                          vote.t === 0
-                                      ) > -1
-                                        ? "red"
-                                        : "#000",
-                                  }}
-                                  onClick={() => {
-                                    if (
-                                      votes.findIndex(
-                                        (vote) =>
-                                          vote.n === product.Name &&
-                                          vote.t === 0
-                                      ) === -1
-                                    ) {
-                                      VoteRequest(product.Name, false);
-                                      vote(product.Name, false);
+                {products.FutureProducts.sort((a, b) => b.Votes - a.Votes).map(
+                  (product, index) =>
+                    (showMore.futureProducts || index < 5) && (
+                      <motion.div
+                        key={product.Name}
+                        layout
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        transition={{ duration: 0.5 }}
+                      >
+                        <Card
+                          name={product.Name}
+                          rankingPosition={index + 1}
+                          productVariant={product.Variant}
+                          productCharacteristics={product.Characteristics}
+                          rightComponent={
+                            <div style={{ display: "flex", gap: 12 }}>
+                              <DislikeOutlined
+                                style={{
+                                  color:
+                                    votes.findIndex(
+                                      (vote) =>
+                                        vote.n === product.Name && vote.t === 0
+                                    ) > -1
+                                      ? "red"
+                                      : "#000",
+                                }}
+                                onClick={() => {
+                                  if (
+                                    votes.findIndex(
+                                      (vote) =>
+                                        vote.n === product.Name && vote.t === 0
+                                    ) === -1
+                                  ) {
+                                    VoteRequest(product.Name, false);
+                                    vote(product.Name, false);
 
-                                      // simulate vote before request is made
-                                      setProducts((products) => {
-                                        const newArr =
-                                          products.FutureProducts.map((p) =>
-                                            p.Name === product.Name
-                                              ? { ...p, Votes: p.Votes - 1 }
-                                              : p
-                                          );
+                                    // simulate vote before request is made
+                                    setProducts((products) => {
+                                      const newArr =
+                                        products.FutureProducts.map((p) =>
+                                          p.Name === product.Name
+                                            ? { ...p, Votes: p.Votes - 1 }
+                                            : p
+                                        );
 
-                                        return {
-                                          ...products,
-                                          FutureProducts: newArr,
-                                        };
-                                      });
-                                    }
-                                  }}
-                                />
-                                <span>{product.Votes}</span>
-                                <LikeOutlined
-                                  style={{
-                                    color:
-                                      votes.findIndex(
-                                        (vote) =>
-                                          vote.n === product.Name &&
-                                          vote.t === 1
-                                      ) > -1
-                                        ? "green"
-                                        : "#000",
-                                  }}
-                                  onClick={() => {
-                                    if (
-                                      votes.findIndex(
-                                        (vote) =>
-                                          vote.n === product.Name &&
-                                          vote.t === 1
-                                      ) === -1
-                                    ) {
-                                      VoteRequest(product.Name, true);
-                                      vote(product.Name, true);
+                                      return {
+                                        ...products,
+                                        FutureProducts: newArr,
+                                      };
+                                    });
+                                  }
+                                }}
+                              />
+                              <span>{product.Votes}</span>
+                              <LikeOutlined
+                                style={{
+                                  color:
+                                    votes.findIndex(
+                                      (vote) =>
+                                        vote.n === product.Name && vote.t === 1
+                                    ) > -1
+                                      ? "green"
+                                      : "#000",
+                                }}
+                                onClick={() => {
+                                  if (
+                                    votes.findIndex(
+                                      (vote) =>
+                                        vote.n === product.Name && vote.t === 1
+                                    ) === -1
+                                  ) {
+                                    VoteRequest(product.Name, true);
+                                    vote(product.Name, true);
 
-                                      // simulate vote before request is made
-                                      setProducts((products) => {
-                                        const newArr =
-                                          products.FutureProducts.map((p) =>
-                                            p.Name === product.Name
-                                              ? { ...p, Votes: p.Votes + 1 }
-                                              : p
-                                          );
+                                    // simulate vote before request is made
+                                    setProducts((products) => {
+                                      const newArr =
+                                        products.FutureProducts.map((p) =>
+                                          p.Name === product.Name
+                                            ? { ...p, Votes: p.Votes + 1 }
+                                            : p
+                                        );
 
-                                        return {
-                                          ...products,
-                                          FutureProducts: newArr,
-                                        };
-                                      });
-                                    }
-                                  }}
-                                />
-                              </div>
-                            }
-                          />
-                        </motion.div>
-                      )
-                  )}
+                                      return {
+                                        ...products,
+                                        FutureProducts: newArr,
+                                      };
+                                    });
+                                  }
+                                }}
+                              />
+                            </div>
+                          }
+                        />
+                      </motion.div>
+                    )
+                )}
 
                 {products.FutureProducts.length > 5 &&
                   !showMore.futureProducts && (