Update src/app/page.tsx

Merge version_4 into main

src/app/about/page.tsx

@@ -5,6 +5,7 @@ import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatin
 import TextAbout from '@/components/sections/about/TextAbout';
 import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
 import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
+import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import Link from "next/link";
 import { TrendingUp, Sparkles, Zap, Users, BarChart3, Shield } from "lucide-react";
@@ -29,11 +30,11 @@ export default function AboutPage() {
           navItems={[
             { name: "Home", id: "/" },
             { name: "About", id: "/about" },
+            { name: "Pricing", id: "/pricing" },
             { name: "Contact", id: "/contact" }
           ]}
           button={{
-            text: "Start Trading",
+            text: "Start Trading",            href: "/pricing"
-            href: "/pricing"
           }}
         />
       </div>
@@ -46,8 +47,7 @@ export default function AboutPage() {
           useInvertedBackground={false}
           buttons={[
             {
-              text: "Explore Platform",
+              text: "Explore Platform",              href: "/pricing"
-              href: "/pricing"
             }
           ]}
         />
@@ -61,25 +61,13 @@ export default function AboutPage() {
           tagIcon={Zap}
           features={[
             {
-              id: "01",
+              id: "01",              title: "Machine Learning Analytics",              description: "Proprietary algorithms analyze market patterns and predict trend reversals using advanced machine learning techniques and historical data analysis.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/a-detailed-trading-analytics-screen-show-1773136515159-009a965c.png?_wi=2",              imageAlt: "Advanced trading analytics interface"
-              title: "Machine Learning Analytics",
-              description: "Proprietary algorithms analyze market patterns and predict trend reversals using advanced machine learning techniques and historical data analysis.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/a-detailed-trading-analytics-screen-show-1773136515159-009a965c.png?_wi=2",
-              imageAlt: "Advanced trading analytics interface"
             },
             {
-              id: "02",
+              id: "02",              title: "Risk Management System",              description: "Automated risk assessment tools help you manage portfolio exposure and implement stop-loss strategies across multiple cryptocurrency pairs.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/a-professional-illustration-representing-1773136513219-e3772a1d.png?_wi=2",              imageAlt: "Risk management security illustration"
-              title: "Risk Management System",
-              description: "Automated risk assessment tools help you manage portfolio exposure and implement stop-loss strategies across multiple cryptocurrency pairs.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/a-professional-illustration-representing-1773136513219-e3772a1d.png?_wi=2",
-              imageAlt: "Risk management security illustration"
             },
             {
-              id: "03",
+              id: "03",              title: "Performance Analytics",              description: "Comprehensive reporting dashboard tracks your trading performance, win rates, and profitability across different timeframes and strategies.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/an-infographic-showing-cryptocurrency-tr-1773136514314-5cdc9261.png?_wi=2",              imageAlt: "Trading performance metrics visualization"
-              title: "Performance Analytics",
-              description: "Comprehensive reporting dashboard tracks your trading performance, win rates, and profitability across different timeframes and strategies.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/an-infographic-showing-cryptocurrency-tr-1773136514314-5cdc9261.png?_wi=2",
-              imageAlt: "Trading performance metrics visualization"
             }
           ]}
           textboxLayout="default"
@@ -100,45 +88,42 @@ export default function AboutPage() {
           useInvertedBackground={false}
           testimonials={[
             {
-              id: "1",
+              id: "1",              name: "Sarah Johnson",              role: "Senior Analyst",              company: "Crypto Capital Partners",              rating: 5,
-              name: "Sarah Johnson",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/professional-headshot-portrait-of-a-succ-1773136514328-34a1bb04.png?_wi=2",              imageAlt: "Sarah Johnson professional portrait"
-              role: "Senior Analyst",
-              company: "Crypto Capital Partners",
-              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/professional-headshot-portrait-of-a-succ-1773136514328-34a1bb04.png?_wi=2",
-              imageAlt: "Sarah Johnson professional portrait"
             },
             {
-              id: "2",
+              id: "2",              name: "Michael Chen",              role: "Head of Trading",              company: "Digital Asset Management",              rating: 5,
-              name: "Michael Chen",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/professional-headshot-portrait-of-a-fema-1773136513236-b6d693c1.png?_wi=2",              imageAlt: "Michael Chen professional portrait"
-              role: "Head of Trading",
-              company: "Digital Asset Management",
-              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/professional-headshot-portrait-of-a-fema-1773136513236-b6d693c1.png?_wi=2",
-              imageAlt: "Michael Chen professional portrait"
             },
             {
-              id: "3",
+              id: "3",              name: "Emma Rodriguez",              role: "Portfolio Manager",              company: "Blockchain Ventures",              rating: 5,
-              name: "Emma Rodriguez",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/professional-headshot-portrait-of-a-cryp-1773136513284-36dd154c.png?_wi=2",              imageAlt: "Emma Rodriguez professional portrait"
-              role: "Portfolio Manager",
-              company: "Blockchain Ventures",
-              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/professional-headshot-portrait-of-a-cryp-1773136513284-36dd154c.png?_wi=2",
-              imageAlt: "Emma Rodriguez professional portrait"
             }
           ]}
         />
       </div>
 
+      <div id="testimonials-featured" data-section="testimonials-featured">
+        <TestimonialCardFive
+          testimonials={[
+            {
+              id: "1",              name: "David Williams",              date: "December 2024",              title: "Portfolio Director",              quote: "My Trade has revolutionized how our team manages cryptocurrency portfolios. The advanced analytics and real-time monitoring capabilities have enabled us to make faster, more informed decisions. We couldn't imagine our trading operations without it.",              tag: "5 Stars",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/professional-headshot-portrait-of-a-succ-1773136514328-34a1bb04.png",              avatarAlt: "David Williams profile photo"
+            }
+          ]}
+          title="Featured Success Story"
+          description="Hear from our valued clients"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
       <FooterLogoReveal
         logoText="My Trade"
         leftLink={{
-          text: "Privacy Policy",
+          text: "Privacy Policy",          href: "/privacy"
-          href: "/privacy"
         }}
         rightLink={{
-          text: "Terms of Service",
+          text: "Terms of Service",          href: "/terms"
-          href: "/terms"
         }}
       />
     </ThemeProvider>

src/app/contact/page.tsx

@@ -28,11 +28,11 @@ export default function ContactPage() {
           navItems={[
             { name: "Home", id: "/" },
             { name: "About", id: "/about" },
+            { name: "Pricing", id: "/pricing" },
             { name: "Contact", id: "/contact" }
           ]}
           button={{
-            text: "Start Trading",
+            text: "Start Trading",            href: "/pricing"
-            href: "/pricing"
           }}
         />
       </div>
@@ -66,29 +66,19 @@ export default function ContactPage() {
           animationType="smooth"
           faqs={[
             {
-              id: "1",
+              id: "1",              title: "How do I get started with My Trade?",              content: "Getting started is simple! Sign up for a free account, choose your subscription plan, and connect your exchange accounts using secure API integration. Our onboarding guide will walk you through the setup process step by step."
-              title: "How do I get started with My Trade?",
-              content: "Getting started is simple! Sign up for a free account, choose your subscription plan, and connect your exchange accounts using secure API integration. Our onboarding guide will walk you through the setup process step by step."
             },
             {
-              id: "2",
+              id: "2",              title: "What customer support options are available?",              content: "We offer 24/7 customer support through multiple channels: email support for all users, priority chat support for Professional plan subscribers, and dedicated account managers for Enterprise customers. Our knowledge base also contains comprehensive documentation and tutorials."
-              title: "What customer support options are available?",
-              content: "We offer 24/7 customer support through multiple channels: email support for all users, priority chat support for Professional plan subscribers, and dedicated account managers for Enterprise customers. Our knowledge base also contains comprehensive documentation and tutorials."
             },
             {
-              id: "3",
+              id: "3",              title: "Can I try My Trade before purchasing?",              content: "Yes! We offer a 14-day free trial for our Professional plan, giving you full access to advanced analytics, real-time data, and all platform features. No credit card required to start your trial."
-              title: "Can I try My Trade before purchasing?",
-              content: "Yes! We offer a 14-day free trial for our Professional plan, giving you full access to advanced analytics, real-time data, and all platform features. No credit card required to start your trial."
             },
             {
-              id: "4",
+              id: "4",              title: "How do I cancel my subscription?",              content: "You can cancel your subscription at any time from your account settings. Your access will continue until the end of your current billing period, and no further charges will be applied. All your data remains accessible for 30 days after cancellation."
-              title: "How do I cancel my subscription?",
-              content: "You can cancel your subscription at any time from your account settings. Your access will continue until the end of your current billing period, and no further charges will be applied. All your data remains accessible for 30 days after cancellation."
             },
             {
-              id: "5",
+              id: "5",              title: "Do you offer refunds?",              content: "We offer a 30-day money-back guarantee for all new subscriptions. If you're not satisfied with My Trade within the first 30 days, contact our support team for a full refund. Enterprise contracts may have different terms."
-              title: "Do you offer refunds?",
-              content: "We offer a 30-day money-back guarantee for all new subscriptions. If you're not satisfied with My Trade within the first 30 days, contact our support team for a full refund. Enterprise contracts may have different terms."
             }
           ]}
         />
@@ -97,12 +87,10 @@ export default function ContactPage() {
       <FooterLogoReveal
         logoText="My Trade"
         leftLink={{
-          text: "Privacy Policy",
+          text: "Privacy Policy",          href: "/privacy"
-          href: "/privacy"
         }}
         rightLink={{
-          text: "Terms of Service",
+          text: "Terms of Service",          href: "/terms"
-          href: "/terms"
         }}
       />
     </ThemeProvider>

src/app/page.tsx

@@ -1,13 +1,14 @@
 "use client";
 
 import Link from 'next/link';
-import { TrendingUp, Sparkles, Zap, Users, BarChart3, Shield, Clock } from 'lucide-react';
+import { TrendingUp, Sparkles, Zap, Users, BarChart3, Shield, Clock, ExternalLink } from 'lucide-react';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import HeroBillboard from '@/components/sections/hero/HeroBillboard';
 import TextAbout from '@/components/sections/about/TextAbout';
 import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
 import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
+import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
@@ -31,7 +32,9 @@ export default function HomePage() {
           brandName="My Trade"
           navItems={[
             { name: "Home", id: "/" },
-            { name: "Pricing", id: "/pricing" }
+            { name: "About", id: "/about" },
+            { name: "Pricing", id: "/pricing" },
+            { name: "Contact", id: "/contact" }
           ]}
           button={{
             text: "Start Trading",            href: "/pricing"
@@ -72,9 +75,12 @@ export default function HomePage() {
       <div id="features" data-section="features">
         <FeatureCardThree
           title="Powerful Trading Features"
-          description="Everything you need to succeed in cryptocurrency trading"
+          description="Discover comprehensive tools designed to elevate your cryptocurrency trading performance and maximize your potential returns"
           tag="Core Features"
           tagIcon={Zap}
+          buttons={[
+            { text: "Explore All Features", href: "/features" }
+          ]}
           features={[
             {
               id: "01",              title: "Real-Time Market Analytics",              description: "Track live price movements, volume trends, and market sentiment across major cryptocurrencies with instant notifications.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/a-detailed-trading-analytics-screen-show-1773136515159-009a965c.png?_wi=1",              imageAlt: "A detailed trading analytics screen showing advanced statistical analysis tools for cryptocurrency t"
@@ -148,6 +154,20 @@ export default function HomePage() {
         />
       </div>
 
+      <div id="testimonials-featured" data-section="testimonials-featured">
+        <TestimonialCardFive
+          testimonials={[
+            {
+              id: "1",              name: "James Carter",              date: "January 2025",              title: "Senior Investment Officer",              quote: "This product has completely transformed how we approach cryptocurrency trading. The real-time analytics and risk management tools have helped us optimize our strategies and significantly improve our returns. My Trade is truly the gold standard for professional traders.",              tag: "5 Stars",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/professional-headshot-portrait-of-a-succ-1773136514328-34a1bb04.png",              avatarAlt: "James Carter profile photo"
+            }
+          ]}
+          title="Featured Testimonial"
+          description="What our top clients are saying"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
       <div id="contact" data-section="contact">
         <ContactCenter
           tag="Newsletter"

src/app/pricing/page.tsx

@@ -28,11 +28,12 @@ export default function PricingPage() {
           brandName="My Trade"
           navItems={[
             { name: "Home", id: "/" },
-            { name: "Pricing", id: "/pricing" }
+            { name: "About", id: "/about" },
+            { name: "Pricing", id: "/pricing" },
+            { name: "Contact", id: "/contact" }
           ]}
           button={{
-            text: "Start Trading",
+            text: "Start Trading",            href: "/pricing"
-            href: "/pricing"
           }}
         />
       </div>
@@ -47,52 +48,28 @@ export default function PricingPage() {
           useInvertedBackground={false}
           plans={[
             {
-              id: "starter",
+              id: "starter",              price: "$29/month",              name: "Starter Plan",              buttons: [
-              price: "$29/month",
-              name: "Starter Plan",
-              buttons: [
                 { text: "Get Started", href: "#" }
               ],
               features: [
-                "Real-time price tracking",
+                "Real-time price tracking",                "Basic portfolio management",                "5 saved watchlists",                "Email support",                "Mobile app access"
-                "Basic portfolio management",
-                "5 saved watchlists",
-                "Email support",
-                "Mobile app access"
               ]
             },
             {
-              id: "professional",
+              id: "professional",              badge: "Most Popular",              badgeIcon: Sparkles,
-              badge: "Most Popular",
+              price: "$79/month",              name: "Professional Plan",              buttons: [
-              badgeIcon: Sparkles,
-              price: "$79/month",
-              name: "Professional Plan",
-              buttons: [
                 { text: "Start Free Trial", href: "#" }
               ],
               features: [
-                "Advanced analytics & charting",
+                "Advanced analytics & charting",                "Unlimited watchlists",                "Performance metrics & reporting",                "API access (up to 100 calls/min)",                "Priority email & chat support",                "Custom alerts & notifications"
-                "Unlimited watchlists",
-                "Performance metrics & reporting",
-                "API access (up to 100 calls/min)",
-                "Priority email & chat support",
-                "Custom alerts & notifications"
               ]
             },
             {
-              id: "enterprise",
+              id: "enterprise",              price: "Custom",              name: "Enterprise Plan",              buttons: [
-              price: "Custom",
-              name: "Enterprise Plan",
-              buttons: [
                 { text: "Contact Sales", href: "#contact" }
               ],
               features: [
-                "Full API access",
+                "Full API access",                "Dedicated account manager",                "Custom integrations",                "White-label solutions",                "Advanced security features",                "SLA & uptime guarantees"
-                "Dedicated account manager",
-                "Custom integrations",
-                "White-label solutions",
-                "Advanced security features",
-                "SLA & uptime guarantees"
               ]
             }
           ]}
@@ -108,24 +85,16 @@ export default function PricingPage() {
           faqsAnimation="slide-up"
           faqs={[
             {
-              id: "1",
+              id: "1",              title: "How real-time are your market statistics?",              content: "Our market data updates in real-time with less than 100ms latency. We pull data from multiple exchanges simultaneously to ensure accuracy and prevent arbitrage opportunities from being missed."
-              title: "How real-time are your market statistics?",
-              content: "Our market data updates in real-time with less than 100ms latency. We pull data from multiple exchanges simultaneously to ensure accuracy and prevent arbitrage opportunities from being missed."
             },
             {
-              id: "2",
+              id: "2",              title: "Can I connect my existing exchange accounts?",              content: "Yes, My Trade supports integrations with major exchanges like Binance, Coinbase, Kraken, and more. We use secure API connections and never store your exchange credentials—they're encrypted and only used for data retrieval."
-              title: "Can I connect my existing exchange accounts?",
-              content: "Yes, My Trade supports integrations with major exchanges like Binance, Coinbase, Kraken, and more. We use secure API connections and never store your exchange credentials—they're encrypted and only used for data retrieval."
             },
             {
-              id: "3",
+              id: "3",              title: "Is my trading data secure?",              content: "Absolutely. We use military-grade encryption (AES-256), two-factor authentication, and comply with international security standards including SOC 2 Type II. Your data is never shared with third parties."
-              title: "Is my trading data secure?",
-              content: "Absolutely. We use military-grade encryption (AES-256), two-factor authentication, and comply with international security standards including SOC 2 Type II. Your data is never shared with third parties."
             },
             {
-              id: "4",
+              id: "4",              title: "What payment methods do you accept?",              content: "We accept all major credit cards, bank transfers, and cryptocurrency payments (Bitcoin, Ethereum). All payments are processed through secure payment gateways with fraud protection."
-              title: "What payment methods do you accept?",
-              content: "We accept all major credit cards, bank transfers, and cryptocurrency payments (Bitcoin, Ethereum). All payments are processed through secure payment gateways with fraud protection."
             }
           ]}
         />

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
+  --background: #0a0a0a;
-  --card: #f9f9f9;
+  --card: #1a1a1a;
-  --foreground: #120a00e6;
+  --foreground: #ffffff;
-  --primary-cta: #FF7B05;
+  --primary-cta: #ff0000;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #120a00e6;
-  --accent: #e2e2e2;
+  --accent: #333333;
-  --background-accent: #FF7B05;
+  --background-accent: #ff0000;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);