DamageBDD · reanmotion · Apr 10, 2025 · Apr 11, 2025 · May 6, 2025
diff --git a/README.md b/README.md
@@ -11,9 +11,10 @@ To generate the site from your Org files using the provided `org-publish` config
 git clone https://github.com/DamageBDD/DamageBDD.com
 cd DamageBDD.com
 ```
-
+
+
 ```bash
-emacs --batch \
+emacs -Q --batch \
       -l publish.el \
       --eval "(org-publish-project \"damagebdd\" t)"
 ```
@@ -26,3 +27,10 @@ docker run --rm -v "$PWD":/project -w /project silex/emacs:latest \
   -l /project/publish.el \
   --eval "(org-publish-project \"damagebdd\" t)"
 ```
+
+### Serve the Site
+
+
+```bash
+emacs -Q --fg-daemon -l publish.el --eval "(publish-and-serve)"
+```
diff --git a/about.org b/about.org
@@ -1,40 +1,111 @@
 #+TITLE: About - DamageBDD
+#+OPTIONS: title:nil
+#+OPTIONS: num:nil
+#+OPTIONS: toc:nil
+#+HTML_HEAD: <link rel="stylesheet" href="./assets/css/style.css">
+#+HTML_HEAD: <link rel="stylesheet" href="./assets/css/base.css">
 
-#+INCLUDE: "header.org"
-* About DamageBDD
 
-Welcome to DamageBDD! We are a cutting-edge technology company founded
+#+BEGIN_EXPORT html
+<nav class="navbar">
+  <ul class="nav-links">
+    <li><a href="./index.html">Home</a></li>
+    <li><a href="./manual.html">Get Started!</a></li>
+    <li><a href="./pricing.html">Pricing</a></li>
+    <li><a href="./articles.html/">Articles</a></li>
+    <li><a href="./about.html">About</a></li>
+    <li><a href="./accounts.html">Log in</a></li>
+  </ul>
+</nav>
+
+<button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark mode">
+  <!-- Sun Icon -->
+  <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    <circle cx="12" cy="12" r="5"></circle>
+    <line x1="12" y1="1" x2="12" y2="3"></line>
+    <line x1="12" y1="21" x2="12" y2="23"></line>
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+    <line x1="1" y1="12" x2="3" y2="12"></line>
+    <line x1="21" y1="12" x2="23" y2="12"></line>
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+  </svg>
+  <!-- Moon Icon -->
+  <svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 A7 7 0 0 0 21 12.79z"></path>
+  </svg>
+</button>
+#+END_EXPORT
+
+
+
+#+BEGIN_EXPORT html
+<main class="legal-container">
+<style>
+  body {
+    margin-top: 60px; 
+}
+</style>
+<h1 style="text-align: center;">About DamageBDD</h1>
+#+END_EXPORT
+
+#+BEGIN_EXPORT html
+<main class="legal-container">
+<style>
+  body {
+    margin-top: 40px; 
+}
+</style>
+#+END_EXPORT
+
+#+BEGIN_EXPORT HTML
+
+<div class="center">
+
+<p>Welcome to DamageBDD! We are a cutting-edge technology company founded
 by Steven, an experienced developer and a passionate
 solopreneur. Steven's expertise lies in using Behavior-Driven
 Development (BDD) to ensure the performance and quality of server-side
-applications.
+applications.</p>
 
-At the beginning of his journey, Steven started using Behave BDD to
+<p>At the beginning of his journey, Steven started using Behave BDD to
 verify the behavior of his applications. However, he soon encountered
 limitations and complexities in managing the entire infrastructure
 required to support a BDD workflow. This led him on a quest to find a
 better solution in the market. However, most available options were
 subscription-based or required additional software installations to
-manage tests or was just clunky.
+manage tests or was just clunky.</p>
 
-Steven envisioned a tool that would integrate seamlessly with CI/CD
+<p>Steven envisioned a tool that would integrate seamlessly with CI/CD
 workflow, making it exceptionally user-friendly for him and his
 team. This is when DamageBDD was born. With DamageBDD, managing your
 tests is as simple as running a curl command. No special software
-installations required.
+installations required.</p>
 
-After successfully completing his own startup journey, Steven was
+<p>After successfully completing his own startup journey, Steven was
 determined to productize DamageBDD and share the efficiency gains he
 experienced with the wider industry. He firmly believes that DamageBDD
 can effectively maintain high-quality, highly available software. Its
 simplicity and versatility make it applicable to a wide range of use
-cases.
+cases.</p>
 
-Join us on this exciting journey as we revolutionize the way software
+<p>Join us on this exciting journey as we revolutionize the way software
 is developed and maintained. With DamageBDD, you can ensure the
 highest standards of performance, quality, and availability for your
 applications. Experience the power of BDD without the complexity
-it's just a command away!
+it's just a command away!</p>
+
+<p>Welcome to DamageBDD - where simplicity meets power!</p>
+
+</div>
+#+END_EXPORT
+
+#+BEGIN_EXPORT html
+</section></main>
+#+END_EXPORT
 
-Welcome to DamageBDD - where simplicity meets power!
 
+#+BEGIN_EXPORT html
+<script src="./assets/js/theme.js"></script>
+#+END_EXPORT
diff --git a/accounts.org b/accounts.org
@@ -1,43 +1,91 @@
 #+Title: Damagebdd - Accounts
+#+OPTIONS: html-style:nil title:nil toc:nil
+#+HTML_HEAD: <link rel="stylesheet" href="./assets/css/style.css">
+#+HTML_HEAD: <link rel="stylesheet" href="./assets/css/base.css">
 
-#+INCLUDE: "header.org"
-
-** Create an Account
-
-To fully utilize the capabilities of DamageBDD, you need to create an account.
+#+BEGIN_EXPORT html
+<nav class="navbar">
+  <ul class="nav-links">
+    <li><a href="./index.html">Home</a></li>
+    <li><a href="./manual.html">Get Started!</a></li>
+    <li><a href="./pricing.html">Pricing</a></li>
+    <li><a href="./articles.html/">Articles</a></li>
+    <li><a href="./about.html">About</a></li>
+  </ul>
+</nav>
 
+<button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark mode">
+  <!-- Sun Icon -->
+  <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    <circle cx="12" cy="12" r="5"></circle>
+    <line x1="12" y1="1" x2="12" y2="3"></line>
+    <line x1="12" y1="21" x2="12" y2="23"></line>
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+    <line x1="1" y1="12" x2="3" y2="12"></line>
+    <line x1="21" y1="12" x2="23" y2="12"></line>
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+  </svg>
+  <!-- Moon Icon -->
+  <svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 A7 7 0 0 0 21 12.79z"></path>
+  </svg>
+</button>
+#+END_EXPORT
 
-Use the following form to create an account:
 
+#+BEGIN_EXPORT html
+<main class="account-page">
+    <div class="form-container">
+#+END_EXPORT
 
 #+BEGIN_EXPORT html
-<form id="kycForm" action="/accounts/create" method="post">
-  <input type="hidden" name="csrf_token" value="your_csrf_token_here">
-
-  <label for="full_name">Full Name:</label>
-  <input type="text" id="full_name" name="full_name" ><br><br>
-<label for="email">Email:</label>
-<input type="text" id="email" name="email" required><span style="color: red;">* required</span><br><br>
+<style>
+  body {
+    margin-top: 100px; 
+</style>
+<main class="registration-container">
+    <h1 style="text-align: center;">Create an Account</h1>
 
-  <!--<label for="dateOfBirth">Date of Birth:</label>
-  <input type="date" id="dateOfBirth" name="dateOfBirth" required><br><br>
+<p class="intro-text">To fully utilize the capabilities of DamageBDD, you need to create an account.</p>
 
-  <label for="nationality">Nationality:</label>
-  <input type="text" id="nationality" name="nationality" required><br><br>
+<form id="kycForm" action="/accounts/create" method="post" class="signup-form">
+    <input type="hidden" name="csrf_token" value="your_csrf_token_here">
+
+    <div class="form-group">
+        <label for="full_name">Full Name</label>
+        <input type="text" id="full_name" name="full_name">
+    </div>
 
-  <label for="address">Address:</label>
-  <textarea id="address" name="address" required></textarea><br><br>
+    <div class="form-group">
+        <label for="email">Email<span class="required">*</span></label>
+        <input type="email" id="email" name="email" required>
+    </div>
 
-  <label for="idDocument">ID Document (Passport, Driver’s License, etc.):</label>
-  <input type="file" id="idDocument" name="idDocument" required><br><br>-->
+    <div class="terms-agreement">
+        <p>By clicking submit you are agreeing to the <a href="/tac.html">terms & conditions</a>.</p>
+    </div>
 
-  <i>By clicking submit you are agreeing to the usage terms & conditions <a href="/tac.html">here.</a></i><br><br>
-  <button type="submit">Submit</button>
+    <form action="#" method="post" style="padding: 1rem; border: 1px solid #ccc;">
+ 		<button type="submit" style="background-color: #7279F4; color: white; padding: 0.75rem 1.5rem; font-size: 1rem; border: none; border-radius: 6px; cursor: pointer;">
+    			Create Account
+  		</button>
 </form>
+
+<div class="post-submit-info">
+    <p>After submitting the form, you will receive a confirmation link in your email. 
+    Click on the link to set your password.</p>
+    <p>See our <a href="manual.html">Getting Started</a> guide for steps to get an AUTH_TOKEN and use the API.</p>
+</div>
 #+END_EXPORT
 
-After submitting the form, you will receive a confirmation link in
-your email. Click on the link and set a password for your account.
+#+BEGIN_EXPORT html
+    </div>
+</main>
+#+END_EXPORT
 
-See [[file:manual.org][Getting Started]] for steps to get an ~AUTH_TOKEN~ and to use the API.
 
+#+BEGIN_EXPORT html
+<script src="./assets/js/theme.js"></script>
+#+END_EXPORT
diff --git a/assets/css/about.css b/assets/css/about.css
@@ -0,0 +1,120 @@
+.about-content {
+    max-width: 800px;
+    margin: 6rem auto 4rem;
+    padding: 0 2rem;
+}
+
+.about-content h1 {
+    font-size: 2.5rem;
+    color: var(--heading-color);
+    margin-bottom: 2rem;
+    text-align: center;
+    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.about-content section {
+    margin: 2.5rem 0;
+}
+
+.about-content p {
+    font-size: 1.1rem;
+    line-height: 1.8;
+    color: var(--text-color);
+    margin-bottom: 1.5rem;
+}
+
+.intro p {
+    font-size: 1.2rem;
+    font-weight: 500;
+}
+
+.journey, .solution, .vision {
+    background: var(--card-bg);
+    padding: 2rem;
+    border-radius: 1rem;
+    box-shadow: var(--card-shadow);
+    border: 1px solid var(--border-color);
+    transition: transform 0.2s ease;
+}
+
+.journey:hover, .solution:hover, .vision:hover {
+    transform: translateY(-5px);
+}
+
+.call-to-action {
+    text-align: center;
+    padding: 3rem 2rem;
+    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
+    border-radius: 1rem;
+    margin: 4rem 0;
+}
+
+.call-to-action p {
+    color: white;
+    margin-bottom: 1rem;
+}
+
+.tagline {
+    font-size: 1.4rem;
+    font-weight: 600;
+    margin-top: 2rem;
+}
+
+/* Add navigation from index page */
+.navbar {
+    position: fixed;
+    top: 0;
+    right: 4rem;
+    padding: 1.5rem 2rem;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+}
+
+.nav-links {
+    display: flex;
+    gap: 2rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.nav-links a {
+    color: var(--text-color);
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 1rem;
+    padding: 0.5rem 0;
+    transition: all 0.2s ease;
+}
+
+.nav-links a:hover {
+    color: var(--primary-color);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .about-content {
+        margin: 4rem auto 2rem;
+        padding: 0 1rem;
+    }
+
+    .about-content h1 {
+        font-size: 2rem;
+    }
+
+    .journey, .solution, .vision {
+        padding: 1.5rem;
+    }
+
+    .call-to-action {
+        padding: 2rem 1rem;
+        margin: 2rem 0;
+    }
+
+    .tagline {
+        font-size: 1.2rem;
+    }
+}