dark mode test

cypress/e2e/dark-mode.cy.ts

@@ -0,0 +1,13 @@
+describe("dark mode", () => {
+  it("verify a user can toggle between light and dark mode", () => {
+    cy.visit("/");
+    cy.get('[data-testid="moon-icon"]').click();
+    cy.get('[data-testid="light-toggle"]').click();
+    cy.get('[data-testid="moon-icon"]').should("not.be.visible");
+    cy.get('[data-testid="sun-icon"]').should("be.visible");
+
+    cy.get('[data-testid="dark-toggle"]').click();
+    cy.get('[data-testid="moon-icon"]').should("be.visible");
+    cy.get('[data-testid="sun-icon"]').should("not.be.visible");
+  });
+});

src/app/header.tsx

@@ -12,15 +12,15 @@ export async function Header() {
   return (
     <div className="border-b py-4">
       <div className="container mx-auto flex justify-between items-center">
-        <div className="flex gap-1 items-center text-xl">
+        <Link href="/" className="flex gap-1 items-center text-xl">
           <Image
             src="/logo.png"
             width="50"
             height="50"
             alt="pantry tracker logo"
           />{" "}
           PantryTracker
-        </div>
+        </Link>
 
         <div>
           {user && (

src/app/page.tsx

@@ -1,9 +1,27 @@
+import Link from "next/link";
+
 export default async function Page() {
   return (
     <main className="flex  flex-col items-center justify-between p-12">
-      <h1>Pantry Tracker</h1>
-
-      <p>Add landing page at one point</p>
+      <div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
+        <div className="text-center">
+          <h1 className="text-white text-4xl font-bold tracking-tight sm:text-6xl">
+            Streamline Your Kitchen Inventory with Ease
+          </h1>
+          <p className="mt-6 text-lg leading-8 text-gray-300">
+            Effortless Pantry Management for Smart Food Tracking and Worry-Free
+            Meal Planning
+          </p>
+          <div className="mt-10 flex items-center justify-center gap-x-6">
+            <Link
+              href="/dashboard"
+              className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            >
+              Get started
+            </Link>
+          </div>
+        </div>
+      </div>
     </main>
   );
 }

src/app/theme-toggle.tsx

@@ -19,16 +19,28 @@ export function ModeToggle() {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="outline" size="icon">
-          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <Sun
+            data-testid="sun-icon"
+            className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+          />
+          <Moon
+            data-testid="moon-icon"
+            className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+          />
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
+        <DropdownMenuItem
+          data-testid="light-toggle"
+          onClick={() => setTheme("light")}
+        >
           Light
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
+        <DropdownMenuItem
+          data-testid="dark-toggle"
+          onClick={() => setTheme("dark")}
+        >
           Dark
         </DropdownMenuItem>
         <DropdownMenuItem onClick={() => setTheme("system")}>