src/components/Boxes.tsx

@@ -57,9 +57,9 @@ export function InfoBox({title, children, id}:{title: string, children: React.Re
             {title}
           </p>
           <div className="v-card-text">
-            <p>
+            <div>
                 {children}
-            </p>
+            </div>
           </div>
         </aside>
     )
@@ -77,4 +77,34 @@ export function WarnBox({title, children}:{title: string, children: React.ReactN
           </div>
         </aside>
     )
+}
+
+export function BlueInfoBox({title, children}:{title: string, children: React.ReactNode}){
+  return(
+      <aside className="hint-container danger">
+        <p className="hint-container-title">
+          {title}
+        </p>
+        <div className="v-card-text">
+          <p>
+              {children}
+          </p>
+        </div>
+      </aside>
+  )
+}
+
+export function NoteBox({title, children, id}:{title: string, children: React.ReactNode, id: string}){
+  return(
+      <aside className="hint-container note" id={id}>
+        <p className="hint-container-title">
+          {title}
+        </p>
+        <div className="v-card-text">
+          <p>
+              {children}
+          </p>
+        </div>
+      </aside>
+  )
 }
\ No newline at end of file

src/components/Card.tsx

-import React from 'react';
-
-
-
-
- export const Card = ({children}: CardProps) => {
-  return (
-    
-    <div className="card-col">
-      {children}
-    </div>
-  );
-}
-
-interface CardProps {
-  children: React.ReactNode
-}
-
-
-
-export default Card; 
\ No newline at end of file