Merge version_6 into main

Merge version_6 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";
@@ -15,6 +16,28 @@ import FooterBase from "@/components/sections/footer/FooterBase";
 import { Sparkles, Clock, Brain, Activity, Target, Shield, TrendingUp, Award, Zap, Users } 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) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+        setUploadStatus("Analyzing " + file.name + "...");
+        setTimeout(() => {
+          const patterns = ["Head and Shoulders", "Double Bottom", "Rising Wedge", "Flag Pattern", "Triangle Consolidation"];
+          const predictions = ["72% probability of a bearish reversal", "65% bullish breakout signal", "80% trend continuation", "High volatility expected", "Neutral market sentiment" ];
+          const randomIdx = Math.floor(Math.random() * patterns.length);
+          setUploadStatus("Analysis complete for " + file.name + "!");
+          setAnalysis(`Based on the identified ${patterns[randomIdx]}, our AI predicts a ${predictions[randomIdx]}. Recommended Entry: 1.0${Math.floor(Math.random() * 9000)}. Target: 1.0${Math.floor(Math.random() * 9000)}.`);
+        }, 2000);
+    };
+    input.click();
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="text-stagger"
@@ -37,10 +60,7 @@ export default function WebAgency2Page() {
             { name: "Pricing", id: "pricing" },
             { name: "Upload", id: "contact" },
           ]}
-          button={{ text: "Upload Chart", onClick: () => {
-            const el = document.getElementById("contact");
-            if (el) el.scrollIntoView({ behavior: "smooth" });
-          } }}
+          button={{ text: "Upload Chart", onClick: handleUpload }}
         />
         <div id="hero">
             <HeroSplitDoubleCarousel
@@ -51,7 +71,7 @@ export default function WebAgency2Page() {
               tagAnimation="slide-up"
               background={{ variant: "canvas-reveal" }}
               buttons={[
-                { text: "Start Analyzing", onClick: () => { const el = document.getElementById("contact"); if (el) el.scrollIntoView({ behavior: "smooth" }); } },
+                { text: "Start Analyzing", onClick: handleUpload },
                 { text: "Learn How", onClick: () => { const el = document.getElementById("features"); if (el) el.scrollIntoView({ behavior: "smooth" }); } },
               ]}
               buttonAnimation="slide-up"
@@ -149,15 +169,21 @@ 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", onClick: () => { const el = document.getElementById("contact"); if (el) el.scrollIntoView({ behavior: "smooth" }); } }]}
+              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)] leading-relaxed">{analysis}</p>}
+                </div>
+            )}
         </div>
         <FooterBase
           logoText="ForexAI"