Fix HeroSection Learn More link and update Header navigation

Author: nanidurga

src/components/home/HeroSection.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ArrowRight, PlugZap, UserPlus } from 'lucide-react';
 import L1Image from '../../assets/L1.webp';
-import { scrollToContact } from '../../utils/navigation';
+import { scrollToContact, scrollToSection } from '../../utils/navigation';
 
 const HeroSection: React.FC = () => {
   const handleDemoClick = (e: React.MouseEvent) => {
@@ -14,6 +14,11 @@ const HeroSection: React.FC = () => {
     scrollToContact('partnership');
   };
 
+  const handleLearnMoreClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    scrollToSection('technology');
+  };
+
   return (
     <section className="relative pt-24 pb-20 md:pt-32 md:pb-24 bg-gradient-to-b from-dark-900 via-dark-800 to-dark-900 overflow-hidden">
       {/* Background elements */}
@@ -69,7 +74,11 @@ const HeroSection: React.FC = () => {
                     <span className="inline-block px-3 py-1 text-xs font-medium bg-primary-500/20 text-primary-300 rounded-full">Zero Drag</span>
                     <span className="inline-block px-3 py-1 text-xs font-medium bg-secondary-500/20 text-secondary-300 rounded-full">In-Drive Charging</span>
                   </div>
-                  <a href="#technology" className="text-primary-400 hover:text-primary-300 text-sm font-medium inline-flex items-center">
+                  <a 
+                    href="#technology" 
+                    onClick={handleLearnMoreClick} 
+                    className="text-primary-400 hover:text-primary-300 text-sm font-medium inline-flex items-center"
+                  >
                     Learn more <ArrowRight size={14} className="ml-1" />
                   </a>
                 </div>

src/components/layout/Footer.tsx

@@ -2,25 +2,9 @@ import React, { useCallback } from 'react';
 import { Link } from 'react-router-dom';
 import { Facebook, Twitter, Linkedin, Mail } from 'lucide-react';
 import logo from '../../assets/logo.png';
+import { handleNavigation } from '../../utils/navigation';
 
 const Footer: React.FC = () => {
-  const handleNavClick = useCallback((href: string, e: React.MouseEvent) => {
-    if (href.startsWith('#')) {
-      e.preventDefault();
-      const element = document.getElementById(href.substring(1));
-      if (element) {
-        const headerOffset = 80;
-        const elementPosition = element.getBoundingClientRect().top;
-        const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
-
-        window.scrollTo({
-          top: offsetPosition,
-          behavior: 'smooth'
-        });
-      }
-    }
-  }, []);
-
   return (
     <footer className="bg-dark-800 border-t border-white/10">
       <div className="container mx-auto px-4 py-12">
@@ -45,17 +29,17 @@ const Footer: React.FC = () => {
             <h3 className="font-display text-lg font-semibold text-white mb-4">Quick Links</h3>
             <ul className="space-y-2">
               <li>
-                <Link to="/#technology" onClick={(e) => handleNavClick('/#technology', e)} className="text-white/70 hover:text-white transition-colors">
+                <Link to="/#technology" onClick={(e) => handleNavigation('/#technology', e)} className="text-white/70 hover:text-white transition-colors">
                   Technology
                 </Link>
               </li>
               <li>
-                <Link to="/#benefits" onClick={(e) => handleNavClick('/#benefits', e)} className="text-white/70 hover:text-white transition-colors">
+                <Link to="/#benefits" onClick={(e) => handleNavigation('/#benefits', e)} className="text-white/70 hover:text-white transition-colors">
                   Benefits
                 </Link>
               </li>
               <li>
-                <Link to="/#integration" onClick={(e) => handleNavClick('/#integration', e)} className="text-white/70 hover:text-white transition-colors">
+                <Link to="/#integration" onClick={(e) => handleNavigation('/#integration', e)} className="text-white/70 hover:text-white transition-colors">
                   Integration
                 </Link>
               </li>
@@ -82,7 +66,7 @@ const Footer: React.FC = () => {
                 </Link>
               </li>
               <li>
-                <Link to="/#contact" onClick={(e) => handleNavClick('/#contact', e)} className="text-white/70 hover:text-white transition-colors">
+                <Link to="/#contact" onClick={(e) => handleNavigation('/#contact', e)} className="text-white/70 hover:text-white transition-colors">
                   Contact
                 </Link>
               </li>

src/components/layout/Header.tsx

@@ -6,11 +6,12 @@ import logo from '../../assets/logo.png';
 import { handleNavigation } from '../../utils/navigation';
 
 const navLinks = [
-  { name: 'Technology', href: '#technology' },
-  { name: 'Benefits', href: '#benefits' },
-  { name: 'Integration', href: '#integration' },
-  { name: 'Team', href: '#team' },
-  { name: 'FAQ', href: '#faq' },
+  { name: 'Technology', href: '/#technology' },
+  { name: 'Benefits', href: '/#benefits' },
+  { name: 'Integration', href: '/#integration' },
+  { name: 'Team', href: '/team' },
+  { name: 'Careers', href: '/careers' },
+  { name: 'FAQ', href: '/faq' },
 ];
 
 const Header: React.FC = () => {