home page more optimized

Author: sinanptm

app/page.tsx

@@ -1,11 +1,25 @@
-import { memo } from 'react';
-import Image from 'next/image';
-import Hero from '@/components/home/Hero';
+import { TypewriterEffect } from '@/components/ui/typewriter-effect';
 import About from '@/components/home/About';
+import Name from '@/components/home/Name';
+import Image from 'next/image';
+import { memo } from 'react';
 
 const page = () => {
+  const words = [
+    { text: "I" },
+    { text: "Build" },
+    { text: "Innovative", },
+    { text: "Digital", },
+    { text: "Solutions", },
+    { text: "With", },
+    { text: "Precision" },
+    { text: "And" },
+    { text: "Passion" },
+    { text: "!" },
+  ];
   return (
     <main className='flex flex-col pt-12'>
+      {/* Profile image for Seo */}
       <div className='relative'>
         <Image
           src="/assets/profile-image.jpg"
@@ -15,7 +29,24 @@ const page = () => {
           loading='lazy'
         />
       </div>
-      <Hero />
+
+      {/* <Hero /> */}
+      <section className="w-full mx-auto sm:px-16 px-6 pb-10">
+        <div className={`pb-7 mx-auto flex flex-row items-start gap-5`}>
+          <div className="flex flex-col justify-center items-center mt-5 ml-5">
+          </div>
+          <div>
+            <header>
+              <Name />
+            </header>
+            <article>
+              <TypewriterEffect words={words} />
+            </article>
+          </div>
+        </div>
+      </section>
+
+      {/* About section */}
       <About />
     </main>
   );

components/home/Hero.tsx

@@ -0,0 +1,19 @@
+'use client';
+import { profile } from '@/constants';
+import { containerVariants } from '@/style';
+import { motion } from 'framer-motion';
+
+const Name = () => {
+    return (
+        <motion.h1
+            initial="hidden"
+            animate="visible"
+            variants={containerVariants}
+            className={`font-black  lg:text-[80px] sm:text-[60px] xs:text-[50px] text-[40px] lg:leading-[98px]`}
+        >
+            I&apos;m <span className="text-violet-600">{profile.name}</span>
+        </motion.h1>
+    );
+};
+
+export default Name;