Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -2,18 +2,18 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
+import { useState } from "react";
+import { Brain, Settings } from "lucide-react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FaqBase from '@/components/sections/faq/FaqBase';
 import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
 import FooterCard from '@/components/sections/footer/FooterCard';
 import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
-import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
 
 export default function LandingPage() {
+  const [paymentStatus] = useState("Active");
+
   return (
     <ThemeProvider
         defaultButtonVariant="expand-hover"
@@ -32,10 +32,10 @@ export default function LandingPage() {
           <NavbarStyleFullscreen
             navItems={[
               { name: "Home", id: "hero" },
+              { name: "Dashboard", id: "dashboard" },
               { name: "Features", id: "features" },
               { name: "Pricing", id: "pricing" },
               { name: "Contact", id: "contact" },
-        { name: "Admin", id: "/admin" },
             ]}
             brandName="TRONA AI"
           />
@@ -45,112 +45,54 @@ export default function LandingPage() {
           <HeroSplitDoubleCarousel
             background={{ variant: "gradient-bars" }}
             title="Master the Markets with Trona AI"
-      description="Your professional probability-based signal assistant. Analyze Forex and Binary markets with high-precision AI models."
+            description="Your professional probability-based signal assistant. Analyze Forex and Binary markets with high-precision AI models configured by your broker and timeframe settings."
             leftCarouselItems={[{ imageSrc: "http://img.b2bpic.net/free-photo/empty-interior-forex-market-exchange-company-office-with-financial-data-growth-charts-multiple-displays-workspace-equipped-with-workstation-having-finance-statistics-real-time-graph_482257-44513.jpg?_wi=1", imageAlt: "AI Trading Dashboard" }]}
             rightCarouselItems={[{ imageSrc: "http://img.b2bpic.net/free-photo/trading-stock-stock-market-business-graph-trading-investment-broker-stock-exchange-market_169016-66447.jpg", imageAlt: "Market Analysis UI" }]}
-      buttons={[{ text: "Join Telegram", href: "https://t.me/tronaAIsiganls" }, { text: "View Dashboard", href: "#" }]}
-      avatars={[]}
+            buttons={[{ text: "Join Telegram", href: "https://t.me/tronaAIsiganls" }, { text: "View Dashboard", href: "#dashboard" }]}
           />
         </div>
 
+        <div id="dashboard" data-section="dashboard" className="py-20 px-8 bg-gray-50">
+          <div className="max-w-6xl mx-auto space-y-8">
+            <div className="flex justify-between items-center p-6 bg-white border rounded-lg">
+              <h2 className="text-2xl font-bold">AI Signal Dashboard</h2>
+              <div className="flex items-center gap-2">
+                <span>Status:</span>
+                <span className={`px-3 py-1 rounded text-sm ${paymentStatus === 'Active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
+                   {paymentStatus}
+                </span>
+              </div>
+            </div>
+            
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              <div className="p-6 border rounded-lg bg-white">
+                <Settings className="mb-2" />
+                <h4 className="font-bold">Configuration</h4>
+                <select className="w-full mt-2 p-2 border rounded"><option>Pocket Option</option><option>Deriv</option></select>
+                <select className="w-full mt-2 p-2 border rounded"><option>1m</option><option>5m</option><option>15m</option></select>
+              </div>
+              <div className="md:col-span-2 p-6 border rounded-lg bg-white min-h-[300px] flex flex-col items-center justify-center">
+                <Brain size={48} className="text-blue-500 mb-4" />
+                <p className="text-gray-600">AI signal generation engine ready. Waiting for configuration...</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
         <div id="features" data-section="features">
-      <FeatureCardSeven
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        { title: "Multi-Timeframe AI", description: "Select your ideal timeframe from 1m to 4h for personalized market probability.", imageSrc: "http://img.b2bpic.net/free-photo/birth-rate-fertility-concept_23-2148761042.jpg?_wi=1" },
-        { title: "Secure Probability Analysis", description: "Technical indicators including RSI, MACD, and Support/Resistance logic.", imageSrc: "http://img.b2bpic.net/free-photo/cybersecurity-concept-shield-protecting-data_23-2152001124.jpg" },
-        { title: "Live Alerts", description: "Get real-time signal notifications delivered instantly to your dashboard.", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-hourglass-mouse-symbol-design_460848-7398.jpg" }
-      ]}
-      title="Intelligent Signal Engine"
-      description="Powerful technical analysis features designed to provide clear, actionable insights for every major broker."
-    />
-  </div>
-
-  <div id="brokers" data-section="brokers">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={true}
-      names={["Pocket Option", "ExpertOption", "XM MT5", "Deriv", "FXPesa", "Exness", "MetaTrader 4"]}
-      title="Supported Platforms"
-      description="Seamlessly connect with your preferred broker environments."
-    />
+          <FeatureCardSeven animationType="slide-up" textboxLayout="split" title="Intelligent Signal Engine" description="Powerful technical analysis features designed to provide clear, actionable insights." features={[{ title: "Multi-Timeframe AI", description: "Select your preferred timeframe from 1m to 4h.", imageSrc: "http://img.b2bpic.net/free-photo/birth-rate-fertility-concept_23-2148761042.jpg?_wi=1" }, { title: "Broker-Optimized Execution", description: "Select your broker platform to ensure precision.", imageSrc: "http://img.b2bpic.net/free-photo/cybersecurity-concept-shield-protecting-data_23-2152001124.jpg" }]} useInvertedBackground={false} />
         </div>
 
         <div id="pricing" data-section="pricing">
-      <PricingCardNine
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      plans={[
-        { id: "free", title: "Free Tier", price: "KSH 0", period: "Daily", features: ["2 Dashboard Signals", "5 Telegram Signals"], button: { text: "Get Started" } },
-        { id: "premium", title: "Premium", price: "KSH 200", period: "3 Trades", features: ["3 Extra Signals", "Premium TG Group"], button: { text: "Unlock Premium" } },
-        { id: "vvip", title: "VVIP", price: "KSH 500", period: "5 Trades", features: ["5 High-Confidence Trades", "Priority Alerts", "Faster Execution"], button: { text: "Unlock VVIP" } }
-      ]}
-      title="Choose Your Path"
-      description="Upgrade to unlock high-confidence VVIP signals."
-    />
-  </div>
-
-  <div id="metrics" data-section="metrics">
-      <MetricCardEleven
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={true}
-      metrics={[
-        { id: "m1", value: "78%", title: "Average Win Rate", description: "Based on daily signal logs.", imageSrc: "http://img.b2bpic.net/free-photo/debt-ridk-difficulty-downfall-concept_53876-124004.jpg" },
-        { id: "m2", value: "15k+", title: "Active Traders", description: "Traders using Trona AI.", imageSrc: "http://img.b2bpic.net/free-photo/cybersecurity-data-protection-concept_23-2152004114.jpg" },
-        { id: "m3", value: "24/7", title: "AI Uptime", description: "Constant market monitoring.", imageSrc: "http://img.b2bpic.net/free-photo/black-alarm-clock-eyeglasses-closed-diary-pencil-white-background_23-2148061616.jpg" }
-      ]}
-      title="Proven Performance"
-      description="Transparency in our signal accuracy."
-    />
-  </div>
-
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTen
-      textboxLayout="split"
-      useInvertedBackground={false}
-      testimonials={[
-        { id: "t1", title: "Game Changer", quote: "Trona AI helped me structure my trading day.", name: "John M.", role: "Forex Trader", imageSrc: "http://img.b2bpic.net/free-photo/front-view-lawyer-portrait_23-2151202434.jpg" },
-        { id: "t2", title: "Highly Recommended", quote: "The signals are consistent and professional.", name: "Sarah K.", role: "Crypto Trader", imageSrc: "http://img.b2bpic.net/free-photo/view-3d-practicing-lawyer_23-2151023403.jpg" }
-      ]}
-      title="Trader Success Stories"
-      description="Hear from our community members."
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqBase
-      textboxLayout="split"
-      useInvertedBackground={true}
-      faqs={[
-        { id: "f1", title: "Is profit guaranteed?", content: "Trading involves risk. We provide probability-based insights, not guaranteed profits." },
-        { id: "f2", title: "How do I pay?", content: "Pay via M-Pesa to +254115642074." }
-      ]}
-      title="Frequently Asked Questions"
-      description="Learn more about how Trona AI works."
-      faqsAnimation="slide-up"
-    />
+            <PricingCardNine animationType="slide-up" textboxLayout="split" title="Choose Your Path" description="Upgrade to increase signal limits." plans={[{ id: "free", title: "Free", price: "KSH 0", period: "Daily", features: ["2 Signals"], button: { text: "Start" } }]} useInvertedBackground={false} />
         </div>
 
         <div id="contact" data-section="contact">
-      <ContactSplitForm
-      useInvertedBackground={false}
-      title="Contact Support"
-      description="Need help or have questions? Get in touch with our team today."
-      inputs={[{ name: "name", type: "text", placeholder: "Your Name" }, { name: "email", type: "email", placeholder: "Your Email" }]}
-      textarea={{ name: "message", placeholder: "Your question..." }}
-      imageSrc="http://img.b2bpic.net/free-photo/global-communication-background-business-network-design_53876-160250.jpg"
-    />
+            <ContactSplitForm title="Contact Support" description="Get in touch." inputs={[{ name: "name", type: "text", placeholder: "Name" }, { name: "email", type: "email", placeholder: "Email" }]} useInvertedBackground={false} />
         </div>
 
         <div id="footer" data-section="footer">
-      <FooterCard
-      logoText="TRONA AI"
-      copyrightText="© 2024 Trona AI. All rights reserved."
-    />
+          <FooterCard logoText="TRONA AI" copyrightText="© 2024 Trona AI." />
         </div>
       </ReactLenis>
     </ThemeProvider>