feat(about): add story sections and core values to About component

Enhance the About page with new story sections detailing personal journey and core values, including icons and structured content for better user engagement and self-presentation.

app/components/Hero.tsx

@@ -5,7 +5,7 @@ import Image from "next/image";
 import { AuroraText } from "@/components/magicui/aurora-text";
 import { AnimatedGradientText } from "@/components/magicui/animated-gradient-text";
 import { useEffect } from "react";
-import { RotatingText } from "@/components/RotatingText";
+import TextType from "@/components/TextType";
 
 export default function Hero() {
   const getGreetingMessage = () => {
@@ -50,17 +50,40 @@ export default function Hero() {
           className="mb-8"
         >
           <div className="relative w-48 h-48 mx-auto mb-8 mt-10">
-            <Image
-              src="/edev.jpeg"
-              alt="Evandro Fonseca Junior - Desenvolvedor Full-Stack"
-              fill
-              className="rounded-lg object-cover"
-              priority
-              sizes="(max-width: 768px) 192px, 192px"
-              quality={85}
-              placeholder="blur"
-              blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R+IRjWjBqO6O2mhP//Z"
-            />
+            {/* Glow Effect */}
+            <div className="absolute inset-0 bg-gradient-to-r from-cyan-400 to-blue-500 opacity-20 rounded-lg blur-xl animate-pulse"></div>
+
+            {/* Gradient Border */}
+            <div className="absolute inset-0 bg-gradient-to-r from-cyan-400 to-blue-500 rounded-lg p-1">
+              <div className="w-full h-full bg-black rounded-lg">
+                <Image
+                  src="/edev.jpeg"
+                  alt="Evandro Fonseca Junior - Desenvolvedor Full-Stack"
+                  fill
+                  className="rounded-lg object-cover"
+                  priority
+                  sizes="(max-width: 768px) 192px, 192px"
+                  quality={85}
+                  placeholder="blur"
+                  blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R+IRjWjBqO6O2mhP//Z"
+                />
+              </div>
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Badge */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.1 }}
+          className="mb-8"
+        >
+          <div className="inline-flex items-center gap-2 bg-gradient-to-r from-cyan-400/10 to-blue-500/10 px-6 py-3 rounded-full mb-6 border border-cyan-400/20">
+            <div className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
+            <span className="text-sm font-medium text-cyan-300">
+              Disponível para Trabalho
+            </span>
           </div>
         </motion.div>
 
@@ -71,18 +94,23 @@ export default function Hero() {
           transition={{ duration: 0.8, delay: 0.2 }}
           className="mb-8"
         >
-          <h1 className="text-3xl md:text-5xl lg:text-6xl font-black mb-1 leading-tight text-gray-300">
+          <h1 className="text-4xl md:text-5xl lg:text-6xl font-black mb-1 leading-tight text-gray-300">
             Evandro Fonseca Junior
           </h1>
-          <RotatingText
-            words={[
+          <TextType
+            text={[
               "Full-Stack Developer",
               "Cloud Solutions",
               "UI/UX Focused",
               "Performance Focused",
             ]}
-            className="text-xl md:text-2xl lg:text-3xl font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent"
-            interval={4000}
+            className="text-xl md:text-2xl lg:text-3xl font-bold bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent"
+            typingSpeed={80}
+            deletingSpeed={50}
+            pauseDuration={2000}
+            loop={true}
+            showCursor={true}
+            cursorCharacter="|"
           />
         </motion.div>
 
@@ -184,7 +212,7 @@ export default function Hero() {
         >
           <a
             href="#contact"
-            className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold transition-colors"
+            className="bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white px-8 py-3 rounded-lg font-semibold transition-all duration-300 hover:scale-105 shadow-lg shadow-cyan-500/25"
           >
             Vamos Trabalhar Juntos
           </a>