diff --git a/src/components/Feedback/Feedback.astro b/src/components/Feedback/Feedback.astro index c1ce034..95b634a 100644 --- a/src/components/Feedback/Feedback.astro +++ b/src/components/Feedback/Feedback.astro @@ -88,13 +88,6 @@ const feedback: FeedbackItem[] = [ image: "favicon.svg", feedback: "Also ich finde scrumlr nicht so cool...", }, - { - name: "Selina Lusting", - role: "PO", - company: "scrumlr Inc.", - image: "favicon.svg", - feedback: "Also ich finde scrumlr nicht so cool...", - }, ]; --- @@ -111,7 +104,14 @@ const feedback: FeedbackItem[] = [ display: flex; flex-direction: column; align-items: center; - margin-bottom: 128px; + margin-bottom: 4vh; + + h2, + p { + max-width: 80%; + text-align: center; + text-wrap: balance; + } } .feedback_carousel-container { diff --git a/src/components/Feedback/FeedbackCarousel.scss b/src/components/Feedback/FeedbackCarousel.scss index b873197..a214711 100644 --- a/src/components/Feedback/FeedbackCarousel.scss +++ b/src/components/Feedback/FeedbackCarousel.scss @@ -16,9 +16,9 @@ .feedback-carousel_controls { justify-content: center; + align-items: center; display: flex; flex-direction: row; - gap: 16px; margin-top: 32px; } @@ -30,6 +30,7 @@ background-color: var(--lightmode-pink); cursor: pointer; opacity: 0.5; + margin: 0 8px; transition: all 0.1s ease-in-out; @@ -42,8 +43,20 @@ } &.active { + transform: scale(1.2); opacity: 1; } + + &.small { + width: 4px; + height: 4px; + } + + &.hidden { + width: 0px; + height: 0px; + margin: 0; + } } .use-spring-carousel-item { @@ -91,9 +104,31 @@ } .feedback_card-author-info { + display: flex; + flex-direction: column; + justify-content: space-evenly; + .feedback_card-author-name { margin: 0; } } } } + +@media screen and (max-width: 375px) { + .feedback_card { + width: 286px; + height: 286px; + margin: 0; + + .feedback_card-text { + font-size: 14px; + line-height: 22px; + overflow: scroll; + } + + .feedback_card-author-info { + font-size: 14px; + } + } +} diff --git a/src/components/Feedback/FeedbackCarousel.tsx b/src/components/Feedback/FeedbackCarousel.tsx index 88ba8a3..d02561b 100644 --- a/src/components/Feedback/FeedbackCarousel.tsx +++ b/src/components/Feedback/FeedbackCarousel.tsx @@ -74,11 +74,12 @@ const FeedbackCarousel = ({ items }: FeedbackCarouselProps) => { ); const [activeSlide, setActiveSlide] = useState(0); const size = useElementSize("feedback-carousel"); - const availableSpace = size ? Math.floor(size.width / 365) : 1; + const availableSpace = size ? Math.floor(size.width / 400) : 1; const itemsPerSlide = availableSpace > 4 ? 4 : availableSpace; useEffect(() => { - setGroupedFeedback(groupArrayIntoChunks(items, 4)); + setGroupedFeedback(groupArrayIntoChunks(items, itemsPerSlide || 1)); + console.log(items, itemsPerSlide || 1, groupedFeedback); }, [items, itemsPerSlide]); const { @@ -110,18 +111,30 @@ const FeedbackCarousel = ({ items }: FeedbackCarouselProps) => {