Add paystro visual components

src/components/Header.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+
+type Props = {}
+
+export default function Header({}: Props) {
+  const links = [
+    {
+      label: 'About',
+      link: '/about',
+    },
+    {
+      label: 'Services',
+      link: '/services',
+    },
+    {
+      label: 'Contact',
+      link: '/contact',
+    },
+  ]
+
+  return (
+    <header className="flex justify-between py-6">
+      <div>
+        <a href="/" className="decoration-transparent">
+          <span className="text-2xl font-extrabold ">Logo</span>
+        </a>
+      </div>
+      <nav>
+        <ul className="flex gap-4 font-bold list-none">
+          {links.map((item, index) => (
+            <li className="decoration-transparent" key={`link-${index}`}>
+              <a href={item.link}>{item.label}</a>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </header>
+  )
+}