contact us

package.json

@@ -10,14 +10,18 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.40.0",
+    "axios": "^1.7.2",
+    "firebase": "^10.12.2",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.5",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1",
-    "sort-by": "^1.2.0"
+    "sort-by": "^1.2.0",
+    "swiper": "^11.1.4"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

public/blog.json

@@ -0,0 +1,27 @@
+[
+  {
+    "title": "Exploring the Hidden Gems of the Pacific Northwest",
+    "image": "https://i.ibb.co/KVr2ZMK/l2.jpg",
+    "short_description": "Discover the lush forests, breathtaking coastlines, and charming small towns that make the Pacific Northwest a traveler's paradise. Join us as we uncover the region's best-kept secrets and hidden gems."
+  },
+  {
+    "title": "The Rise of Sustainable Fashion: A Greener Future",
+    "image": "https://i.ibb.co/41GSy4w/l1.jpg",
+    "short_description": "Sustainable fashion is more than just a trend; it's a movement towards a more ethical and eco-friendly industry. Learn about the innovative brands and practices paving the way for a greener future in fashion."
+  },
+  {
+    "title": "Mastering the Art of Homemade Pasta",
+    "image": "https://i.ibb.co/mqwS3hD/b1.jpg",
+    "short_description": "There's nothing quite like the taste of fresh, homemade pasta. Our step-by-step guide will walk you through the process of making pasta from scratch, with tips and tricks to perfect your technique."
+  },
+  {
+    "title": "A Beginner's Guide to Meditation: Finding Inner Peace",
+    "image": "https://i.ibb.co/VqwHbds/d1.jpg",
+    "short_description": "Meditation can be a powerful tool for reducing stress and improving mental clarity. This beginner's guide will introduce you to the basics of meditation and help you start your journey toward inner peace and mindfulness."
+  },
+  {
+    "title": "The Ultimate Guide to Urban Gardening",
+    "image": "https://i.ibb.co/WfqvCKz/b2.jpg",
+    "short_description": "No backyard? No problem! Urban gardening is all about growing your own greens in small spaces. From container gardens to vertical gardening, we'll show you how to turn any urban area into a thriving garden."
+  }
+]

src/Componente/Firbase/AuthProvider.jsx

@@ -0,0 +1,89 @@
+import { createContext, useEffect, useState } from "react";
+import {
+  createUserWithEmailAndPassword,
+  getAuth,
+  GoogleAuthProvider,
+  onAuthStateChanged,
+  signInWithEmailAndPassword,
+  signInWithPopup,
+  signOut,
+  updateProfile,
+} from "firebase/auth";
+import app from "./firbase.config";
+
+export const AuthContext = createContext(null);
+const auth = getAuth(app);
+const googlepro = new GoogleAuthProvider();
+const AuthProvider = ({ children }) => {
+  const [user, setuser] = useState(null);
+  const [loding, setloding] = useState(true);
+
+  //user create
+  const creatuser = (email, password) => {
+    setloding(true);
+    return createUserWithEmailAndPassword(auth, email, password);
+  };
+  //updat profil
+  const updatprofil = (name, img) => {
+    return updateProfile(auth.currentUser, {
+      displayName: name,
+      photoURL: img,
+    });
+  };
+  //login user
+  const login = (email, password) => {
+    setloding(true);
+    return signInWithEmailAndPassword(auth, email, password);
+  };
+  //google login
+  const googlelogin = () => {
+    setloding(true);
+    return signInWithPopup(auth, googlepro);
+  };
+  // logout
+  const logout = async () => {
+    setuser(null);
+
+    signOut(auth);
+  };
+
+  // Get token from server
+  const getToken = async (email) => {
+    const { data } = await axios.post(
+      `${import.meta.env.VITE_API_URL}/jwt`,
+      { email },
+      { withCredentials: true }
+    );
+    return data;
+  };
+
+  // onAuth States cxhange
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (user) => {
+      setuser(user);
+      if (user) {
+        getToken(user.email);
+      }
+      setloding(false);
+    });
+    return () => {
+      return unsubscribe();
+    };
+  }, []);
+
+  const allvalue = {
+    user,
+    creatuser,
+    updatprofil,
+    login,
+    googlelogin,
+    logout,
+    setuser,
+    loding,
+  };
+  return (
+    <AuthContext.Provider value={allvalue}>{children}</AuthContext.Provider>
+  );
+};
+
+export default AuthProvider;

src/Componente/Firbase/firbase.config.js

@@ -0,0 +1,13 @@
+import { initializeApp } from "firebase/app";
+
+const firebaseConfig = {
+  apiKey: import.meta.env.VITE_apiKey,
+  authDomain: import.meta.env.VITE_authDomain,
+  projectId: import.meta.env.VITE_projectId,
+  storageBucket: import.meta.env.VITE_storageBucket,
+  messagingSenderId: import.meta.env.VITE_messagingSenderId,
+  appId: import.meta.env.VITE_appId,
+};
+
+const app = initializeApp(firebaseConfig);
+export default app;

src/Componente/Home.jsx

@@ -1,9 +1,11 @@
 import Banner from "../Pages/Home/Banner";
+import ContactUs from "../Pages/Home/ContactUs";
 
 const Home = () => {
   return (
     <div>
       <Banner></Banner>
+      {/* <ContactUs></ContactUs> */}
     </div>
   );
 };

src/Componente/Navbar/Navbar.jsx

@@ -53,9 +53,8 @@ const Navbar = () => {
         </div>
         <div className="navbar-end">
           <div className=" flex gap-2 items-center">
-            <p className="flex text-2xl text-red-500 ">
+            <p className="flex text-3xl text-red-500 ">
               <IoMdNotifications />
-              <sup>+0</sup>
             </p>
             <Link to="/login" className=" btn btn-outline btn-primary">
               Join Us

src/Hooks/useAuth.jsx

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { AuthContext } from "../Componente/Firbase/AuthProvider";
+
+const useAuth = () => {
+  const auth = useContext(AuthContext);
+  return auth;
+};
+
+export default useAuth;

src/Hooks/useAxiosCommon.jsx

@@ -0,0 +1,9 @@
+import axios from "axios";
+const axiosCommon = axios.create({
+  baseURL: import.meta.env.VITE_API_URL,
+});
+const useAxiosCommon = () => {
+  return axiosCommon;
+};
+
+export default useAxiosCommon;

src/Hooks/useAxiosSecqur.jsx

@@ -0,0 +1,32 @@
+import axios from "axios";
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import useAuth from "./useAuth";
+
+export const axiosSecure = axios.create({
+  baseURL: import.meta.env.VITE_API_URL,
+  withCredentials: true,
+});
+const useAxiosSecqur = () => {
+  const { logout } = useAuth();
+  const navigate = useNavigate();
+  useEffect(() => {
+    axiosSecure.interceptors.response.use(
+      (res) => {
+        return res;
+      },
+      async (error) => {
+        console.log("error tracked in the interceptor", error.response);
+        if (error.response.status === 401 || error.response.status === 403) {
+          await logout();
+          navigate("/login");
+        }
+        return Promise.reject(error);
+      }
+    );
+  }, [logout, navigate]);
+
+  return axiosSecure;
+};
+
+export default useAxiosSecqur;

src/Pages/Home/Blog.jsx

@@ -0,0 +1,5 @@
+const Blog = () => {
+  return <div></div>;
+};
+
+export default Blog;

src/Pages/Home/ContactUs.jsx

@@ -0,0 +1,65 @@
+const ContactUs = () => {
+  return (
+    <div>
+      <div className="bg-[url('https://i.ibb.co/ykxg0nN/contact-us-scaled-1.jpg')] bg-cover bg-center text-white">
+        <div>
+          <section className="p-6 dark:text-gray-800">
+            <form
+              noValidate=""
+              className="container w-full max-w-xl p-8 mx-auto space-y-6 rounded-md shadow dark:bg-gray-50"
+            >
+              <h2 className="w-full text-3xl font-bold leading-tight">
+                Contact us
+              </h2>
+              <div>
+                <label htmlFor="name" className="block mb-1 ml-1">
+                  Name
+                </label>
+                <input
+                  id="name"
+                  type="text"
+                  placeholder="Your name"
+                  required=""
+                  className="block w-full p-2 rounded focus:outline-none focus:ring focus:ring-opacity-25 focus:dark:ring-violet-600 dark:bg-gray-100"
+                />
+              </div>
+              <div>
+                <label htmlFor="email" className="block mb-1 ml-1">
+                  Email
+                </label>
+                <input
+                  id="email"
+                  type="email"
+                  placeholder="Your email"
+                  required=""
+                  className="block w-full p-2 rounded focus:outline-none focus:ring focus:ring-opacity-25 focus:dark:ring-violet-600 dark:bg-gray-100"
+                />
+              </div>
+              <div>
+                <label htmlFor="message" className="block mb-1 ml-1">
+                  Message
+                </label>
+                <textarea
+                  id="message"
+                  type="text"
+                  placeholder="Message..."
+                  className="block w-full p-2 rounded autoexpand focus:outline-none focus:ring focus:ring-opacity-25 focus:dark:ring-violet-600 dark:bg-gray-100"
+                ></textarea>
+              </div>
+              <div>
+                <button
+                  type="submit"
+                  className="w-full px-4 py-2 font-bold btn bg-slate-600 shadow "
+                >
+                  Send
+                </button>
+              </div>
+            </form>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ContactUs;

src/Pages/Home/MaleinCatagory.jsx

@@ -0,0 +1,5 @@
+const MaleinCatagory = () => {
+  return <div></div>;
+};
+
+export default MaleinCatagory;

src/main.jsx

@@ -3,11 +3,14 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import { RouterProvider } from "react-router-dom";
 import router from "./Route/Route.jsx";
+import AuthProvider from "./Componente/Firbase/AuthProvider";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <div className=" w-full md:max-w-[90%] mx-auto">
-      <RouterProvider router={router} />
-    </div>
+    <AuthProvider>
+      <div className=" w-full md:max-w-[90%] mx-auto">
+        <RouterProvider router={router} />
+      </div>
+    </AuthProvider>
   </React.StrictMode>
 );