💄 in progress in case my pc trolls

assets/styles/base.scss

@@ -292,6 +292,16 @@ hr {
 }
 
 .singlePage {
+  
+  .index-container {
+    width: 120%;
+    margin-left: -10%;
+    @media all and (max-width: 1200px) {
+      width: 100%;
+      margin-left: 0;
+    }
+    padding: 0 16px;
+  }
   padding: 4em 25vw;
 
   @media all and (max-width: 1200px) {

assets/styles/custom.scss

@@ -2,7 +2,7 @@
 :root {
   --light: #faf8f8;
   --dark: #141021;
-  --secondary: #284b63;
+  // --secondary: #284b63;
   --tertiary: #84a59d;
   --visited: #afbfc9;
   --primary: #f28482;
@@ -14,7 +14,8 @@
 [saved-theme="dark"] {
   --light: #1e1e21 !important;
   --dark: #fbfffe !important;
-  --secondary: #6b879a !important;
+  // --secondary: #6b879a !important;
+  --secondary: #06b6d4 !important;
   --visited: #4a575e !important;
   --tertiary: #84a59d !important;
   --primary: #f58382 !important;

assets/styles/index.scss

@@ -0,0 +1,67 @@
+.index-container {
+    margin-top: 64px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-top: 32px;
+    &-title {
+        font-size: 48px;
+        font-weight: 600;
+        margin: 4px 4px;
+    }
+}
+.hero {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 24px;
+    &-title {
+        text-align: center;
+        font-size: 48px;
+        font-weight: 600;
+        margin: 4px 4px;
+    }
+    &-subtitle {
+        text-align: center;
+        font-size: 20px;
+        font-weight: 600;
+        margin: 4px 4px;
+    }
+}
+
+.embed {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 8px;
+    gap: 32px;
+  }
+
+.feature {
+    display: flex;
+    flex-direction: column;
+
+    &-title {
+        font-size: 36px;
+        font-weight: 600;
+        margin: 12px 4px;
+    }
+
+    &-subtitle {
+        font-size: 20px;
+        font-weight: 600;
+        margin: 4px 4px;
+    }
+
+    &-big {
+        //flex grow ratio 1:2
+        flex-grow: 2;
+    }
+    &-small {
+        //flex grow ratio 1:2
+        flex-grow: 1;
+    }
+}

assets/styles/pricing.scss

@@ -1,7 +1,8 @@
 $base-color: rgb(20, 20, 20);
 $base-color-light: rgb(104, 104, 104);
 $primary-color: rgb(40, 75, 98);
-$secondary-color: rgb(73, 144, 191);
+$secondary-color: var(--secondary);
+$secondary-color-active: #00c7eb;
 
 * {
   box-sizing: border-box;
@@ -57,6 +58,7 @@ $secondary-color: rgb(73, 144, 191);
   gap: 32px;
   margin-top: 32px;
   background-color: $base-color;
+  transition: filter 0.5s;
 
   &-header {
     width: 100%;
@@ -71,10 +73,13 @@ $secondary-color: rgb(73, 144, 191);
   &-label {
     margin-bottom: 0px;
     color: white;
+    filter: drop-shadow(0 0 2px black);
     font-size: 28px;
   }
   &-price {
     font-size: 20px;
+    color: white;
+    filter: drop-shadow(0 0 2px black);
   }
 
   &-body {
@@ -100,23 +105,25 @@ $secondary-color: rgb(73, 144, 191);
       margin: 0px 24px;
     }
     li:before {
-      content: '\2713';
+      content: "\2713";
       display: inline-block;
       color: green;
       padding: 0 6px 0 0;
     }
   }
-  :hover {
+  
-    box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
+  &:hover {
+
+    filter: drop-shadow(0 0 8px black);
   }
 }
 
+
 /* Grey list item */
 .price .grey {
   font-size: 20px;
 }
 
-
 /* The "Sign Up" button */
 .button {
   background-color: #284b63;
@@ -126,6 +133,10 @@ $secondary-color: rgb(73, 144, 191);
   text-align: center;
   text-decoration: none;
   font-size: 18px;
+  &:hover{
+    background-color: #356483;
+    color: white !important;
+  }
 }
 
 /* Change the width of the three columns to 100%
@@ -138,4 +149,11 @@ $secondary-color: rgb(73, 144, 191);
 
 .premium {
   background-color: $secondary-color;
+  &-btn {
+    background-color: $secondary-color;
+    &:hover{
+      background-color: $secondary-color-active;
+      color: white !important;
+    }
+  }
 }

content/_index.md

@@ -2,41 +2,128 @@
 id: home
 title: Home
 ---
-<div class="row" style="margin-top: 2em; margin-bottom: 2em">
+
-    <article class="col-6">
+<article class="index-container">
-        <h1 id="quick-notes-arent-quick-in-obsidian" style="margin: 0">Quick Notes aren't "[[posts/put-quick-notes-into-obsidian-from-anywhere|quick]]" in Obsidian</h1>
+    <div class="hero">
-        <p>Take speedy notes in a browser extension, a mobile app, or a web app and [[posts/sync-fleeting-notes-with-obsidian|sync the notes with Obsidian]].</p>
+        <h1 class="hero-title" >Quick Notes Aren't "[[posts/put-quick-notes-into-obsidian-from-anywhere|Quick]]" Enough in Obsidian</h1>
-        <div style="display: flex; justify-content: center; margin-bottom: 16px">
+        <p class="hero-subtitle">Take [[posts/writing-connected-and-personalized-blogs/|linked]] and speedy notes in a browser extension, a mobile app, or a web app and [[posts/sync-fleeting-notes-with-obsidian|sync the notes with Obsidian]].</p>
-            <a href="/download" class="button">Try it free</a>
+        <p class="hero-subtitle">How speedy? Try it yourself:</p>
+    </div>
+</article>
+<div class="row">
+    <div class="embed">
+            <style scoped>
+        .embed-size {
+            width: 1000px;
+            height: 600px;
+        }
+        @media (max-width: 1024px) {
+            .embed-size {
+                width: 600px;
+                height: 400px;
+            }
+        }
+        @media (max-width: 768px) {
+            .embed-size {
+                width: 600px;
+                height: 400px;
+            }
+        }
+        @media (max-width: 640px) {
+            .embed-size {
+                width: 320px;
+                height: 400px;
+            }
+        }
+        </style>
+        <iframe id=flutter-container class="embed-size" width=800 height=500 src="https://my.fleetingnotes.app/" ></iframe>
+        <div style="display: flex; justify-content: center; margin-bottom: 16px">
+            <a href="/download" class="button premium-btn">Try the webapp instead</a>
+        </div>
+    </div>
+    <div class="row" style="margin-top: 2em; margin-bottom: 2em;">
+    </div>
+
+</div>
+<div class="feature">
+    <div class="row">
+        <div class="col-8">
+            <h2 class="feature-title">Capture Ideas Anytime, Anywhere</h2>
+            <p class="feature-subtitle">Create and sync your fleeting notes on different platforms:</p>
+            <ul>
+                <li>Highlight and save using the <a href="https://chrome.google.com/webstore/detail/fleeting-notes/gcplhmogdjioeaenmehmapbdonklmdnc">Chrome</a> or <a href="https://addons.mozilla.org/en-CA/firefox/addon/fleeting-notes/">Firefox</a> extension</li>
+                <li>Take notes on the go with the <a href="https://apps.apple.com/gb/app/fleeting-notes/id1615226800">iOS</a> or <a href="https://play.google.com/store/apps/details?id=com.fleetingnotes">Android</a> app</li>
+                <li>Access your notes on any device using the <a href="https://my.fleetingnotes.app/">web app</a></li>
+            </ul>
+        </div>
+    </div>
+</div>
+<div class="feature">
+    <div class="row">
+        <div class="col-4">
+        </div>
+        <div class="col-8">
+            <h2 class="feature-title">Easily keep track of any source</h2>
+            <p class="feature-subtitle"></p>
+            <ul class="feature-list">
+                <li>Cloud hosting for attachments</li>
+                <li>Automatically include URLs upon note creation</li>
+                <li>Include YouTube timestamps when watching on the web</li>
+            </ul>
         </div>
-    </article>
-    <div class="col-6">
-        {{< youtube iXLyEvTZp9I >}}
     </div>
 </div>
 
-## Features:
+<div class="feature">
-### Quick capture. Anywhere.
+    <div class="row">
-Capture notes anywhere with an array of supported platforms and built-in sync between all platforms.
+        <div class="col-6">
-- Chrome & Firefox extension
+            <h2 class="feature-title">Made for Obsidian MD</h2>
-- Android & iOS app
+            <p class="feature-subtitle">Use the [[Fleeting Notes plugin]] to seamlessly sync and process your notes</p>
-- Web app
+            <ul>
-- Desktop app (coming soon)
+                <li>Import your links and start connecting your notes</li>
-- Safari extension (coming soon)
+                <li>Choose your syncing type (delete after sync, two-way)</li>
+                <li>Run commmands to embed unprocessed or same source notes</li>
+                <li>Create your own note template with metadata</li>
+            </ul>
+        </div>
+                        <div class="col-6">
+            {{< youtube iXLyEvTZp9I >}}
+        </div>
+    </div>
+</div>
+<div class="feature">
+    <div class="row">
+        <div class="col-6">
+            <h2 class="feature-title">Do what you want with your notes</h2>
+            <p class="feature-subtitle">We value your privacy and security :)</p>
+            <ul>
+                <li><a href="/posts/end-to-end-encryption-in-fleeting-notes">Enable end-to-end encryption</a></li>
+                <li>100% of your notes are stored locally with optional sync</li>
+                <li>Share links to your notes with anyone</li>
+                <li>Export all notes into Markdown or JSON</li>
+            </ul>
+        </div>
+                        <div class="col-6">
+            {{< youtube iXLyEvTZp9I >}}
+        </div>
+    </div>
+</div>
 
-### Full control of your notes
+<div class="feature">
-Keep a backup of your notes or sync with other note-taking applications
+    <div class="row">
-- 100% of your notes are stored locally with optional sync
+        <div class="col-6">
-- [[posts/end-to-end-encryption-in-fleeting-notes|Support for end-to-end encryption]]
+            <h2></h2>
-- [[posts/sync-fleeting-notes-with-obsidian|Sync notes with Obsidian]]
+            </ul>
-- Export all notes in Markdown or JSON
+        </div>
+    </div>
+</div>
 
-### Find notes easily
+<div>
-The combination of full-text search and linking makes it easy to find any note. Either search for the note or [[notes/following a train of thought|follow a trail of linked notes]].
+    <script type="text/javascript" src="https://testimonial.to/js/iframeResizer.min.js"></script><iframe id="testimonialto-testimonial-light" src="https://embed.testimonial.to/w/testimonial?theme=light&card=base" frameborder="0" scrolling="no" width="100%"></iframe><script type="text/javascript">iFrameResize({log: false, checkOrigin: false}, "#testimonialto-testimonial-light");</script>
-- Links and backlinks
+    <blockquote class="twitter-tweet"><p lang="en" dir="ltr">Remember everything, achieve anything.<br><br>That&#39;s what Building a Second Brain <a href="https://twitter.com/fortelabs?ref_src=twsrc%5Etfw">@fortelabs</a> promises:<br>A life-changing productivity system to make the most of your knowledge.<br><br>Here are the principles to start building one 👇</p>&mdash; John Mavrick (@johnmavrick_yt) <a href="https://twitter.com/johnmavrick_yt/status/1553206657341177856?ref_src=twsrc%5Etfw">July 30, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
-- Full-text search
+</div>
-- History of traversed notes
 
 ## Questions? Contact Me.
+
 - Email me at: ithinkwong@gmail.com
 - Join the [discord channel](https://discord.gg/xrj6yuGNmx)

layouts/shortcodes/pricing-tables.html

@@ -65,7 +65,7 @@
         </ul>
         <a
           href="https://payments.fleetingnotes.app"
-          class="button button-cta premium"
+          class="button button-cta premium-btn"
           >Try it for free</a
         >
       </div>