Basic information on website

_includes/footer.njk

@@ -1,11 +0,0 @@
-<footer class="padded-section" data-au="set-width set-height">
-  <div class="max-width" data-au="flex-container align-center">
-    <div data-au="flex-width">
-      <h6>V1 closed beta</h6>
-    </div>
-    <div class="button-container" data-au="set-width flex-container justify-center">
-      {# <a class="button primary" href="https://app.canapi.io">Access Web Portal</a> #}
-      <a class="button primary" href="https://terrabyte.eco/#newsletter">Get Updates</a>
-    </div>
-  </div>
-</footer>

_includes/header.njk

@@ -16,6 +16,7 @@
         <a class="nav-item-container" href="https://app.canapi.io">
           <span>Login</span>
         </a>
+        <a class="button primary" href="#newsletter">Get Updates</a>
       </nav>
     </div>
   </div>

_includes/partials/footer.njk

@@ -1,7 +1,13 @@
-{# duplicate the Terrabyte footer here #}
-
-{# pulled from pixel footer #}
-{# <div id="footer-copyright-container" data-au="flex-width">
-  <p>&copy; <span id="current-year-text">{{ currentYear }}</span> <a class="text-link" href="https://www.terrabyte.eco" target="_blank" aria-label="Terrabyte Website (opens in new window)">Terrabyte, LLC</a>. Terrabyte, its products, and related marks are trademarks of Terrabyte, LLC. All Rights Reserved.</p>
-  <p>Website designed & developed in association with <a class="text-link" href="https://www.goldenharpmedia.com" target="_blank" aria-label="Golden Harp Media Website (opens in new window)">Golden Harp Media</a>.</p>
-</div> #}
+<footer class="padded-section" data-au="set-width set-height">
+  <div class="max-width col-container" data-au="flex-container align-center">
+    <div class="section-col" data-au="flex-width">
+      <h6 class="section-col-header">V1 closed beta</h6>
+      <p>&copy; <span id="current-year-text">{{ currentYear }}</span> <a class="text-link" href="https://www.terrabyte.eco" target="_blank" aria-label="Terrabyte Website (opens in new window)">Terrabyte, LLC</a>. Terrabyte, its products, and related marks are trademarks of Terrabyte, LLC. All Rights Reserved.</p>
+      <p>Website designed &amp; developed in association with <a class="text-link" href="https://www.goldenharpmedia.com" target="_blank" aria-label="Golden Harp Media Website (opens in new window)">Golden Harp Media</a>.
+    </div>
+    <div class="button-container" data-au="set-width flex-container justify-center">
+      {# <a class="button primary" href="https://app.canapi.io">Access Web Portal</a> #}
+      {# <a class="button primary" href="https://terrabyte.eco/#newsletter">Get Updates</a> #}
+    </div>
+  </div>
+</footer>

css/global-tb-styles.css

@@ -70,6 +70,12 @@ hr{
   border:none;
   border-top:2px solid var(--accent);
 }
+a{
+  height:0;
+}
+a[href]{
+  height:auto;
+}
 /* ------------- */
 
 /* implementing shared variables (user interface) */

css/global-tb-ui-styles.css

@@ -3,13 +3,29 @@
 /* +++++++++++++++++++++++++++++++++++++++++++ */
 
 /* inputs */
+form{
+  max-width:300px;
+}
+.form-row{
+  margin-bottom:1rem;
+}
 input{
   font-family: inherit;
   font-size:inherit;
   color:inherit;
   background-color:transparent;
   border:none;
-  outline:none;
+  /* outline:none; */
+}
+input[type="text"],
+input[type="email"]{
+  width:100%;
+  padding:10px 0;
+  border-bottom:2px solid var(--accent);
+}
+input[type="text"]::placeholder,
+input[type="email"]::placeholder{
+  color:grey;
 }
 /* ------------- */
 

css/shared-canapi-styles.css

@@ -166,7 +166,23 @@ p:last-child{
   margin-bottom:0;
 }
 .section-header{
-  margin-bottom:20px;
+  /* margin-bottom:20px; */
+  margin-bottom:3rem;
+}
+.subsection{
+  margin:5rem 0;
+}
+.subsection:last-child{
+  margin-bottom:0;
+}
+.col-container{
+  gap:2rem;
+}
+.section-col{
+
+}
+.section-col-header{
+  margin-bottom:2rem;
 }
 h1, h2, h3, h4, h5, h6{
   font-weight:bold;
@@ -201,11 +217,21 @@ td{
   text-align:left;
 }
 
+/* responsive styles */
+@media (max-width: 800px) {
+  .subsection{
+    margin:2rem 0;
+  }
+  .col-container{
+    gap:1rem;
+  }
+}
+
 
 /* +++++++++++++++++++++++++++++++++++++++++++ */
 /* custom selectors, shared elements */
 .max-width{
-  max-width:1000px;
+  max-width:800px;
   margin:0 auto;
 }
 

css/site-styles.css

@@ -20,7 +20,14 @@ body{
 } */
 /* shared? */
 .padded-section{
-  padding:30px;
+  /* padding:30px; */
+  padding:3rem 30px;
+}
+.full-section{
+  min-height:100vh;
+}
+.large-section{
+  min-height:60vh;
 }
 
 /* main nav */
@@ -78,6 +85,26 @@ main h6{
 main p{
   font-size:18px;
 }
+.anim-hero-text{
+  color:var(--accent-green);
+  position:relative;
+  overflow-x:visible;
+  white-space: nowrap;
+  display:inline-block;
+}
+.anim-hero-text::after{
+  display: block;
+  /* content: ""; */
+  transition:var(--ux-speed);
+  position: absolute;
+  top: 1.5em;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: var(--accent);
+}
+
+
 
 /* hero assets */
 .canapi-brackets{
@@ -105,6 +132,30 @@ main p{
   right:-410px;
 }
 
+/* examples section */
+#about .section-col img{
+  max-width:100%;
+  width:300px;
+  height:200px;
+  object-fit:cover;
+  /* height:auto; */
+}
+
+/* process section */
+#process .col-container{}
+@media only screen and (max-width: 800px){
+  #process .col-container{
+    flex-wrap:wrap;
+  }
+}
+
+/* newsletter section */
+#newsletter .col-container{}
+@media only screen and (max-width: 800px){
+  #newsletter .col-container{
+    flex-wrap:wrap;
+  }
+}
 
 /* footer */
 
@@ -113,8 +164,16 @@ main p{
 
 
 /* responsive styles */
+@media only screen and (max-width: 800px){
+  .section-col{
+    margin-bottom:2rem;
+  }
+}
 @media only screen and (max-width: 600px){
-  header{
+  .padded-section{
+    padding:2rem 30px;
+  }
+  header .canapi-logo{
     display:none;
   }
   .canapi-logo{

index.njk

@@ -4,34 +4,115 @@ layout: layouts/base.njk
 keywords: canapi, terrabyte, automatic, api, software, b2b, green, tech, technology, omaha, nebraska, startup, midwest, business, project, environmental, environmental contributions, tree planting, coral planting, ocean plastic, removal, habitat, restoration, climate, climate change, litter, sustainability, automation, saas, software as a service
 ---
 
-<section id="intro" class="padded-section">
-  <div class="max-width" data-au="flex-container all-center">
-    <div data-au="set-width text-center">
+<section id="intro" class="padded-section large-section" data-au="flex-container all-center">
+  <div class="max-width" data-au="flex-container all-center text-center">
+    <div data-au="flex-container flex-vertical flex-width all-center">
       <div class="canapi-logo"></div>
-      <p>make it green, automatically</p>
+      <p>Automate environmental contributions with every <span class="anim-hero-text" data-anim-hero-text>[enter digital action here]</span></p>
     </div>
   </div>
 </section>
 
 <section id="about" class="padded-section">
   <div class="max-width">
     <div class="section-header">
-      {# <h2>Plant a tree, pickup litter, fund animal research for every product sold, every newsletter sign-up - anything you can imagine.</h2> #}
-      <h2>B2B software to help even small operations go green without the hassle.</h2>
+      <h2>Turn business operations into environmental impact</h2>
     </div>
     <div class="section-content">
-      <p>Canapi is a software as a service (SaaS) product that acts as the middleman between companies and environmental organizations. You decide what triggers environmental contributions, we funnel funds to the organizations that matter most to you.</p>
+      <p>Going green shouldn't be a burden, it should be something that <em>happens</em>. Enter Canapi - your back-end, low-code solution that makes it easy to give back to the planet with every digital action your users take.</p>
+      <p>For the small business that wants to give back to the local community, or for the corporation that just can't cut that last percent of carbon emissions - Canapi turns user engagement, sales, and other interactions into environmental impact. Customize action triggers, logic, and funding amounts, and we funnel your funds to the organizations that matter most to you and your customers.</p>
     </div>
   </div>
 </section>
-<section id="newsletter" class="padded-section">
+
+{# <section id="about" class="padded-section">
   <div class="max-width">
     <div class="section-header">
-      <h2>Join Our Newsletter</h2>
+      <h2>Turn business operations into environmental impact</h2>
     </div>
+
     <div class="section-content">
-      <p>Stay updated with the latest news, updates, and insights from Canapi. Subscribe to our newsletter and be part of our journey towards a greener future.</p>
-      {# newsletter sign up here #}
+      <div class="subsection col-container" data-au="flex-container all-center">
+        <div class="section-col" data-au="flex-width flex-container all-center">
+          <img src="/img/res/tree-planting.jpg" alt="Tree sitting on the grass ready to be planted." />
+        </div>
+        <div class="section-col" data-au="flex-width flex-container all-center">
+          <h3>Plant a tree for every product sold</h3>
+        </div>
+      </div>
+      <div class="subsection col-container" data-au="flex-container all-center">
+        <div class="section-col" data-au="flex-container flex-width all-center">
+          <h3>Remove ocean plastic for every newsletter sign-up</h3>
+        </div>
+        <div class="section-col" data-au="flex-width flex-container all-center">
+          <img src="/img/res/ocean-plastic.jpg" alt="Plastic trash floating in the ocean." />
+        </div>
+      </div>
+      <div class="subsection col-container" data-au="flex-container all-center">
+        <div class="section-col" data-au="flex-width flex-container all-center">
+          <img src="/img/res/endangered-species.jpg" alt="An endangered sea turtle swimming in the ocean." />
+        </div>
+        <div class="section-col" data-au="flex-width flex-container all-center">
+          <h3>Support local species for every app download</h3>
+        </div>
+      </div>
+
+      <p>Going green shouldn't be a burden, it should be something that <em>happens</em>. Enter Canapi - your back-end, low-code solution that</p>
+      <p>For the small business that wants to give back to the local community, for the corporation that coverage - Canapi makes it easy. Customize action triggers, logic, we funnel your funds to the organizations that matter most to you and your customers.</p>
+    </div>
+  </div>
+</section> #}
+<section id="process" class="padded-section">
+  <div class="max-width">
+    <div class="section-header">
+      <h2>The process</h2>
+    </div>
+    <div class="section-content col-container" data-au="flex-container">
+      <div class="section-col" data-au="flex-width">
+        <h3 class="section-col-header">1. Choose your actions</h3>
+        <p>Decide what digital actions users will need to make to trigger funding an environmental contributions. With the low-code implementation, you can tie to anything from a new account activation to buying 55 burgers on their 55th birthday.</p>
+      </div>
+      <div class="section-col" data-au="flex-width">
+        <h3 class="section-col-header">2. Integrate your product</h3>
+        <p>Use our API or low-code integration tools to connect Canapi to your existing systems. Whether you're using a website builder like WordPress, or custom software, our flexible integration options make it easy to connect.</p>
+      </div>
+      <div class="section-col" data-au="flex-width">
+        <h3 class="section-col-header">3. Track your impact</h3>
+        <p>Monitor action triggers being made in your product and the amount you will be billed in real-time. View data on environmental contributions you're helping to create in the online dashboard, manage your active installations, and view other contributions to consider for your next project.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="newsletter" class="padded-section">
+  <div class="max-width">
+    <div class="section-header">
+      <h2>Subscribe to our newsletter</h2>
+    </div>
+    <div class="section-content col-container" data-au="flex-container">
+      <div class="section-col" data-au="flex-width">
+        <p>Stay updated with Canapi development, get priority access to betas, and keep tabs on other things we are doing at Terrabyte.</p>
+      </div>
+      <div class="section-col" data-au="flex-width">
+        <form
+  action="https://buttondown.email/api/emails/embed-subscribe/terrabyte"
+  method="post"
+  target="popupwindow"
+  onsubmit="window.open('https://buttondown.email/terrabyte', 'popupwindow')"
+  class="embeddable-buttondown-form"
+>
+  <div class="form-row">
+    <input type="email" name="email" id="bd-email" placeholder="name@email.com"/>
+  </div>
+  <div class="form-row">
+    <input type="submit" value="Subscribe"/>
+    <input type="hidden" name="tag" value="Canapi Subscribers"/>
+  </div>
+  <div class="form-row">
+    <p>Powered by <a class="text-link" href="https://buttondown.email" target="_blank">Buttondown</a>.</p>
+  </div>
+</form>
+      </div>
     </div>
   </div>
 </section>