added feedback cards

modules.d.ts

@@ -0,0 +1 @@
+declare module "react-spring-carousel";

package.json

@@ -16,15 +16,16 @@
     "@types/react-dom": "^18.2.11",
     "astro": "^3.2.4",
     "classnames": "^2.3.2",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-spring-carousel": "^2.0.19"
   },
   "devDependencies": {
     "@typescript-eslint/parser": "^6.7.5",
-    "prettier-plugin-astro": "^0.12.0",
     "eslint": "^8.51.0",
     "eslint-plugin-astro": "^0.29.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
+    "prettier-plugin-astro": "^0.12.0",
     "sass": "^1.68.0"
   }
 }

src/components/Feedback/Feedback.astro

@@ -0,0 +1,77 @@
+---
+import FeedbackCarousel from "./FeedbackCarousel.tsx";
+export type FeedbackItem = {
+  id: number;
+  name: string;
+  role: string;
+  company: string;
+  image: string;
+  feedback: string;
+};
+
+const feedback: FeedbackItem[] = [
+  {
+    id: 1,
+    name: "John Doe",
+    role: "CEO",
+    company: "ABC Inc.",
+    image: "favicon.svg",
+    feedback: "Scrumlr makes regular updates, making the tool even more intuitive.",
+  },
+  {
+    id: 2,
+    name: "Dohn Joe",
+    role: "CFO",
+    company: "ABC Inc.",
+    image: "favicon.svg",
+    feedback: "Amazing tool for planning our agendas in an cooperative way.",
+  },
+  {
+    id: 3,
+    name: "Hans Peter",
+    role: "CXO",
+    company: "ABC Inc.",
+    image: "favicon.svg",
+    feedback: "Our team loved this tool. It made the everything - especially the communication faster and easier 👏🏼",
+  },
+  {
+    id: 4,
+    name: "Peter Hans",
+    role: "Praktikant",
+    company: "ABC Inc.",
+    image: "favicon.svg",
+    feedback: "This Web-app has so many useful and cool features!",
+  },
+  {
+    id: 5,
+    name: "Peter Lusting",
+    role: "CTO",
+    company: "ABC Inc.",
+    image: "favicon.svg",
+    feedback: "Gumo zusammen, scruml ist supi",
+  },
+];
+---
+
+<section class="feedback">
+  <h2>Our satisfied Users:</h2>
+  <p>Happy users are important to us. That's why we value every feedback.</p>
+  <div class="feedback_carousel-container">
+    <FeedbackCarousel items={feedback} client:only="react" />
+  </div>
+</section>
+
+<style lang="scss">
+  .feedback {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 128px;
+  }
+
+  .feedback_carousel-container {
+    width: 100%;
+    overflow-x: clip;
+    margin-top: 96px;
+  }
+</style>

src/components/Feedback/FeedbackCarousel.scss

@@ -0,0 +1,46 @@
+.feedback_card {
+    width: 333px;
+    height: 333px;
+    filter: var(--shadow);
+    background-color: var(--white);
+    border-radius: 16px;
+    margin: 0 16px;
+    padding: 32px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    box-sizing: border-box;
+    position: relative;
+
+    &::before {
+        content: "";
+        position: absolute;
+        top: -1px;
+        width: 70px;
+        height: 3px;
+        background-color: var(--lightmode-pink);
+        border-radius: 2px;
+    }
+
+    .feedback_card-text {
+        margin: 0;
+    }
+
+    .feedback_card-author {
+        display: flex;
+        flex-direction: row;
+        gap: 16px;
+
+        img {
+            width: 42px;
+            height: 42px;
+            border-radius: 50%;
+        }
+
+        .feedback_card-author-info {
+            .feedback_card-author-name {
+                margin: 0;
+            }
+        }
+    }
+}

src/components/Feedback/FeedbackCarousel.tsx

@@ -0,0 +1,46 @@
+import { useSpringCarousel } from "react-spring-carousel";
+import type { FeedbackItem } from "./Feedback.astro";
+import "./FeedbackCarousel.scss";
+
+type FeedbackCarouselProps = {
+  items: FeedbackItem[];
+};
+
+const FeedbackCard = (item: FeedbackItem) => (
+    <div className="feedback_card">
+        <p className="feedback_card-text">
+            {item.feedback}
+        </p>
+        <div className="feedback_card-author">
+            <img src={item.image} alt={item.name} />
+            <div className="feedback_card-author-info">
+                <h4 className="feedback_card-author-name">
+                    {item.name}
+                </h4>
+                <span className="feedback_card-author-position">
+                    {item.role}, {item.company}
+                </span>
+            </div>
+        </div>
+    </div>
+)
+
+const FeedbackCarousel = ({ items }: FeedbackCarouselProps) => {
+  const {
+        carouselFragment,
+        slideToPrevItem, 
+        slideToNextItem, 
+        useListenToCustomEvent
+    } = useSpringCarousel({
+            withLoop: true,
+            itemsPerSlide: 4,
+            items: items.map((item) => ({
+                id: item.id,
+                renderItem: <FeedbackCard {...item} />,
+            })),
+    });
+
+  return <div>{carouselFragment}</div>;
+};
+
+export default FeedbackCarousel;

src/pages/index.astro

@@ -5,6 +5,7 @@ import { Uniqueness } from "../components/Uniqueness";
 import { Mobile } from "../components/Mobile";
 import Layout from "../layouts/Layout.astro";
 import TargetUser from "../views/TargetUser/TargetUser.astro";
+import Feedback from "../components/Feedback/Feedback.astro";
 import { AboutUs } from "../views/AboutUs/AboutUs";
 ---
 
@@ -14,5 +15,6 @@ import { AboutUs } from "../views/AboutUs/AboutUs";
   <Uniqueness />
   <Mobile />
   <TargetUser />
+  <Feedback />
   <AboutUs />
 </Layout>

src/views/AboutUs/AboutUs.scss

@@ -4,7 +4,7 @@
   justify-content: center;
   align-items: center;
   gap: 64px;
-  padding-top: 64px;
+  padding-top: 128px;
   overflow: hidden;
 }