feat: improve website copy

src/scripts/fundamentals/views/fundamentals.html

@@ -0,0 +1,110 @@
+<tc-viewport>
+  <tc-container size="sm">
+    <t-row>
+      <t-col>
+        <h1>Fundamentals</h1>
+        <p>
+          Taslonic components help you to get rid of the trivial work present
+          in your daily routine. It makes you think less about the means and
+          turns your energy and care to what matters, the end.
+        </p>
+      </t-col>
+    </t-row>
+    <t-row>
+      <t-col>
+        <t-button tag="a" theme="secondary" href="/principles">
+          See Principles
+        </t-button>
+      </t-col>
+    </t-row>
+  </tc-container>
+  <tc-section>
+    <tc-container>
+      <t-row>
+        <t-col sm="6">
+          <t-row>
+            <t-col>
+              <h2>Submit smoothly</h2>
+              <p>
+                Effortless feedbacks. Validate form controls writing way less
+                code. See how a newsletter form looks like using Taslonic
+                components.
+              </p>
+            </t-col>
+          </t-row>
+          <t-row>
+            <t-col>
+              <t-button
+                tag="a"
+                theme="secondary"
+                ref="noopener"
+                target="_blank"
+                href="https://components.taslonic.com/#!/components/react/playground?tab=1&code=eyJ0ZW1wbGF0ZSI6IlxuIiwiY29udHJvbGxlciI6ImZ1bmN0aW9uKCkge1xuICBjb25zdCB7IHVzZVN0YXRlIH0gPSBSZWFjdDtcbiAgY29uc3QgeyBSb3csIENvbCwgRm9ybSwgRmllbGQsIElucHV0LCBCdXR0b24gfSA9IHRhc2xvbmljUmVhY3Q7XG5cbiAgcmV0dXJuIGZ1bmN0aW9uKCkge1xuICAgIGNvbnN0IFtlbWFpbCwgc2V0RW1haWxdID0gdXNlU3RhdGUoJycpO1xuICAgIGNvbnN0IGVtYWlsVmFsaWRhdGlvbnMgPSBbe1xuICAgICAgaXNWYWxpZDogdmFsdWUgPT4ge1xuICAgICAgICBjb25zdCByZWdleCA9IG5ldyBSZWdFeHAoL15bQS1aMC05Ll8lKy1dK0BbQS1aMC05Li1dK1xcLltBLVpdKyQvLCAnaScpO1xuICAgICAgICByZXR1cm4gcmVnZXgudGVzdCh2YWx1ZSk7XG4gICAgICB9LFxuICAgICAgZXJyb3JNZXNzYWdlOiAnUGxlYXNlLCBlbnRlciBhIHZhbGlkIGVtYWlsLidcbiAgICB9XVxuICAgIGNvbnN0IG9uRW1haWxDaGFuZ2UgPSAoeyB0YXJnZXQ6IHsgbmFtZSwgdmFsdWUgfSB9KSA9PiBzZXRFbWFpbCh2YWx1ZSk7XG4gICAgY29uc3Qgb25TdWJtaXQgPSAoKSA9PiB7XG4gICAgICAvLyBIZXJlJ3MgYSByZXF1ZXN0IHNpbXVsYXRpb24uIG9uU3VibWl0IG11c3QgcmV0dXJuIGEgUHJvbWlzZS5cbiAgICAgIHJldHVybiBuZXcgUHJvbWlzZShyZXNvbHZlID0%252BIHNldFRpbWVvdXQoKCkgPT4gcmVzb2x2ZSh7IHN0YXR1c0NvZGU6IDIwMCB9KSwgMjAwMCkpO1xuICAgIH07XG4gICAgY29uc3Qgb25TdWJtaXRTdWNjZXNzID0gKCkgPT4gc2V0RW1haWwoJycpO1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxSb3cgYWxpZ249XCJjZW50ZXJcIj5cbiAgICAgICAgPENvbCBtZD1cIjRcIj5cbiAgICAgICAgICA8Rm9ybVxuICAgICAgICAgICAgb25TdWJtaXQ9e29uU3VibWl0fVxuICAgICAgICAgICAgb25TdWJtaXRTdWNjZXNzPXtvblN1Ym1pdFN1Y2Nlc3N9XG4gICAgICAgICAgICBzdWJtaXRTdWNjZXNzVGl0bGU9XCJHb29kIGpvYiFcIlxuICAgICAgICAgICAgc3VibWl0U3VjY2Vzc01lc3NhZ2U9XCJZb3UncmUgbm93IHN1YnNjcmliZWRcIlxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxSb3c%252BXG4gICAgICAgICAgICAgIDxDb2w%252BXG4gICAgICAgICAgICAgICAgPEZpZWxkIGxhYmVsPVwiRW1haWwgQWRkcmVzc1wiIGJsb2NrPlxuICAgICAgICAgICAgICAgICAgPElucHV0XG4gICAgICAgICAgICAgICAgICAgIG5hbWU9XCJlbWFpbFwiXG4gICAgICAgICAgICAgICAgICAgIHZhbHVlPXtlbWFpbH1cbiAgICAgICAgICAgICAgICAgICAgb25DaGFuZ2U9e29uRW1haWxDaGFuZ2V9XG4gICAgICAgICAgICAgICAgICAgIHZhbGlkYXRpb25zPXtlbWFpbFZhbGlkYXRpb25zfVxuICAgICAgICAgICAgICAgICAgICBibG9ja1xuICAgICAgICAgICAgICAgICAgICByZXF1aXJlZFxuICAgICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgICA8L0ZpZWxkPlxuICAgICAgICAgICAgICA8L0NvbD5cbiAgICAgICAgICAgIDwvUm93PlxuICAgICAgICAgICAgPFJvdz5cbiAgICAgICAgICAgICAgPENvbD5cbiAgICAgICAgICAgICAgICA8QnV0dG9uIHR5cGU9XCJzdWJtaXRcIiB0aGVtZT1cInByaW1hcnlcIiBibG9jaz5cbiAgICAgICAgICAgICAgICAgIFN1YnNjcmliZVxuICAgICAgICAgICAgICAgIDwvQnV0dG9uPlxuICAgICAgICAgICAgICA8L0NvbD5cbiAgICAgICAgICAgIDwvUm93PlxuICAgICAgICAgIDwvRm9ybT5cbiAgICAgICAgPC9Db2w%252BXG4gICAgICA8L1Jvdz5cbiAgICApO1xuICB9O1xufSIsInN0eWxlcyI6IlxuIn0%253D&source=edit-link">
+                Check the code
+              </t-button>
+            </t-col>
+          </t-row>
+        </t-col>
+        <t-col sm="6">
+          <t-row>
+            <t-col>
+              <h2>Fetch friendly</h2>
+              <p>
+                The Fetcher component handles exceptions by default and shows
+                a retry button without charging one more line of code for this.
+              </p>
+            </t-col>
+          </t-row>
+          <t-row>
+            <t-col>
+              <t-button
+                tag="a"
+                theme="secondary"
+                ref="noopener"
+                target="_blank"
+                href="https://components.taslonic.com/#!/components/react/playground?tab=1&code=eyJ0ZW1wbGF0ZSI6IlxuIiwiY29udHJvbGxlciI6ImZ1bmN0aW9uKCkge1xuICBjb25zdCB7IHVzZVN0YXRlIH0gPSBSZWFjdDtcbiAgY29uc3QgeyBDb2wsIFJvdywgQ2FyZCwgRmV0Y2hlciB9ID0gdGFzbG9uaWNSZWFjdDtcblxuICByZXR1cm4gZnVuY3Rpb24oKSB7XG4gICAgY29uc3QgW3JlcUNvdW50LCBzZXRSZXFDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgICBjb25zdCBbdXNlciwgc2V0VXNlcl0gPSB1c2VTdGF0ZSh7fSk7XG4gICAgY29uc3Qgb25GZXRjaCA9ICgpID0%252BIHtcbiAgICAgIC8vIEhlcmUncyBhIHJlcXVlc3Qgc2ltdWxhdGlvbi4gb25GZXRjaCBtdXN0IHJldHVybiBhIFByb21pc2UuXG4gICAgICByZXR1cm4gbmV3IFByb21pc2UoKHJlc29sdmUsIHJlamVjdCkgPT4ge1xuICAgICAgICBjb25zdCB1c2VyID0ge1xuICAgICAgICAgIG5hbWU6ICdSYWZhZWwgQ2FtYXJnbycsXG4gICAgICAgICAgYXZhdGFyVXJsOiAnaHR0cHM6Ly9hdmF0YXJzLmdpdGh1YnVzZXJjb250ZW50LmNvbS91LzQ3Mzg2ODc%252Fcz00MDAnLFxuICAgICAgICAgIHByb2Zlc3Npb246ICdQcm9ncmFtbWVyJyxcbiAgICAgICAgICB3ZWJzaXRlOiAnaHR0cHM6Ly93d3cucmFmYWVsY2FtYXJnby5jb20nLFxuICAgICAgICAgIGVtYWlsOiAnaGVsbG9AcmFmYWVsY2FtYXJnby5jb20nLFxuICAgICAgICAgIHR3aXR0ZXI6ICdyY2FtYXJnbydcbiAgICAgICAgfTtcbiAgICAgICAgXG4gICAgICAgIC8vIFRoaXMgaXMgYSBjb3VudGVyIHRvIGZvcmNlIGZpcnN0IHJlcXVlc3QgZmFpbCBhbmQgdGhlIHNlY29uZCBvbmUgc3VjY2VlZC5cbiAgICAgICAgY29uc3QgbmV3Q291bnQgPSByZXFDb3VudCArIDE7IFxuICAgICAgICBzZXRSZXFDb3VudChuZXdDb3VudCk7XG4gICAgICAgIFxuICAgICAgICBzZXRUaW1lb3V0KCgpID0%252BIHtcbiAgICAgICAgICBuZXdDb3VudCA%252BIDEgPyByZXNvbHZlKHsgZGF0YTogdXNlciAgfSkgOiByZWplY3QoKVxuICAgICAgICB9LCAyMDAwKTtcbiAgICAgIH0pO1xuICAgIH07XG4gICAgY29uc3Qgb25GZXRjaFN1Y2Nlc3MgPSAoeyBkYXRhIH0pID0%252BIHNldFVzZXIoZGF0YSk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPGRpdiBjbGFzc05hbWU9XCJleGFtcGxlXCI%252BXG4gICAgICAgIDxSb3cgYWxpZ249XCJjZW50ZXJcIj5cbiAgICAgICAgICA8Q29sIHNtPVwiNVwiPlxuICAgICAgICAgICAgPENhcmQ%252BXG4gICAgICAgICAgICAgIDxGZXRjaGVyIG9uRmV0Y2g9e29uRmV0Y2h9IG9uRmV0Y2hTdWNjZXNzPXtvbkZldGNoU3VjY2Vzc30%252BXG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJ1c2VyLWNhcmQtY29udGVudFwiPlxuICAgICAgICAgICAgICAgICAgPGltZyBzcmM9e3VzZXIuYXZhdGFyVXJsfSBhbHQ9e2Ake3VzZXIubmFtZX0ncyBBdmF0YXJgfSAvPlxuICAgICAgICAgICAgICAgICAgPGgxPnt1c2VyLm5hbWV9PC9oMT5cbiAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwidXNlci1jYXJkLWNvbnRlbnQtcHJvZmVzc2lvblwiPnt1c2VyLnByb2Zlc3Npb259PC9kaXY%252BXG4gICAgICAgICAgICAgICAgICA8YSBocmVmPXt1c2VyLndlYnNpdGV9IHJlbD1cIm5vcmVmZXJyZXJcIiB0YXJnZXQ9XCJfYmxhbmtcIj57dXNlci53ZWJzaXRlfTwvYT5cbiAgICAgICAgICAgICAgICAgIDxhIGhyZWY9e2BtYWlsdG86JHt1c2VyLmVtYWlsfWB9IHJlbD1cIm5vcmVmZXJyZXJcIiB0YXJnZXQ9XCJfYmxhbmtcIj57dXNlci5lbWFpbH08L2E%252BXG4gICAgICAgICAgICAgICAgICA8YSBocmVmPXtgaHR0cHM6Ly90d2l0dGVyLmNvbS8ke3VzZXIudHdpdHRlcn1gfSByZWw9XCJub3JlZmVycmVyXCIgdGFyZ2V0PVwiX2JsYW5rXCI%252BQHt1c2VyLnR3aXR0ZXJ9PC9hPlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICA8L0ZldGNoZXI%252BXG4gICAgICAgICAgICA8L0NhcmQ%252BXG4gICAgICAgICAgPC9Db2w%252BXG4gICAgICAgIDwvUm93PlxuICAgICAgPC9kaXY%252BXG4gICAgKTtcbiAgfTtcbn0iLCJzdHlsZXMiOiIudXNlci1jYXJkLWNvbnRlbnQge1xuICBwYWRkaW5nOiA0MHB4O1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG59XG5cbi51c2VyLWNhcmQtY29udGVudCBpbWcge1xuICB3aWR0aDogMTAwcHg7XG4gIGJvcmRlci1yYWRpdXM6IDUwcHg7XG4gIG92ZXJmbG93OiBoaWRkZW47XG59XG5cbi51c2VyLWNhcmQtY29udGVudCBoMSB7XG4gIG1hcmdpbjogMDtcbiAgbGV0dGVyLXNwYWNpbmc6IC0xcHg7XG59XG5cbi51c2VyLWNhcmQtY29udGVudC1wcm9mZXNzaW9uIHtcbiAgbWFyZ2luLWJvdHRvbTogMTBweDtcbiAgY29sb3I6ICNDNENERDU7XG4gIGZvbnQtc2l6ZTogMTJweDtcbiAgZm9udC13ZWlnaHQ6IGJvbGQ7XG4gIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG59XG5cbi51c2VyLWNhcmQtY29udGVudCBhIHtcbiAgZGlzcGxheTogYmxvY2s7XG4gIGZvbnQtc2l6ZTogMTRweDtcbiAgY29sb3I6ICM2MjczODA7XG4gIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbn1cblxuLnVzZXItY2FyZC1jb250ZW50IGE6aG92ZXIsXG4udXNlci1jYXJkLWNvbnRlbnQgYTpmb2N1cyxcbi51c2VyLWNhcmQtY29udGVudCBhOmFjdGl2ZSB7XG4gIGNvbG9yOiAjMzI4MkUxO1xuICB0ZXh0LWRlY29yYXRpb246IHVuZGVybGluZTtcbn0ifQ%253D%253D&source=edit-link">
+                Check the code
+              </t-button>
+            </t-col>
+          </t-row>
+        </t-col>
+      </t-row>
+    </tc-container>
+  </tc-section>
+  <tc-container size="sm">
+    <t-row>
+      <t-col>
+        <h2>Versatile by design</h2>
+        <p>
+          The core of Taslonic is written in vanilla JavaScript and then made
+          available through engine-specific wrappers. It’s compatible with
+          the most famous technologies used to build user interfaces.
+        </p>
+      </t-col>
+    </t-row>
+    <t-row>
+      <t-col xs="6" sm="4">
+        <t-button
+          tag="a"
+          theme="primary"
+          href="https://components.taslonic.com/#!/components/vue/alert"
+          target="_blank"
+          rel="noopener"
+          block>
+          Vue Components
+        </t-button>
+      </t-col>
+      <t-col xs="6" sm="4">
+        <t-button
+          tag="a"
+          theme="primary"
+          href="https://components.taslonic.com/#!/components/react/alert"
+          target="_blank"
+          rel="noopener"
+          block>
+          React Components
+        </t-button>
+      </t-col>
+    </t-row>
+  </tc-container>
+</tc-viewport>

src/scripts/fundamentals/views/fundamentals.js

@@ -0,0 +1,32 @@
+import { tButton, tCol, tRow } from '@glorious/taslonic/vue';
+import { tcCode } from '@scripts/base/components/code/code';
+import { tcContainer } from '@scripts/base/components/container/container';
+import { tcLink } from '@scripts/base/components/link/link';
+import { tcSection } from '@scripts/base/components/section/section';
+import { tcViewport } from '@scripts/base/components/viewport/viewport';
+import seoService from '@scripts/base/services/seo/seo';
+import template from './fundamentals.html';
+
+const head = seoService.buildHead({
+  title: 'Fundamentals',
+  description: 'Taslonic components help you to get rid of the trivial work present in your daily routine. It makes you think less about the means and turns your energy and care to what matters, the end.',
+  keywords: 'taslonic, ui, components, vue, react, fundamentals, principles'
+});
+
+const fundamentalsView = {
+  name: 'tc-fundamentals-view',
+  components: {
+    tButton,
+    tCol,
+    tRow,
+    tcCode,
+    tcContainer,
+    tcLink,
+    tcSection,
+    tcViewport
+  },
+  head,
+  template
+};
+
+export default fundamentalsView;

src/scripts/fundamentals/views/fundamentals.test.js

@@ -0,0 +1,14 @@
+import { shallowMount } from '@vue/test-utils';
+import { tcViewport } from '@scripts/base/components/viewport/viewport'
+import fundamentalsView from './fundamentals';
+
+describe('Components View', () => {
+  function mount(){
+    return shallowMount(fundamentalsView);
+  }
+
+  it('should contain a viewport', () => {
+    const wrapper = mount();
+    expect(wrapper.findAllComponents(tcViewport)).toHaveLength(1);
+  });
+});

src/scripts/home/views/home.html

@@ -3,7 +3,7 @@
   <article>
     <tc-container size="lg">
       <t-row offset="10" align="center">
-        <t-col sm="8" md="6">
+        <t-col sm="8" md="6" align="center">
           <h2 id="learn-more">
             Your time is precious. Use it wisely.
           </h2>

src/scripts/install/views/install.html → src/scripts/installation/views/installation.html

@@ -29,9 +29,9 @@ <h2>Package Manager</h2>
       <t-col>
         <h2>CDN</h2>
         <p>
-          If you're not into package management or if you just wanna give
-          Taslonic a try using a standalone HTML file, you can load Taslonic
-          assets from a third-party CDN provider. There are two options: <strong>
+          If you're not into package management or want to give Taslonic a
+          quick try using a standalone HTML file, you can load it
+          from a third-party CDN provider. There are two options: <strong>
           JS Deliver</strong> and <strong>UNPKG</strong>.
         </p>
       </t-col>
@@ -55,4 +55,35 @@ <h2>CDN</h2>
       </t-col>
     </t-row>
   </tc-container>
+  <tc-container size="sm">
+    <t-row offset="6">
+      <t-col>
+        <h2>You're ready!</h2>
+        <p>
+          Once the installation is complete, you're ready to start using
+          Taslonic components.
+        </p>
+      </t-col>
+    </t-row>
+    <t-row>
+      <t-col xs="6" sm="4">
+        <t-button
+          tag="a"
+          theme="primary"
+          href="/vue"
+          block>
+          Vue Usage
+        </t-button>
+      </t-col>
+      <t-col xs="6" sm="4">
+        <t-button
+          tag="a"
+          theme="primary"
+          href="/react"
+          block>
+          React Usage
+        </t-button>
+      </t-col>
+    </t-row>
+  </tc-container>
 </tc-viewport>

src/scripts/install/views/install.js → src/scripts/installation/views/installation.js

@@ -1,19 +1,20 @@
-import { tCol, tRow } from '@glorious/taslonic/vue';
+import { tCol, tRow, tButton } from '@glorious/taslonic/vue';
 import { tcCode } from '@scripts/base/components/code/code';
 import { tcContainer } from '@scripts/base/components/container/container';
 import { tcViewport } from '@scripts/base/components/viewport/viewport';
 import seoService from '@scripts/base/services/seo/seo';
-import template from './install.html';
+import template from './installation.html';
 
 const head = seoService.buildHead({
-  title: 'Get Started',
-  description: 'Get started with Taslonic. A component library that makes form creation and data fetching really simple.',
-  keywords: 'taslonic, ui, components, form creation, react, vue, data fetching'
+  title: 'Installation',
+  description: 'You can install Taslonic in your project either using a Package Manager or getting it directly from a CDN.',
+  keywords: 'taslonic, ui, components, installation, react, vue, npm, yarn'
 });
 
 const installView = {
   name: 'tc-install-view',
   components: {
+    tButton,
     tCol,
     tRow,
     tcCode,

src/scripts/install/views/install.test.js → src/scripts/installation/views/installation.test.js

@@ -1,10 +1,10 @@
 import { shallowMount } from '@vue/test-utils';
 import { tcViewport } from '@scripts/base/components/viewport/viewport'
-import installView from './install';
+import installationView from './installation';
 
 describe('Install View', () => {
   function mount(){
-    return shallowMount(installView);
+    return shallowMount(installationView);
   }
 
   it('should contain a viewport', () => {

src/scripts/principles/views/principles.html

@@ -4,43 +4,71 @@
       <t-col>
         <h1>A couple of principles</h1>
         <p>
-          The component-based architecture was one of the awesome things that
-          happen to the front-end development in the last years. But little by
-          little, those early and simple components have started to give place
-          to truly complex ones. The initial awesomeness is sadly getting lost
-          as we see that components are no longer fun as they used to be.
-          Taslonic aims to radically change this.
+          The Component-Based architecture was one of the best things that
+          happened to front-end development in the last years. But little by
+          little, those early and simple components have started to give
+          place to truly complex ones. Unfortunately, the initial happiness
+          is getting lost as we realize those components are no longer fun as
+          they used to be. Taslonic aims to change this.
         </p>
       </t-col>
     </t-row>
-    <t-row offset="6">
+  </tc-container>
+  <tc-section>
+    <tc-container size="sm">
+      <t-row>
+        <t-col>
+          <h3>Inspired by the HTML</h3>
+          <p>
+            The simplicity of the HTML is lovely. HTML is declarative and easy
+            to understand. A lot of libraries forget these traits. They bother
+            developers who use them with a lot of unnecessary warnings. They
+            warn you whether your property type is wrong or its value is not
+            valid. Taslonic thinks differently. Taslonic considers this extra
+            amount of time for just building trouble worthless. What happens
+            if you put the href attribute in a button tag when writing plain
+            HTML? Nothing. So does Taslonic. It's inspired by the old and
+            gold HTML, not by any tech-trend.
+          </p>
+        </t-col>
+      </t-row>
+      <t-row offset="6">
+        <t-col>
+          <h3>Productivity over aesthetics</h3>
+          <p>
+            The term "component library" might be understood as something that
+            helps you get a fancy interface without having to write a lot of
+            CSS styles on your own. Although Taslonic includes some CSS
+            styles, they're only the bare minimum to make components work. The
+            purpose is to leverage productivity, not following the fashion.
+            Nobody likes to write tons of code to validate a form or to handle
+            dynamically visible components. Productivity first, aesthetics later.
+          </p>
+        </t-col>
+      </t-row>
+    </tc-container>
+  </tc-section>
+  <tc-container size="sm">
+    <t-row offset="3">
       <t-col>
-        <h3>Inspired by the HTML</h3>
+        <h2>Are you in?</h2>
         <p>
-          The simplicity of the HTML is lovely. It’s declarative and easy to
-          understand. A lot of libraries forget these traits. They bother
-          developers who use them with a lot of unnecessary warnings. They
-          warn you whether your property type is wrong or its value is not
-          valid. Taslonic thinks differently. Taslonic considers this extra
-          amount of time to just build trouble worthless. What happens if you
-          put a href attribute in a button tag when writing plain HTML?
-          Nothing. So does Taslonic. Inspired  by HTML, not by any fashion.
+          If you’re looking for tech-trends or fashion-driven interfaces,
+          Taslonic is not the right tool for you. But if you think a custom
+          component tag should be as simple to use as any native HTML tag,
+          it’s time to get started.
         </p>
       </t-col>
     </t-row>
-    <t-row offset="3">
-      <t-col>
-        <h3>Productivity over aesthetic</h3>
-        <p>
-          A lot of people think component libraries as something that will
-          help them to deliver fancy interfaces faster than having to code
-          those styles on their own. Although Taslonic includes some styles,
-          it’s only the bare minimum to make components work. The focus is on
-          components that leverage productivity. Nobody likes to write tons
-          of code to validate a form. Nobody likes to write uncountable
-          conditions to toggle the visibility of dynamic components. Productivity
-          first, aesthetic later.
-        </p>
+    <t-row>
+      <t-col sm="4">
+        <t-button
+          tag="a"
+          theme="primary"
+          href="/installation"
+          block>
+          Get Started
+        </t-button>
       </t-col>
     </t-row>
   </tc-container>

src/scripts/principles/views/principles.js

@@ -1,23 +1,26 @@
-import { tCol, tRow } from '@glorious/taslonic/vue';
+import { tCol, tRow, tButton } from '@glorious/taslonic/vue';
 import { tcCode } from '@scripts/base/components/code/code';
 import { tcContainer } from '@scripts/base/components/container/container';
+import { tcSection } from '@scripts/base/components/section/section';
 import { tcViewport } from '@scripts/base/components/viewport/viewport';
 import seoService from '@scripts/base/services/seo/seo';
 import template from './principles.html';
 
 const head = seoService.buildHead({
   title: 'Principles',
-  description: 'The component-based architecture was one of the awesome things that happen to the front-end development in the last years. But little by little, those early and simple components have started to give place to truly complex ones. Taslonic follows a couple of principles to radically change this.',
+  description: 'The Component-Based architecture was one of the best things that happened to front-end development in the last years. But little by little, those early and simple components have started to give place to truly complex ones. Unfortunately, the initial happiness is getting lost as we realize those components are no longer fun as they used to be. Taslonic aims to change this.',
   keywords: 'taslonic, principles, html, productivity'
 });
 
 const principlesView = {
   name: 'tc-principles-view',
   components: {
+    tButton,
     tCol,
     tRow,
     tcCode,
     tcContainer,
+    tcSection,
     tcViewport
   },
   head,