Merge branch 'main' of https://github.com/ForFarmTeam/ForFarm

frontend/app/globals.css

@@ -9,51 +9,52 @@ body {
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
+    --foreground: 240 10% 3.9%;
     --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
+    --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
+    --popover-foreground: 240 10% 3.9%;
-    --primary: 0 0% 9%;
+    --primary: 142.1 76.2% 36.3%;
-    --primary-foreground: 0 0% 98%;
+    --primary-foreground: 355.7 100% 97.3%;
-    --secondary: 0 0% 96.1%;
+    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 0 0% 9%;
+    --secondary-foreground: 240 5.9% 10%;
-    --muted: 0 0% 96.1%;
+    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 0 0% 45.1%;
+    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 0 0% 96.1%;
+    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 0 0% 9%;
+    --accent-foreground: 240 5.9% 10%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
+    --border: 240 5.9% 90%;
-    --input: 0 0% 89.8%;
+    --input: 240 5.9% 90%;
-    --ring: 0 0% 3.9%;
+    --ring: 142.1 76.2% 36.3%;
+    --radius: 0.5rem;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
   }
+
   .dark {
-    --background: 0 0% 3.9%;
+    --background: 20 14.3% 4.1%;
-    --foreground: 0 0% 98%;
+    --foreground: 0 0% 95%;
-    --card: 0 0% 3.9%;
+    --card: 24 9.8% 10%;
-    --card-foreground: 0 0% 98%;
+    --card-foreground: 0 0% 95%;
-    --popover: 0 0% 3.9%;
+    --popover: 0 0% 9%;
-    --popover-foreground: 0 0% 98%;
+    --popover-foreground: 0 0% 95%;
-    --primary: 0 0% 98%;
+    --primary: 142.1 70.6% 45.3%;
-    --primary-foreground: 0 0% 9%;
+    --primary-foreground: 144.9 80.4% 10%;
-    --secondary: 0 0% 14.9%;
+    --secondary: 240 3.7% 15.9%;
     --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
+    --muted: 0 0% 15%;
-    --muted-foreground: 0 0% 63.9%;
+    --muted-foreground: 240 5% 64.9%;
-    --accent: 0 0% 14.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: 0 0% 14.9%;
+    --border: 240 3.7% 15.9%;
-    --input: 0 0% 14.9%;
+    --input: 240 3.7% 15.9%;
-    --ring: 0 0% 83.1%;
+    --ring: 142.4 71.8% 29.2%;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;

frontend/app/signin/page.tsx

@@ -0,0 +1,15 @@
+export default function Signin() {
+  return (
+    <div>
+      <div className="grid grid-cols-[1fr_1.5fr] gap-0  h-screen">
+        <div className=" bg-red-200"></div>
+        <div className="bg-green-200 flex justify-center items-center">
+          {/* login box */}
+          <div className="flex w-[600px] h-[600px] bg-yellow-200 ">
+            <h1 className="text-3xl">Login</h1>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@tailwindcss/typography": "^0.5.16",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.475.0",

frontend/tailwind.config.ts

@@ -1,62 +1,62 @@
 import type { Config } from "tailwindcss";
 
 export default {
-    darkMode: ["class"],
+  darkMode: ["class"],
-    content: [
+  content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
-  	extend: {
+    extend: {
-  		colors: {
+      colors: {
-  			background: 'hsl(var(--background))',
+        background: "hsl(var(--background))",
-  			foreground: 'hsl(var(--foreground))',
+        foreground: "hsl(var(--foreground))",
-  			card: {
+        card: {
-  				DEFAULT: 'hsl(var(--card))',
+          DEFAULT: "hsl(var(--card))",
-  				foreground: 'hsl(var(--card-foreground))'
+          foreground: "hsl(var(--card-foreground))",
-  			},
+        },
-  			popover: {
+        popover: {
-  				DEFAULT: 'hsl(var(--popover))',
+          DEFAULT: "hsl(var(--popover))",
-  				foreground: 'hsl(var(--popover-foreground))'
+          foreground: "hsl(var(--popover-foreground))",
-  			},
+        },
-  			primary: {
+        primary: {
-  				DEFAULT: 'hsl(var(--primary))',
+          DEFAULT: "hsl(var(--primary))",
-  				foreground: 'hsl(var(--primary-foreground))'
+          foreground: "hsl(var(--primary-foreground))",
-  			},
+        },
-  			secondary: {
+        secondary: {
-  				DEFAULT: 'hsl(var(--secondary))',
+          DEFAULT: "hsl(var(--secondary))",
-  				foreground: 'hsl(var(--secondary-foreground))'
+          foreground: "hsl(var(--secondary-foreground))",
-  			},
+        },
-  			muted: {
+        muted: {
-  				DEFAULT: 'hsl(var(--muted))',
+          DEFAULT: "hsl(var(--muted))",
-  				foreground: 'hsl(var(--muted-foreground))'
+          foreground: "hsl(var(--muted-foreground))",
-  			},
+        },
-  			accent: {
+        accent: {
-  				DEFAULT: 'hsl(var(--accent))',
+          DEFAULT: "hsl(var(--accent))",
-  				foreground: 'hsl(var(--accent-foreground))'
+          foreground: "hsl(var(--accent-foreground))",
-  			},
+        },
-  			destructive: {
+        destructive: {
-  				DEFAULT: 'hsl(var(--destructive))',
+          DEFAULT: "hsl(var(--destructive))",
-  				foreground: 'hsl(var(--destructive-foreground))'
+          foreground: "hsl(var(--destructive-foreground))",
-  			},
+        },
-  			border: 'hsl(var(--border))',
+        border: "hsl(var(--border))",
-  			input: 'hsl(var(--input))',
+        input: "hsl(var(--input))",
-  			ring: 'hsl(var(--ring))',
+        ring: "hsl(var(--ring))",
-  			chart: {
+        chart: {
-  				'1': 'hsl(var(--chart-1))',
+          "1": "hsl(var(--chart-1))",
-  				'2': 'hsl(var(--chart-2))',
+          "2": "hsl(var(--chart-2))",
-  				'3': 'hsl(var(--chart-3))',
+          "3": "hsl(var(--chart-3))",
-  				'4': 'hsl(var(--chart-4))',
+          "4": "hsl(var(--chart-4))",
-  				'5': 'hsl(var(--chart-5))'
+          "5": "hsl(var(--chart-5))",
-  			}
+        },
-  		},
+      },
-  		borderRadius: {
+      borderRadius: {
-  			lg: 'var(--radius)',
+        lg: "var(--radius)",
-  			md: 'calc(var(--radius) - 2px)',
+        md: "calc(var(--radius) - 2px)",
-  			sm: 'calc(var(--radius) - 4px)'
+        sm: "calc(var(--radius) - 4px)",
-  		}
+      },
-  	}
+    },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
 } satisfies Config;