WIP builds. fine for first draft

example/content/images/icons/github.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>

example/content/images/icons/linkedin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>

example/content/images/icons/twitter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>

example/content/index.html

@@ -1,3 +0,0 @@
-<h1 class="text-3xl font-bold mx-auto">
-  Hello world!
-</h1>

example/example.cabal

@@ -7,5 +7,6 @@ executable site
   main-is:          site.hs
   build-depends:    base == 4.*
                   , hakyll == 4.15.*
+                  , hip == 1.5.*
   ghc-options:      -threaded -rtsopts -with-rtsopts=-N
   default-language: Haskell2010

example/site.hs

@@ -7,6 +7,10 @@ import           Hakyll
 --------------------------------------------------------------------------------
 main :: IO ()
 main = hakyll $ do
+    match "content/favicon.png" $ do
+        route rmContentPrefix
+        compile copyFileCompiler
+
     match "content/images/*" $ do
         route rmContentPrefix
         compile copyFileCompiler

example/templates/about.html

@@ -1,4 +1,4 @@
-<section id="about" class="py-8 px-2 flex flex-col gap-4">
+<section id="about" class="py-12 px-2 flex flex-col gap-12">
   <header class="text-3xl">
     # about
   </header>

example/templates/contact.html

@@ -1,8 +1,11 @@
-<section id="contact" class="py-8 px-2 flex flex-col gap-4">
+<section id="contact" class="py-12 px-2 flex flex-col gap-12">
   <header class="text-3xl">
     # contact
   </header>
+  <div class="text-gray-700 mt-4">
+    Questions? We'll be happy to help answer any of your questions. Send us an email and we'll get back to you shortly.
+  </div>
   <div>
-    Reach us on : <a href="email:hi@kompact.io"> hi@kompact.io </a>
+    Reach us on : <a href="mailto:hello@kompact.io">hello@kompact.io</a>
   </div>
 </section>

example/templates/default.html

@@ -1,10 +1,13 @@
 <!doctype html>
 <html>
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" type="image/x-icon" href="/favicon.png">
   <link href="/css/mini.css" rel="stylesheet">
 </head>
+
 <body>
   <div class="container mx-auto">
     <hr />
@@ -12,11 +15,16 @@ $partial("templates/nav.html")$
     <hr />
     $partial("templates/hero.html")$
     <hr />
-$partial("templates/about.html")$
+    $partial("templates/services.html")$
+    <hr />
+    $partial("templates/pricing.html")$
     <hr />
     $partial("templates/contact.html")$
     <hr />
+    $partial("templates/footer.html")$
+    <hr />
     $body$
   </div>
 </body>
+
 </html>

example/templates/footer.html

@@ -0,0 +1,21 @@
+<section id="footer" class="py-12 px-2 flex flex-row gap-12 mx-2 sm:mx-4 items-start justify-between">
+  <div class="text-sm text-gray-700">
+    &reg; 2023 kompact.io &trade; All Rights Reserved.
+  </div>
+  <div class="text-gray-700 flex flex-row gap-4">
+    <a href="https://www.linkedin.com/in/dominic-algernon-wallis-123b42187/">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="20" preserveAspectRatio="xMidYMid meet">
+        <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+        <path
+          d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" />
+      </svg>
+    </a>
+    <a href="https://twitter.com/waalge">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="20" preserveAspectRatio="xMidYMid meet">
+        <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+        <path
+          d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" />
+      </svg>
+    </a>
+  </div>
+</section>

example/templates/hero.html

@@ -1,12 +1,12 @@
-<section id="hero" class="py-8 px-2 min-h-96">
+<section id="hero" class="py-8 px-2 h-96 min-h-[50vh] m-auto">
-  <div class="flex sm:flex-row justify-around">
+  <div class="h-full flex justify-around align-center items-center">
     <div class="text-6xl">
       ⟨K⟩
     </div>
-    <div class="flex flex-col gap-2">
+    <div class="flex flex-col gap-2 truncate">
-      <div>withKompact {} do </div>
+      <div>withKompact &#36; <span class="text-red-500">do</span> </div>
-      <div> ... x <- lean dapp dev </div>
+      <div><span class="text-gray-400">· ·</span> dapp <- lean dev </div>
-      <div> ... run x </div>
+          <div><span class="text-gray-400">· ·</span> run dapp </div>
       </div>
     </div>
 </section>

example/templates/nav.html

@@ -1,4 +1,4 @@
-<nav class="">
+<nav class="mx-2 sm:mx-4">
   <div class="relative flex h-16 items-center justify-between ">
     <div>
       Kompact.io
@@ -6,13 +6,18 @@
     <div>
       <ul class="flex flex-row gap-4 md:gap-8">
         <li>
-    <a href="#items">
+          <a href="#services">
-    Items
+            services
           </a>
         </li>
         <li>
-    <a href="#items">
+          <a href="#pricing">
-    Items
+            pricing
+          </a>
+        </li>
+        <li>
+          <a href="#contact">
+            contact
           </a>
         </li>
       </ul>

example/templates/pricing.html

@@ -0,0 +1,46 @@
+<section id="pricing" class="py-12 px-2 flex flex-col gap-12">
+  <header class="text-3xl">
+    # pricing
+  </header>
+  <div class="text-gray-700 mt-4">
+    Plutus development has traditionally meant long development schedules, and expensive ( &#36; 25k+/mo FTE) engineers. 
+    We can work with you at competitive rates in either deliverable or retainer based engagements.
+  </div>
+  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-8 md:mx-24">
+    <div class="max-w-48">
+      <div class="text-1xl font-bold">
+        ## retainer 
+      </div>
+      <div class="text-gray-700 mt-4">
+        Time-based 
+      </div>
+      <div class="text-gray-700 mt-4">
+        Still figuring out your project scope? 
+      </div>
+      <div class="text-gray-700 mt-4">
+        Need an extra pair of hands on an existing project?  
+      </div>
+      <div class="text-gray-700 mt-4">
+        Then a retainer based engagement is for you. 
+      </div>
+    </div>
+    <div class="max-w-48">
+      <div class="text-1xl font-bold">
+        ## deliverable
+      </div>
+      <div class="text-gray-700 mt-4">
+        Output-based 
+      </div>
+      <div class="text-gray-700 mt-4">
+        You know what you want and need help implementing it?
+      </div>
+      <div class="text-gray-700 mt-4">
+        We'll first produce a spec on how the dapp will operate technically. 
+        This involves discussing different options and trade-offs on things from UX to validator complexity. 
+      </div>
+      <div class="text-gray-700 mt-4">
+        Once settled we'll begin the implementation phase and finally integration phase.
+      </div>
+    </div>
+  </div>
+</section>

example/templates/services.html

@@ -0,0 +1,35 @@
+<section id="services" class="py-12 px-2 flex flex-col gap-12">
+  <header class="text-3xl">
+    # services
+  </header>
+  <div class="text-gray-700 mt-4">
+    We are cardano native dapp dev outfit focused on helping you going from 0 to launch ASAP.
+  </div>
+
+  <div class="grid grid-cols-1 gap-4 sm:grid-cols-3 sm:gap-8">
+    <div class="max-w-48">
+      <div class="text-1xl font-bold">
+        ## strategy
+      </div>
+      <div class="text-gray-700 mt-4">
+        We'll work with you to validate your concept, and translate it into an implementable Proof of Concept
+      </div>
+    </div>
+    <div class="max-w-48">
+      <div class="text-1xl font-bold">
+        ## implementation
+      </div>
+      <div class="text-gray-700 mt-4">
+        Cook up appropriate Plutus validators to meet your needs
+      </div>
+    </div>
+    <div class="max-w-48">
+      <div class="text-1xl font-bold">
+        ## deployment
+      </div>
+      <div class="text-gray-700 mt-4">
+        We facilitate integrating the on-chain aspects with the rest of your stack
+      </div>
+    </div>
+  </div>
+</section>

flake.nix

@@ -72,9 +72,9 @@
           packages = with pkgs; [
             caddy
             nil
-            nodePackages_latest.vscode-html-languageserver-bin
+            nodePackages_latest.vscode-langservers-extracted
-            nodePackages_latest.prettier
+            nodePackages_latest.tailwindcss
-            nodePackages.tailwindcss
+            nodePackages_latest.typescript-language-server
             haskellPackages.hakyll
             zlib
           ];