Adds course banner and content to the webview

Author: FilledStacks

i18n/es/code.json

@@ -280,6 +280,7 @@
   "index.main.likeUs": {
     "message": "Danos me gusta en Pub 👍"
   },
+
   "index.powerfulCli.title": {
     "message": "Una Potente CLI"
   },

src/pages/index.tsx

@@ -107,6 +107,9 @@ export default function Home() {
           />
         </section>
       </div>
+
+
+      {/* ====== Forms Section ====== */}
       <section className="container text-center md:text-left flex gap-4 flex-col-reverse md:flex-row-reverse justify-evenly items-center min-h-[35vh] mx-auto py-16">
         <div>
           <motion.div
@@ -151,6 +154,55 @@ export default function Home() {
           alt=""
         />
       </section>
+
+
+      {/* ===== Course banner section ===== */}
+      <div className="bg-gray-50">
+        <section className="container text-center md:text-left flex gap-4 flex-col-reverse md:flex-row justify-evenly items-center min-h-[35vh] mx-auto py-16">
+          <div>
+            <motion.div
+              initial={{ opacity: 0 }}
+              whileInView={{ opacity: 1 }}
+              className="flex justify-center md:justify-start"
+            >
+              <motion.h1 >🌍</motion.h1>
+            </motion.div>
+            <motion.h2
+              initial={{ y: 100, opacity: 0 }}
+              whileInView={{ y: 0, opacity: 1 }}
+              transition={{
+                duration: 0.6,
+                type: "spring",
+                bounce: 0.5,
+              }}
+              className="text-4xl"
+            >
+              <Translate id="index.course.title">An Official Stacked Web Course</Translate>
+            </motion.h2>
+            <motion.p
+              initial={{ opacity: 0 }}
+              whileInView={{ opacity: 1 }}
+              transition={{ delay: 0.05 }}
+              className="max-w-md text-xl"
+            >
+              <Translate id="index.course.description">A 29 chapter detailed course to building production applications with Stacked, on the Web</Translate>
+              <Link to="https://masterflutterweb.carrd.co/" className="block mt-2">
+                <Translate id="index.course.button">Learn More</Translate>
+              </Link>
+            </motion.p>
+          </div>
+          <motion.img
+            initial={{ x: 100, opacity: 0 }}
+            whileInView={{ x: 0, opacity: 1 }}
+            transition={{ delay: 0.5, duration: 0.4 }}
+            className="w-full max-w-2xl"
+            src="/img/landing/course-cover.svg"
+            alt=""
+          />
+        </section>
+      </div>
+
+
       <div className="bg-gray-50">
         <section className="container text-center md:text-left flex gap-4 flex-col justify-evenly items-center min-h-[35vh] mx-auto py-16">
           <motion.h3