landing

package.json

@@ -17,10 +17,17 @@
     "@types/react-dom": "^18.2.7",
     "astro": "^3.0.12",
     "classnames": "^2.3.2",
+    "colord": "^2.9.3",
     "date-fns": "^2.29.3",
+    "date-fns-tz": "^2.0.0",
+    "nanoid": "^5.0.4",
     "prettier": "^3.0.3",
     "react": "^18.2.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
-    "react-use-measure": "^2.1.1"
+    "react-use-measure": "^2.1.1",
+    "rrule": "^2.8.1",
+    "styled-components": "^6.1.1"
   }
 }

src/components/Accordion/Accordion.module.css

@@ -21,6 +21,16 @@
   padding: 0;
 }
 
+.icon {
+  display: inline-flex;
+  vertical-align: middle;
+  transition: transform 0.3s ease-in-out;
+}
+
+.icon.open {
+  transform: rotate(180deg);
+}
+
 @media screen and (min-width: 769px) {
   .demo {
     display: none;

src/components/Accordion/Accordion.tsx

@@ -1,6 +1,11 @@
-import React, { useRef, type ReactNode, useLayoutEffect, useState } from "react";
+import React, {
+  useRef,
+  type ReactNode,
+  useLayoutEffect,
+  useState,
+} from "react";
 import { animated, useSpring, useTransition } from "@react-spring/web";
-import useMeasure from 'react-use-measure';
+import useMeasure from "react-use-measure";
 import cn from "classnames";
 import styles from "./Accordion.module.css";
 
@@ -27,7 +32,14 @@ export const AccordionItem = (props: Props) => {
       })}
     >
       <h3 className={styles.title} onClick={onOpen}>
-        {title}
+        <span
+          className={cn(styles.icon, {
+            [styles.open]: open,
+          })}
+        >
+          <img src="/icons/triangle-down.svg" width={8} height={8} />
+        </span>{" "}
+        <span>{title}</span>
       </h3>
       <animated.div style={style} className={styles.content}>
         <div ref={ref}>{children}</div>
@@ -59,9 +71,7 @@ export const Accordion = (props: AccordionProps) => {
           onOpen={() => onIndexChange(i)}
         >
           {item.content}
-          <div className={styles.demo}>
-            {item.demo}
-          </div>
+          <div className={styles.demo}>{item.demo}</div>
         </AccordionItem>
       ))}
     </div>