[TL-DYS-29]

client/.eslintrc.json

@@ -1,14 +1,17 @@
 {
   "root": true,
-  "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended", "prettier"],
+  "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended", "plugin:tailwindcss/recommended", "prettier"],
   "plugins": ["@typescript-eslint", "tailwindcss", "import", "unused-imports"],
   "rules": {
     "import/no-unused-modules": "error",
     "unused-imports/no-unused-imports": "error",
     "@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "^_" }],
     "@typescript-eslint/no-explicit-any": "off",
     "no-console": ["warn", { "allow": ["warn", "error", "info", "debug"] }],
-    "@next/next/no-html-link-for-pages": "off"
+    "@next/next/no-html-link-for-pages": "off",
+    "tailwindcss/no-custom-classname": "off",
+    "tailwindcss/migration-from-tailwind-2": "off",
+    "tailwindcss/classnames-order": "error"
   },
   "settings": {
     "tailwindcss": {
@@ -29,7 +32,8 @@
       "rules": {
         "import/no-unused-modules": "off",
         "unused-imports/no-unused-imports": "off",
-        "@typescript-eslint/no-unused-vars": "off"
+        "@typescript-eslint/no-unused-vars": "off",
+        "tailwindcss/classnames-order": "off"
       }
     }
   ]

client/.lintstagedrc.json

@@ -1,3 +1,3 @@
 {
-  "./**/*.{ts,tsx,js,jsx,json}": ["eslint --quiet --fix", "prettier --write"]
+  "./**/*.{ts,tsx,js,jsx,json}": ["prettier --write", "eslint --quiet --fix"]
 }

client/app/faq/faq.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import Link from "next/link";
 import { useEffect, useState } from "react";
+import Link from "next/link";
 import { faqs } from "@/constants";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import { FAQLinkData } from "@/interfaces";
 
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+
 export default function FAQPage() {
   const [accordionDefaultValue, setAccordionDefaultValue] = useState<string>(`item-0`);
 
@@ -16,7 +17,7 @@ export default function FAQPage() {
       index % 2 === 0 ? (
         segment
       ) : (
-        <Link key={segment} href={links?.[segment]?.href ?? "#"}>
+        <Link className="mx-1 underline" key={segment} href={links?.[segment]?.href ?? "#"}>
           {links?.[segment]?.text ?? segment}
         </Link>
       ),
@@ -36,8 +37,8 @@ export default function FAQPage() {
 
   return (
     <>
-      <div className="container mx-auto py-5 px-4 sm:py-10">
-        <div className="text-center mb-10">
+      <div className="container mx-auto px-4 py-5 sm:py-10">
+        <div className="mb-10 text-center">
           <h1 className="mb-3 text-lg sm:text-xl lg:text-2xl">Frequently Asked Questions</h1>
         </div>
 

client/app/faq/page.tsx

@@ -1,4 +1,5 @@
 import { Metadata } from "next";
+
 import FAQPage from "./faq";
 
 export const metadata: Metadata = {

client/app/globals.css

@@ -10,8 +10,8 @@
     --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
+    --primary: 142.1 76.2% 36.3%;
+    --primary-foreground: 355.7 100% 97.3%;
     --secondary: 240 4.8% 95.9%;
     --secondary-foreground: 240 5.9% 10%;
     --muted: 240 4.8% 95.9%;
@@ -22,30 +22,30 @@
     --destructive-foreground: 0 0% 98%;
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
-    --ring: 240 5.9% 10%;
+    --ring: 142.1 76.2% 36.3%;
     --radius: 0rem;
   }
 
   .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
+    --background: 20 14.3% 4.1%;
+    --foreground: 0 0% 95%;
+    --card: 24 9.8% 10%;
+    --card-foreground: 0 0% 95%;
+    --popover: 0 0% 9%;
+    --popover-foreground: 0 0% 95%;
+    --primary: 142.1 70.6% 45.3%;
+    --primary-foreground: 144.9 80.4% 10%;
     --secondary: 240 3.7% 15.9%;
     --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
+    --muted: 0 0% 15%;
     --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
+    --accent: 12 6.5% 15.1%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
+    --destructive-foreground: 0 85.7% 97.3%;
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
+    --ring: 142.4 71.8% 29.2%;
   }
 }
 

client/app/guide/[guide_name]/guide-name.tsx

@@ -1,13 +1,14 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { getGuideByPath } from "@/lib/index";
-import { HowToGuide } from "@/interfaces";
-import { useRouter } from "next/navigation";
 import Head from "next/head";
-import CustomMarkdown from "@/components/custom-markdown";
-import { useToast } from "@/components/ui/use-toast";
+import { useRouter } from "next/navigation";
+import { HowToGuide } from "@/interfaces";
+
+import { getGuideByPath } from "@/lib/index";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useToast } from "@/components/ui/use-toast";
+import CustomMarkdown from "@/components/custom-markdown";
 
 export default function HowToGuideDetail({ params }: { params: { guide_name: string } }) {
   const router = useRouter();
@@ -69,7 +70,7 @@ export default function HowToGuideDetail({ params }: { params: { guide_name: str
         </div>
       ) : (
         <>
-          <div className="text-center mb-10">
+          <div className="mb-10 text-center">
             <h1 className="mb-3 text-lg sm:text-xl lg:text-2xl">&ldquo;MakeMeDIYspire&rdquo; Guides</h1>
           </div>
 

client/app/guide/[guide_name]/page.tsx

@@ -1,5 +1,6 @@
 import { Metadata } from "next";
 import { getGuideByPath } from "@/lib";
+
 import HowToGuideDetail from "./guide-name";
 
 export async function generateMetadata({ params }: { params: { guide_name: string } }): Promise<Metadata> {

client/app/guide/guide.tsx

@@ -2,11 +2,12 @@
 
 import { useEffect, useState } from "react";
 import Link from "next/link";
+
 import { getAllGuides } from "@/lib/index";
+import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useToast } from "@/components/ui/use-toast";
-import { Label } from "@/components/ui/label";
 
 type Guide = {
   path: string;
@@ -41,10 +42,10 @@ export default function HowToGuidesList() {
 
   return (
     <>
-      <div className="container mx-auto px-5 sm:px-10 py-12">
-        <div className="text-center mb-12">
-          <h1 className="mb-3 text-3xl lg:text-4xl font-semibold">&ldquo;MakeMeDIYspire&rdquo; Guides</h1>
-          <Label className="text-sm sm:text-md inline-block mt-2">From usage to troubleshooting, explore our detailed guides to get the most out of the DIY project generator.</Label>
+      <div className="container mx-auto px-5 py-12 sm:px-10">
+        <div className="mb-12 text-center">
+          <h1 className="mb-3 text-3xl font-semibold lg:text-4xl">&ldquo;MakeMeDIYspire&rdquo; Guides</h1>
+          <Label className="sm:text-md mt-2 inline-block text-sm">From usage to troubleshooting, explore our detailed guides to get the most out of the DIY project generator.</Label>
         </div>
 
         {loading ? (

client/app/guide/page.tsx

@@ -1,6 +1,7 @@
-import HowToGuidesList from "./guide";
 import { Metadata } from "next";
 
+import HowToGuidesList from "./guide";
+
 export const metadata: Metadata = {
   title: "MakeMeDIYspire How-to Guides",
   description: "Navigate through our comprehensive guides and maximize the potential of the MakeMeDIYspire DIY project generator.",

client/app/layout.tsx

@@ -1,10 +1,13 @@
 import { ThemeProvider } from "@/components/theme-provider";
+
 import "./globals.css";
+
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import Navbar from "@/components/navbar";
-import Footer from "@/components/footer";
+
 import { Toaster } from "@/components/ui/toaster";
+import Footer from "@/components/footer";
+import Navbar from "@/components/navbar";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -47,9 +50,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     <html lang="en">
       <body className={inter.className}>
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
-          <div className="flex flex-col min-h-screen">
+          <div className="flex min-h-screen flex-col">
             <Navbar />
-            <main className="flex-grow">{children}</main>
+            <main className="grow">{children}</main>
             <Footer />
             <Toaster />
           </div>

client/app/page.tsx

@@ -2,19 +2,18 @@
 
 import { useCallback, useEffect, useMemo, useState } from "react";
 import dynamic from "next/dynamic";
+import { categories } from "@/constants";
+import { generateProjectIdeas, getTotalCountOfGeneratedIdea, incrementCounterOfGeneratedIdea } from "@/lib";
+import { Info, RefreshCcw } from "lucide-react";
 
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { useToast } from "@/components/ui/use-toast";
 import CategoryFilter from "@/components/generate/category-filter";
 import DifficultyFilter from "@/components/generate/difficulty-filter";
 import MaterialInput from "@/components/generate/material-input";
 import SafetyCheck from "@/components/generate/safety-check";
-import { useToast } from "@/components/ui/use-toast";
-import { Label } from "@/components/ui/label";
-import { Separator } from "@/components/ui/separator";
-import { Button } from "@/components/ui/button";
-import { Info, RefreshCcw } from "lucide-react";
-
-import { categories } from "@/constants";
-import { generateProjectIdeas, getTotalCountOfGeneratedIdea, incrementCounterOfGeneratedIdea } from "@/lib";
 
 const TimeAvailabilityFilter = dynamic(() => import("@/components/generate/time-availability-filter"));
 const ToolsAvailableInput = dynamic(() => import("@/components/generate/tools-available-input"));
@@ -131,8 +130,8 @@ export default function Home() {
         <div className="mb-4">
           <ProjectTabs projects={projects} />
           <div className="flex justify-center space-x-2">
-            <Button className="mt-4 px-4 py-2 w-full" onClick={() => setIsGenerated(false)}>
-              <RefreshCcw className="w-5 h-5" />
+            <Button className="mt-4 w-full px-4 py-2" onClick={() => setIsGenerated(false)}>
+              <RefreshCcw className="mr-2 h-5 w-5" />
               <span>Generate Again</span>
             </Button>
           </div>
@@ -151,16 +150,16 @@ export default function Home() {
         <div className="mb-4">
           <CategoryFilter categories={categories} onCategoryChange={setSelectedCategory} />
         </div>
-        <Button className="mb-4 px-4 py-2 w-full lg:w-auto focus:outline-none focus:ring-2 focus:ring-opacity-50" onClick={toggleAdvancedOptions}>
+        <Button className="mb-4 w-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-opacity-50 lg:w-auto" onClick={toggleAdvancedOptions}>
           {showAdvancedOptions ? "Hide" : "Show"} Advanced Options
         </Button>
         {showAdvancedOptions && advancedOptions}
-        <div className="flex justify-between items-center mb-4">
+        <div className="mb-4 flex items-center justify-between">
           <div>
             <SafetyCheck onSafetyConfirmation={setIsSafe} />
           </div>
-          <Button className="px-4 py-2 w-full lg:w-auto focus:outline-none focus:ring-2 focus:ring-opacity-50 flex items-center justify-center space-x-2" onClick={handleGenerateProjects}>
-            <RefreshCcw className="w-5 h-5" />
+          <Button className="flex w-full items-center justify-center space-x-2 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-opacity-50 lg:w-auto" onClick={handleGenerateProjects}>
+            <RefreshCcw className="h-5 w-5" />
             <span>Generate Projects</span>
           </Button>
         </div>
@@ -170,11 +169,11 @@ export default function Home() {
 
   return (
     <div className="container mx-auto px-4 py-8">
-      <div className="flex justify-between items-center">
-        <h1 className="text-2xl sm:text-3xl md:text-4xl mb-6 font-bold">DIY Project Ideas</h1>
+      <div className="flex items-center justify-between">
+        <h1 className="mb-6 text-2xl font-bold sm:text-3xl md:text-4xl">DIY Ideas Generator</h1>
         <Separator orientation="vertical" className="mx-4 h-8 md:hidden" />
         <div className="flex items-center">
-          <span className="ml-2 mr-2 flex items-center">
+          <span className="mx-2 flex items-center">
             <Info size={24} />
           </span>
           <Label className="text-md lg:text-lg">

client/app/project-detail/[id]/page.tsx

@@ -1,6 +1,7 @@
+import { Metadata } from "next";
 import { getShareLinkData } from "@/lib";
+
 import ProjectDetailById from "./project-detail-by-id";
-import { Metadata } from "next";
 
 export async function generateMetadata({ params }: { params: { id: string } }): Promise<Metadata> {
   const sharedLinkData = await getShareLinkData(params.id);

client/app/project-detail/[id]/project-detail-by-id.tsx

@@ -1,17 +1,18 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
-import ProjectImage from "@/components/project-detail/project-image";
-import ShareDialog from "@/components/project-detail/share-dialog";
-import ProjectInfo from "@/components/project-detail/project-info";
-import ProjectSteps from "@/components/project-detail/project-step";
-import { RelatedImages, ProjectLocationState } from "@/interfaces";
-import { useToast } from "@/components/ui/use-toast";
+import { ProjectLocationState, RelatedImages } from "@/interfaces";
 import { getShareLinkData } from "@/lib";
+
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
+import { useToast } from "@/components/ui/use-toast";
+import ProjectImage from "@/components/project-detail/project-image";
+import ProjectInfo from "@/components/project-detail/project-info";
+import ProjectSteps from "@/components/project-detail/project-step";
+import ShareDialog from "@/components/project-detail/share-dialog";
 
 export default function ProjectDetailById({ params }: { params: { id: string } }) {
   const router = useRouter();
@@ -51,10 +52,10 @@ export default function ProjectDetailById({ params }: { params: { id: string } }
 
   if (!project) {
     return (
-      <div className="container mx-auto py-5 sm:py-10 text-center">
+      <div className="container mx-auto py-5 text-center sm:py-10">
         <div className="p-6">
-          <Label className="text-xl font-bold mb-4">No project details found.</Label>
-          <Button onClick={() => router.push("/")} className="border py-2 px-4 hover:bg-gray-200">
+          <Label className="mb-4 text-xl font-bold">No project details found.</Label>
+          <Button onClick={() => router.push("/")} className="border px-4 py-2 hover:bg-gray-200">
             Go Back to Home
           </Button>
         </div>
@@ -64,7 +65,7 @@ export default function ProjectDetailById({ params }: { params: { id: string } }
 
   return (
     <div className="container mx-auto py-5 sm:py-10">
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-10">
+      <div className="grid grid-cols-1 gap-8 md:gap-10 lg:grid-cols-2">
         <ProjectImage
           isLoading={isLoading}
           relatedImages={relatedImages}

client/app/project-detail/page.tsx

@@ -1,4 +1,5 @@
 import { Metadata } from "next";
+
 import ProjectDetail from "./project-detail";
 
 export const metadata: Metadata = {