From 30d7873136d022162c03eaf6b96a716d3d049854 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 10 Mar 2026 11:57:07 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 82 +++++++++++++++++++++++++++++++-----------------
 1 file changed, 54 insertions(+), 28 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 769e74d..6df2716 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import Link from "next/link";
+import Image from "next/image";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import { Flag, Shield, Target, TrendingUp, Users } from "lucide-react";
 
@@ -22,15 +24,15 @@ const LandingPage = () => {
         <div className="mx-auto px-4 md:px-6 py-4 flex items-center justify-between">
           <div className="text-xl font-bold text-[#ffd700]">Hub of Trader</div>
           <nav className="hidden md:flex gap-6 text-sm text-[#ffffffe6]">
-            <a href="#features" className="hover:text-[#ffd700] transition-colors">Features</a>
-            <a href="#how-it-works" className="hover:text-[#ffd700] transition-colors">How It Works</a>
-            <a href="#pricing" className="hover:text-[#ffd700] transition-colors">Pricing</a>
-            <a href="#testimonials" className="hover:text-[#ffd700] transition-colors">Testimonials</a>
-            <a href="#faq" className="hover:text-[#ffd700] transition-colors">FAQ</a>
+            <Link href="#features" className="hover:text-[#ffd700] transition-colors">Features</Link>
+            <Link href="#how-it-works" className="hover:text-[#ffd700] transition-colors">How It Works</Link>
+            <Link href="#pricing" className="hover:text-[#ffd700] transition-colors">Pricing</Link>
+            <Link href="#testimonials" className="hover:text-[#ffd700] transition-colors">Testimonials</Link>
+            <Link href="#faq" className="hover:text-[#ffd700] transition-colors">FAQ</Link>
           </nav>
-          <a href="#pricing" className="px-4 py-2 bg-[#ffd700] text-[#0a0a0a] rounded font-semibold hover:bg-[#ffed4e] transition-colors">
+          <Link href="#pricing" className="px-4 py-2 bg-[#ffd700] text-[#0a0a0a] rounded font-semibold hover:bg-[#ffed4e] transition-colors">
             Join Private Group
-          </a>
+          </Link>
         </div>
       </div>
 
@@ -45,16 +47,22 @@ const LandingPage = () => {
               Get precise entry levels, stop losses, and targets from expert technical analysis. Receive 2-3 premium trading setups every week in our private trading community.
             </p>
             <div className="flex gap-4">
-              <a href="#pricing" className="px-6 py-3 bg-[#ffd700] text-[#0a0a0a] rounded font-semibold hover:bg-[#ffed4e] transition-colors">
+              <Link href="#pricing" className="px-6 py-3 bg-[#ffd700] text-[#0a0a0a] rounded font-semibold hover:bg-[#ffed4e] transition-colors">
                 Join Private Group
-              </a>
-              <a href="#pricing" className="px-6 py-3 bg-[#1a1a1a] text-[#ffffffe6] border border-[#ffd700]/30 rounded font-semibold hover:border-[#ffd700] transition-colors">
+              </Link>
+              <Link href="#pricing" className="px-6 py-3 bg-[#1a1a1a] text-[#ffffffe6] border border-[#ffd700]/30 rounded font-semibold hover:border-[#ffd700] transition-colors">
                 View Pricing
-              </a>
+              </Link>
             </div>
           </div>
           <div className="rounded-lg overflow-hidden">
-            <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkiAQzwAdkWY7pxCdxbAAc1EJb/a-modern-professional-trading-dashboard--1773143679278-68523593.png" alt="Professional Trading Dashboard" className="w-full h-auto" />
+            <Image
+              src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkiAQzwAdkWY7pxCdxbAAc1EJb/a-modern-professional-trading-dashboard--1773143679278-68523593.png"
+              alt="Professional Trading Dashboard"
+              width={500}
+              height={400}
+              className="w-full h-auto"
+            />
           </div>
         </div>
       </div>
@@ -63,7 +71,13 @@ const LandingPage = () => {
       <div id="about" data-section="about" className="mx-auto px-4 md:px-6 py-20 md:py-32 bg-[#1a1a1a]/50">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
           <div className="rounded-lg overflow-hidden">
-            <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkiAQzwAdkWY7pxCdxbAAc1EJb/a-technical-analyst-working-with-multipl-1773143679629-7231b98f.png" alt="Technical Analyst Working" className="w-full h-auto" />
+            <Image
+              src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkiAQzwAdkWY7pxCdxbAAc1EJb/a-technical-analyst-working-with-multipl-1773143679629-7231b98f.png"
+              alt="Technical Analyst Working"
+              width={500}
+              height={400}
+              className="w-full h-auto"
+            />
           </div>
           <div>
             <h2 className="text-3xl md:text-4xl font-bold text-[#ffffffe6] mb-6">
@@ -151,7 +165,13 @@ const LandingPage = () => {
           ].map((example, idx) => (
             <div key={idx} className="rounded-lg overflow-hidden bg-[#1a1a1a]/50 border border-[#ffd700]/20 hover:border-[#ffd700]/50 transition-colors">
               <div className="relative h-48 overflow-hidden">
-                <img src={example.image} alt={example.title} className="w-full h-full object-cover" />
+                <Image
+                  src={example.image}
+                  alt={example.title}
+                  width={400}
+                  height={300}
+                  className="w-full h-full object-cover"
+                />
                 <div className="absolute top-4 right-4 px-3 py-1 bg-[#ffd700] text-[#0a0a0a] text-xs font-semibold rounded-full">
                   {example.badge}
                 </div>
@@ -213,9 +233,9 @@ const LandingPage = () => {
                   </li>
                 ))}
               </ul>
-              <a href="https://stripe.com" className="block w-full px-4 py-3 bg-[#ffd700] text-[#0a0a0a] rounded font-semibold text-center hover:bg-[#ffed4e] transition-colors">
+              <Link href="https://stripe.com" className="block w-full px-4 py-3 bg-[#ffd700] text-[#0a0a0a] rounded font-semibold text-center hover:bg-[#ffed4e] transition-colors">
                 Join Now
-              </a>
+              </Link>
             </div>
           ))}
         </div>
@@ -242,7 +262,13 @@ const LandingPage = () => {
           ].map((testimonial, idx) => (
             <div key={idx} className="rounded-lg p-6 bg-[#1a1a1a]/50 border border-[#ffd700]/20">
               <div className="flex items-center gap-4 mb-4">
-                <img src={testimonial.image} alt={testimonial.name} className="w-12 h-12 rounded-full object-cover" />
+                <Image
+                  src={testimonial.image}
+                  alt={testimonial.name}
+                  width={48}
+                  height={48}
+                  className="w-12 h-12 rounded-full object-cover"
+                />
                 <div>
                   <h4 className="font-semibold text-[#ffffffe6]">{testimonial.name}</h4>
                   <p className="text-xs text-[#ffffffe6]/60">{testimonial.role} • {testimonial.company}</p>
@@ -302,26 +328,26 @@ const LandingPage = () => {
             <div>
               <h4 className="font-semibold text-[#ffffffe6] mb-4">Quick Links</h4>
               <ul className="space-y-2 text-sm">
-                <li><a href="/" className="text-[#ffffffe6]/70 hover:text-[#ffd700] transition-colors">Home</a></li>
-                <li><a href="#features" className="text-[#ffffffe6]/70 hover:text-[#ffd700] transition-colors">Features</a></li>
-                <li><a href="#pricing" className="text-[#ffffffe6]/70 hover:text-[#ffd700] transition-colors">Pricing</a></li>
-                <li><a href="#faq" className="text-[#ffffffe6]/70 hover:text-[#ffd700] transition-colors">FAQ</a></li>
+                <li><Link href="/" className="text-[#ffffffe6]/70 hover:text-[#ffd700] transition-colors">Home</Link></li>
+                <li><Link href="#features" className="text-[#ffffffe6]/70 hover:text-[#ffd700] transition-colors">Features</Link></li>
+                <li><Link href="#pricing" className="text-[#ffffffe6]/70 hover:text-[#ffd700] transition-colors">Pricing</Link></li>
+                <li><Link href="#faq" className="text-[#ffffffe6]/70 hover:text-[#ffd700] transition-colors">FAQ</Link></li>
               </ul>
             </div>
             <div>
               <h4 className="font-semibold text-[#ffffffe6] mb-4">Contact</h4>
               <ul className="space-y-2 text-sm">
-                <li><a href="mailto:support@huboftrader.com" className="text-[#ffffffe6]/70 hover:text-[#ffd700] transition-colors">Email: support@huboftrader.com</a></li>
-                <li><a href="#" className="text-[#ffffffe6]/70 hover:text-[#ffd700] transition-colors">Telegram Private Group</a></li>
-                <li><a href="#" className="text-[#ffffffe6]/70 hover:text-[#ffd700] transition-colors">WhatsApp Support</a></li>
+                <li><Link href="mailto:support@huboftrader.com" className="text-[#ffffffe6]/70 hover:text-[#ffd700] transition-colors">Email: support@huboftrader.com</Link></li>
+                <li><Link href="#" className="text-[#ffffffe6]/70 hover:text-[#ffd700] transition-colors">Telegram Private Group</Link></li>
+                <li><Link href="#" className="text-[#ffffffe6]/70 hover:text-[#ffd700] transition-colors">WhatsApp Support</Link></li>
               </ul>
             </div>
             <div>
               <h4 className="font-semibold text-[#ffffffe6] mb-4">Legal</h4>
               <ul className="space-y-2 text-sm">
-                <li><a href="#" className="text-[#ffffffe6]/70 hover:text-[#ffd700] transition-colors">Privacy Policy</a></li>
-                <li><a href="#" className="text-[#ffffffe6]/70 hover:text-[#ffd700] transition-colors">Terms of Service</a></li>
-                <li><a href="#" className="text-[#ffffffe6]/70 hover:text-[#ffd700] transition-colors">Risk Disclaimer</a></li>
+                <li><Link href="#" className="text-[#ffffffe6]/70 hover:text-[#ffd700] transition-colors">Privacy Policy</Link></li>
+                <li><Link href="#" className="text-[#ffffffe6]/70 hover:text-[#ffd700] transition-colors">Terms of Service</Link></li>
+                <li><Link href="#" className="text-[#ffffffe6]/70 hover:text-[#ffd700] transition-colors">Risk Disclaimer</Link></li>
               </ul>
             </div>
           </div>
@@ -337,4 +363,4 @@ const LandingPage = () => {
   );
 };
 
-export default LandingPage;
\ No newline at end of file
+export default LandingPage;
-- 
2.49.1