Issue 16 create feature box component

client/src/components/ui/featureBox.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+
+interface contents {
+  title: string;
+  text: string;
+  hOffset: number;
+}
+
+function FeatureBox({ title, text, hOffset }: contents): React.JSX.Element {
+  return (
+    <>
+      <div
+        style={{
+          clipPath:
+            "polygon(0% 0%, 27% 0%, 31% 1rem, 100% 1rem, 100% calc(100% - 1rem), 97% 100%, 70% 100%, 67% calc(100% - 1rem), 0% calc(100% - 1rem))",
+          marginLeft: `${hOffset}%`,
+        }}
+        //Each pair of percentages is a 2d point, and polygon() joins them all together to form a polygon
+        className="m-0 mx-auto w-[60vw] bg-secondary pt-[0.15rem]"
+      >
+        <div
+          style={{
+            width: "calc(60vw - 0.3rem)",
+            clipPath:
+              "polygon(0% 0%, 27% 0%, 31% 1rem, 100% 1rem, 100% calc(100% - 1rem), 97% 100%, 70% 100%, 67% calc(100% - 1rem), 0% calc(100% - 1rem))",
+          }}
+          className="mb-[0.15rem] ml-[0.15rem] bg-dark p-10"
+        >
+          <h3 className="mb-[15px] font-jersey10 text-4xl">{title}</h3>
+          <p className="font-sans">{text}</p>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default FeatureBox;

client/src/styles/globals.css

@@ -28,6 +28,9 @@
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 100%;
 
+    --dark: 260, 52.38%, 12.35%;
+    --dark-foreground: 0 0% 100%;
+
     --border: 235 47% 20%;
     --input: 235 47% 20%;
     --ring: 236 47% 7%;

client/tailwind.config.ts

@@ -59,6 +59,10 @@ const config = {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",
         },
+        dark: {
+          DEFAULT: "hsl(var(--dark))",
+          foreground: "hsl(var(--dark-foreground))"
+        }
       },
       borderRadius: {
         lg: "var(--radius)",