fdasfdas

.replit

@@ -10,3 +10,7 @@ run = ["sh", "-c", "npm run dev"]
 [[ports]]
 localPort = 3000
 externalPort = 80
+
+[[ports]]
+localPort = 3001
+externalPort = 3001

app/components/CurrentLocationAndTime.tsx

@@ -0,0 +1,22 @@
+// app/components/CurrentLocationAndTime.tsx
+'use client';
+import React, { useEffect, useState } from 'react';
+
+const CurrentLocationAndTime: React.FC = () => {
+  const [dateTime, setDateTime] = useState(new Date());
+
+  useEffect(() => {
+    const updateDateTime = () => setDateTime(new Date());
+    const timerId = setInterval(updateDateTime, 1000); 
+
+    return () => clearInterval(timerId);
+  }, []);
+
+  return (
+    <div>
+      <p>Current Date and Time: {dateTime.toLocaleString()}</p>
+    </div>
+  );
+};
+
+export default CurrentLocationAndTime;

app/components/FlipComponent.tsx

@@ -18,11 +18,11 @@ const FlipperComponent: React.FC = () => {
       <h1>hi, I&apos;m</h1>
       <div
         id="flipper"
-        className="flipper flex border-2 relative  bg-transparent h-8 perspective-500  text-left transform-style-preserve font-bold  text-gray-900 "
+        className="flipper flex relative  bg-transparent h-8 perspective-500  text-left transform-style-preserve font-bold  dark:text-white text-gray-900 "
         ref={flipperRef}
       >
         <div
-          className={`step step0 ${currentStep === 0 ? "set" : "down"}  text-gray-900`}
+          className={`step step0 ${currentStep === 0 ? "set" : "down"}  dark:text-white text-gray-900`}
         >
           Neeraj
         </div>

app/components/FlipWords.tsx

@@ -5,8 +5,8 @@ export function FlipWordsDemo() {
   const words = ["better", "cute", "beautiful", "modern"];
 
   return (
-    <div className="h-[40rem] flex justify-center dark:bg-[#DFECE7] border-green-500 items-center px-4">
-      <div className="sm:text-4xl text-xl  mx-auto font-normal text-[#5e716a] dark:text-neutral-600">
+    <div className="h-[40rem] flex justify-center bg-[black] dark:bg-[#ffffff] border-green-500 items-center px-4">
+      <div className="sm:text-4xl text-xl mx-auto font-normal text-white dark:text-neutral-600">
         Build
         <FlipWords words={words} /> <br />
         websites with Aceternity UI

app/components/heroSection.tsx

@@ -27,7 +27,8 @@ export function HeroSection() {
             </div>
           </figure>
         </div>
-        <div></div>
+        <div>
+        </div>
       </section>
     </>
   );

app/components/homeSectionHeader.tsx

@@ -0,0 +1,26 @@
+import DarkModeToggle from "../components/DarkModeToggle";
+import { TypewriterEffectSmoothDemo } from "../components/typeWriter";
+import { LampDemo } from "../components/ui/lamp";
+import CurrentLocationAndTime from "./CurrentLocationAndTime";
+
+// `app/page.tsx` is the UI for the `/` URL
+export default function HomeSectionHeader() {
+  return (
+    <main className="h-[200vh] ">
+      <header>
+        <div className="">
+          <div className="absolute top-10">
+            <h1>Welcome to My Next.js App</h1>
+            <CurrentLocationAndTime />
+          </div>
+          <LampDemo />
+        </div>
+        <TypewriterEffectSmoothDemo />
+      </header>
+      <section className="dark:bg-black dark:text-white">
+        <DarkModeToggle/>
+          {/* Other components or content */}
+      </section>
+    </main>
+  );
+}

app/components/typeWriter.tsx

@@ -0,0 +1,38 @@
+"use client";
+import { TypewriterEffectSmooth } from "./ui/typewriter-effect";
+export function TypewriterEffectSmoothDemo() {
+  const words = [
+    {
+      text: "Build",
+    },
+    {
+      text: "awesome",
+    },
+    {
+      text: "apps",
+    },
+    {
+      text: "with",
+    },
+    {
+      text: "professional.",
+      className: "text-blue-500 dark:text-blue-500",
+    },
+  ];
+  return (
+    <div className="flex flex-col items-center dark:bg-black justify-center h-[40rem]  ">
+      <p className="text-neutral-600 dark:text-neutral-200 text-xs sm:text-base  ">
+        The road to make unique from here
+      </p>
+      <TypewriterEffectSmooth words={words} />
+      {/* <div className="flex flex-col md:flex-row space-y-4 md:space-y-0 space-x-0 md:space-x-4">
+        <button className="w-40 h-10 rounded-xl bg-black border dark:border-white border-transparent text-white text-sm">
+          Join now
+        </button>
+        <button className="w-40 h-10 rounded-xl bg-white text-black border border-black  text-sm">
+          Signup
+        </button> 
+      </div>*/}
+    </div>
+  );
+}

app/components/ui/flip-words.tsx

@@ -60,7 +60,7 @@ export const FlipWords = ({
           position: "absolute",
         }}
         className={cn(
-          "z-10 inline-block relative text-left text-neutral-900 dark:black px-2",
+          "z-10 inline-block relative text-left text-[#D9D9D9]  dark:text-neutral-800 px-2",
           className
         )}
         key={currentWord}

app/components/ui/lamp.tsx

@@ -16,7 +16,7 @@ export function LampDemo() {
         }}
         className="mt-8 bg-gradient-to-br from-slate-300 to-slate-500 py-4 bg-clip-text text-left text-4xl font-medium tracking-tight text-transparent md:text-7xl"
       >
-        hello, world <br /> I&apos;m Programmer <br /> in Delhi
+        hello, world <br /> I&apos;m Programmer <br/> in Delhi
       </motion.h1>
     </LampContainer>
   );
@@ -32,7 +32,7 @@ export const LampContainer = ({
   return (
     <div
       className={cn(
-        "relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-slate-950 w-full z-0",
+        "relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-slate-950 w-full  z-0",
         className,
       )}
     >

app/components/ui/typewriter-effect.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+import { cn } from "@/app/utils/cn";
+import { motion, stagger, useAnimate, useInView } from "framer-motion";
+import { useEffect } from "react";
+
+export const TypewriterEffect = ({
+  words,
+  className,
+  cursorClassName,
+}: {
+  words: {
+    text: string;
+    className?: string;
+  }[];
+  className?: string;
+  cursorClassName?: string;
+}) => {
+  // split text inside of words into array of characters
+  const wordsArray = words.map((word) => {
+    return {
+      ...word,
+      text: word.text.split(""),
+    };
+  });
+
+  const [scope, animate] = useAnimate();
+  const isInView = useInView(scope);
+  useEffect(() => {
+    if (isInView) {
+      animate(
+        "span",
+        {
+          display: "inline-block",
+          opacity: 1,
+          width: "fit-content",
+        },
+        {
+          duration: 0.3,
+          delay: stagger(0.1),
+          ease: "easeInOut",
+        }
+      );
+    }
+  }, [isInView]);
+
+  const renderWords = () => {
+    return (
+      <motion.div ref={scope} className="inline">
+        {wordsArray.map((word, idx) => {
+          return (
+            <div key={`word-${idx}`} className="inline-block">
+              {word.text.map((char, index) => (
+                <motion.span
+                  initial={{}}
+                  key={`char-${index}`}
+                  className={cn(
+                    `dark:text-white text-black opacity-0 hidden`,
+                    word.className
+                  )}
+                >
+                  {char}
+                </motion.span>
+              ))}
+              &nbsp;
+            </div>
+          );
+        })}
+      </motion.div>
+    );
+  };
+  return (
+    <div
+      className={cn(
+        "text-base sm:text-xl md:text-3xl lg:text-5xl font-bold text-center",
+        className
+      )}
+    >
+      {renderWords()}
+      <motion.span
+        initial={{
+          opacity: 0,
+        }}
+        animate={{
+          opacity: 1,
+        }}
+        transition={{
+          duration: 0.8,
+          repeat: Infinity,
+          repeatType: "reverse",
+        }}
+        className={cn(
+          "inline-block rounded-sm w-[4px] h-4 md:h-6 lg:h-10 bg-blue-500",
+          cursorClassName
+        )}
+      ></motion.span>
+    </div>
+  );
+};
+
+export const TypewriterEffectSmooth = ({
+  words,
+  className,
+  cursorClassName,
+}: {
+  words: {
+    text: string;
+    className?: string;
+  }[];
+  className?: string;
+  cursorClassName?: string;
+}) => {
+  // split text inside of words into array of characters
+  const wordsArray = words.map((word) => {
+    return {
+      ...word,
+      text: word.text.split(""),
+    };
+  });
+  const renderWords = () => {
+    return (
+      <div>
+        {wordsArray.map((word, idx) => {
+          return (
+            <div key={`word-${idx}`} className="inline-block">
+              {word.text.map((char, index) => (
+                <span
+                  key={`char-${index}`}
+                  className={cn(`dark:text-white text-black `, word.className)}
+                >
+                  {char}
+                </span>
+              ))}
+              &nbsp;
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  return (
+    <div className={cn("flex space-x-1 my-6", className)}>
+      <motion.div
+        className="overflow-hidden pb-2"
+        initial={{
+          width: "0%",
+        }}
+        whileInView={{
+          width: "fit-content",
+        }}
+        transition={{
+          duration: 2,
+          ease: "linear",
+          delay: 1,
+        }}
+      >
+        <div
+          className="text-xs sm:text-base md:text-xl lg:text:3xl xl:text-5xl font-bold"
+          style={{
+            whiteSpace: "nowrap",
+          }}
+        >
+          {renderWords()}{" "}
+        </div>{" "}
+      </motion.div>
+      <motion.span
+        initial={{
+          opacity: 0,
+        }}
+        animate={{
+          opacity: 1,
+        }}
+        transition={{
+          duration: 0.8,
+
+          repeat: Infinity,
+          repeatType: "reverse",
+        }}
+        className={cn(
+          "block rounded-sm w-[4px]  h-4 sm:h-6 xl:h-12 bg-blue-500",
+          cursorClassName
+        )}
+      ></motion.span>
+    </div>
+  );
+};

app/page.tsx

@@ -1,23 +1,10 @@
-import DarkModeToggle from "./components/DarkModeToggle";
-import { LampDemo } from "./components/ui/lamp";
+import HomeSectionHeader from "./components/homeSectionHeader";
 
 // `app/page.tsx` is the UI for the `/` URL
-export default function Page() {
+export default function Home() {
   return (
-    <main className="h-[200vh] ">
-      <header>
-        <h1>
-          <LampDemo />
-        </h1>
-      </header>
-      <section className="dark:bg-black dark:text-white">
-        <h1>new mode</h1>
-        <div className="flex flex-col items-center justify-center min-h-screen py-2">
-          <h1 className="text-4xl font-bold">Welcome to Next.js</h1>
-          <DarkModeToggle />
-          {/* Other components or content */}
-        </div>
-      </section>
-    </main>
+  <div>
+  <HomeSectionHeader/>
+  </div>  
   );
 }