feat: classroomio blog v1 (#142)

* style: Improved font size of the answers in the FAQ section of the landing page

* working on the classroomio blog

* there is a bit of a git issue

* changed the footer route

* Merge branch 'main' into issue-139

* Added syntax higlighting,blockquotes styling and image stylings

* restyle and add first blog

* make tagline match home page

* add docs route

---------

Co-authored-by: Rotimi Best <[email protected]>

apps/classroomio-com/src/app.css

@@ -14,10 +14,6 @@ li {
   font-family: 'Inter', sans-serif;
 }
 
-.inter {
-  font-family: 'Inter', sans-serif;
-}
-
 .floating {
   -webkit-animation: floating 2.5s linear infinite;
   animation: floating 2.5s linear infinite;
@@ -46,3 +42,62 @@ li {
     transform: translateY(1rem);
   }
 }
+.prose {
+  font-family: 'Inter', sans-serif;
+}
+
+.prose :is(h1, h2, h3, h4, h5, h6) {
+  font-weight: 700;
+  margin-top: 8px;
+}
+.prose :is(h1) {
+  font-size: 2em;
+}
+.prose :is(h2) {
+  font-size: 1.5em;
+}
+.prose :is(h3) {
+  font-size: 1.17em;
+}
+.prose :is(h4) {
+  font-size: 1em;
+}
+.prose :is(h5) {
+  font-size: 0.83em;
+}
+.prose :is(h6) {
+  font-size: 0.67em;
+}
+
+.prose :is(p, li) {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+  color: #374151;
+}
+
+.prose :is(ul, ol) {
+  list-style-type: disc;
+  padding-left: 3rem;
+}
+
+.prose pre {
+  max-inline-size: 100%;
+  padding: 1rem;
+  border-radius: 8px;
+  tab-size: 2;
+}
+.prose blockquote {
+  border-left: 4px solid gray;
+  font-style: italic;
+  font-weight: 500;
+  padding-left: 16px;
+  margin: 20px 0;
+}
+.prose figure + em {
+  display: block;
+  font-size: 14px;
+  margin-bottom: 40px;
+  border: none;
+  padding: none;
+  text-align: center;
+}