Merge pull request rishipurwar1#246 from rishipurwar1/development

Add top-loader

src/components/SvgIcons/Icons.js

@@ -592,6 +592,25 @@ const Icons = {
       <path d="M5 12l5 5l10 -10"></path>
     </svg>
   ),
+  Quote: ({ size = 24, ...props }) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="icon icon-tabler icon-tabler-quote"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      strokeWidth="2"
+      stroke="currentColor"
+      fill="none"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M10 11h-4a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h3a1 1 0 0 1 1 1v6c0 2.667 -1.333 4.333 -4 5"></path>
+      <path d="M19 11h-4a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h3a1 1 0 0 1 1 1v6c0 2.667 -1.333 4.333 -4 5"></path>
+    </svg>
+  ),
 }
 
 export default Icons

src/components/reusable/Loader.js

@@ -0,0 +1,57 @@
+import { useState, useEffect, useCallback } from "react"
+import Router from "next/router"
+
+const Loader = () => {
+  const [loading, setLoading] = useState(false)
+  const [width, setWidth] = useState(0)
+
+  const handleRouteChangeStart = useCallback(() => setLoading(true), [])
+  const handleRouteChangeEnd = useCallback(() => {
+    setLoading(false)
+    setWidth(100)
+  }, [])
+
+  useEffect(() => {
+    Router.events.on("routeChangeStart", handleRouteChangeStart)
+    Router.events.on("routeChangeComplete", handleRouteChangeEnd)
+    Router.events.on("routeChangeError", handleRouteChangeEnd)
+
+    return () => {
+      Router.events.off("routeChangeStart", handleRouteChangeStart)
+      Router.events.off("routeChangeComplete", handleRouteChangeEnd)
+      Router.events.off("routeChangeError", handleRouteChangeEnd)
+    }
+  }, [handleRouteChangeStart, handleRouteChangeEnd])
+
+  useEffect(() => {
+    if (loading) {
+      const timer = setInterval(() => {
+        setWidth((oldWidth) => {
+          const newWidth = oldWidth + Math.round(Math.random() * 10)
+          return Math.min(newWidth, 90)
+        })
+      }, 100)
+      return () => clearInterval(timer)
+    }
+  }, [loading])
+
+  useEffect(() => {
+    if (!loading && width === 100) {
+      const timer = setTimeout(() => {
+        setWidth(0)
+      }, 100)
+      return () => clearTimeout(timer)
+    }
+  }, [loading, width])
+
+  return (
+    <div
+      className={`absolute top-0 left-0 h-0.5 bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 rounded-sm transition-width duration-100 ease-in-out ${
+        loading ? "w-1/2" : "w-full"
+      }`}
+      style={{ width: `${width}%` }}
+    />
+  )
+}
+
+export default Loader

src/components/reusable/Testimonial.js

@@ -0,0 +1,48 @@
+import Image from "next/image"
+import james from ".././../assets/images/james.png"
+import Icons from "../SvgIcons/Icons"
+
+const Testimonial = () => {
+  return (
+    <div className="relative rounded-lg bg-gray-800 border border-gray-700 p-8 mt-32 overflow-hidden">
+      <Icons.Quote
+        className="rotate-180 absolute -top-12 -left-6 z-0 text-gray-600"
+        size={160}
+      />
+      <div className="flex flex-col items-center md:items-start md:flex-row space-y-12 md:space-x-12 md:space-y-0">
+        <div className="flex-shrink-0 z-50">
+          <Image
+            src={james}
+            width={120}
+            height={120}
+            className="rounded-full"
+            alt="James Q Quick"
+          />
+        </div>
+        <div className="z-50">
+          <p className="text-white sm:text-xl sm:leading-relaxed mb-4">
+            &quot;Building projects is by far the best way to get better at programming,
+            but most people don&apos;t know what to build. FrontendPro is a great resource
+            for developers looking for new and exciting challenges to take their frontend
+            development skills to the next level!&quot;
+          </p>
+          <p className="text-white sm:text-xl sm:leading-relaxed">
+            <a
+              href="https://twitter.com/jamesqquick"
+              target="_blank"
+              rel="noreferrer"
+              className="font-bold hover:underline underline-offset-2"
+            >
+              James Q Quick
+            </a>
+            <span className="font-normal text-base text-gray-200">
+              , Software Developer & Youtuber with 178K+ subscribers
+            </span>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Testimonial

src/pages/_app.js

@@ -7,6 +7,7 @@ import "../styles/globals.css"
 import { Analytics } from "@vercel/analytics/react"
 import { useRouter } from "next/router"
 import { SidebarProvider } from "../context/SidebarContext"
+import Loader from "../components/reusable/Loader"
 
 export default function MyApp({ Component, pageProps }) {
   const router = useRouter()
@@ -76,6 +77,7 @@ export default function MyApp({ Component, pageProps }) {
       </Head>
       <AuthContextProvider>
         <SidebarProvider>
+          <Loader />
           {renderWithLayout(<Component {...pageProps} />)}
         </SidebarProvider>
       </AuthContextProvider>

src/pages/index.js

@@ -7,6 +7,7 @@ import LatestResources from "../components/homepage/LatestResources"
 import LatestSolutions from "../components/homepage/LatestSolutions"
 import { getDocuments } from "../firebase/firestore"
 import Hero from "../components/homepage/Hero"
+import Testimonial from "../components/reusable/Testimonial"
 
 const Homepage = ({ challenges, solutions, resources }) => {
   return (
@@ -16,6 +17,7 @@ const Homepage = ({ challenges, solutions, resources }) => {
       </Head>
       <main className="px-6 pb-6 rounded-lg bg-gray-900 border border-gray-700">
         <Hero />
+        <Testimonial />
         <HowItWorks />
         <LatestChallenges challenges={challenges} />
         <LatestSolutions solutions={solutions} />