Merge version_4 into main

Merge version_4 into main

src/app/admin/page.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
+export default function AdminDashboard() {
+  const [auth, setAuth] = useState(false);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  if (!auth) {
+    return (
+      <div className="flex h-screen items-center justify-center p-4">
+        <div className="w-full max-w-sm p-6 space-y-4 border rounded">
+          <h2 className="text-2xl font-bold">Admin Login</h2>
+          <input className="w-full p-2 border" placeholder="Email" onChange={(e) => setEmail(e.target.value)} />
+          <input className="w-full p-2 border" type="password" placeholder="Password" onChange={(e) => setPassword(e.target.value)} />
+          <button className="w-full p-2 bg-black text-white" onClick={() => { 
+            if (email === "fredmitugo@gmail.com" && password === "fredchumari3#") setAuth(true);
+            else alert("Invalid credentials");
+          }}>Login</button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="medium"
+        background="circleGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
+      <div className="p-8 space-y-8">
+        <h1 className="text-3xl font-bold">Admin Dashboard</h1>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div className="p-6 border rounded">
+            <h3 className="font-bold mb-4">User Management</h3>
+            <p>Active Users: 15,234</p>
+          </div>
+          <div className="p-6 space-y-4 border rounded">
+            <h3 className="font-bold">M-Pesa STK Trigger</h3>
+            <button className="p-2 border" onClick={() => alert("STK Push initiated to +254115642074")}>Trigger Payment (+254115642074)</button>
+          </div>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}

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"
@@ -28,390 +28,73 @@ export default function LandingPage() {
         headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
-      navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Features",
-          id: "features",
-        },
-        {
-          name: "Pricing",
-          id: "pricing",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="TRONA AI"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "hero" },
+              { name: "Dashboard", id: "dashboard" },
+              { name: "Features", id: "features" },
+              { name: "Pricing", id: "pricing" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="TRONA AI"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <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."
-      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",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/wonder-wheel-neon-lights-close-up-black-background_23-2148328074.jpg",
-          imageAlt: "Neon lights trading background",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/analyst-monitoring-data-screen_23-2152001538.jpg",
-          imageAlt: "Market Analyst Screen",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-background-with-flowing-particle-design_1048-13547.jpg",
-          imageAlt: "Particle flow interface",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/business-man-stock-exchange-trader-looking-laptop-screen-night_169016-47424.jpg",
-          imageAlt: "Night trader 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",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/ai-powered-device-concept_23-2151924166.jpg",
-          imageAlt: "AI powered device",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/forex-trading-setup-vacant-office_482257-121461.jpg",
-          imageAlt: "Trading setup desk",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/trading-stock-stock-market-business-graph-trading-investment-broker-stock-exchange-market_169016-66520.jpg",
-          imageAlt: "Market chart analysis",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/trading-stock-stock-market-business-graph-trading-investment-broker-stock-exchange-market_169016-66442.jpg",
-          imageAlt: "Trading investment graph",
-        },
-      ]}
-      buttons={[
-        {
-          text: "Join Telegram",
-          href: "https://t.me/tronaAIsiganls",
-        },
-        {
-          text: "View Dashboard",
-          href: "#",
-        },
-      ]}
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-man-cartoon-style_23-2151134319.jpg",
-          alt: "Trader 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-man-cartoon-style_23-2151134201.jpg",
-          alt: "Trader 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-businessman-cartoon-style_23-2151134086.jpg",
-          alt: "Trader 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-young-confident-man_176474-85978.jpg",
-          alt: "Trader 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/african-american-man-elegant-suit-holds-black-hat-isolated-dark-background_613910-6600.jpg",
-          alt: "Trader 5",
-        },
-      ]}
-      avatarText="Join 15k+ active traders"
-      marqueeItems={[
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-vector/gradient-data-logo-template_23-2149202347.jpg",
-          alt: "Logo 1",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-vector/digital-bitcoin-technology-neon-style-background_1017-37559.jpg",
-          alt: "Logo 2",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-vector/gradient-data-logo-template_23-2149202348.jpg",
-          alt: "Logo 3",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-vector/gradient-colored-data-logo-template_23-2149182756.jpg",
-          alt: "Logo 4",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-vector/data-storage-designs-collection_1209-9.jpg",
-          alt: "Logo 5",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <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 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: "#dashboard" }]}
+          />
+        </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="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="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."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <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",
-          },
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=e0vkha",
-          imageAlt: "broker platform logo",
-        },
-        {
-          id: "premium",
-          title: "Premium",
-          price: "KSH 200",
-          period: "3 Trades",
-          features: [
-            "3 Extra Signals",
-            "Premium TG Group",
-          ],
-          button: {
-            text: "Unlock Premium",
-          },
-          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=2",
-          imageAlt: "broker platform logo",
-        },
-        {
-          id: "vvip",
-          title: "VVIP",
-          price: "KSH 500",
-          period: "5 Trades",
-          features: [
-            "5 High-Confidence Trades",
-            "Priority Alerts",
-            "Faster Execution",
-          ],
-          button: {
-            text: "Unlock VVIP",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/birth-rate-fertility-concept_23-2148761042.jpg?_wi=2",
-          imageAlt: "broker platform logo",
-        },
-      ]}
-      title="Choose Your Path"
-      description="Upgrade to unlock high-confidence VVIP signals."
-    />
-  </div>
+        <div id="pricing" data-section="pricing">
+            <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="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="contact" data-section="contact">
+            <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="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",
-        },
-        {
-          id: "t3",
-          title: "Consistent Results",
-          quote: "Finally found a reliable indicator set.",
-          name: "David W.",
-          role: "Binary Trader",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-professional-elegant-businessman_23-2150917050.jpg",
-        },
-        {
-          id: "t4",
-          title: "Solid Analytics",
-          quote: "Love the dashboard UI and speed.",
-          name: "Kevin L.",
-          role: "Day Trader",
-          imageSrc: "http://img.b2bpic.net/free-photo/waist-up-confident-businessman-office_329181-19349.jpg",
-        },
-        {
-          id: "t5",
-          title: "Great Support",
-          quote: "The M-Pesa integration makes it so easy.",
-          name: "Faith O.",
-          role: "Forex Student",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-financial-neon-bull_23-2151691926.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.",
-        },
-        {
-          id: "f3",
-          title: "What brokers are supported?",
-          content: "We support Pocket Option, Deriv, XM, Exness, and more.",
-        },
-      ]}
-      title="Frequently Asked Questions"
-      description="Learn more about how Trona AI works."
-      faqsAnimation="slide-up"
-    />
-  </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"
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterCard
-      logoText="TRONA AI"
-      copyrightText="© 2024 Trona AI. All rights reserved."
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterCard logoText="TRONA AI" copyrightText="© 2024 Trona AI." />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/register/page.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ContactForm from '@/components/form/ContactForm';
+import FooterCard from '@/components/sections/footer/FooterCard';
+
+export default function RegistrationPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="expand-hover"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="mediumLarge"
+        background="noise"
+        cardStyle="gradient-mesh"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="layered"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarStyleFullscreen
+              navItems={[
+                { name: "Home", id: "/" },
+                { name: "Register", id: "/register" }
+              ]}
+              brandName="TRONA AI"
+            />
+        </div>
+
+        <div className="min-h-screen pt-32 pb-20 flex items-center justify-center">
+            <ContactForm 
+              title="Create Your Account"
+              description="Join Trona AI to start mastering market probability with professional tools."
+              tag="Register"
+              useInvertedBackground={false}
+              inputPlaceholder="Enter your email"
+              buttonText="Register Now"
+              onSubmit={(email) => console.log("User registered with email:", email)}
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterCard
+              logoText="TRONA AI"
+              copyrightText="© 2024 Trona AI. All rights reserved."
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}