[Refactor]: layout and page components to use Next.js 13 progress bar

codad5 · codad5 · commit e4438d050401 · 2024-10-11T06:58:32.000+01:00
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import { Analytics } from "@vercel/analytics/react"
 import NotificationComponent from "@/components/commons/Notification";
+import { Next13NProgress, Link } from "nextjs13-progress";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -34,6 +35,8 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
+        {/* light green */}
+        <Next13NProgress color="#10B981" height={5} />
         <header className="w-full shadow-md flex items-center justify-between px-4 py-6">
           <h1 className="text-lg font-semibold">
             QuickCv
@@ -62,10 +65,10 @@ export default function RootLayout({
           <nav>
             <ul className="flex space-x-4">
               <li>
-                <a href="/about">About</a>
+                <Link href="/about">About</Link>
               </li>
               <li>
-                <a href="/contact">Contact</a>
+                <Link href="/contact">Contact</Link>
               </li>
             </ul>
           </nav>
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,15 +1,43 @@
+import { Inter } from "next/font/google";
+import { Link } from "nextjs13-progress";
 
-import ResumeBuilder from '../components/resume-builder/ResumeBuilder';
-
-
+const inter = Inter({ subsets: ["latin"] });
 
 export default function Home() {
-
-  // if path is not /resume-generator redirect to /resume-generator
-  
   return (
-    <main className="flex min-h-[200svh] sm:min-h-screen  justify-start sm:justify-center px-4 py-2 gap-4  pb-4 flex-col sm:flex-row">
-      <ResumeBuilder />
+    <main className="flex min-h-[200svh] sm:min-h-screen justify-start sm:justify-center px-4 py-2 gap-4 pb-4 flex-col sm:flex-row">
+      <section className="flex flex-col justify-center items-start max-w-2xl mx-auto">
+        <h1 className="text-4xl font-bold mb-4">Welcome to QuickCv</h1>
+        <p className="text-lg mb-6">
+          QuickCv is a simple AI-powered CV builder designed to help you create
+          an ATS-friendly resume in minutes. Whether you're a fresh graduate or
+          a seasoned professional, our tool makes it easy to showcase your
+          skills and experience.
+        </p>
+        <h2 className="text-2xl font-semibold mb-2">Features:</h2>
+        <ul className="list-disc list-inside mb-6">
+          <li>Create a resume in just a few clicks</li>
+          <li>ATS-friendly design for better job application success</li>
+          <li>Auto-save feature to keep your progress</li>
+          <li>
+            Multiple sections for personal information, education, work
+            experience, and more
+          </li>
+          <li>Print and download options in PDF format</li>
+        </ul>
+        <h2 className="text-2xl font-semibold mb-2">Why Choose QuickCv?</h2>
+        <p className="mb-6">
+          Our user-friendly interface and AI assistance make resume building
+          effortless, allowing you to focus on what truly matters - landing your
+          dream job!
+        </p>
+        <Link
+          href="/resume-generator"
+          className="bg-green-500 text-white px-4 py-2 rounded-md hover:bg-green-600 transition duration-200"
+        >
+          Start Building Your Resume
+        </Link>
+      </section>
     </main>
   );
 }
diff --git a/next.config.mjs b/next.config.mjs
@@ -7,11 +7,7 @@ const nextConfig = {
     },
     async redirects() {
         return [
-            {
-                source: '/',
-                destination: '/resume-generator',
-                permanent: true,
-            },
+            
         ]
     }
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "highlight.js": "^11.10.0",
     "iconsax-react": "^0.0.8",
     "next": "^14.2.12",
+    "nextjs13-progress": "^1.3.3",
     "react": "^18",
     "react-accessible-accordion": "^5.0.0",
     "react-dom": "^18",

Original file line number	Diff line number	Diff line change
`@@ -7,11 +7,7 @@ const nextConfig = {`
`7`	`7`	`},`
`8`	`8`	`async redirects() {`
`9`	`9`	`return [`
`10`		`- {`
`11`		`- source: '/',`
`12`		`- destination: '/resume-generator',`
`13`		`- permanent: true,`
`14`		`- },`
	`10`	`+`
`15`	`11`	`]`
`16`	`12`	`}`
`17`	`13`	`};`