Merge pull request #22 from shehza-d/dev

fix

app/page.tsx

@@ -12,17 +12,18 @@ import {
   Chatbot,
   HacktoberfestBadges,
 } from "@/components";
+import Scroll from "@/components/animations/Scroll";
 import { topProjects } from "@/data";
 import Link from "next/link";
 
 export default function Home() {
   return (
     <main>
+      <Scroll />
       <Cursor />
       <Hero />
       <Particle />
       <Observer />
-
       <div className="mx-6 mm:mx-10 md:mx-16 lg:mx-20 xl:mx-28">
         <About />
         <Skills />

components/animations/Scroll.tsx

@@ -0,0 +1,31 @@
+"use client";
+import { useEffect } from "react";
+
+// https://blog.olivierlarose.com/tutorials/smooth-scroll
+
+// trying not succedded
+export default function Scroll() {
+  // Smooth scroll effect
+  useEffect(() => {
+    (async () => {
+      const LocomotiveScroll = (await import("locomotive-scroll")).default;
+      new LocomotiveScroll();
+    })();
+  }, []);
+
+  return (
+    <>
+      {/* <div className="flex justify-around text-3xl text-white">
+          <p data-scroll data-scroll-speed="0.4">
+            testing
+          </p>
+          <h2 data-scroll data-scroll-speed="0.5">
+            Whats up?
+          </h2>
+          <p data-scroll data-scroll-speed="0.6">
+            shehzad😬
+          </p>
+        </div> */}
+    </>
+  );
+}

components/contact/Contact.tsx

@@ -2,12 +2,9 @@ import Link from "next/link";
 import { Icons } from "@/components";
 import { contactData } from "@/data";
 import { MdMailOutline, MdEditDocument } from "react-icons/md";
+import NewsLetterForm from "./NewsLetter";
 
 export default function Contact() {
-  // const newLetterSubmit = (e: any) => {
-  //   e.preventDefault();
-  // };
-
   return (
     <section className="my-8">
       <h2 className="heading gradient inline-block">Connect with me</h2>
@@ -45,34 +42,7 @@ export default function Contact() {
           </Link>
         ))}
       </div>
-      <form className="text-accent ml:p-8 lg:p-1">
-        <label className="text-2xl font-semibold" htmlFor="newsLetter">
-          Newsletter
-        </label>
-        <div className="relative z-10 mt-6 flex items-center ">
-          <input
-            className={`h-16 w-full flex-1 rounded-tl-lg border-0 p-3 text-2xl text-gray-800 outline-none ring-1  ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-accent dark:bg-lightestNavy dark:text-gray-100 dark:ring-gray-600 sm:leading-6 ml:p-4`}
-            type="email"
-            name="newsLetter"
-            autoComplete="email"
-            required
-            placeholder="Your Email here"
-          />
-          <button
-            className="h-16 rounded-tr-lg bg-accent px-2 text-base font-semibold text-slate-50 hover:opacity-80 active:bg-accentLow  ml:px-6 ml:text-lg"
-            type="submit"
-          >
-            Subscribe
-          </button>
-        </div>
-        <textarea
-          className="relative z-10 mb-6 h-56 w-full flex-1 rounded-b-lg border-0 p-3 text-2xl text-gray-800 shadow-2xl outline-none ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-accent dark:bg-lightestNavy dark:text-gray-100 dark:ring-gray-600 sm:leading-6 ml:p-4"
-          name="message"
-          id="formMsg"
-          placeholder="Your Message"
-          cols={50}
-        ></textarea>
-      </form>
+      <NewsLetterForm />
     </section>
   );
 }

components/contact/NewsLetter.tsx

@@ -0,0 +1,47 @@
+import { sql } from "@vercel/postgres";
+
+export default function NewsLetterForm() {
+  const subscribe = async (formData: FormData) => {
+    "use server";
+
+    const res = await sql`
+		INSERT INTO newsletter (email, message)
+		VALUES (${formData.get("newsLetter")},${formData.get("message")})
+	`;
+    console.log("🚀 ~ subscribe ~ rows:", res);
+
+    // toast('Subscribed, Keep an eye on Email')
+    //   redirect(`/product/${rows[0].slug}`);
+  };
+
+  return (
+    <form action={subscribe} className="text-accent ml:p-8 lg:p-1">
+      <label className="text-2xl font-semibold" htmlFor="newsLetter">
+        Newsletter
+      </label>
+      <div className="relative z-10 mt-6 flex items-center ">
+        <input
+          className={`h-16 w-full flex-1 rounded-tl-lg border-0 p-3 text-2xl text-gray-800 outline-none ring-1  ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-accent dark:bg-lightestNavy dark:text-gray-100 dark:ring-gray-600 sm:leading-6 ml:p-4`}
+          type="email"
+          name="newsLetter"
+          autoComplete="email"
+          required
+          placeholder="Your Email here"
+        />
+        <button
+          className="h-16 rounded-tr-lg bg-accent px-2 text-base font-semibold text-slate-50 hover:opacity-80 active:bg-accentLow  ml:px-6 ml:text-lg"
+          type="submit"
+        >
+          Subscribe
+        </button>
+      </div>
+      <textarea
+        className="relative z-10 mb-6 h-56 w-full flex-1 rounded-b-lg border-0 p-3 text-2xl text-gray-800 shadow-2xl outline-none ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-accent dark:bg-lightestNavy dark:text-gray-100 dark:ring-gray-600 sm:leading-6 ml:p-4"
+        name="message"
+        id="formMsg"
+        placeholder="Your Message"
+        cols={50}
+      ></textarea>
+    </form>
+  );
+}

notes.txt

@@ -56,4 +56,11 @@ https://apidocs.hashnode.com/
 https://github.com/Souravdey777/HashnodeBlogCards
 https://engineering.hashnode.com/what-can-i-do-with-hashnodes-public-api
 
-https://codepen.io/supah/pen/BamxgBb
+https://codepen.io/supah/pen/BamxgBb
+
+
+add google dev profile link = https://g.dev/shehzadd
+
+optional = make these kind of routes
+shehzad.vercel.app/linkedin
+shehzad.vercel.app/github   

package.json

@@ -13,8 +13,11 @@
     "turbo": "next dev --turbo"
   },
   "dependencies": {
+    "@types/locomotive-scroll": "^4.1.4",
     "@vercel/analytics": "^1.0.1",
+    "@vercel/postgres": "^0.8.0",
     "@vercel/speed-insights": "^1.0.10",
+    "locomotive-scroll": "^4.1.4",
     "next": "^14.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",