Update Navbar & Contact Page

Darkrider0007 · Dec 19, 2023 · f77ed4d · f77ed4d
1 parent 16c4c70
commit f77ed4d
Show file tree

Hide file tree

Showing 12 changed files with 843 additions and 117 deletions.
diff --git a/app/contacts/page.tsx b/app/contacts/page.tsx
@@ -6,6 +6,7 @@ import { useForm } from "react-hook-form";
 import emailjs from "@emailjs/browser";
 import conf from "../conf/conf";
 import { IoIosSend } from "react-icons/io";
+import { ParticleConfig } from "@/components/index";
 
 const Page = () => {
   const { register, handleSubmit } = useForm();
@@ -30,63 +31,67 @@ const Page = () => {
 
   return (
     <div className="min-h-screen w-full bg-bg_dark_primary flex justify-center items-center text-[#fefefe]">
-      <div className="max-w-[450px] w-full bg-bg_dark_secondary shadow-lg p-4 rounded-sm">
-        <div className="flex flex-col justify-between items-center w-full mb-4">
-          <Image
-            src="/STlogo1.png"
-            alt="logo"
-            height={80}
-            width={80}
-            className="object-cover"
-          />
-        </div>
-        <form
-          className="flex flex-col justify-start items-start w-full mt-2"
-          ref={form}
-          onSubmit={submitHandler}
-        >
-          <div className="flex flex-col justify-between items-start mb-4 w-full">
-            <label htmlFor="name">Name</label>
-            <div className="flex justify-between items-center w-full p-2 bg-transparent border border-[#fefefe] mt-1">
-              <input
-                type="text"
-                id="name"
-                placeholder="Enter Your name"
-                className="bg-transparent focus:outline-none w-full"
-                required
-              />
-            </div>
+      <div className="absolute w-full min-h-screen">
+        <ParticleConfig />
+      </div>
+      <div className="relative min-h-screen w-full z-5 flex justify-center items-center">
+        <div className="max-w-[450px] w-full bg-bg_dark_secondary shadow-lg p-4 rounded-sm bg-opacity-60 backdrop-blur-sm">
+          <div className="flex flex-col justify-between items-center w-full mb-4">
+            <Image
+              src="/STlogo1.png"
+              alt="logo"
+              height={80}
+              width={80}
+              className="object-cover"
+            />
           </div>
-          <div className="flex flex-col justify-between items-start mb-4 w-full">
-            <label htmlFor="email">Email</label>
-            <div className="flex justify-between items-center w-full p-2 bg-transparent border border-[#fefefe] mt-1">
-              <input
-                type="email"
-                id="email"
-                placeholder="Enter Your email"
-                className="bg-transparent focus:outline-none w-full"
-                required
-              />
+          <form
+            className="flex flex-col justify-start items-start w-full mt-2"
+            ref={form}
+            onSubmit={submitHandler}
+          >
+            <div className="flex flex-col justify-between items-start mb-4 w-full">
+              <label htmlFor="name">Name</label>
+              <div className="flex justify-between items-center w-full p-2 bg-transparent border border-[#fefefe] mt-1">
+                <input
+                  type="text"
+                  id="name"
+                  placeholder="Enter Your name"
+                  className="bg-transparent focus:outline-none w-full"
+                  required
+                />
+              </div>
             </div>
-          </div>
-
-          <div className="flex flex-col justify-between items-start mb-4 w-full">
-            <label htmlFor="message">Message</label>
-            <div className="flex justify-between items-center w-full p-2 bg-transparent border border-[#fefefe] mt-1">
-              <textarea
-                id="message"
-                rows={5}
-                placeholder="Enter Your message"
-                className="bg-transparent focus:outline-none w-full resize-none"
-                required
-              />
+            <div className="flex flex-col justify-between items-start mb-4 w-full">
+              <label htmlFor="email">Email</label>
+              <div className="flex justify-between items-center w-full p-2 bg-transparent border border-[#fefefe] mt-1">
+                <input
+                  type="email"
+                  id="email"
+                  placeholder="Enter Your email"
+                  className="bg-transparent focus:outline-none w-full"
+                  required
+                />
+              </div>
             </div>
-          </div>
-          <button className="px-3 py-1.5 border border-[#fefefe] mt-2 rounded-sm cursor-pointer flex justify-center items-center">
-            Send <IoIosSend className="ml-1" />
-          </button>
-          {/* <SubmitButton props="Send"/> */}
-        </form>
+            <div className="flex flex-col justify-between items-start mb-4 w-full">
+              <label htmlFor="message">Message</label>
+              <div className="flex justify-between items-center w-full p-2 bg-transparent border border-[#fefefe] mt-1">
+                <textarea
+                  id="message"
+                  rows={5}
+                  placeholder="Enter Your message"
+                  className="bg-transparent focus:outline-none w-full resize-none"
+                  required
+                />
+              </div>
+            </div>
+            <button className="px-3 py-1.5 border border-[#fefefe] mt-2 rounded-sm cursor-pointer flex justify-center items-center">
+              Send <IoIosSend className="ml-1" />
+            </button>
+            {/* <SubmitButton props="Send"/> */}
+          </form>
+        </div>
       </div>
     </div>
   );

diff --git a/app/globals.css b/app/globals.css
@@ -8,4 +8,9 @@
 
 input[type="number"]::-webkit-inner-spin-button {
   -webkit-appearance: none;
-}
+}
+
+::selection {
+  background: yellow;
+  color: black;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,14 +1,19 @@
 import "./globals.css";
 import type { Metadata } from "next";
-import { Poppins } from "next/font/google";
+import { Poppins, Oswald, Roboto } from "next/font/google";
 import GlobalReduxProvider from "./GlobalRedux/provider";
-import Navbar from "@/components/Navbar";
 
-const poppins = Poppins({
+export const poppins = Poppins({
   subsets: ["latin"],
   weight: ["400", "500", "300", "600", "700"],
 });
 
+export const oswald = Oswald({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+  variable: "--font-oswald",
+});
+
 export const metadata: Metadata = {
   title: "Shark Tank",
   description:
@@ -22,7 +27,9 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={`${poppins.className} overflow-x-hidden`}>
+      <body
+        className={`${poppins.className} ${oswald.variable} overflow-x-hidden`}
+      >
         <GlobalReduxProvider>{children}</GlobalReduxProvider>
       </body>
     </html>

diff --git a/components/Logout.tsx b/components/Logout.tsx
@@ -1,24 +1,20 @@
-import React from 'react'
+import React from "react";
 import authService from "../app/appwrite/auth";
-import { authlogout } from "../app/GlobalRedux/Features/authSlice"
-import { useDispatch } from 'react-redux';
+import { authlogout } from "../app/GlobalRedux/Features/authSlice";
+import { useDispatch } from "react-redux";
 
 function Logout() {
-    const dispatch = useDispatch();
-    const setLogout = () => {
-        authService.logout().
-            then(() => {
-                dispatch(authlogout())
-            });
-    }
-    return (
-        <button
-            onClick={() => setLogout()}
-            className="hover:underline text-red-600"
-        >
-            Logout
-        </button>
-    )
+  const dispatch = useDispatch();
+  const setLogout = () => {
+    authService.logout().then(() => {
+      dispatch(authlogout());
+    });
+  };
+  return (
+    <button onClick={() => setLogout()} className="text-red-600 overflow-hidden">
+      Logout
+    </button>
+  );
 }
 
-export default Logout
+export default Logout;
diff --git a/components/MenuIcon.tsx b/components/MenuIcon.tsx
@@ -18,7 +18,7 @@ const MenuIcon = ({ theme, isActive }: MenuIconProps) => {
   return (
     <div
       className={`relative h-[25px] w-[25px] flex flex-col justify-between items-center cursor-pointer overflow-hidden ${
-        isActive ? "z-[11]" : "z-10 delay-500"
+        isActive ? "z-[11]" : "z-10 delay-[1000ms]"
       } group`}
       onClick={() => {
         setShowMenu(!showMenu);
@@ -28,7 +28,7 @@ const MenuIcon = ({ theme, isActive }: MenuIconProps) => {
         <div
           className={`absolute ${
             theme === "dark" ? "bg-white" : "bg-black"
-          } h-[2px] rounded-xl transition-all ease-in-out duration-500 delay-300 ${
+          } h-[2px] rounded-xl transition-all ease-in-out duration-500 delay-100 ${
             showMenu
               ? "w-full rotate-45 translate-y-[8px]"
               : "w-1/2 -rotate-0 translate-y-0"
@@ -37,7 +37,7 @@ const MenuIcon = ({ theme, isActive }: MenuIconProps) => {
       </div>
       <div
         className={`relative h-[10px] w-full flex items-center justify-between transition-all ease-in-out duration-500 ${
-          showMenu ? "translate-x-[30px]" : "delay-500 translate-x-0"
+          showMenu ? "translate-x-[30px]" : "delay-200 translate-x-0"
         }`}
       >
         <div
@@ -50,7 +50,7 @@ const MenuIcon = ({ theme, isActive }: MenuIconProps) => {
         <div
           className={`absolute ${
             theme === "dark" ? "bg-white" : "bg-black"
-          } h-[2px] rounded-xl transition-all ease-in-out duration-500 delay-300 ${
+          } h-[2px] rounded-xl transition-all ease-in-out duration-500 delay-100 ${
             showMenu
               ? "w-full -rotate-45 -translate-y-[8px]"
               : "w-1/2 rotate-0 -translate-y-0"