Add basic carousel button styles

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 {

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 (
     <section className={styles.carousel}>
-      <button className={styles.carouselButton} />
+      <CarouselButton onClick={() => {}} isPrevious />
       {data.map((quote, idx) => {
         return <QuotationCard key={idx} quote={quote} isActive={idx === 0} />;
       })}
-      <button className={styles.carouselButton} />
+      <CarouselButton onClick={() => {}} />
     </section>
   );
 }
@@ -30,3 +36,27 @@ function QuotationCard({ quote, isActive }: QuotationCardProps) {
 
   return <div className={className}>{quote}</div>;
 }
+
+function CarouselButton({ isPrevious, onClick }: CarouselButtonProps) {
+  return (
+    <button className={styles.carouselButton} onClick={onClick}>
+      <svg
+        className={
+          isPrevious ? `${styles.previous} ${styles.arrow}` : styles.arrow
+        }
+        width="39"
+        height="72"
+        viewBox="0 0 39 72"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4 4L34.4206 35.804C35.2926 36.7157 35.2597 38.1619 34.3471 39.0329L4 68"
+          stroke={Color.primaryAccentLighter}
+          strokeWidth="4"
+          strokeLinecap="round"
+        />
+      </svg>
+    </button>
+  );
+}