feat: finish principal container section

src/routes/components/accordion/index.tsx

@@ -0,0 +1,18 @@
+import { component$ } from '@builder.io/qwik';
+import type { DocumentHead } from '@builder.io/qwik-city';
+
+export default component$(() => {
+  return (
+    <>Accordion</>
+  );
+});
+
+export const head: DocumentHead = {
+  title: 'Accordion',
+  meta: [
+    {
+      name: 'description',
+      content: 'Qwik site description',
+    },
+  ],
+};

src/routes/components/alerts/index.tsx

@@ -0,0 +1,18 @@
+import { component$ } from '@builder.io/qwik';
+import type { DocumentHead } from '@builder.io/qwik-city';
+
+export default component$(() => {
+  return (
+    <> Alerts </>
+  );
+});
+
+export const head: DocumentHead = {
+  title: 'Alerts',
+  meta: [
+    {
+      name: 'description',
+      content: 'Qwik site description',
+    },
+  ],
+};

src/routes/components/buttons/index.tsx

@@ -0,0 +1,18 @@
+import { component$ } from '@builder.io/qwik';
+import type { DocumentHead } from '@builder.io/qwik-city';
+
+export default component$(() => {
+  return (
+    <>Buttons</>
+  );
+});
+
+export const head: DocumentHead = {
+  title: 'Buttons',
+  meta: [
+    {
+      name: 'description',
+      content: 'Qwik site description',
+    },
+  ],
+};

src/routes/index.tsx

@@ -2,6 +2,7 @@ import { component$ } from '@builder.io/qwik';
 import type { DocumentHead } from '@builder.io/qwik-city';
 
 export default component$(() => {
+  const myArray = Array.from(Array(100).fill(""), (_, i) => i + 1);
   return (
     <>
       <h1>Hi 👋</h1>
@@ -10,6 +11,9 @@ export default component$(() => {
         <br />
         Happy coding.
       </p>
+      <ul class="list-disc m-4">
+        { myArray.map((element) => (<li>{ element }</li>))}
+      </ul>
     </>
   );
 });

src/routes/layout.tsx

@@ -1,9 +1,13 @@
-import { component$, Slot } from '@builder.io/qwik';
-import Navbar from '~/components/core/navbar';
+import { component$, Slot } from "@builder.io/qwik";
+import Navbar from "~/components/core/navbar";
 
 export default component$(() => {
-  return <div>
-    <Navbar />
-    <Slot />
-  </div>;
+  return (
+    <div>
+      <Navbar />
+      <div class="md:container md:mx-auto p-3 my-6">
+        <Slot />
+      </div>
+    </div>
+  );
 });

src/routes/social/index.tsx

@@ -0,0 +1,18 @@
+import { component$ } from '@builder.io/qwik';
+import type { DocumentHead } from '@builder.io/qwik-city';
+
+export default component$(() => {
+  return (
+    <>Social Networks</>
+  );
+});
+
+export const head: DocumentHead = {
+  title: 'Social Networks',
+  meta: [
+    {
+      name: 'description',
+      content: 'Qwik site description',
+    },
+  ],
+};