feat: add config for fonts

Author: sudipstha08

src/App.css

@@ -11,8 +11,3 @@ body {
   box-sizing: border-box;
 }
 
-.header {
-  font-family: "Concert One", sans-serif;
-  font-weight: 400;
-  font-style: normal;
-}

src/components/organisms/Header/index.tsx

@@ -5,7 +5,9 @@ const Header: FC = () => {
     <header className="px-4 py-6 bg-no-repeat dark:bg-[#0B1120]">
       <div className="container flex justify-between max-w-1200 m-auto">
         <img src="/assets/imgs/dnd3.png" width="200" alt="logo" />
-        <h1 className="text-5xl text-slate-400 header ">Dungeons & Dragons</h1>
+        <h1 className="text-5xl text-slate-400 font-concert">
+          Dungeons & Dragons
+        </h1>
       </div>
     </header>
   )

src/components/organisms/Spells/index.tsx

@@ -101,6 +101,47 @@ const Spells: FC = () => {
         </div>
       </section>
 
+      <section className="relative isolate overflow-hidden bg-white px-6 py-24 sm:py-32 lg:px-8">
+        <div className="absolute inset-0 -z-10 bg-[radial-gradient(45rem_50rem_at_top,theme(colors.indigo.100),white)] opacity-20" />
+        <div className="absolute inset-y-0 right-1/2 -z-10 mr-16 w-[200%] origin-bottom-left skew-x-[-30deg] bg-white shadow-xl shadow-indigo-600/10 ring-1 ring-indigo-50 sm:mr-28 lg:mr-0 xl:mr-16 xl:origin-center" />
+        <div className="mx-auto max-w-2xl lg:max-w-4xl">
+          <img
+            className="mx-auto h-12"
+            src="https://tailwindui.com/img/logos/workcation-logo-indigo-600.svg"
+            alt=""
+          />
+          <figure className="mt-10">
+            <blockquote className="text-center text-xl font-semibold leading-8 text-gray-900 sm:text-2xl sm:leading-9">
+              <p>
+                “Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo
+                expedita voluptas culpa sapiente alias molestiae. Numquam
+                corrupti in laborum sed rerum et corporis.”
+              </p>
+            </blockquote>
+            <figcaption className="mt-10">
+              <img
+                className="mx-auto h-10 w-10 rounded-full"
+                src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                alt=""
+              />
+              <div className="mt-4 flex items-center justify-center space-x-3 text-base">
+                <div className="font-semibold text-gray-900">Judith Black</div>
+                <svg
+                  viewBox="0 0 2 2"
+                  width={3}
+                  height={3}
+                  aria-hidden="true"
+                  className="fill-gray-900"
+                >
+                  <circle cx={1} cy={1} r={1} />
+                </svg>
+                <div className="text-gray-600">CEO of Workcation</div>
+              </div>
+            </figcaption>
+          </figure>
+        </div>
+      </section>
+
       <Modal
         title={_(_.capitalize(currentSpell)).replace('-', ' ')}
         open={isModalOpen}

tailwind.config.js

@@ -1,9 +1,16 @@
 /** @type {import('tailwindcss').Config} */
+
+const defaultTheme = require('tailwindcss/defaultTheme')
+
 module.exports = {
-  content: ["./src/**/*.{tsx,jsx,ts,js}"],
+  content: ['./src/**/*.{tsx,jsx,ts,js}'],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        concert: ['"Concert One"', 'sans-serif'],
+        sans2: ['"Proxima Nova"', ...defaultTheme.fontFamily.sans],
+      },
+    },
   },
   plugins: [],
 }
-