add FAQCard and Steps components; refactor imports and remove unused …

…components

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": true
+}

app/components/FAQCard.tsx

@@ -0,0 +1,23 @@
+import React, { ReactNode } from "react";
+
+// Define the type for the props
+interface CardProps {
+  question: string;
+  answer: string | ReactNode;
+}
+
+// Create the component
+const FAQCard: React.FC<CardProps> = ({ question, answer }) => {
+  return (
+    <div className="rounded-2xl p-8 m-4 bg-blue-100 bg-opacity-75 shadow-md w-full md:min-w-[250px] lg:min-w-[300px] border-4 border-blue-300 overflow-hidden max-h-[500px] flex flex-col justify-start">
+      <h3 className="text-lg md:text-2xl font-extrabold text-blue-900 mb-2 leading-tight">
+        {question}
+      </h3>
+      <p className="text-base md:text-lg text-blue-900 font-semibold flex-grow">
+        {answer}
+      </p>
+    </div>
+  );
+};
+
+export default FAQCard;

app/components/Steps.tsx

@@ -0,0 +1,60 @@
+import Image from 'next/image';
+
+const Steps = () => {
+  return (
+    <div className="flex justify-center items-center w-full">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-5 mt-20 w-fit min-h-[30vh] resize-both px-12 text-center justify-center items-center bg-black bg-opacity-30 rounded-xl mx-8 p-8">
+        <div className="flex flex-col items-center justify-center mx-4 pt-0 md:pt-8 rounded-xl">
+          <h4 className="font-inter font-extrabold text-lg md:text-2xl pb-5 text-white shadow-md">
+            Design a PCB
+          </h4>
+          <div className="relative w-[24vh] md:w-[18vw] h-[26vh] md:h-[20vw] rounded-lg pb-8">
+            <Image
+              src="/images/schematic.png"
+              alt="Design a PCB"
+              fill
+              className="rounded-lg object-cover"
+            />
+          </div>
+          <p className="font-inter text-white text-sm md:text-base mt-2">
+            Create your own custom PCB design.
+          </p>
+        </div>
+        <div className="flex flex-col items-center justify-center mx-4 pt-4 md:pt-8 rounded-xl">
+          <h4 className="font-inter font-extrabold text-lg md:text-2xl pb-5 text-white shadow-md">
+            Design Art
+          </h4>
+          <div className="relative w-[24vh] md:w-[18vw] h-[26vh] md:h-[20vw] rounded-lg pb-8">
+            <Image
+              src="/images/pcb-view.png"
+              alt="Design Art"
+              fill
+              className="rounded-lg object-cover"
+            />
+          </div>
+          <p className="font-inter text-white text-sm md:text-base mt-2">
+            Add artistic elements to your PCB.
+          </p>
+        </div>
+        <div className="flex flex-col items-center justify-center mx-4 pt-0 md:pt-8 rounded-xl">
+          <h4 className="font-inter font-extrabold text-lg md:text-2xl pb-5 text-white shadow-md">
+            Create Firmware
+          </h4>
+          <div className="relative w-[24vh] md:w-[18vw] h-[26vh] md:h-[20vw] rounded-lg pb-4 md:pb-8">
+            <Image
+              src="/images/code.png"
+              alt="Create Firmware"
+              fill
+              className="rounded-lg object-cover"
+            />
+          </div>
+          <p className="font-inter text-white text-sm md:text-base mt-2">
+            Develop the firmware for your PCB.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Steps;

app/guide/page.tsx

@@ -2,10 +2,10 @@
 import { keyframes } from '@emotion/react';
 import GuideMD from './guideMD.mdx';
 import { MDXProvider } from '@mdx-js/react';
-import components from '../components/mdx';
+import components from '../components/shared/MDXComponents';
 import { Box } from 'theme-ui';
 import Image from 'next/image';
-import SideBar from "../components/SideBar";
+import SideBar from "./SideBar";
 import Link from 'next/link';
 
 const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });