modifcations needed

Author: nanidurga

src/assets/Ani.webp

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ArrowRight, PlugZap, UserPlus } from 'lucide-react';
 import L1Image from '../../assets/L1.webp';
-import { scrollToContact, scrollToSection } from '../../utils/navigation';
+import { scrollToContact } from '../../utils/navigation'; // no scrollToSection used anymore
 
 const HeroSection: React.FC = () => {
   const handleDemoClick = (e: React.MouseEvent) => {
@@ -14,21 +14,22 @@ const HeroSection: React.FC = () => {
     scrollToContact('partnership');
   };
 
-  const handleLearnMoreClick = (e: React.MouseEvent) => {
+  const handleCardClick = (e: React.MouseEvent) => {
     e.preventDefault();
-    scrollToSection('technology');
+    scrollToContact('learnmore'); // or 'form', depending on how you're handling IDs
   };
 
   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 */}
+      {/* Background Elements */}
       <div className="absolute inset-0 overflow-hidden">
         <div className="absolute top-[10%] left-[5%] w-72 h-72 bg-primary-500/10 rounded-full blur-3xl"></div>
         <div className="absolute bottom-[20%] right-[10%] w-96 h-96 bg-secondary-500/10 rounded-full blur-3xl"></div>
       </div>
 
       <div className="container mx-auto px-4 md:px-6 relative z-10">
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          {/* Left Side Text and Buttons */}
           <div>
             <h1 className="font-display font-bold text-4xl md:text-5xl lg:text-6xl text-white leading-tight mb-6">
               Charging While Driving — The Future of EVs Starts Now.
@@ -54,18 +55,21 @@ const HeroSection: React.FC = () => {
             </div>
           </div>
 
-          <div className="relative">
-            <div className="absolute inset-0 bg-gradient-to-r from-primary-500/20 to-secondary-500/20 rounded-2xl blur-xl"></div>
-            <div className="relative bg-dark-800/80 backdrop-blur-sm border border-white/10 rounded-2xl p-6 shadow-xl animate-float">
+          {/* Right Side Card - Entirely Clickable */}
+          <div className="relative cursor-pointer" onClick={handleCardClick}>
+            <div className="absolute inset-0 bg-gradient-to-r from-primary-500/20 to-secondary-500/20 rounded-2xl blur-xl pointer-events-none"></div>
+            <div className="relative bg-dark-800/80 backdrop-blur-sm border border-white/10 rounded-2xl p-6 shadow-xl animate-float hover:scale-[1.02] transition-transform duration-300">
               <img
                 src={L1Image}
                 alt="LCM Technology Render"
-                className="w-full h-auto rounded-lg mb-4"
+                className="w-full h-auto rounded-lg mb-4 pointer-events-none"
                 loading="eager"
                 draggable="false"
               />
-              <div className="bg-dark-900/50 backdrop-blur-sm rounded-lg p-4 border border-white/10">
-                <h3 className="font-display font-semibold text-lg text-white mb-2">Loop Charging Module</h3>
+              <div className="bg-dark-900/50 backdrop-blur-sm rounded-lg p-4 border border-white/10 pointer-events-none">
+                <h3 className="font-display font-semibold text-lg text-white mb-2">
+                  Loop Charging Module
+                </h3>
                 <p className="text-white/70 text-sm">
                   Our 4-component system harnesses ambient airflow to generate electricity, charging your EV's battery in real-time while driving.
                 </p>
@@ -74,21 +78,18 @@ 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" 
-                    onClick={handleLearnMoreClick} 
-                    className="text-primary-400 hover:text-primary-300 text-sm font-medium inline-flex items-center"
-                  >
+                  <span className="text-primary-400 text-sm font-medium inline-flex items-center">
                     Learn more <ArrowRight size={14} className="ml-1" />
-                  </a>
+                  </span>
                 </div>
               </div>
             </div>
           </div>
+
         </div>
       </div>
     </section>
   );
 };
 
-export default HeroSection;
+export default HeroSection;