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;

tailwind.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   content: ['./src/**/*.{js, jsx}'],
   theme: {
+    extend: {
       colors: {
         'polar-night': {
           100: '#4C566A',
@@ -27,9 +28,8 @@ module.exports = {
           purple: '#B48EAD',
         },
       },
-    extend: {
       fontFamily: {
-        display: ['Open Sans'],
+        display: ['Calibre'],
       },
     },
   },

webpack.config.js

@@ -27,6 +27,18 @@ module.exports = {
         include: path.resolve(__dirname, 'src'),
         use: ['style-loader', 'css-loader', 'postcss-loader'],
       },
+      {
+        test: /\.(woff(2)?|ttf|eot|otf)(\?v=\d+\.\d+\.\d+)?$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+              outputPath: 'fonts/',
+            },
+          },
+        ],
+      },
     ],
   },
   plugins: [