Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -11,6 +11,7 @@ import TestimonialCardFifteen from "@/components/sections/testimonial/Testimonia
 import ContactSplit from "@/components/sections/contact/ContactSplit";
 import FooterCard from "@/components/sections/footer/FooterCard";
 import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
+import TextAnimation from "@/components/text/TextAnimation";
 import { Award, BarChart3, CheckCircle, Clock, Cloud, Code, Cpu, Database, Eye, GitBranch, Github, Linkedin, Mail, Monitor, Package, Server, Settings, Shield, Smartphone, Sparkles, TrendingUp, Twitter, Users, Zap } from "lucide-react";
 
 export default function LandingPage() {
@@ -62,6 +63,33 @@ export default function LandingPage() {
           imageSrc="https://img.b2bpic.net/free-photo/data-scientist-doing-software-quality-assurance-reading-source-code_482257-116879.jpg"
           imageAlt="HOF Coral - Developer and Creator"
           mediaAnimation="blur-reveal"
+          marqueeItems={[
+            { type: "text", text: "React" },
+            { type: "text", text: "Node.js" },
+            { type: "text", text: "TypeScript" },
+            { type: "text", text: "AWS" },
+            { type: "text", text: "PostgreSQL" },
+            { type: "text", text: "Docker" },
+            { type: "text", text: "GraphQL" },
+            { type: "text", text: "Next.js" }
+          ]}
+          marqueeSpeed={30}
+          showMarqueeCard={true}
+        />
+      </div>
+
+      <div id="ribbon" data-section="ribbon">
+        <SocialProofOne
+          title="Trusted by Industry Leaders"
+          description="Partnering with innovative companies that trust my expertise"
+          tag="Clients"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          names={[
+            "Acme Corporation",            "TechFlow Solutions",            "Innovate Inc",            "CloudSync Systems",            "DataVault Pro",            "NeuralNet AI",            "VelocityScale",            "PrismLabs"
+          ]}
+          speed={40}
+          showCard={true}
         />
       </div>
 
@@ -104,21 +132,6 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="ribbon" data-section="ribbon">
-        <SocialProofOne
-          title="Trusted by Industry Leaders"
-          description="Partnering with innovative companies that trust my expertise"
-          tag="Clients"
-          textboxLayout="default"
-          useInvertedBackground={true}
-          names={[
-            "Acme Corporation",            "TechFlow Solutions",            "Innovate Inc",            "CloudSync Systems",            "DataVault Pro",            "NeuralNet AI",            "VelocityScale",            "PrismLabs"
-          ]}
-          speed={40}
-          showCard={true}
-        />
-      </div>
-
       <div id="features" data-section="features">
         <FeatureCardSeven
           title="Featured Work"