improve the page

Signed-off-by: Piyush Itankar <pitankar@gmail.com>

Author: streetdogg

cache

@@ -6,15 +6,21 @@ thumbnail: "/images/pitch/model.jpeg"
 
 sections:
   - section:
+    - details:
+        type: "full"
+        title: "Embedded Systems"
+        subtitle: "insights and resoning from first principles"
+    - details:
+        type: "break"
     - details:
         type: "half"
         title: ""
         subtitle: ""
         img: "/images/pitch/model.jpeg"
     - details:
         type: "half"
-        title: "Embedded Systems!"
-        subtitle: "insights and resoning from first principles"
+        title: ""
+        subtitle: ""
         texts:
         - text: "Historically, it has been very difficult and time consuming to learn low level details of how Computers really work. We are on a mission `to lowering the barrier to learning Embedded systems Software and Hardware`."
         - text: "We have organised the basics as organised courses in the **Embedded Systems Library**."
@@ -30,41 +36,35 @@ sections:
             link: "mailto:support@pyjamacafe.com"
             text: "Contact Us"
   - section:
+    - details:
+        type: "full"
+        title: "getting started"
+        subtitle: "there is a structured path to it..."
     - details:
         type: "half"
-        title: "The Virtuous Circle"
-        subtitle: "Learn a little bit of everything. Repeat!"
-        texts:
-          - text: "We figured, these are the topics that enables one to contribute the fastest..."
-          - text: "Our claim is, any bit of electronics around you will almost always leverage any three of these five topics - **C**, **CPU**, **OS**, **FPGA** and **Build Tools**."
-          - text: "The **Library** of courses we created is based on this philosophy of learning in a round-robin fashion!"
-        img: ""
-        video: ""
-        ctas:
-          - cta:
-            primary: true
-            link: "/library"
-            text: "Explore the Library"
-          - cta:
-            primary: ""
-            link: "mailto:support@pyjamacafe.com"
-            text: "Contact Us"
+        sequence:
+          - "Pick a 32/64 Bit CPU of choice (ARM/RISC-V etc)."
+          - "Learn the basics of Assembly/C."
+          - "Learn how to use build tools (gcc, as, ld) and utilities (make)."
+          - "Write baremetal bootcode and boot the CPU from scratch."
+          - "Implement a scheduler for the CPU and later replace it with an RTOS."
+          - "Write state-machines and develop applications."
     - details:
         type: "half"
-        title: ""
-        subtitle: ""
         img: "/images/pitch/plan.jpg"
-        video: ""
+
   - section:
     - details:
         type: "full"
-        title: "How it works?"
-        subtitle: "It't not magic. There is a reason to it."
+        title: "Why it works?"
+        subtitle: "the logical link"
+    - details:
+        type: "break"
+
   # the CPU
-  - section:
     - details:
         type: "half"
-        title: "#1. The CPU"
+        title: "The CPU"
         subtitle: "The one that drives the System..."
         texts:
           - text: "Digital systems have a CPU (ARM/RISC-V etc) that drives the system states. The most popular CPUs for Embedded systems on the planet at the moment are - ARM-M, RISC-V and ARM-A."
@@ -84,15 +84,15 @@ sections:
         video: ""
     - details:
         type: "half"
-        title: "#2. The Languages"
+        title: "The Languages"
         subtitle: "Got to program the CPU somehow..."
         texts:
           - text: "Majority of Firmware/Systems software solutions are still authored in C with a little bit of Assembly."
   # Tools
   - section:
     - details:
         type: "half"
-        title: "#3. The Tools"
+        title: "The Tools"
         subtitle: "Binary, debugging and automation"
         texts:
           - text: "CPUs don't understand Assembly or C, they only understand 0s and 1s in the memory interpreted as an instruction. There are tools compiler, debuggers and others that help go from text to binary, debug the system and automate a lot of flows."
@@ -112,7 +112,7 @@ sections:
         video: ""
     - details:
         type: "half"
-        title: "#4. The Operating System"
+        title: "The Operating System"
         subtitle: "Managing state-machines and resources..."
         texts:
           - text: "When you have too many state-machines to be managed an Operating System helps. Majority of embedded system solutions use an RTOS."
@@ -305,11 +305,26 @@ sections:
   - section:
     - details:
         type: "full"
-        title: "stand on our shoulders!"
-        subtitle: "basics is on us. inventing is on you..."
+        title: "what you'll learn"
+        subtitle: "at the end of it all, you will..."
+    - details:
+        type: "half"
+        img: "/images/circle/target.png"
+    - details:
+        type: "half"
+        sequence:
+          - "C programming, converting to Assembly and machine code."
+          - "Grasp ARM-M, ARM-A, and RISC-V memory maps and programmer's models."
+          - "Write and debug C programs for practical use."
+          - "Command C constructs - functions, pointers, structs, unions, enums."
+          - "Analyze data types - integers, floats, doubles, signed/unsigned, const, volatile."
+          - "Understand data type memory representation - 2's complement, floating-point encoding."
+    - details:
+        type: "full"
         ctas:
-          - cta:
-            primary: true
-            link: "/library"
-            text: "Join the Library!"
+            - cta:
+              primary: true
+              link: "/library"
+              text: "Join the Library!"
 ---
+

content/pitch/index.md

@@ -58,6 +58,15 @@
     {{ end }}
   {{ end }}
 
+  {{/*  sequence  */}}
+  {{ if .sequence }}
+    <ol class="pitch-sequence">
+    {{ range .sequence }}
+      <li class="pitch-sequence-item">{{ . }}</li>
+    {{ end }}
+    </ol>
+  {{ end }}
+
   {{ if .posttexts }}
     {{ range .posttexts }}
       <div class="pitch-text"> {{.text | markdownify }} </div>

layouts/partials/pitch/full.html

@@ -29,6 +29,14 @@
     </video>
   {{ end }}
 
+  {{/*  sequence  */}}
+  {{ if .sequence }}
+    <ol class="pitch-sequence">
+    {{ range .sequence }}
+      <li class="pitch-sequence-item">{{ . }}</li>
+    {{ end }}
+    </ol>
+  {{ end }}
   {{ if .ctas }}
     <div class="pitch-ctas">
     {{ range .ctas }}

layouts/partials/pitch/half.html

@@ -7,6 +7,9 @@
     {{ if eq .details.type "full" }}
       {{ partial "pitch/full.html" .details }}
     {{ end }}
+    {{ if eq .details.type "break" }}
+      <div class="pitch-break"></div>
+    {{ end }}
   {{ end }}
 </section>
 {{ end }}

layouts/partials/pitch/section.html

@@ -13,7 +13,7 @@
   align-items: center;
   /* background-color:rgb(255, 183, 138); */
   /* border: black 1px dotted; */
-  margin: 120px 0 120px 0;
+  margin: 100px 0 100px 0;
 }
 
 .pitch-title {
@@ -37,6 +37,12 @@
   padding: 0px;
 }
 
+.pitch-break {
+  flex: 1 1 100%;
+  text-align: center;
+  padding: 12px;
+}
+
 .pitch-text {
   flex: 1 1 100%;
   margin: 0px;
@@ -218,6 +224,50 @@
   text-align: center;
 }
 
+.pitch-sequence {
+  flex: 1 1 100%;
+  list-style: none;
+  counter-reset: step-counter;
+}
+
+.pitch-sequence-item {
+  text-align: left;
+  position: relative;
+  margin-bottom: 20px;
+  padding-left: 30px;
+  max-width: 85%;
+  counter-increment: step-counter;
+}
+
+/* Custom numbers */
+.pitch-sequence li::before {
+  content: counter(step-counter);
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 20px;
+  height: 20px;
+  background: #ff0000;
+  color: white;
+  border-radius: 50%;
+  text-align: center;
+  font-size: 12px;
+  line-height: 20px;
+  z-index: 2;
+}
+
+/* Connecting Line */
+.pitch-sequence li:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  left: 9px;
+  top: 20px;
+  width: 2px;
+  height: calc(100% + 20px);
+  background: #ccc;
+  z-index: 1;
+}
+
 @media screen and (max-width: 771px) {
   .pitch-half {
     max-width: 100%;