F

app/about/page.tsx

@@ -5,7 +5,7 @@ import { FlipWordsDemo } from "../components/FlipWords";
 import {HeroSection} from "../components/heroSection";
 
 export const metadata: Metadata = {
-  title: "nee - Portfolio passionate Programmer in Delhi",
+  title: "nee - Portfolio | passionate Programmer in Delhi",
   description: "I'm an SEO freelancer based in Delhi, helping businesses achieve top search engine rankings by optimizing websites for organic traffic and conversions",
 };
 

app/components/TextsRefresh.tsx

@@ -0,0 +1,46 @@
+import React, { useState, useEffect, useRef } from "react";
+import Refresh from "./acceries/Refresh"; // Assuming you have a Refresh component
+
+const texts = [
+  "Optimized ",
+  "libraries ",
+  "and",
+  "frameworks",
+];
+
+const TextRotator = () => {
+  const [currentTextIndex, setCurrentTextIndex] = useState(0);
+  const refreshRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCurrentTextIndex((prevIndex) => (prevIndex + 1) % texts.length);
+    }, 5000); 
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  useEffect(() => {
+    if (refreshRef.current) {
+      refreshRef.current.classList.add('animate-spin');
+      setTimeout(() => {
+        if (refreshRef.current) { // Check if refreshRef.current exists
+          refreshRef.current.classList.remove('animate-spin'); 
+        }
+      }, 1000); // Rotate for 1 second
+    }
+  }, [currentTextIndex]);
+
+  return (
+    <div className="flex flex-col items-end justify-end  ">
+      <div ref={refreshRef} className="animate-spin rounded-full">
+        <Refresh />
+      </div>
+      <div className="mb-4 text-2xl">
+        {texts[currentTextIndex]}
+      </div>
+    </div>
+  );
+};
+
+export default TextRotator;

app/components/acceries/Refresh.tsx

@@ -0,0 +1,12 @@
+export const Refresh = () => {
+  return (
+    <>
+      <div className="flex justify-center items-center w-fit p-1">
+        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"/></svg>
+
+      </div>
+    </>
+  );
+};
+
+export default Refresh

app/components/heroSection.tsx

@@ -7,6 +7,9 @@ import { ShootingStarsAndStarsBackgroundDemo } from "./ShootingVsStarts";
 import AgeCalculator from "./AgeCalculator";
 import CountAnimation from "./CountAnimation";
 import { ImageSlides } from "./ImageSlides";
+import Refresh from "./acceries/Refresh";
+import TextRotator from "./TextsRefresh";
+
 
 export function HeroSection() {
   return (
@@ -725,10 +728,10 @@ export function HeroSection() {
                     initial={{ opacity: 0, x: -40, y: 40 }}
                     whileInView={{ opacity: 1, x: 0, y: 0 }}
                     transition={{ delay: 0.6 }}
-                    className="m-2  rounded-lg text-six bg-four"
+                    className="m-2 w-full rounded-lg text-right text-six bg-black"
                   >
                     <h4 className="px-2 text-3xl font-semibold">
-                      Optimized libraries and frameworks
+                    <TextRotator />
                     </h4>
                     <div className="m-2">
 

app/contact/page.tsx

@@ -1,8 +1,36 @@
 // `app/page.tsx` is the UI for the `/` URL
 export default function Page() {
   return (
-    <main className="h-screen flex justify-center items-center">
-      <h1>Contact</h1>
-    </main>
+    <>
+      <div  className="m-auto min-h-screen rounded p-2 sm:flex sm:border-rose-600 md:border-blue-400 lg:w-[70%] lg:flex-1 lg:border-yellow-500">
+        <div className=" mb-3 rounded-md p-2 text-3xl font-semibold text-[#353535] sm:w-[40%] sm:text-4xl md:text-5xl lg:text-6xl">Facilis blanditiis impedit atque.</div>
+        <div className="rounded-md border-lime-400 bg-secondary text-six p-2 font-semibold  sm:w-[60%]">
+          <form action="https://formspree.io/f/mnqebqjq" method="POST" className="m-4">
+            <label className="text-sm ">
+              Full name <br />
+              <input className="ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring mt-2 flex h-10 w-full rounded  bg-six px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus:bg-lime-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" type="text" name="name" placeholder="Enter name..." /> <br />
+            </label>
+            <label className="text-sm ">
+              Your phone <br />
+              <input className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring mt-2 flex h-10 w-full rounded border-lime-600 bg-lime-200 px-3 py-2 text-sm ring-yellow-400 file:border-0 file:bg-transparent file:text-sm file:font-medium focus:bg-lime-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" type="tel" placeholder="+00XXXXXXXXXX" name="phone" title="Not valid"  required autoComplete="off"  /><br />
+            </label>
+            <label className="text-sm text-[#353535]">
+              Your email <br />
+              <input className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring mt-2 flex h-10 w-full rounded border-lime-600 bg-lime-200 px-3 py-2 text-sm ring-yellow-400 file:border-0 file:bg-transparent file:text-sm file:font-medium focus:bg-lime-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" type="email" name="email" placeholder="Enter email" />
+            </label>
+            <br />
+            <label className="text-sm text-[#353535]">
+              Your message: <br />
+              <textarea className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring mt-2 flex h-24 w-full rounded border-lime-600 bg-lime-200 px-3 py-2 text-sm ring-yellow-400 file:border-0 file:bg-transparent file:text-sm file:font-medium focus:bg-lime-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" name="message" placeholder="Send a note..."></textarea>
+            </label>
+            <br />
+            {/* <!-- your other form fields go here --> */}
+
+            <button className="h-10 w-28 rounded bg-lime-700 text-white transition ease-in active:origin-bottom active:scale-95 active:border active:border-lime-700 active:bg-lime-100 active:text-lime-800 active:transition-all">Send</button>
+          </form>
+        </div>
+      </div>
+
+    </>
   )
 }