Add paystro visual components

2024-06-24 00:05:41 +02:00
parent 0a14bb39de
commit 5eb7b7037b
14 changed files with 583 additions and 44 deletions
--- a/package.json
+++ b/package.json
@ -41,8 +41,11 @@
    "@types/node": "^20.12.12",
    "@types/react": "npm:types-react@19.0.0-beta.2",
    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
+    "autoprefixer": "^10.4.19",
    "eslint": "^8.57.0",
    "eslint-config-next": "14.2.3",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.4",
    "typescript": "^5.4.5"
  },
  "pnpm": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -67,18 +67,31 @@ importers:
      '@types/react-dom':
        specifier: npm:types-react-dom@19.0.0-beta.2
        version: types-react-dom@19.0.0-beta.2
+      autoprefixer:
+        specifier: ^10.4.19
+        version: 10.4.19(postcss@8.4.38)
      eslint:
        specifier: ^8.57.0
        version: 8.57.0
      eslint-config-next:
        specifier: 14.2.3
        version: 14.2.3(eslint@8.57.0)(typescript@5.4.5)
+      postcss:
+        specifier: ^8.4.38
+        version: 8.4.38
+      tailwindcss:
+        specifier: ^3.4.4
+        version: 3.4.4
      typescript:
        specifier: ^5.4.5
        version: 5.4.5

 packages:

+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
  '@aws-crypto/ie11-detection@3.0.0':
    resolution: {integrity: sha512-341lBBkiY1DfDNKai/wXM3aujNBkXR7tq1URPQDL9wi3AUbI80NR74uF1TXHMm7po1AcnFk8iu2S2IeU/+/A+Q==}

@ -505,6 +518,24 @@ packages:
    resolution: {integrity: sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==}
    engines: {node: '>= 6'}

+  '@jridgewell/gen-mapping@0.3.5':
+    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/set-array@1.2.1':
+    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.4.15':
+    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
+
+  '@jridgewell/trace-mapping@0.3.25':
+    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+
  '@jsdevtools/ono@7.1.3':
    resolution: {integrity: sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==}

@ -1132,6 +1163,9 @@ packages:
    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
    engines: {node: '>= 8'}

+  arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+
  argparse@2.0.1:
    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}

@ -1188,6 +1222,13 @@ packages:
    resolution: {integrity: sha512-Xcz9l0z7y9yQ9rdDaxlmaI4uJHf/T8g9hOEzJcsEqX2SjCj4J20uK7+ldkDHMbpJDK76wF7xEIgxc/vSlsfw5w==}
    engines: {node: '>=10.12.0'}

+  autoprefixer@10.4.19:
+    resolution: {integrity: sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+
  available-typed-arrays@1.0.7:
    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
    engines: {node: '>= 0.4'}
@ -1256,6 +1297,11 @@ packages:
    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
    engines: {node: '>=8'}

+  browserslist@4.23.1:
+    resolution: {integrity: sha512-TUfofFo/KsK/bWZ9TWQ5O26tsWW4Uhmt8IYklbnUa70udB6P2wA7w7o4PY4muaEPBQaAX+CEnmmIA41NVHtPVw==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
  bson-objectid@2.0.4:
    resolution: {integrity: sha512-vgnKAUzcDoa+AeyYwXCoHyF2q6u/8H46dxu5JN+4/TZeq/Dlinn0K6GvxsCLb3LHUJl0m/TLiEK31kUwtgocMQ==}

@ -1290,9 +1336,16 @@ packages:
    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
    engines: {node: '>=6'}

+  camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
+
  caniuse-lite@1.0.30001627:
    resolution: {integrity: sha512-4zgNiB8nTyV/tHhwZrFs88ryjls/lHiqFhrxCW4qSTeuRByBVnPYpDInchOIySWknznucaf31Z4KYqjfbrecVw==}

+  caniuse-lite@1.0.30001636:
+    resolution: {integrity: sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==}
+
  chalk@2.4.2:
    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
    engines: {node: '>=4'}
@ -1355,6 +1408,10 @@ packages:
  commander@2.20.3:
    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}

+  commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
+
  concat-map@0.0.1:
    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}

@ -1384,6 +1441,11 @@ packages:
  crypt@0.0.2:
    resolution: {integrity: sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==}

+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
  cssfilter@0.0.10:
    resolution: {integrity: sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==}

@ -1477,6 +1539,9 @@ packages:
    resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==}
    engines: {node: '>=8'}

+  didyoumean@1.2.2:
+    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+
  diff@5.2.0:
    resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==}
    engines: {node: '>=0.3.1'}
@ -1485,6 +1550,9 @@ packages:
    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
    engines: {node: '>=8'}

+  dlv@1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+
  doctrine@2.1.0:
    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
    engines: {node: '>=0.10.0'}
@ -1506,6 +1574,9 @@ packages:
  ecdsa-sig-formatter@1.0.11:
    resolution: {integrity: sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==}

+  electron-to-chromium@1.4.810:
+    resolution: {integrity: sha512-Kaxhu4T7SJGpRQx99tq216gCq2nMxJo+uuT6uzz9l8TVN2stL7M06MIIXAtr9jsrLs2Glflgf2vMQRepxawOdQ==}
+
  emoji-regex@8.0.0:
    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}

@ -1574,6 +1645,10 @@ packages:
  es6-weak-map@2.0.3:
    resolution: {integrity: sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==}

+  escalade@3.1.2:
+    resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
+    engines: {node: '>=6'}
+
  escape-string-regexp@1.0.5:
    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
    engines: {node: '>=0.8.0'}
@ -1789,6 +1864,9 @@ packages:
    resolution: {integrity: sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==}
    engines: {node: '>=14'}

+  fraction.js@4.3.7:
+    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
+
  fs-constants@1.0.0:
    resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}

@ -2124,6 +2202,10 @@ packages:
    resolution: {integrity: sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==}
    engines: {node: '>=14'}

+  jiti@1.21.6:
+    resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
+    hasBin: true
+
  joi@17.13.1:
    resolution: {integrity: sha512-vaBlIKCyo4FCUtCm7Eu4QZd/q02bWcxfUO6YSXAZOWF6gzcLBeba8kwotUdYJjDLW8Cz8RywsSOqiNJZW0mNvg==}

@ -2220,6 +2302,14 @@ packages:
    engines: {node: '>=16'}
    hasBin: true

+  lilconfig@2.1.0:
+    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
+    engines: {node: '>=10'}
+
+  lilconfig@3.1.2:
+    resolution: {integrity: sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==}
+    engines: {node: '>=14'}
+
  lines-and-columns@1.2.4:
    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}

@ -2395,14 +2485,25 @@ packages:
  node-addon-api@6.1.0:
    resolution: {integrity: sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==}

+  node-releases@2.0.14:
+    resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
+
  normalize-path@3.0.0:
    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
    engines: {node: '>=0.10.0'}

+  normalize-range@0.1.2:
+    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
+    engines: {node: '>=0.10.0'}
+
  object-assign@4.1.1:
    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
    engines: {node: '>=0.10.0'}

+  object-hash@3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+    engines: {node: '>= 6'}
+
  object-inspect@1.13.1:
    resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}

@ -2552,6 +2653,10 @@ packages:
    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
    engines: {node: '>=8.6'}

+  pify@2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+    engines: {node: '>=0.10.0'}
+
  pino-abstract-transport@1.0.0:
    resolution: {integrity: sha512-c7vo5OpW4wIS42hUVcT5REsL8ZljsUfBjqV/e2sFxmFEFZiq1XLUp5EYLtuDH6PEHq9W1egWqRbnLUP5FuZmOA==}

@ -2569,6 +2674,10 @@ packages:
    resolution: {integrity: sha512-olUADJByk4twxccmAxb1RiGKOSvddHugCV3wkqjyv+3Sooa2KLrmXrKEWOKi0XPCLasRR5jBXxioE1jxUa4KzQ==}
    hasBin: true

+  pirates@4.0.6:
+    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
+    engines: {node: '>= 6'}
+
  pkg-up@3.1.0:
    resolution: {integrity: sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==}
    engines: {node: '>=8'}
@ -2581,10 +2690,51 @@ packages:
    resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
    engines: {node: '>= 0.4'}

+  postcss-import@15.1.0:
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+
+  postcss-js@4.0.1:
+    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
+
+  postcss-load-config@4.0.2:
+    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
+    engines: {node: '>= 14'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+
+  postcss-nested@6.0.1:
+    resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+
+  postcss-selector-parser@6.1.0:
+    resolution: {integrity: sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==}
+    engines: {node: '>=4'}
+
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
  postcss@8.4.31:
    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
    engines: {node: ^10 || ^12 || >=14}

+  postcss@8.4.38:
+    resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==}
+    engines: {node: ^10 || ^12 || >=14}
+
  prebuild-install@7.1.2:
    resolution: {integrity: sha512-UnNke3IQb6sgarcZIDU3gbMeTp/9SSU1DAIkil7PrqG1vZlBtY5msYccSKSHDqa3hNg436IXK+SNImReuA1wEQ==}
    engines: {node: '>=10'}
@ -2724,6 +2874,9 @@ packages:
    resolution: {integrity: sha512-SeU2v5Xy6FotVhKz0pMS2gvYP7HlkF0qgTskj3JzA1vlxcb3dQjxlm9t0ZlJqcgoyI3VFAw7bomuDMdgy1nBuw==}
    engines: {node: '>=0.10.0'}

+  read-cache@1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+
  readable-stream@3.6.2:
    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
    engines: {node: '>= 6'}
@ -3004,6 +3157,11 @@ packages:
  stylis@4.2.0:
    resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}

+  sucrase@3.35.0:
+    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+
  supports-color@5.5.0:
    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
    engines: {node: '>=4'}
@ -3025,6 +3183,11 @@ packages:
  tailwind-merge@2.3.0:
    resolution: {integrity: sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==}

+  tailwindcss@3.4.4:
+    resolution: {integrity: sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
  tapable@2.2.1:
    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
    engines: {node: '>=6'}
@ -3100,6 +3263,9 @@ packages:
    peerDependencies:
      typescript: '>=3.7.0'

+  ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+
  tsconfig-paths@3.15.0:
    resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}

@ -3160,6 +3326,12 @@ packages:
    resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
    engines: {node: '>=18'}

+  update-browserslist-db@1.0.16:
+    resolution: {integrity: sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
  uri-js@4.4.1:
    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}

@ -3252,6 +3424,11 @@ packages:
    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
    engines: {node: '>= 6'}

+  yaml@2.4.5:
+    resolution: {integrity: sha512-aBx2bnqDzVOyNKfsysjA2ms5ZlnjSAW2eG3/L5G/CSujfjLJTJsEw1bGw8kCf04KodQWk1pxlGnZ56CRxiawmg==}
+    engines: {node: '>= 14'}
+    hasBin: true
+
  yjs@13.6.15:
    resolution: {integrity: sha512-moFv4uNYhp8BFxIk3AkpoAnnjts7gwdpiG8RtyFiKbMtxKCS0zVZ5wPaaGpwC3V2N/K8TK8MwtSI3+WO9CHWjQ==}
    engines: {node: '>=16.0.0', npm: '>=8.0.0'}
@ -3275,6 +3452,8 @@ packages:

 snapshots:

+  '@alloc/quick-lru@5.2.0': {}
+
  '@aws-crypto/ie11-detection@3.0.0':
    dependencies:
      tslib: 1.14.1
@ -4042,6 +4221,23 @@ snapshots:
      '@types/istanbul-reports': 1.1.2
      '@types/yargs': 13.0.12

+  '@jridgewell/gen-mapping@0.3.5':
+    dependencies:
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/set-array@1.2.1': {}
+
+  '@jridgewell/sourcemap-codec@1.4.15': {}
+
+  '@jridgewell/trace-mapping@0.3.25':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.4.15
+
  '@jsdevtools/ono@7.1.3': {}

  '@lexical/clipboard@0.15.0':
@ -4892,6 +5088,8 @@ snapshots:
      normalize-path: 3.0.0
      picomatch: 2.3.1

+  arg@5.0.2: {}
+
  argparse@2.0.1: {}

  aria-query@5.3.0:
@ -4978,6 +5176,16 @@ snapshots:

  atomically@1.7.0: {}

+  autoprefixer@10.4.19(postcss@8.4.38):
+    dependencies:
+      browserslist: 4.23.1
+      caniuse-lite: 1.0.30001627
+      fraction.js: 4.3.7
+      normalize-range: 0.1.2
+      picocolors: 1.0.1
+      postcss: 8.4.38
+      postcss-value-parser: 4.2.0
+
  available-typed-arrays@1.0.7:
    dependencies:
      possible-typed-array-names: 1.0.0
@ -5061,6 +5269,13 @@ snapshots:
    dependencies:
      fill-range: 7.1.1

+  browserslist@4.23.1:
+    dependencies:
+      caniuse-lite: 1.0.30001636
+      electron-to-chromium: 1.4.810
+      node-releases: 2.0.14
+      update-browserslist-db: 1.0.16(browserslist@4.23.1)
+
  bson-objectid@2.0.4: {}

  bson@4.7.2:
@ -5097,8 +5312,12 @@ snapshots:

  callsites@3.1.0: {}

+  camelcase-css@2.0.1: {}
+
  caniuse-lite@1.0.30001627: {}

+  caniuse-lite@1.0.30001636: {}
+
  chalk@2.4.2:
    dependencies:
      ansi-styles: 3.2.1
@ -5168,6 +5387,8 @@ snapshots:

  commander@2.20.3: {}

+  commander@4.1.1: {}
+
  concat-map@0.0.1: {}

  conf@10.2.0:
@ -5209,6 +5430,8 @@ snapshots:

  crypt@0.0.2: {}

+  cssesc@3.0.0: {}
+
  cssfilter@0.0.10: {}

  csstype@3.1.3: {}
@ -5324,12 +5547,16 @@ snapshots:

  detect-libc@2.0.3: {}

+  didyoumean@1.2.2: {}
+
  diff@5.2.0: {}

  dir-glob@3.0.1:
    dependencies:
      path-type: 4.0.0

+  dlv@1.1.3: {}
+
  doctrine@2.1.0:
    dependencies:
      esutils: 2.0.3
@ -5353,6 +5580,8 @@ snapshots:
    dependencies:
      safe-buffer: 5.2.1

+  electron-to-chromium@1.4.810: {}
+
  emoji-regex@8.0.0: {}

  emoji-regex@9.2.2: {}
@ -5501,6 +5730,8 @@ snapshots:
      es6-iterator: 2.0.3
      es6-symbol: 3.1.4

+  escalade@3.1.2: {}
+
  escape-string-regexp@1.0.5: {}

  escape-string-regexp@4.0.0: {}
@ -5513,7 +5744,7 @@ snapshots:
      eslint: 8.57.0
      eslint-import-resolver-node: 0.3.9
      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
      eslint-plugin-jsx-a11y: 6.8.0(eslint@8.57.0)
      eslint-plugin-react: 7.34.2(eslint@8.57.0)
      eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0)
@ -5537,7 +5768,7 @@ snapshots:
      enhanced-resolve: 5.16.1
      eslint: 8.57.0
      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
      fast-glob: 3.3.2
      get-tsconfig: 4.7.5
      is-core-module: 2.13.1
@ -5559,7 +5790,7 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0):
+  eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0):
    dependencies:
      array-includes: 3.1.8
      array.prototype.findlastindex: 1.2.5
@ -5815,6 +6046,8 @@ snapshots:
      cross-spawn: 7.0.3
      signal-exit: 4.1.0

+  fraction.js@4.3.7: {}
+
  fs-constants@1.0.0: {}

  fs.realpath@1.0.0: {}
@ -6141,6 +6374,8 @@ snapshots:
    optionalDependencies:
      '@pkgjs/parseargs': 0.11.0

+  jiti@1.21.6: {}
+
  joi@17.13.1:
    dependencies:
      '@hapi/hoek': 9.3.0
@ -6246,6 +6481,10 @@ snapshots:
    dependencies:
      isomorphic.js: 0.2.5

+  lilconfig@2.1.0: {}
+
+  lilconfig@3.1.2: {}
+
  lines-and-columns@1.2.4: {}

  locate-path@3.0.0:
@ -6431,10 +6670,16 @@ snapshots:

  node-addon-api@6.1.0: {}

+  node-releases@2.0.14: {}
+
  normalize-path@3.0.0: {}

+  normalize-range@0.1.2: {}
+
  object-assign@4.1.1: {}

+  object-hash@3.0.0: {}
+
  object-inspect@1.13.1: {}

  object-is@1.1.6:
@ -6607,6 +6852,8 @@ snapshots:

  picomatch@2.3.1: {}

+  pify@2.3.0: {}
+
  pino-abstract-transport@1.0.0:
    dependencies:
      readable-stream: 4.5.2
@ -6650,6 +6897,8 @@ snapshots:
      sonic-boom: 3.8.1
      thread-stream: 2.7.0

+  pirates@4.0.6: {}
+
  pkg-up@3.1.0:
    dependencies:
      find-up: 3.0.0
@ -6658,12 +6907,49 @@ snapshots:

  possible-typed-array-names@1.0.0: {}

+  postcss-import@15.1.0(postcss@8.4.38):
+    dependencies:
+      postcss: 8.4.38
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.8
+
+  postcss-js@4.0.1(postcss@8.4.38):
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.4.38
+
+  postcss-load-config@4.0.2(postcss@8.4.38):
+    dependencies:
+      lilconfig: 3.1.2
+      yaml: 2.4.5
+    optionalDependencies:
+      postcss: 8.4.38
+
+  postcss-nested@6.0.1(postcss@8.4.38):
+    dependencies:
+      postcss: 8.4.38
+      postcss-selector-parser: 6.1.0
+
+  postcss-selector-parser@6.1.0:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-value-parser@4.2.0: {}
+
  postcss@8.4.31:
    dependencies:
      nanoid: 3.3.7
      picocolors: 1.0.1
      source-map-js: 1.2.0

+  postcss@8.4.38:
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.1
+      source-map-js: 1.2.0
+
  prebuild-install@7.1.2:
    dependencies:
      detect-libc: 2.0.3
@ -6825,6 +7111,10 @@ snapshots:

  react@19.0.0-rc-f994737d14-20240522: {}

+  read-cache@1.0.0:
+    dependencies:
+      pify: 2.3.0
+
  readable-stream@3.6.2:
    dependencies:
      inherits: 2.0.4
@ -7153,6 +7443,16 @@ snapshots:

  stylis@4.2.0: {}

+  sucrase@3.35.0:
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.5
+      commander: 4.1.1
+      glob: 10.3.10
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.6
+      ts-interface-checker: 0.1.13
+
  supports-color@5.5.0:
    dependencies:
      has-flag: 3.0.0
@ -7171,6 +7471,33 @@ snapshots:
    dependencies:
      '@babel/runtime': 7.24.6

+  tailwindcss@3.4.4:
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.6.0
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.2
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.21.6
+      lilconfig: 2.1.0
+      micromatch: 4.0.7
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.0.1
+      postcss: 8.4.38
+      postcss-import: 15.1.0(postcss@8.4.38)
+      postcss-js: 4.0.1(postcss@8.4.38)
+      postcss-load-config: 4.0.2(postcss@8.4.38)
+      postcss-nested: 6.0.1(postcss@8.4.38)
+      postcss-selector-parser: 6.1.0
+      resolve: 1.22.8
+      sucrase: 3.35.0
+    transitivePeerDependencies:
+      - ts-node
+
  tapable@2.2.1: {}

  tar-fs@2.1.1:
@ -7259,6 +7586,8 @@ snapshots:
    dependencies:
      typescript: 5.4.5

+  ts-interface-checker@0.1.13: {}
+
  tsconfig-paths@3.15.0:
    dependencies:
      '@types/json5': 0.0.29
@ -7336,6 +7665,12 @@ snapshots:

  unicorn-magic@0.1.0: {}

+  update-browserslist-db@1.0.16(browserslist@4.23.1):
+    dependencies:
+      browserslist: 4.23.1
+      escalade: 3.1.2
+      picocolors: 1.0.1
+
  uri-js@4.4.1:
    dependencies:
      punycode: 2.3.1
@ -7431,6 +7766,8 @@ snapshots:

  yaml@1.10.2: {}

+  yaml@2.4.5: {}
+
  yjs@13.6.15:
    dependencies:
      lib0: 0.2.94
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/src/app/(app)/global.css
+++ b/src/app/(app)/global.css
@ -0,0 +1,107 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.light {
+
+    --black: 10, 16, 19;
+    --white: 243, 252, 248;
+    --absolute-black: 0, 0, 0;
+    --absolute-white: 255, 255, 255;
+
+    /* Use these in tailwind.config.cjs */
+    --primary: var(--black);
+    --secondary: var(--black);
+    --tertiary: var(--black);
+    
+    --text: var(--black);
+    --textInverted: var(--absolute-white);
+    --link: var(--black);
+    --background: var(--white);
+}
+
+.dark {
+
+    --black: 10, 16, 19;
+    --white: 243, 252, 248;
+    --absolute-black: 0, 0, 0;
+    --absolute-white: 255, 255, 255;
+
+    /* Use these in tailwind.config.cjs */
+    --primary: var(--white);
+    --secondary: var(--white);
+    --tertiary: var(--white);
+    
+    --text: var(--white);
+    --textInverted: var(--absolute-black);
+    --link: var(--white);
+    --background: var(--black);
+}
+
+.autonomic {
+    /* Palette */
+    /* RGBA instead of hex so that opacity will work */
+    --absolute-white: 255, 255, 255;
+    --white: 243, 252, 248;
+    --shocking-pink: 253, 0, 159;
+    --shamrock-green: 0, 198, 88;
+    --bubblegum-pink: 255, 133, 203;
+    --bright-orange: 255, 96, 21;
+
+    /* Use these in tailwind.config.cjs */
+    --primary: var(--shocking-pink);
+    --secondary: var(--shamrock-green);
+    --tertiary: var(--bright-orange);
+    
+    --text: var(--shocking-pink);
+    --textInverted: var(--absolute-white);
+    --link: var(--shamrock-green);
+    --background: var(--white);
+}
+
+@layer components {
+
+    :root {
+        @apply ring-secondary;
+    }
+
+    h1 {
+        @apply text-5xl font-bold;
+    }
+    
+    h2 {
+        @apply text-4xl font-semibold;
+    }
+
+    h3 {
+        @apply text-2xl font-semibold;
+    }
+
+    h4, h5, h6 {
+        @apply text-2xl font-medium;
+    }
+
+    p, span, li, a {
+        @apply text-xl;
+    }
+
+    a {
+        @apply text-link underline;
+    }
+
+    ol {
+        @apply list-decimal;
+    }
+    
+    ul {
+        @apply list-disc;
+    }
+
+    select {
+        @apply bg-background border-primary border px-2 h-8 text-lg;
+    }
+
+    input {
+        @apply bg-background border-primary border px-2 h-8 text-lg;
+    }
+}
--- a/src/app/(app)/globals.css
+++ b/src/app/(app)/globals.css
--- a/src/app/(app)/layout.tsx
+++ b/src/app/(app)/layout.tsx
@ -1,5 +1,5 @@
 import React from 'react'
-import './globals.css'
+import './global.css'
 /* import { Inter } from 'next/font/google'

 const inter = Inter({
@ -18,7 +18,9 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {

  return (
    <html>
-      <body>{children}</body>
+      <body className="autonomic min-h-screen flex flex-col mx-auto max-w-7xl px-6 text-primary bg-background">
+        {children}
+      </body>
    </html>
  )
 }
--- a/src/app/(app)/page.tsx
+++ b/src/app/(app)/page.tsx
@ -1,20 +1,32 @@
-import { Badge } from '@/components/Badge'
-import { Background } from '@/components/Background'
+import ThemeSwitcher from '@/components/ThemeSwitcher'
+import { getCurrentYear } from '@/utils/date'
 import Link from 'next/link'
 import React from 'react'
-import LexicalContent from '@/components/LexicalContent'
+import Header from '@/components/Header'

-const Page = () => {
-  /* const url = 'http://localhost:3000/api/pages/66781d2fb752297de17a3368?depth=1&draft=false'
-
-  const content = fetch(url)
-  console.log(content) */
+interface Props {}

+const Page = (props: Props) => {
  return (
    <>
-      <h1>Lexical content hereinafter</h1>
-
-      {/* <LexicalContent lazyLoadImages={false} childrenNodes={content?.root?.children} locale={''} /> */}
+      <main className="flex flex-col gap-4 flex-grow">
+        <Header />
+        <h1 className="">Nextload</h1>
+        <p className="mt-3">
+          {`Nextload is a pre-configured setup for Nextjs and PayloadCMS that makes it easy to get started with building your website. With Nextload, you'll have a complete development environment that you can run locally using Docker. This makes it easy to test and develop your website before deploying it to a production environment.`}
+          <br />
+          {`When you're ready to deploy the website on your own server, Nextload comes with a production environment that requires the use of Traefik as a reverse proxy. This setup provides a secure and scalable production environment for your website.`}
+        </p>
+        {/* <section className="mt-4">
+          <Posts posts={posts} />
+        </section> */}
+      </main>
+      <footer className="flex justify-between items-center py-4">
+        <p className="text-lg font-semibold">
+          &copy; {getCurrentYear()} Autonomic. Template distributed under AGPL 3.0.
+        </p>
+        <ThemeSwitcher />
+      </footer>
    </>
  )
 }
--- a/src/components/Background.tsx
+++ b/src/components/Background.tsx
@ -1,8 +0,0 @@
-export const Background = () => {
-  return (
-    <div className="background">
-      <div className="blur" />
-      <div className="gradient" />
-    </div>
-  )
-}
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@ -1,20 +0,0 @@
-export const Badge = () => {
-  return (
-    <span className="badge">
-      <svg
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M9.35899 1.59033L16.956 6.233V15.0452L11.2355 18.4097V9.59751L3.62941 4.96095L9.35899 1.59033Z"
-          fill="#ffffff"
-        />
-        <path d="M8.77667 17.9211V11.0447L3.04407 14.4153L8.77667 17.9211Z" fill="#ffffff" />
-      </svg>
-      Beta
-    </span>
-  )
-}
--- a/src/components/Header.tsx
+++ b/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>
+  )
+}
--- a/src/components/ThemeSwitcher.tsx
+++ b/src/components/ThemeSwitcher.tsx
@ -0,0 +1,17 @@
+'use client'
+import React from 'react'
+import { handleThemeChange, switchTheme, initializeThemeSelector } from '@/utils/theme'
+
+interface Props {}
+
+export default function ThemeSwitcher({}: Props) {
+  initializeThemeSelector()
+
+  return (
+    <select id="theme-selector">
+      <option value="autonomic">Autonomic</option>
+      <option value="light">Light</option>
+      <option value="dark">Dark</option>
+    </select>
+  )
+}
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@ -0,0 +1,4 @@
+export const getCurrentYear = (): number => {
+  const currentYear = new Date().getFullYear()
+  return currentYear
+}
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@ -0,0 +1,21 @@
+export function switchTheme(themeClass: string): void {
+  const bodyElement = document.body
+  const classesToRemove = ['light', 'dark', 'autonomic']
+
+  bodyElement.classList.remove(...classesToRemove)
+  bodyElement.classList.add(themeClass)
+}
+
+export function handleThemeChange(event: Event): void {
+  const selectElement = event.target as HTMLSelectElement
+  const selectedTheme = selectElement.value
+
+  switchTheme(selectedTheme)
+}
+
+export function initializeThemeSelector(): void {
+  const themeSelector = document.getElementById('theme-selector')
+  if (themeSelector) {
+    themeSelector.addEventListener('change', handleThemeChange)
+  }
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,19 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{html,ts,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        primary: 'rgba(var(--primary))',
+        secondary: 'rgba(var(--secondary))',
+        tertiary: 'rgba(var(--tertiary))',
+        text: 'rgba(var(--text))',
+        textInverted: 'rgba(var(--textInverted))',
+        link: 'rgba(var(--link))',
+        background: 'rgba(var(--background))',
+      },
+    },
+  },
+  safelist: [],
+  plugins: [],
+}