Update src/app/page.tsx

Merge version_10 into main

src/app/page.tsx

@@ -14,6 +14,13 @@ import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCar
 import { BarChart2, CalendarDays, Gauge, MessageSquare, ShieldCheck, Star } from "lucide-react";
 
 export default function LandingPage() {
+  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"
@@ -31,18 +38,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleApple
       navItems={[
-        {
-          name: "Dashboard",
-          id: "hero",
-        },
-        {
-          name: "Features",
-          id: "features",
-        },
-        {
-          name: "Pricing",
-          id: "pricing",
-        },
+        { name: "Dashboard", id: "hero" },
+        { name: "Features", id: "features" },
+        { name: "Pricing", id: "pricing" },
+        ...currencyPairs.map(p => ({ name: p.name, id: p.href }))
       ]}
       brandName="ForexFlow"
     />
@@ -50,69 +49,17 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplit
-      background={{
-        variant: "plain",
-      }}
+      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: "#",
-        },
+        { text: "Get Started", href: "#features" },
+        { text: "View Charts", href: "/chart?pair=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"
-      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",
-        },
-      ]}
+      marqueeItems={currencyPairs.map(p => ({ type: "text", text: p.name }))}
     />
   </div>
 
@@ -122,36 +69,12 @@ export default function LandingPage() {
       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.",
-        },
+        { icon: BarChart2, title: "Interactive Charting", description: "100+ indicators and real-time data integration with multi-frame analysis.", button: { text: "View EUR/USD", href: "/chart?pair=EURUSD" } },
+        { icon: Star, title: "AI Pattern Recognition", description: "Auto-detect complex chart patterns like wedges, flags, and double bottoms.", button: { text: "View GBP/USD", href: "/chart?pair=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."
@@ -164,31 +87,11 @@ export default function LandingPage() {
       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",
-        },
+        { 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", href: "/chart?pair=EURUSD" }]}
       title="Empowering Global Traders"
       description="Performance metrics driven by data for every market condition."
     />
@@ -200,41 +103,9 @@ export default function LandingPage() {
       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",
-        },
+        { 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."
@@ -247,43 +118,8 @@ export default function LandingPage() {
       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.",
-        },
+        { id: "free", title: "Free Tier", price: "$0", period: "/mo", features: ["EUR/USD access", "Basic Indicators", "Economic Calendar"], button: { text: "Start with EUR/USD", href: "/chart?pair=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", href: "/chart?pair=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."
@@ -295,21 +131,8 @@ export default function LandingPage() {
       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.",
-        },
+        { 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"
@@ -321,73 +144,18 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactText
       useInvertedBackground={false}
-      background={{
-        variant: "sparkles-gradient",
-      }}
+      background={{ variant: "sparkles-gradient" }}
       text="Ready to elevate your trading journey? Join thousands of professional traders today."
-      buttons={[
-        {
-          text: "Create Account",
-          href: "#",
-        },
-      ]}
+      buttons={[{ text: "View EUR/USD Chart", href: "/chart?pair=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: "#",
-            },
-          ],
-        },
+        { 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"
     />
@@ -395,4 +163,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000612e6;
-  --primary-cta: #106EFB;
-  --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
-  --background-accent: #106EFB;
+  --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);