Merge branch 'master' into rama-dev

package.json

@@ -49,7 +49,7 @@
     "framer-motion": "~10.18.0",
     "html-react-parser": "~5.1.1",
     "lucide-react": "~0.316.0",
-    "next": "13.5.4",
+    "next": "^13.5.4",
     "next-themes": "~0.2.1",
     "nookies": "~2.5.2",
     "postcss": "8.4.31",

src/app/[others]/page.css

@@ -0,0 +1,12 @@
+.fluid {
+  animation: updown 1.5s ease-in-out infinite alternate;
+}
+
+@keyframes updown {
+  from {
+    transform: translateY(0px);
+  }
+  to {
+    transform: translateY(10px);
+  }
+}

src/app/[others]/page.tsx

@@ -1,20 +1,24 @@
 import { ButtonLong } from "@/components/core/buttons";
 import Footer from "@/components/core/footer";
 import Navbar from "@/components/core/navbar";
-
+import NotFoundPic from "/public/assets/404.png";
+import "./page.css";
+import Image from "next/image";
 export default function Custom404() {
   return (
     <>
       <Navbar />
-
       <section className="max-w-screen-lg mx-auto">
-        <div className="flex flex-col items-center justify-center h-[64vh]">
-          <h1 className="my-4 font-semibold text-4xl tracking-wide">
-            Error 404: Page does not Exist!
-          </h1>
-          <h2 className="my-4 text-2xl">Please check the url again</h2>
-          <ButtonLong href="/" size="big">
-            Get Back To Home
+        <div className="flex flex-col items-center justify-center h-[60vh] md:h-[90vh] mb-8">
+          <Image
+            src={NotFoundPic.src}
+            alt="not found image"
+            className="md:w-2/3 fluid"
+            width={1200}
+            height={1200}
+          />
+          <ButtonLong href="/" size={"big"}>
+            Go Home
           </ButtonLong>
         </div>
       </section>

src/components/core/buttons/index.tsx

@@ -2,19 +2,30 @@ import { ReactNode } from "react";
 import Link from "next/link";
 
 interface Button {
-  href: string;
+  href?: string; // ? means optional
   newTab?: boolean;
   children: ReactNode;
   size: "small" | "normal" | "big";
+  type?: "button" | "submit" | "reset";
 }
 
-function ButtonLong({ href, newTab = false, children, size }: Button) {
+function ButtonLong({ href = "#", newTab = false, children, size ,type }: Button) {
   const buttonSizes = {
     small: "px-6 py-2 text-sm",
     normal: "px-10 py-2 text-base",
-    big: "px-14 py-3 text-md",
+    big: "px-14 py-3 text-md",    
   };
 
+  if (type) {
+    // If a type prop is provided, render a button element
+    return (
+      <button type={type} className={`${buttonSizes[size]} rounded-full text-white bg-primary  transition hover:bg-primary-light hover:scale-105`}>
+        {children}
+      </button>
+    );
+  }
+
+  // else render a link element
   return (
     <>
       <Link

src/components/core/navbar/index.tsx

@@ -40,8 +40,6 @@ const Navbar = ({ starCount }: { starCount?: number }) => {
 
   const currentUser = useCallback(
     (userIdFromCookies: string) => {
-      console.log("inside currentUser");
-
       if (userIdFromCookies) {
         getUserByUserId(userIdFromCookies)
           .then((currUser: any) => {
@@ -54,8 +52,6 @@ const Navbar = ({ starCount }: { starCount?: number }) => {
   );
 
   const getPostsFromDatabase = useCallback(() => {
-    console.log("inside getPostsFromDatabase");
-
     if (userIdFromCookies) {
       getAllPosts()
         .then((posts) => {
@@ -71,8 +67,6 @@ const Navbar = ({ starCount }: { starCount?: number }) => {
 
   const getBookmarksFromDatabase = useCallback(
     (userIdFromCookies: string) => {
-      console.log("inside getBookmarksFromDatabase");
-
       if (userIdFromCookies) {
         getBookmarks(userIdFromCookies)
           .then((bookmarks) => {
@@ -117,11 +111,10 @@ const Navbar = ({ starCount }: { starCount?: number }) => {
     <>
       <nav className="w-full sticky top-0 shadow-md py-2 px-4 md:px-10 backdrop-blur-sm dark:shadow-gray-600 z-50">
         {/* Desktop menu items */}
-
         <div className="max-w-screen-lg mx-auto flex items-center content-center justify-between backdrop-blur-sm bg-grey-100 bg-opacity-20 h-16 my-2">
           <Link href={userAuth.creds?.userId ? "/feed" : "/"}>
             <Image
-              className="navbar-brand fw-bold w-10 h-10 cursor pointer dark:shadow-md dark:shadow-gray-500 rounded-full ml-2 md:ml-0 hero"
+              className="navbar-brand fw-bold w-10 h-10 cursor-pointer dark:shadow-md dark:shadow-gray-500 rounded-full ml-2 md:ml-0 hero"
               src={"/assets/logo.png"}
               alt="settings"
               width={100}
@@ -130,8 +123,7 @@ const Navbar = ({ starCount }: { starCount?: number }) => {
           </Link>
 
           {/* Hamburger menu button for small screens */}
-
-          <div className="md:hidden flex justify-end items-center ">
+          <div className="md:hidden flex justify-end items-center">
             <div className="mr-2">
               <ThemeButton iconSize={18} />
             </div>
@@ -151,7 +143,7 @@ const Navbar = ({ starCount }: { starCount?: number }) => {
             <ThemeButton iconSize={22} />
             <button
               type="button"
-              className="px-10 py-2 text-base rounded-full  bg-primary text-white  hover:bg-primary-light hover:scale-105"
+              className="px-10 py-2 text-base rounded-full bg-primary text-white hover:bg-primary-light hover:scale-105"
               onClick={() => startTour().start()}
             >
               Start Tour
@@ -163,24 +155,25 @@ const Navbar = ({ starCount }: { starCount?: number }) => {
                     href="/feed"
                     className="mx-2 px-2 py-2 rounded-full bg-primary text-white hover:bg-primary-light hover:scale-105"
                   >
-                    <Home size={22} className="transition-all duration-300 " />
+                    <Home size={22} className="transition-all duration-300" />
                   </Link>
                 )}
                 <Link
                   href={`/user/${userAuth.data?.$id}`}
-                  className="mx-2 px-2 py-2 rounded-full  bg-primary text-white  hover:bg-primary-light hover:scale-105"
+                  className="mx-2 px-2 py-2 rounded-full bg-primary text-white hover:bg-primary-light hover:scale-105"
                 >
-                  <User size={22} className="transition-all duration-300 " />
+                  <User size={22} className="transition-all duration-300" />
                 </Link>
 
                 <Link
                   href={`/user/bookmarks`}
-                  className="mx-2 px-2 py-2 rounded-full  bg-primary text-white  hover:bg-primary-light hover:scale-105"
+                  className="mx-2 px-2 py-2 rounded-full bg-primary text-white hover:bg-primary-light hover:scale-105"
                 >
-                  <Bookmark size={22} className="transition-all duration-300 " />
+                  <Bookmark size={22} className="transition-all duration-300" />
                 </Link>
 
                 <button
+                  type="button"
                   className="mx-2 px-2 py-2 rounded-full bg-primary transition hover:bg-primary-light hover:scale-105 text-white"
                   onClick={logout}
                 >
@@ -222,42 +215,65 @@ const Navbar = ({ starCount }: { starCount?: number }) => {
               onClick={() => setMenuOpen(!isMenuOpen)}
               className={`absolute right-2 top-6 text-white dark:hover:text-primary focus:outline-none ${
                 isMenuOpen ? "open" : "closed"
-              }  hover:text-primary lg:hidden`}
+              } hover:text-primary lg:hidden`}
             >
               <X size={32} />
             </button>
 
-            <div className="grid grid-cols-1 gap-4 mt-24 backdrop-blur-sm ">
+            <div className="grid grid-cols-1 gap-4 mt-24 backdrop-blur-sm">
+              <button
+                type="button"
+                className="mx-2 px-6 py-2 text-sm rounded-full bg-primary text-white hover:border-2 hover:bg-transparent"
+                onClick={() => startTour().start()}
+              >
+                Start Tour
+              </button>
+
               <Link
                 href="https://github.com/Sanchitbajaj02/palettegram"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="flex items-center text-sm mx-2 px-10 py-2 rounded-full bg-primary text-white  hover:border-2 hover:bg-transparent"
+                className="flex items-center text-sm mx-2 px-10 py-2 rounded-full bg-primary text-white hover:border-2 hover:bg-transparent"
               >
                 <Github size={20} className="mr-4" /> {starCount} Stars
               </Link>
 
               <Link
                 href="/register"
-                className="inline-block mx-2 px-6 py-2 text-sm rounded-full text-white bg-primary text-center hover:border-2 hover:bg-transparent "
+                className="inline-block mx-2 px-6 py-2 text-sm rounded-full text-white bg-primary text-center hover:border-2 hover:bg-transparent"
               >
                 Register
               </Link>
 
               <Link
                 href="/login"
-                className="inline-block mx-2 px-6 py-2 text-sm rounded-full text-white bg-primary text-center  hover:border-2 hover:bg-transparent"
+                className="inline-block mx-2 px-6 py-2 text-sm rounded-full text-white bg-primary text-center hover:border-2 hover:bg-transparent"
               >
                 Login
               </Link>
 
-              {userAuth && userAuth.data?.$id && (
-                <Link
-                  href={`/user/${userAuth.data?.$id}`}
-                  className="mx-2 px-2 py-2 rounded-full bg-primary hover text-white "
-                >
-                  <User size={22} className="transition-all duration-300 " />
-                </Link>
+              {userAuth?.data?.$id && (
+                <>
+                  <Link
+                    href={`/user/${userAuth.data?.$id}`}
+                    className="mx-2 px-2 py-2 rounded-full bg-primary text-white"
+                  >
+                    <User size={22} className="transition-all duration-300" />
+                  </Link>
+                  <Link
+                    href={`/user/bookmarks`}
+                    className="mx-2 px-2 py-2 rounded-full bg-primary text-white"
+                  >
+                    <Bookmark size={22} className="transition-all duration-300" />
+                  </Link>
+                  <button
+                    type="button"
+                    className="mx-2 px-2 py-2 rounded-full bg-primary transition text-white"
+                    onClick={logout}
+                  >
+                    <LogOut size={22} className="transition-all duration-300" />
+                  </button>
+                </>
               )}
             </div>
           </div>
@@ -266,4 +282,5 @@ const Navbar = ({ starCount }: { starCount?: number }) => {
     </>
   );
 };
+
 export default Navbar;

src/components/core/newsletter/index.tsx

@@ -0,0 +1,52 @@
+"use client";
+import React, { useState } from "react";
+// import { Linkedin, Facebook, Twitter, Instagram } from "lucide-react";
+import { ButtonLong } from "../buttons/index";
+
+const Newsletter: React.FC = () => {
+  const [subscriberEmail, setSubscriberEmail] = useState("");
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    // const { name , value } = e.target ;
+    setSubscriberEmail(e.target.value);
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    console.log("clicked subscribe button ");
+
+    // endpoint for appwrite backend
+  };
+
+  return (
+    <div className="w-full md:w-3/4 mx-auto flex flex-col justify-center items-center gap-6 px-4 md:px-16 py-8">
+      <h4 className="text-xs md:text-lg uppercase">Newsletter</h4>
+      <h2 className="text-xs md:text-xl uppercase text-primary-light text-center">
+        Sign up for latest updates and offers
+      </h2>
+      <form onSubmit={handleSubmit} className="w-full flex flex-col gap-4 md:flex-row">
+        <input
+          onChange={handleChange}
+          name="subscriberEmail"
+          type="text"
+          placeholder="Email Address"
+          className="w-full bg-white text-black border border-black py-1 px-3 rounded"
+        />
+        <ButtonLong type="submit" size="normal">
+          Subscribe
+        </ButtonLong>
+      </form>
+      <h5 className="text-xs md:text-base text-gray-300 text-center">
+        Will be used in accordance with our policy
+      </h5>
+      {/* <div className="flex gap-6">
+        <Linkedin size={20} />
+        <Facebook size={20} />
+        <Twitter size={20} />
+        <Instagram size={20} />
+      </div> */}
+    </div>
+  );
+};
+
+export default Newsletter;

src/components/pages/home/index.tsx

@@ -3,6 +3,8 @@ import Image from "next/image";
 import { ButtonLong } from "@/components/core/buttons";
 import { motion } from "framer-motion";
 
+import Newsletter from "../../core/newsletter/index";
+
 function HomePage({ accountId }: { accountId: string | undefined }) {
   return (
     <>
@@ -250,7 +252,9 @@ function HomePage({ accountId }: { accountId: string | undefined }) {
             </motion.p>
           </article>
         </section>
-
+        <section className="w-full">
+              <Newsletter />
+        </section> 
       </main>
     </>
   );