authentication done.

src/app/components/AuthForm.js

@@ -1,63 +1,392 @@
 'use client';
-import { useState } from "react";
-import { account } from "../lib/appwrite";
 import { useRouter } from "next/navigation";
+import { useAuth } from "../context/AuthContext";
+import { useState, useEffect } from "react";
+import Link from "next/link";
+// import { ID } from "../lib/appwrite";
 
-export default function AuthForm() {
+export default function AuthPage() {
-  const [isLogin, setIsLogin] = useState(true);
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
   const router = useRouter();
+  const { user, loading: authLoading, isAuthenticated, login, register } = useAuth();
+  const [isLoginForm, setIsLoginForm] = useState(true);
+  const [darkMode, setDarkMode] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
 
-  const handleSubmit = async (e) => {
+  // Form states
-    e.preventDefault();
+  const [loginData, setLoginData] = useState({
+    email: "",
+    password: "",
+    rememberMe: false,
+  });
 
-    try {
+  const [signupData, setSignupData] = useState({
-      if (isLogin) {
+    fname: "",
-        await account.createEmailPasswordSession(email, password);
+    lname: "",
-      } else {
+    email: "",
-        await account.create('unique()', email, password);
+    password: "",
-        await account.createEmailPasswordSession(email, password);
+    agreeTerms: false,
-      }
+  });
+
+  const [errors, setErrors] = useState({
+    agreeTerms: "",
+    general: "",
+  });
+
+  // Redirect if already authenticated
+  useEffect(() => {
+    if (!authLoading && isAuthenticated) {
       router.push("/pages/dashboard");
-    } catch (err) {
+    }
-      alert("Authentication error: " + err.message);
+  }, [isAuthenticated, authLoading, router]);
+
+  const handleLoginChange = (e) => {
+    const { name, value, type, checked } = e.target;
+    setLoginData({
+      ...loginData,
+      [name]: type === "checkbox" ? checked : value,
+    });
+  };
+
+  const handleSignupChange = (e) => {
+    const { name, value, type, checked } = e.target;
+    setSignupData({
+      ...signupData,
+      [name]: type === "checkbox" ? checked : value,
+    });
+    if (name === "agreeTerms") {
+      setErrors({ ...errors, agreeTerms: "" });
     }
   };
 
+  const validateSignupForm = () => {
+    let isValid = true;
+    const newErrors = { ...errors };
+
+    if (!signupData.agreeTerms) {
+      newErrors.agreeTerms = "You must agree to the terms and conditions";
+      isValid = false;
+    }
+
+    if (signupData.password.length < 8) {
+      newErrors.general = "Password must be at least 8 characters";
+      isValid = false;
+    }
+
+    setErrors(newErrors);
+    return isValid;
+  };
+
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setErrors({ ...errors, general: "" });
+
+    try {
+      await login(loginData.email, loginData.password);
+      router.push("/pages/dashboard");
+    } catch (error) {
+      console.error("Login error:", error);
+      let errorMessage = 'Login failed. Please try again.';
+      
+      if (error.type === 'user_invalid_credentials') {
+        errorMessage = 'Invalid email or password';
+      } else if (error.type === 'general_argument_invalid') {
+        errorMessage = 'Invalid email format';
+      } else if (error.code === 401) {
+        errorMessage = 'Authentication failed. Please try again.';
+      }
+      
+      setErrors({ ...errors, general: errorMessage });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSignup = async (e) => {
+    e.preventDefault();
+    if (!validateSignupForm()) return;
+
+    setLoading(true);
+    setErrors({ ...errors, general: "" });
+
+    try {
+      await register(
+        signupData.email,
+        signupData.password,
+        `${signupData.fname} ${signupData.lname}`
+      );
+      router.push("/pages/dashboard");
+    } catch (error) {
+      console.error("Signup error:", error);
+      let errorMessage = 'Signup failed. Please try again.';
+      
+      if (error.type === 'user_already_exists') {
+        errorMessage = 'Email already registered';
+      } else if (error.type === 'general_argument_invalid') {
+        errorMessage = 'Invalid email format';
+      } else if (error.code === 401) {
+        errorMessage = 'Authentication failed. Please try again.';
+      }
+      
+      setErrors({ ...errors, general: errorMessage });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (authLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 dark:border-gray-100 mx-auto"></div>
+          <p className="mt-4 text-lg font-semibold text-gray-900 dark:text-gray-100">
+            Loading...
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (isAuthenticated) {
+    return null; // Will redirect from useEffect
+  }
+
   return (
-    <div className="max-w-md mx-auto mt-10 p-6 border rounded-lg shadow-lg">
+    <div className={`min-h-auto ${darkMode ? "dark bg-gray-900" : "bg-white"}`}>
-      <h2 className="text-2xl font-bold mb-4">{isLogin ? 'Login' : 'Register'}</h2>
+      <div className="flex flex-col items-center justify-center p-6">
-      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="w-full max-w-md">
-        <input
+          <div className="mb-8">
-          type="email"
+            <h1 className="text-2xl font-bold text-gray-800 dark:text-white/90">
-          placeholder="Email"
+              {isLoginForm ? "Sign In" : "Sign Up"}
-          className="w-full border px-3 py-2 rounded"
+            </h1>
-          value={email}
+            <p className="text-sm text-gray-500 dark:text-gray-400">
-          onChange={(e) => setEmail(e.target.value)}
+              {isLoginForm
-          required
+                ? "Enter your email and password to sign in"
-        />
+                : "Create your account to get started"}
-        <input
+            </p>
-          type="password"
+          </div>
-          placeholder="Password"
+
-          className="w-full border px-3 py-2 rounded"
+          {errors.general && (
-          value={password}
+            <div className="mb-4 p-3 text-sm text-red-600 bg-red-50 rounded-lg dark:bg-red-900/20 dark:text-red-300">
-          onChange={(e) => setPassword(e.target.value)}
+              {errors.general}
-          required
+            </div>
-        />
+          )}
-        <button type="submit" className="w-full bg-blue-600 text-white py-2 rounded">
+
-          {isLogin ? "Login" : "Register"}
+          {isLoginForm ? (
-        </button>
+            // Login Form
-      </form>
+            <form onSubmit={handleLogin} className="space-y-4">
-      <p className="mt-4 text-sm text-center">
+              <div>
-        {isLogin ? "New user?" : "Already registered?"}{" "}
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-        <button
+                  Email*
-          onClick={() => setIsLogin(!isLogin)}
+                </label>
-          className="text-blue-500 underline"
+                <input
-        >
+                  type="email"
-          {isLogin ? "Register here" : "Login here"}
+                  name="email"
-        </button>
+                  value={loginData.email}
-      </p>
+                  onChange={handleLoginChange}
+                  className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
+                  placeholder="your@email.com"
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Password*
+                </label>
+                <div className="relative">
+                  <input
+                    type={showPassword ? "text" : "password"}
+                    name="password"
+                    value={loginData.password}
+                    onChange={handleLoginChange}
+                    className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
+                    placeholder="••••••••"
+                    required
+                    minLength="8"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-gray-400"
+                  >
+                    {showPassword ? "Hide" : "Show"}
+                  </button>
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between">
+                <label className="flex items-center space-x-2 text-sm text-gray-700 dark:text-gray-300">
+                  <input
+                    type="checkbox"
+                    name="rememberMe"
+                    checked={loginData.rememberMe}
+                    onChange={handleLoginChange}
+                    className="rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
+                  />
+                  <span>Remember me</span>
+                </label>
+
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowResetForm(true);
+                    setIsLoginForm(false);
+                  }}
+                  className="text-sm text-blue-600 hover:underline dark:text-blue-400"
+                >
+                  Forgot password?
+                </button>
+              </div>
+
+              <button
+                type="submit"
+                className="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition"
+                disabled={loading}
+              >
+                {loading ? "Signing in..." : "Sign in"}
+              </button>
+            </form>
+          ) : (
+            // Sign Up Form
+            <form onSubmit={handleSignup} className="space-y-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    First Name*
+                  </label>
+                  <input
+                    type="text"
+                    name="fname"
+                    value={signupData.fname}
+                    onChange={handleSignupChange}
+                    className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
+                    placeholder="John"
+                    required
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Last Name*
+                  </label>
+                  <input
+                    type="text"
+                    name="lname"
+                    value={signupData.lname}
+                    onChange={handleSignupChange}
+                    className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
+                    placeholder="Doe"
+                    required
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Email*
+                </label>
+                <input
+                  type="email"
+                  name="email"
+                  value={signupData.email}
+                  onChange={handleSignupChange}
+                  className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
+                  placeholder="your@email.com"
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Password* (min 8 characters)
+                </label>
+                <div className="relative">
+                  <input
+                    type={showPassword ? "text" : "password"}
+                    name="password"
+                    value={signupData.password}
+                    onChange={handleSignupChange}
+                    className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
+                    placeholder="••••••••"
+                    required
+                    minLength="8"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-gray-400"
+                  >
+                    {showPassword ? "Hide" : "Show"}
+                  </button>
+                </div>
+              </div>
+
+              <div>
+                <label className="flex items-start space-x-2 text-sm text-gray-700 dark:text-gray-300">
+                  <input
+                    type="checkbox"
+                    name="agreeTerms"
+                    checked={signupData.agreeTerms}
+                    onChange={handleSignupChange}
+                    className="mt-1 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
+                    required
+                  />
+                  <span>
+                    I agree to the <Link href="/terms" className="text-blue-600 hover:underline dark:text-blue-400">Terms</Link> and <Link href="/privacy" className="text-blue-600 hover:underline dark:text-blue-400">Privacy Policy</Link>
+                  </span>
+                </label>
+                {errors.agreeTerms && (
+                  <p className="mt-1 text-sm text-red-600 dark:text-red-400">
+                    {errors.agreeTerms}
+                  </p>
+                )}
+              </div>
+
+              <button
+                type="submit"
+                className="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition"
+                disabled={loading}
+              >
+                {loading ? "Creating account..." : "Sign up"}
+              </button>
+            </form>
+          )}
+
+          <div className="mt-6 text-center">
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              {isLoginForm ? "Don't have an account?" : "Already have an account?"}
+              <button
+                onClick={() => {
+                  setIsLoginForm(!isLoginForm);
+                  setErrors({ agreeTerms: "", general: "" });
+                }}
+                className="ml-1 text-blue-600 hover:underline dark:text-blue-400 font-medium"
+              >
+                {isLoginForm ? "Sign up" : "Sign in"}
+              </button>
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Dark mode toggle */}
+      <button
+        onClick={() => setDarkMode(!darkMode)}
+        className="fixed bottom-6 right-6 p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200"
+        aria-label="Toggle dark mode"
+      >
+        {darkMode ? (
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path fillRule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clipRule="evenodd" />
+          </svg>
+        ) : (
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+          </svg>
+        )}
+      </button>
     </div>
   );
-}
+}

src/app/components/ProtectedRoute.js

@@ -0,0 +1,26 @@
+// components/ProtectedRoute.js
+"use client";
+import { useRouter } from "next/navigation";
+import { useAuth } from "../context/AuthContext";
+import { useEffect } from "react";
+
+export default function ProtectedRoute({ children }) {
+  const { user, loading } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!loading && !user) {
+      router.push("/auth");
+    }
+  }, [user, loading, router]);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900"></div>
+      </div>
+    );
+  }
+
+  return user ? children : null;
+}

src/app/context/AuthContext.js

@@ -1,37 +1,70 @@
+// context/AuthContext.js
 "use client";
-
+import { createContext, useContext, useState, useEffect } from "react";
-import { createContext, useContext, useEffect, useState } from "react";
+import { account,ID } from "../lib/appwrite";
-import { account } from "../lib/appwrite";
 
 const AuthContext = createContext();
 
 export const AuthProvider = ({ children }) => {
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [user, setUser] = useState(null);
-  const [authLoading, setAuthLoading] = useState(true);
+  const [loading, setLoading] = useState(true);
 
-  const checkUserSession = async () => {
+  useEffect(() => {
+    checkSession();
+  }, []);
+
+  const checkSession = async () => {
     try {
-      const user = await account.get();
+      const currentUser = await account.get();
-      if (user) {
+      setUser(currentUser);
-        setIsAuthenticated(true);
-      }
     } catch (error) {
-      setIsAuthenticated(false);
+      setUser(null);
     } finally {
-      setAuthLoading(false);
+      setLoading(false);
     }
   };
 
-  useEffect(() => {
+  const login = async (email, password) => {
-    checkUserSession();
+    try {
-  }, []);
+      await account.createEmailPasswordSession(email, password);
+      const currentUser = await account.get();
+      setUser(currentUser);
+      return currentUser;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const register = async (email, password, name) => {
+    try {
+      await account.create(ID.unique(), email, password, name);
+      await account.createEmailPasswordSession(email, password);
+      const currentUser = await account.get();
+      setUser(currentUser);
+      return currentUser;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const logout = async () => {
+    try {
+      await account.deleteSession("current");
+      setUser(null);
+    } catch (error) {
+      throw error;
+    }
+  };
 
   return (
     <AuthContext.Provider
       value={{
-        isAuthenticated,
+        user,
-        setIsAuthenticated,
+        loading,
-        loading: authLoading,
+        isAuthenticated: !!user,
+        login,
+        register,
+        logout,
       }}
     >
       {children}
@@ -39,4 +72,10 @@ export const AuthProvider = ({ children }) => {
   );
 };
 
-export const useAuth = () => useContext(AuthContext);
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+};

src/app/layout.js

@@ -1,16 +1,22 @@
+// app/layout.js or app/page.js if that's where RootLayout is
+"use client";
+
 import "./globals.css";
 import Navbar from "./components/Navbar";
 import Sidebar from "./components/Sidebar";
+import { AuthProvider } from "./context/AuthContext"; // adjust path if needed
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body className="flex h-screen overflow-hidden">
-        <Sidebar />
+        <AuthProvider>
-        <div className="flex flex-col flex-1 overflow-hidden">
+          <Sidebar />
-          <Navbar />
+          <div className="flex flex-col flex-1 overflow-hidden">
-          <main className="flex-1 overflow-y-auto p-4">{children}</main>
+            <Navbar />
-        </div>
+            <main className="flex-1 overflow-y-auto p-4">{children}</main>
+          </div>
+        </AuthProvider>
       </body>
     </html>
   );

src/app/lib/appwrite.js

@@ -1,4 +1,4 @@
-import { Client, Account } from "appwrite";
+import { Client, Account,ID } from "appwrite";
 
 const client = new Client();
 client
@@ -14,4 +14,4 @@ if (!process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT || !process.env.NEXT_PUBLIC_APPWR
 }
 
 
-export { account,client };
+export { account,client,ID };

src/app/middleware.js

@@ -1,16 +1,16 @@
-import { NextResponse } from 'next/server';
+// import { NextResponse } from 'next/server';
 
-export function middleware(request) {
+// export function middleware(request) {
-  const isLoggedIn = request.cookies.get('appwrite-session'); // Set manually if needed
+//   const isLoggedIn = request.cookies.get('appwrite-session'); // Set manually if needed
-  const url = request.nextUrl;
+//   const url = request.nextUrl;
 
-  if (!isLoggedIn && url.pathname.startsWith('/pages')) {
+//   if (!isLoggedIn && url.pathname.startsWith('/pages')) {
-    return NextResponse.redirect(new URL('/login', request.url));
+//     return NextResponse.redirect(new URL('/login', request.url));
-  }
+//   }
 
-  return NextResponse.next();
+//   return NextResponse.next();
-}
+// }
 
-export const config = {
+// export const config = {
-  matcher: ['/pages/:path*'],
+//   matcher: ['/pages/:path*'],
-};
+// };

src/app/not-found.js

@@ -0,0 +1,66 @@
+// app/not-found.js (not in a 'page.js' file)
+"use client"; // Add this since you're using client-side features
+
+import Link from "next/link";
+import Image from "next/image";
+import { useEffect } from "react";
+
+export default function NotFound() {
+  useEffect(() => {
+    // Client-side dark mode initialization
+    const darkMode = JSON.parse(localStorage.getItem('darkMode'));
+    if (darkMode) {
+      document.documentElement.classList.add('dark');
+      document.documentElement.classList.add('bg-gray-900');
+    }
+  }, []);
+
+  return (
+    <div className="relative z-1 flex min-h-screen flex-col items-center justify-center overflow-hidden p-6">
+      {/* Metadata - App Router style */}
+      <title>404 Error Page | TailAdmin</title>
+      <meta name="description" content="Page not found" />
+
+      {/* Centered Content */}
+      <div className="mx-auto w-full max-w-[242px] text-center sm:max-w-[472px]">
+        <h1 className="mb-8 text-4xl font-bold text-gray-800 dark:text-white/90">
+          ERROR
+        </h1>
+
+        {/* Optimized Images */}
+        <Image
+          src="/images/error/404.svg"
+          alt="404"
+          width={400}
+          height={300}
+          className="dark:hidden mx-auto"
+          priority
+        />
+        <Image
+          src="/images/error/404-dark.svg"
+          alt="404"
+          width={400}
+          height={300}
+          className="hidden dark:block mx-auto"
+          priority
+        />
+
+        <p className="mb-6 mt-10 text-base text-gray-700 dark:text-gray-400 sm:text-lg">
+          We can&#39;t seem to find the page you are looking for!
+        </p>
+
+        <Link
+          href="/"
+          className="inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-5 py-3.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200"
+        >
+          Back to Home Page
+        </Link>
+      </div>
+
+      {/* Footer */}
+      <p className="absolute bottom-6 left-1/2 -translate-x-1/2 text-center text-sm text-gray-500 dark:text-gray-400">
+        &copy; {new Date().getFullYear()} - TailAdmin
+      </p>
+    </div>
+  );
+}

src/app/pages/dashboard/page.js

@@ -1,9 +1,33 @@
+// pages/dashboard.js
+'use client';
+import { useEffect, useState } from "react";
+import { account } from "../../lib/appwrite";
+import { useRouter } from "next/navigation";
+
 export default function Dashboard() {
+  const [user, setUser] = useState(null);
+  const router = useRouter();
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      try {
+        const currentUser = await account.get();
+        setUser(currentUser);
+      } catch (err) {
+        router.push("/");
+      }
+    };
+    checkAuth();
+  }, [router]);
+
+  if (!user) {
+    return <div className="p-4">Loading...</div>;
+  }
+
   return (
-    <>
+    <div className="p-4">
-    <div>
+      <h1>Welcome, {user.name}</h1>
-      Hello World
+     
     </div>
-    </>
   );
-}
+}