Adding fonts and changing tailwind config.

src/components/pages/Front.page.js

@@ -11,6 +11,7 @@ import React from 'react';
 import AppearText from '../text/AppearText';
 import Cdiv from '../core/Cdiv';
 import FadeComponent from '../core/FadeComponent';
+import Introduction from '../sections/Introduction';
 
 //============================================================
 // Component
@@ -67,8 +68,10 @@ const FrontPage = () => {
               d="M0,96L80,85.3C160,75,320,53,480,58.7C640,64,800,96,960,101.3C1120,107,1280,85,1360,74.7L1440,64L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
           </svg>
         </FadeComponent>
+        <FadeComponent delay={2500}>
+          <Introduction />
+        </FadeComponent>
       </div>
-      <Cdiv className="bg-frost-200"></Cdiv>
     </>
   );
 };

src/components/sections/Introduction.js

@@ -0,0 +1,25 @@
+//============================================================
+// Essential Imports
+//============================================================
+
+import React from 'react';
+
+//============================================================
+// Component
+//============================================================
+
+const Introduction = () => {
+  return (
+    <div className="w-full flex justify-center bg-frost-200">
+      <div className="w-full max-w-5xl flex flex-col">
+        <h1 className="text-7xl font-display font-bold text-polar-night-400">Hi, I'm John</h1>
+        <br />
+        <p className="text-xl text-polar-night-400">
+          Eu eu laborum in ea enim. Anim reprehenderit quis magna sint nulla aliquip ullamco aliquip
+          ad cillum nisi tempor id. Ea eu et irure cupidatat. Amet duis in id cupidatat.
+        </p>
+      </div>
+    </div>
+  );
+};
+export default Introduction;