Add artificial screws

leaky-ships/components/Logo.tsx

@@ -1,15 +1,45 @@
+import classNames from "classnames"
 import React from "react"
 
 function Logo() {
   return (
-    <div className="flex flex-row bg-shield-gray bg-[url('/assets/shield.png')] bg-cover bg-no-repeat">
-      <div className="flex flex-col items-center justify-between">
-        <h1 className="font-checkpoint my-4 mx-32 border-y-4 border-slate-700 text-center text-6xl leading-tight tracking-widest">
-          Leaky
-          <br />
-          Ships
-        </h1>
-      </div>
+    <div className="relative flex items-center rounded-sm border-x-8 border-y-4 border-shield-gray bg-shield-lightgray">
+      <h1 className="font-checkpoint my-4 mx-36 border-y-4 border-slate-700 text-center text-6xl leading-tight tracking-widest">
+        Leaky
+        <br />
+        Ships
+      </h1>
+      <Screws />
+    </div>
+  )
+}
+
+function Screws() {
+  return (
+    <>
+      <Screw orientation="top-3 left-3" rotation="rotate-[135deg]" />
+      <Screw orientation="top-3 right-3" rotation="rotate-[5deg]" />
+      <Screw orientation="bottom-3 right-3" rotation="rotate-[150deg]" />
+      <Screw orientation="bottom-3 left-3" rotation="rotate-[20deg]" />
+    </>
+  )
+}
+
+function Screw({
+  orientation,
+  rotation,
+}: {
+  orientation: string
+  rotation: string
+}) {
+  return (
+    <div
+      className={classNames(
+        "absolute flex h-6 w-6 flex-col items-center justify-center rounded-full border-[1px] border-neutral-700 bg-neutral-400",
+        orientation
+      )}
+    >
+      <hr className={classNames("color w-full border-neutral-500", rotation)} />
     </div>
   )
 }