Update src/app/page.tsx

Merge version_4 into main

src/app/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import React, { useState } from "react";
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
@@ -12,9 +13,26 @@ import TestimonialCardFifteen from "@/components/sections/testimonial/Testimonia
 import FaqBase from "@/components/sections/faq/FaqBase";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { Sparkles, Clock, Brain, Activity, Target, Shield, TrendingUp, Award, Zap, Users } from "lucide-react";
+import { Sparkles, Clock, Brain, Activity, Target, Shield, TrendingUp, Award, Zap, Users, Upload } from "lucide-react";
 
 export default function WebAgency2Page() {
+  const [uploadStatus, setUploadStatus] = useState<string | null>(null);
+  const [analysis, setAnalysis] = useState<string | null>(null);
+
+  const handleUpload = () => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'image/*';
+    input.onchange = (e: any) => {
+        setUploadStatus("Uploading and Analyzing...");
+        setTimeout(() => {
+          setUploadStatus("Analysis complete!");
+          setAnalysis("Based on the chart pattern identified (Head and Shoulders), our AI predicts a 72% probability of a bearish reversal in the next 4 hours. Recommended Entry: 1.0850. Target: 1.0790.");
+        }, 2000);
+    };
+    input.click();
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="text-stagger"
@@ -37,7 +55,7 @@ export default function WebAgency2Page() {
             { name: "Pricing", id: "pricing" },
             { name: "Upload", id: "contact" },
           ]}
-          button={{ text: "Upload Chart", href: "#contact" }}
+          button={{ text: "Upload Chart", onClick: handleUpload }}
         />
         <div id="hero">
             <HeroSplitDoubleCarousel
@@ -48,8 +66,8 @@ export default function WebAgency2Page() {
               tagAnimation="slide-up"
               background={{ variant: "canvas-reveal" }}
               buttons={[
-                { text: "Start Analyzing", href: "#contact" },
-                { text: "Learn How", href: "#features" },
+                { text: "Start Analyzing", onClick: handleUpload },
+                { text: "Learn How", onClick: () => { const el = document.getElementById("features"); if (el) el.scrollIntoView({ behavior: "smooth" }); } },
               ]}
               buttonAnimation="slide-up"
               carouselPosition="right"
@@ -146,26 +164,32 @@ export default function WebAgency2Page() {
               ]}
             />
         </div>
-        <div id="contact">
+        <div id="contact" className="flex flex-col items-center py-20 bg-[var(--card)]">
             <ContactCTA
               tag="Ready to Predict?"
               title="Start Your Free Analysis Today"
               description="Upload your first chart now and let our AI show you the potential movement of the market."
-              buttons={[{ text: "Upload Screenshot", href: "#contact" }]}
+              buttons={[{ text: "Upload Screenshot", onClick: handleUpload }]}
               background={{ variant: "sparkles-gradient" }}
               useInvertedBackground={false}
             />
+            {uploadStatus && (
+                <div className="mt-8 p-6 bg-[var(--background)] border border-[var(--accent)] rounded-xl w-full max-w-lg text-center">
+                    <p className="font-semibold text-lg">{uploadStatus}</p>
+                    {analysis && <p className="mt-4 text-[var(--foreground)]">{analysis}</p>}
+                </div>
+            )}
         </div>
         <FooterBase
           logoText="ForexAI"
           copyrightText="© 2026 | ForexAI Analytics"
           columns={[
-            { title: "Platform", items: [{ label: "Home", href: "#" }, { label: "Dashboard", href: "#" }] },
-            { title: "Resources", items: [{ label: "Blog", href: "#" }, { label: "FAQs", href: "#" }] },
-            { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
+            { title: "Platform", items: [{ label: "Home", onClick: () => window.scrollTo({ top: 0, behavior: "smooth" }) }, { label: "Dashboard", onClick: () => { const el = document.getElementById("hero"); if (el) el.scrollIntoView({ behavior: "smooth" }); } }] },
+            { title: "Resources", items: [{ label: "Blog", onClick: () => window.location.href = "/blog" }, { label: "FAQs", onClick: () => { const el = document.getElementById("faq"); if (el) el.scrollIntoView({ behavior: "smooth" }); } }] },
+            { title: "Legal", items: [{ label: "Privacy", onClick: () => window.location.href = "/legal" }, { label: "Terms", onClick: () => window.location.href = "/terms" }] },
           ]}
         />
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}