diff --git a/components/QuotationCarousel.module.css b/components/QuotationCarousel.module.css
index 218cc13..b529520 100644
--- a/components/QuotationCarousel.module.css
+++ b/components/QuotationCarousel.module.css
@@ -1,12 +1,32 @@
.carousel {
display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: calc(8rem / 16);
width: calc(600rem / 16);
}
.carouselButton {
- width: calc(36rem / 16);
- height: calc(64rem / 16);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ padding: calc(16rem / 16);
+ height: min-content;
+
+ background: none;
+ border: none;
+}
+
+.arrow {
+ width: calc(20rem / 16);
+ height: calc(40rem / 16);
+}
+
+.previous {
+ transform: rotate(180deg);
}
.card {
diff --git a/components/QuotationCarousel.tsx b/components/QuotationCarousel.tsx
index ccb2ff2..7cb2927 100644
--- a/components/QuotationCarousel.tsx
+++ b/components/QuotationCarousel.tsx
@@ -1,4 +1,5 @@
import React from "react";
+import { Color } from "utils/Color";
import styles from "./QuotationCarousel.module.css";
@@ -8,7 +9,12 @@ interface QuotationCarouselProps {
interface QuotationCardProps {
quote: string;
- isActive: boolean;
+ isActive?: boolean;
+}
+
+interface CarouselButtonProps {
+ onClick: () => void;
+ isPrevious?: boolean;
}
export function QuotationCarousel(props: QuotationCarouselProps) {
@@ -16,11 +22,11 @@ export function QuotationCarousel(props: QuotationCarouselProps) {
return (