Update src/app/page.tsx

Merge version_11 into main

src/app/chart/page.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useSearchParams } from "next/navigation";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import ReactLenis from "lenis/react";
+
+export default function ChartPage() {
+  const searchParams = useSearchParams();
+  const pair = searchParams.get("pair") || "EURUSD";
+  const container = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.src = "https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js";
+    script.type = "text/javascript";
+    script.async = true;
+    script.innerHTML = JSON.stringify({
+      "autosize": true,
+      "symbol": `FX:${pair}`,
+      "interval": "D",      "timezone": "Etc/UTC",      "theme": "dark",      "style": "1",      "locale": "en",      "enable_publishing": false,
+      "hide_side_toolbar": false,
+      "allow_symbol_change": true,
+      "support_host": "https://www.tradingview.com"
+    });
+    if (container.current) {
+      container.current.innerHTML = "";
+      container.current.appendChild(script);
+    }
+  }, [pair]);
+
+  const currencyPairs = [
+    { name: "EUR/USD", href: "/chart?pair=EURUSD" },
+    { name: "GBP/USD", href: "/chart?pair=GBPUSD" },
+    { name: "USD/JPY", href: "/chart?pair=USDJPY" },
+    { name: "AUD/USD", href: "/chart?pair=AUDUSD" }
+  ];
+
+  return (
+    <ThemeProvider 
+        defaultButtonVariant="expand-hover" 
+        defaultTextAnimation="background-highlight" 
+        borderRadius="soft" 
+        contentWidth="mediumSmall" 
+        sizing="mediumLargeSizeLargeTitles" 
+        background="floatingGradient" 
+        cardStyle="outline" 
+        primaryButtonStyle="gradient" 
+        secondaryButtonStyle="solid" 
+        headingFontWeight="normal"
+    >
+        <ReactLenis root>
+            <div id="nav" data-section="nav">
+                <NavbarStyleApple
+                    navItems={[
+                        { name: "Dashboard", id: "/" },
+                        ...currencyPairs.map(p => ({ name: p.name, id: p.href }))
+                    ]}
+                    brandName="ForexFlow"
+                />
+            </div>
+
+            <div style={{ height: "85vh", width: "100%", padding: "2rem" }}>
+                <h1 style={{ marginBottom: "1rem" }}>{pair} Advanced Chart</h1>
+                <div ref={container} style={{ height: "100%", width: "100%" }} />
+            </div>
+
+            <div id="footer" data-section="footer">
+                <FooterBase
+                    columns={[
+                        { title: "Product", items: currencyPairs.map(p => ({ label: p.name, href: p.href })) },
+                        { title: "Resources", items: [{ label: "Documentation", href: "#" }, { label: "Community", href: "#" }] },
+                        { title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Privacy Policy", href: "#" }] },
+                    ]}
+                    logoText="ForexFlow"
+                />
+            </div>
+        </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -12,8 +12,19 @@ import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleAp
 import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
 import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
 import { BarChart2, CalendarDays, Gauge, MessageSquare, ShieldCheck, Star } from "lucide-react";
+import { useRouter } from "next/navigation";
 
 export default function LandingPage() {
+  const router = useRouter();
+  const currencyPairs = [
+    { name: "EUR/USD", pair: "EURUSD" },
+    { name: "GBP/USD", pair: "GBPUSD" },
+    { name: "USD/JPY", pair: "USDJPY" },
+    { name: "AUD/USD", pair: "AUDUSD" }
+  ];
+
+  const handlePairClick = (pair: string) => router.push(`/chart?pair=${pair}`);
+
   return (
     <ThemeProvider
         defaultButtonVariant="expand-hover"
@@ -28,371 +39,135 @@ export default function LandingPage() {
         headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleApple
-      navItems={[
-        {
-          name: "Dashboard",
-          id: "hero",
-        },
-        {
-          name: "Features",
-          id: "features",
-        },
-        {
-          name: "Pricing",
-          id: "pricing",
-        },
-      ]}
-      brandName="ForexFlow"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+            <NavbarStyleApple
+            navItems={[
+              { name: "Dashboard", id: "hero" },
+              { name: "Features", id: "features" },
+              { name: "Pricing", id: "pricing" },
+              { name: "Charts", id: "/chart" }
+            ]}
+            brandName="ForexFlow"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroSplit
-      background={{
-        variant: "plain",
-      }}
-      title="Master the Markets with Professional Forex Analytics"
-      description="Gain a competitive edge with real-time charting, AI-driven pattern recognition, and comprehensive risk management tools designed for modern traders."
-      buttons={[
-        {
-          text: "Get Started",
-          href: "#features",
-        },
-        {
-          text: "View Demo",
-          href: "#",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/business-files-desk-notebook-showing-forex-trading-indexes-prices_482257-84924.jpg?_wi=1"
-      imageAlt="Forex trading platform dashboard"
-      mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/smile-woman-talking-phone-looking-camera_23-2148317284.jpg",
-          alt: "Trader avatar 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-woman-working-business-with-computer_482257-20185.jpg",
-          alt: "Trader avatar 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/young-businessman-working-from-his-office-concept-hard-work_181624-33428.jpg",
-          alt: "Trader avatar 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/experienced-senior-female-executive-eyeglasses_1262-5027.jpg",
-          alt: "Trader avatar 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/happy-executive-analyzing-document_1098-3324.jpg",
-          alt: "Trader avatar 5",
-        },
-      ]}
-      avatarText="Join 10,000+ traders"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "EUR/USD Spread 0.2 Pips",
-        },
-        {
-          type: "text",
-          text: "Real-time Data Feed Active",
-        },
-        {
-          type: "text",
-          text: "AI Pattern Engine Online",
-        },
-        {
-          type: "text",
-          text: "Global Liquidity Access",
-        },
-        {
-          type: "text",
-          text: "24/7 Market Monitoring",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+            <HeroSplit
+            background={{ variant: "plain" }}
+            title="Master the Markets with Professional Forex Analytics"
+            description="Gain a competitive edge with real-time charting, AI-driven pattern recognition, and comprehensive risk management tools designed for modern traders."
+            buttons={[
+              { text: "Get Started", href: "#features" },
+              { text: "View Charts", onClick: () => handlePairClick("EURUSD") },
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/business-files-desk-notebook-showing-forex-trading-indexes-prices_482257-84924.jpg?_wi=1"
+            imageAlt="Forex trading platform dashboard"
+            mediaAnimation="slide-up"
+            marqueeItems={currencyPairs.map(p => ({
+                type: "text", 
+                text: p.name
+            }))}
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureHoverPattern
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          icon: BarChart2,
-          title: "Interactive Charting",
-          description: "100+ indicators and real-time data integration with multi-frame analysis.",
-        },
-        {
-          icon: Star,
-          title: "AI Pattern Recognition",
-          description: "Auto-detect complex chart patterns like wedges, flags, and double bottoms.",
-        },
-        {
-          icon: CalendarDays,
-          title: "Economic Data Feed",
-          description: "Real-time calendar tracking with impact analysis and historical performance data.",
-        },
-        {
-          icon: Gauge,
-          title: "Risk Management",
-          description: "Integrated calculators for position sizing, margin, and pip value assessment.",
-        },
-        {
-          icon: MessageSquare,
-          title: "Social Community",
-          description: "Share trade ideas and collaborate with top traders in your currency pairs.",
-        },
-        {
-          icon: ShieldCheck,
-          title: "Strategy Backtesting",
-          description: "Define and test strategies against deep historical data for ultimate confidence.",
-        },
-      ]}
-      title="Built for Precision Trading"
-      description="Advanced tools for technical, fundamental, and risk-focused analysis in one seamless environment."
-    />
-  </div>
+        <div id="features" data-section="features">
+            <FeatureHoverPattern
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            features={[
+              { icon: BarChart2, title: "Interactive Charting", description: "100+ indicators and real-time data integration with multi-frame analysis.", button: { text: "View EUR/USD", onClick: () => handlePairClick("EURUSD") } },
+              { icon: Star, title: "AI Pattern Recognition", description: "Auto-detect complex chart patterns like wedges, flags, and double bottoms.", button: { text: "View GBP/USD", onClick: () => handlePairClick("GBPUSD") } },
+              { icon: CalendarDays, title: "Economic Data Feed", description: "Real-time calendar tracking with impact analysis and historical performance data." },
+              { icon: Gauge, title: "Risk Management", description: "Integrated calculators for position sizing, margin, and pip value assessment." },
+              { icon: MessageSquare, title: "Social Community", description: "Share trade ideas and collaborate with top traders in your currency pairs." },
+              { icon: ShieldCheck, title: "Strategy Backtesting", description: "Define and test strategies against deep historical data for ultimate confidence." },
+            ]}
+            title="Built for Precision Trading"
+            description="Advanced tools for technical, fundamental, and risk-focused analysis in one seamless environment."
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardEleven
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",
-          value: "100+",
-          title: "Indicators",
-          description: "Customizable technical tools",
-          imageSrc: "http://img.b2bpic.net/free-photo/connecting-lines-dots-with-floating-particles_1048-12013.jpg",
-          imageAlt: "Indicators icon",
-        },
-        {
-          id: "m2",
-          value: "24/7",
-          title: "Support",
-          description: "Real-time economic data",
-          imageSrc: "http://img.b2bpic.net/free-photo/african-american-woman-works-remotely-from-cozy-apartment-evening-reviewing-company-stock-market_482257-134074.jpg",
-          imageAlt: "Calendar icon",
-        },
-        {
-          id: "m3",
-          value: "99.9%",
-          title: "Accuracy",
-          description: "Data processing power",
-          imageSrc: "http://img.b2bpic.net/free-photo/stock-market-graph-business-analysis-investment-monitors_482257-29619.jpg",
-          imageAlt: "Calc icon",
-        },
-      ]}
-      title="Empowering Global Traders"
-      description="Performance metrics driven by data for every market condition."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+            <MetricCardEleven
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            metrics={[
+              { id: "m1", value: "EUR/USD", title: "Major Pair", description: "Check live charts for EUR/USD", imageSrc: "http://img.b2bpic.net/free-photo/connecting-lines-dots-with-floating-particles_1048-12013.jpg" },
+              { id: "m2", value: "GBP/USD", title: "Major Pair", description: "Check live charts for GBP/USD", imageSrc: "http://img.b2bpic.net/free-photo/african-american-woman-works-remotely-from-cozy-apartment-evening-reviewing-company-stock-market_482257-134074.jpg" },
+              { id: "m3", value: "USD/JPY", title: "Major Pair", description: "Check live charts for USD/JPY", imageSrc: "http://img.b2bpic.net/free-photo/stock-market-graph-business-analysis-investment-monitors_482257-29619.jpg" },
+            ]}
+            buttons={[{ text: "Explore All Markets", onClick: () => handlePairClick("EURUSD") }]}
+            title="Empowering Global Traders"
+            description="Performance metrics driven by data for every market condition."
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwo
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",
-          name: "Sarah Johnson",
-          role: "Full-time Trader",
-          testimonial: "The AI pattern recognition saved me so much time. This is my go-to terminal now.",
-          imageSrc: "http://img.b2bpic.net/free-photo/successful-expert_1098-14503.jpg",
-        },
-        {
-          id: "2",
-          name: "Michael Chen",
-          role: "Swing Trader",
-          testimonial: "The integration between news feed and charts is industry-leading. Excellent UI.",
-          imageSrc: "http://img.b2bpic.net/free-photo/agent-work_1098-12714.jpg",
-        },
-        {
-          id: "3",
-          name: "Emily Rodriguez",
-          role: "Quantitative Analyst",
-          testimonial: "Backtesting capabilities are top-notch. It allows me to test my strategies instantly.",
-          imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-person_23-2151098592.jpg",
-        },
-        {
-          id: "4",
-          name: "David Kim",
-          role: "Prop Trader",
-          testimonial: "Finally a platform that feels as fast as a Bloomberg terminal but is much cheaper.",
-          imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-office-engages-communication-virtual-presentation-talking_482257-133582.jpg",
-        },
-        {
-          id: "5",
-          name: "Anna Petrova",
-          role: "Currency Expert",
-          testimonial: "The sentiment gauge is remarkably accurate for my daily bias, highly recommended.",
-          imageSrc: "http://img.b2bpic.net/free-photo/factory-inspector-suit-monitoring-solar-panel-production-output_482257-125982.jpg",
-        },
-      ]}
-      title="Trusted by Professional Traders"
-      description="Join our community and see why traders globally rely on our advanced analytical suite."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+            <TestimonialCardTwo
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            testimonials={[
+              { id: "1", name: "Sarah Johnson", role: "Full-time Trader", testimonial: "The AI pattern recognition saved me so much time. This is my go-to terminal now.", imageSrc: "http://img.b2bpic.net/free-photo/successful-expert_1098-14503.jpg" },
+              { id: "2", name: "Michael Chen", role: "Swing Trader", testimonial: "The integration between news feed and charts is industry-leading. Excellent UI.", imageSrc: "http://img.b2bpic.net/free-photo/agent-work_1098-12714.jpg" },
+              { id: "3", name: "Emily Rodriguez", role: "Quantitative Analyst", testimonial: "Backtesting capabilities are top-notch. It allows me to test my strategies instantly.", imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-person_23-2151098592.jpg" },
+            ]}
+            title="Trusted by Professional Traders"
+            description="Join our community and see why traders globally rely on our advanced analytical suite."
+          />
+        </div>
 
-  <div id="pricing" data-section="pricing">
-      <PricingCardNine
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      plans={[
-        {
-          id: "free",
-          title: "Free Tier",
-          price: "$0",
-          period: "/mo",
-          features: [
-            "Advanced Charting",
-            "Basic Indicators",
-            "Economic Calendar",
-            "Live News Feed",
-          ],
-          button: {
-            text: "Get Started",
-            href: "#",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/zoom-out-home-office-with-monitors-stock-market_482257-29630.jpg",
-          imageAlt: "Zoom out of home office with monitors for stock market.",
-        },
-        {
-          id: "pro",
-          title: "Pro Plan",
-          price: "$19",
-          period: "/mo",
-          features: [
-            "AI Pattern Recognition",
-            "Backtesting Module",
-            "API Integrations",
-            "Advanced Sentiment",
-            "Cloud Alerts",
-          ],
-          button: {
-            text: "Upgrade to Pro",
-            href: "#",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/business-files-desk-notebook-showing-forex-trading-indexes-prices_482257-84924.jpg?_wi=2",
-          imageAlt: "Zoom out of home office with monitors for stock market.",
-        },
-      ]}
-      title="Straightforward Pricing"
-      description="Access all core tools for free, upgrade for advanced AI and automation features."
-    />
-  </div>
+        <div id="pricing" data-section="pricing">
+            <PricingCardNine
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            plans={[
+              { id: "free", title: "Free Tier", price: "$0", period: "/mo", features: ["EUR/USD access", "Basic Indicators", "Economic Calendar"], button: { text: "Start with EUR/USD", onClick: () => handlePairClick("EURUSD") }, imageSrc: "http://img.b2bpic.net/free-photo/zoom-out-home-office-with-monitors-stock-market_482257-29630.jpg" },
+              { id: "pro", title: "Pro Plan", price: "$19", period: "/mo", features: ["Full Market Access", "Backtesting Module", "API Integrations"], button: { text: "Upgrade Now", onClick: () => handlePairClick("EURUSD") }, imageSrc: "http://img.b2bpic.net/free-photo/business-files-desk-notebook-showing-forex-trading-indexes-prices_482257-84924.jpg?_wi=2" },
+            ]}
+            title="Straightforward Pricing"
+            description="Access all core tools for free, upgrade for advanced AI and automation features."
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="split"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "1",
-          title: "Is the charting engine really free?",
-          content: "Yes, our core charting engine with 100+ indicators is free for all users.",
-        },
-        {
-          id: "2",
-          title: "Can I integrate my MT4/MT5 account?",
-          content: "Pro users can bridge their accounts via API for seamless trade journal sync.",
-        },
-        {
-          id: "3",
-          title: "Is the data real-time?",
-          content: "We offer real-time data for major pairs with high-speed delivery for our pro tier.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/futuristic-data-interface_23-2152011741.jpg"
-      title="Frequently Asked Questions"
-      description="Everything you need to know about getting started with ForexFlow."
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+            <FaqSplitMedia
+            textboxLayout="split"
+            useInvertedBackground={false}
+            faqs={[
+              { id: "1", title: "Can I view charts for specific pairs?", content: "Yes, use our dedicated chart portal to select any of your preferred currency pairs." },
+              { id: "2", title: "Are custom parameters supported?", content: "Yes, every link to the chart page supports custom pair parameters in the URL." },
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/futuristic-data-interface_23-2152011741.jpg"
+            title="Frequently Asked Questions"
+            description="Everything you need to know about getting started with ForexFlow."
+            faqsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={false}
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      text="Ready to elevate your trading journey? Join thousands of professional traders today."
-      buttons={[
-        {
-          text: "Create Account",
-          href: "#",
-        },
-      ]}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+            <ContactText
+            useInvertedBackground={false}
+            background={{ variant: "sparkles-gradient" }}
+            text="Ready to elevate your trading journey? Join thousands of professional traders today."
+            buttons={[{ text: "View EUR/USD Chart", onClick: () => handlePairClick("EURUSD") }]}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBase
-      columns={[
-        {
-          title: "Product",
-          items: [
-            {
-              label: "Charting Engine",
-              href: "#features",
-            },
-            {
-              label: "Economic Calendar",
-              href: "#",
-            },
-            {
-              label: "Backtesting",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Resources",
-          items: [
-            {
-              label: "Documentation",
-              href: "#",
-            },
-            {
-              label: "Community",
-              href: "#",
-            },
-            {
-              label: "API Reference",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "#",
-            },
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-            {
-              label: "Terms of Service",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      logoText="ForexFlow"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+            <FooterBase
+            columns={[
+              { title: "Product", items: currencyPairs.map(p => ({ label: p.name, href: `/chart?pair=${p.pair}` })) },
+              { title: "Resources", items: [{ label: "Documentation", href: "#" }, { label: "Community", href: "#" }] },
+              { title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Privacy Policy", href: "#" }] },
+            ]}
+            logoText="ForexFlow"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #273c6a;
-  --card: #6a1b1b;
-  --foreground: #ffffff;
-  --primary-cta: #ffffff;
-  --primary-cta-text: #0a1a0c;
-  --secondary-cta: #0d200f;
-  --secondary-cta-text: #d4f6d8;
-  --accent: #1a3d1f;
-  --background-accent: #355e3b;
+  --background: #f5faff;
+  --card: #f1f8ff;
+  --foreground: #001122;
+  --primary-cta: #15479c;
+  --primary-cta-text: #f5faff;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #001122;
+  --accent: #a8cce8;
+  --background-accent: #7ba3cf;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);