updated the kpro product page with actual images and the installation guide

src/app/KPro-HW-Install/page.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import Navbar from '@/components/Navbar';
+import Footer from '@/components/Footer';
+import KProHWInstall from '@/components/KProHWInstall';
+
+export default function KProHWInstallPage() {
+  return (
+    <main>
+      <Navbar />
+      <KProHWInstall />
+      <Footer />
+    </main>
+  );
+}

src/components/KPro.tsx

@@ -3,6 +3,7 @@
 import { useRef } from 'react';
 import { motion } from 'framer-motion';
 import Image from 'next/image';
+import Link from 'next/link';
 import { 
   Info, 
   BookOpen, 
@@ -24,7 +25,10 @@ import {
   CircleCheck,
   Smartphone,
   AlertTriangle,
-  ShieldAlert
+  ShieldAlert,
+  Thermometer,
+  Lightbulb,
+  Radio
 } from 'lucide-react';
 import styles from './KPro.module.css';
 
@@ -40,19 +44,25 @@ export default function KPro() {
   const coreFeatures = [
     { title: 'Live Engine Tuning', desc: 'Modify and calibrate fuel, ignition, and cam timing maps in real-time.', icon: <Activity size={24} /> },
     { title: 'Live Sensors Logging', desc: 'High-speed data streaming of all critical engine sensors for precision analysis.', icon: <Gauge size={24} /> },
-    { title: 'Boost Management', desc: 'Comprehensive boost tables and control with custom MAP sensor support.', icon: <Zap size={24} /> },
+    { title: 'Boost Features', desc: 'Boost tables, boost control, and custom MAP sensor support.', icon: <Zap size={24} /> },
     { title: 'Engine Protection', desc: 'Failsafe logic for lean AFR, overboost, and overheat conditions.', icon: <ShieldCheck size={24} /> },
     { title: 'Launch Control', desc: 'Programmable launch parameters with integrated anti-lag systems.', icon: <Settings size={24} /> },
-    { title: 'Custom Outputs', desc: 'Programmable outputs for nitrous, methanol injection, and shift lights.', icon: <Layers size={24} /> },
+    { title: 'Nitrous & Methanol', desc: 'Support for Nitrous or Methanol injection systems.', icon: <Thermometer size={24} /> },
+    { title: 'MIL ShiftLight', desc: 'Configurable shift light via the Check Engine (MIL) light.', icon: <Lightbulb size={24} /> },
+    { title: 'Programmable Outputs', desc: 'Customizable outputs for relays and accessories.', icon: <Layers size={24} /> },
+    { title: 'Full System Compatibility', desc: 'Fully compatible with all vehicle systems, ABS, Climate Control, etc.', icon: <Car size={24} /> },
   ];
 
   const advancedFeatures = [
-    { title: 'Bluetooth Connect', desc: 'Wireless datalogging and mobile app integration (Rev.4 boards only).', image: 'https://images.unsplash.com/photo-1758411897998-999b2fe9d8e6?auto=format&fit=crop&q=80&w=1200' },
+    { title: 'Bluetooth', desc: 'Wireless tuning and datalogging.', image: '/adv_bluetooth.png' },
-    { title: 'Onboard Datalog', desc: 'High-precision 100Hz onboard logging for standalone data capture.', image: 'https://images.unsplash.com/photo-1771920800290-53f22e5ac3f8?auto=format&fit=crop&q=80&w=1200' },
+    { title: 'Onboard Datalog (100Hz)', desc: 'High-precision onboard logging for standalone capture.', image: '/adv_datalog.png' },
-    { title: 'FlexFuel Support', desc: 'Ethanol sensor input for automatic fuel and ignition adjustments.', image: 'https://images.unsplash.com/photo-1549411210-613d9061df8d?auto=format&fit=crop&q=80&w=1200' },
+    { title: 'FlexFuel Support', desc: 'Ethanol sensor input for automatic fuel scaling.', image: '/adv_flexfuel.png' },
-    { title: 'Engine Safety', desc: 'Advanced engine protection logic for high-performance builds.', image: 'https://images.unsplash.com/photo-1486496146582-9ffcd0b2b2b7?auto=format&fit=crop&q=80&w=800' },
+    { title: '8 Analog Inputs', desc: 'Additional analog inputs for custom sensors.', image: '/adv_analog.png' },
-    { title: 'Analog Inputs', desc: 'Eight additional analog inputs for external wideband and sensors.', image: 'https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=800' },
+    { title: 'External Wideband', desc: 'Input for aftermarket wideband oxygen sensors.', image: '/adv_wideband.png' },
-    { title: 'Target Lambda', desc: 'Closed-loop target lambda tables for optimized fuel control.', image: 'https://images.unsplash.com/photo-1565105158896-8fce03d1024f?auto=format&fit=crop&q=80&w=1200' },
+    { title: 'Speed Sensor Output', desc: 'Alternate speed sensor input and Dashboard Speed Output (EG/EK/DC K Swap).', image: '/adv_speed.png' },
+    { title: 'Live Autotune', desc: 'Live Autotune Tables for rapid calibration.', image: '/adv_autotune.png' },
+    { title: 'Target Lambda', desc: 'Closed-loop target lambda tables.', image: '/adv_lambda.png' },
+    { title: 'Advanced Protection', desc: 'Advanced engine protection logic.', image: '/adv_protection.png' },
   ];
 
   const ecuRevisions = [
@@ -72,18 +82,7 @@ export default function KPro() {
   const replacementModels = [
     { name: '99-03 Honda S2000 AP1', years: '99-03' },
     { name: '02-05 Honda Civic D17 MT', years: '02-05' },
-    { name: 'EG/EK/DC K-Swap', years: 'Various' },
+    { name: 'Various EG/EK/DC K-Swapped Vehicles', years: 'Various' },
-  ];
-
-  const downloads = [
-    { name: 'KPro Manager Software', size: 'V4.5.6', type: 'Setup Executable' },
-    { name: 'USB Driver Pack', size: '1.2 MB', type: 'Drivers' },
-  ];
-
-  const guides = [
-    { name: 'Hardware Installation Guide', type: 'PDF Documentation' },
-    { name: 'Bluetooth Setup Utility', type: 'Config Tool' },
-    { name: 'Board LEDs Quick Reference', type: 'Pinout Guide' },
   ];
 
   return (
@@ -107,7 +106,7 @@ export default function KPro() {
                 K<span className={styles.red}>PRO</span>
               </h1>
               <p className={styles.heroDesc}>
-                The Hondavert KPro daughterboard is the definitive performance upgrade for Honda K-Series ECUs. 
+                Daughterboard for Honda K-Series ECU – Expand your ECU Capabilities. 
                 Unlock live tuning, advanced engine protection, and professional motorsport features.
               </p>
               <div className={styles.heroActions}>
@@ -172,7 +171,7 @@ export default function KPro() {
               viewport={{ once: true }}
               transition={{ duration: 0.6 }}
             >
-              <h2>CORE PERFORMANCE <br /><span className={styles.red}>CAPABILITIES</span></h2>
+              <h2>INFORMATION & <br /><span className={styles.red}>CAPABILITIES</span></h2>
               <div className={styles.featuresGrid}>
                 {coreFeatures.map((feature, i) => (
                   <motion.div 
@@ -197,7 +196,7 @@ export default function KPro() {
               viewport={{ once: true }}
               transition={{ duration: 0.8 }}
             >
-              <Image src="/ecu_kpro.png" alt="KPro Daughterboard" width={600} height={600} className={styles.hwImg} />
+              <Image src="/kpro_daughterboard.png" alt="KPro Daughterboard" width={600} height={600} className={styles.hwImg} />
               <div className={styles.imageOverlay}></div>
             </motion.div>
           </div>
@@ -213,7 +212,7 @@ export default function KPro() {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
           >
-            <p>REV.4 EXCLUSIVE FEATURES</p>
+            <p>REV.4 EXCLUSIVE FEATURES (ACTIVE SUBSCRIPTION REQUIRED)</p>
             <h2>ADVANCED ENGINE <span className={styles.red}>MANAGEMENT</span></h2>
           </motion.div>
           <div className={styles.advGrid}>
@@ -222,8 +221,7 @@ export default function KPro() {
                 key={i} 
                 className={`
                   ${styles.advCard} 
-                  ${i === 0 ? styles.advCardWide : ''} 
+                  ${(i === 0 || i === 8) ? styles.advCardWide : ''} 
-                  ${i === 4 ? styles.advCardWide : ''} 
                   ${i === 1 ? styles.advCardTall : ''}
                 `}
                 initial={{ opacity: 0, scale: 0.95 }}
@@ -232,13 +230,15 @@ export default function KPro() {
                 transition={{ duration: 0.5, delay: i * 0.1 }}
               >
                 <div className={styles.cardImage}>
-                   <Image 
+                   {adv.image && (
-                    src={adv.image} 
+                     <Image 
-                    alt={adv.title} 
+                      src={adv.image} 
-                    fill 
+                      alt={adv.title} 
-                    className={styles.advImg} 
+                      fill 
-                    sizes="(max-width: 768px) 100vw, 50vw"
+                      className={styles.advImg} 
-                   />
+                      sizes="(max-width: 768px) 100vw, 50vw"
+                     />
+                   )}
                    <div className={styles.cardOverlay}></div>
                 </div>
                 <div className={styles.cardContent}>
@@ -277,7 +277,7 @@ export default function KPro() {
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true }}
             >
-              <h2>ECU MODIFICATION REQUIRED</h2>
+              <h2>COMPATIBLE WITH VEHICLES AFTER ECU REPLACEMENT</h2>
               <div className={styles.vList}>
                 {replacementModels.map((m, i) => (
                   <div key={i} className={styles.vItem}>
@@ -286,9 +286,9 @@ export default function KPro() {
                   </div>
                 ))}
               </div>
-              <div style={{ marginTop: '2rem', display: 'flex', gap: '1rem', color: '#ff4444', fontSize: '0.75rem' }}>
+              <div style={{ marginTop: '2rem', display: 'flex', gap: '1rem', color: '#ff4444', fontSize: '0.75rem', lineHeight: '1.5' }}>
-                <AlertTriangle size={16} />
+                <AlertTriangle size={24} style={{ flexShrink: 0 }} />
-                <p>OEM ECUs in these vehicles are not directly compatible. Replacement with a supported ECU is required.</p>
+                <p>The OEM ECUs in these vehicles are not compatible with the KPro daughterboard. Installation is only possible by replacing the original ECU with one from the vehicles listed in the Factory Equipped section.</p>
               </div>
             </motion.div>
           </div>
@@ -299,14 +299,22 @@ export default function KPro() {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
           >
-            <h3 style={{ fontSize: '1rem', marginBottom: '1.5rem', fontWeight: 900 }}>SUPPORTED ECU ARCHITECTURE</h3>
+            <h3 style={{ fontSize: '1rem', marginBottom: '1.5rem', fontWeight: 900 }}>SUPPORTED K-SERIES ECU BOARDS</h3>
-            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '2rem' }}>
+            <div style={{ display: 'flex', gap: '3rem', alignItems: 'center', flexWrap: 'wrap' }}>
-              {ecuRevisions.map((rev, i) => (
+              <div style={{ flex: 1, minWidth: '300px' }}>
-                <div key={i} style={{ padding: '1.5rem', border: '1px solid var(--border)', borderRadius: '4px' }}>
+                <p style={{ color: '#888', fontSize: '0.85rem', marginBottom: '1.5rem' }}>The following ECU revisions based on the OKI 66Q592 MCU are supported. Board version is marked on the ECU PCB.</p>
-                  <p style={{ fontSize: '0.65rem', color: '#555', fontWeight: 800, marginBottom: '0.5rem' }}>BOARD REVISION</p>
+                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '2rem' }}>
-                  <p style={{ fontFamily: 'monospace', fontWeight: 900, fontSize: '1.1rem' }}>{rev.name}</p>
+                  {ecuRevisions.map((rev, i) => (
+                    <div key={i} style={{ padding: '1.5rem', border: '1px solid var(--border)', borderRadius: '4px' }}>
+                      <p style={{ fontSize: '0.65rem', color: '#555', fontWeight: 800, marginBottom: '0.5rem' }}>BOARD REVISION</p>
+                      <p style={{ fontFamily: 'monospace', fontWeight: 900, fontSize: '1.1rem' }}>{rev.name}</p>
+                    </div>
+                  ))}
                 </div>
-              ))}
+              </div>
+              <div style={{ flex: 1, minWidth: '300px', position: 'relative', height: '250px' }}>
+                <Image src="/kpro_ecu_board.jpg" alt="ECU PCB Revision" fill style={{ objectFit: 'contain' }} />
+              </div>
             </div>
           </motion.div>
         </div>
@@ -332,14 +340,14 @@ export default function KPro() {
               viewport={{ once: true }}
              >
                 <div className={styles.cardBg}>
-                   <Image src="https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=1200" alt="Installation" fill className={styles.bgImg} />
+                   <Image src="/tech_install.png" alt="Hardware Installation" fill className={styles.bgImg} />
                    <div className={styles.cardOverlay}></div>
                 </div>
                 <div className={styles.guideContent}>
                    <div className={styles.guideIconBox}><Settings size={32} /></div>
                    <h3>Hardware Installation</h3>
                    <p>Comprehensive step-by-step soldering and seating guide for the KPro daughterboard onto your ECU PCB.</p>
-                   <button className={styles.guideBtn}>VIEW INSTALL GUIDE</button>
+                   <Link href="/KPro-HW-Install" className={styles.guideBtn} style={{ display: 'inline-block' }}>VIEW INSTALL GUIDE</Link>
                 </div>
              </motion.div>
 
@@ -351,7 +359,7 @@ export default function KPro() {
               transition={{ delay: 0.1 }}
              >
                 <div className={styles.cardBg}>
-                   <Image src="https://images.unsplash.com/photo-1695653422718-97d25c1cb8ec?q=80&w=1200" alt="Bluetooth" fill className={styles.bgImg} />
+                   <Image src="/tech_bluetooth.png" alt="Bluetooth Config" fill className={styles.bgImg} />
                    <div className={styles.cardOverlay}></div>
                 </div>
                 <div className={styles.guideContent}>
@@ -370,7 +378,7 @@ export default function KPro() {
               transition={{ delay: 0.2 }}
              >
                 <div className={styles.cardBg}>
-                   <Image src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=1200" alt="LED Indicators" fill className={styles.bgImg} />
+                   <Image src="/tech_leds.png" alt="LED Indicators" fill className={styles.bgImg} />
                    <div className={styles.cardOverlay}></div>
                 </div>
                 <div className={styles.guideContent}>
@@ -380,44 +388,6 @@ export default function KPro() {
                    <button className={styles.guideBtn}>DIAGNOSTIC KEYS</button>
                 </div>
              </motion.div>
-
-             <motion.div 
-              className={styles.guideCard}
-              initial={{ opacity: 0, scale: 0.9 }}
-              whileInView={{ opacity: 1, scale: 1 }}
-              viewport={{ once: true }}
-              transition={{ delay: 0.3 }}
-             >
-                <div className={styles.cardBg}>
-                   <Image src="https://images.unsplash.com/photo-1555664424-778a1e5e1b48?q=80&w=1200" alt="ECU Pinout" fill className={styles.bgImg} />
-                   <div className={styles.cardOverlay}></div>
-                </div>
-                <div className={styles.guideContent}>
-                   <div className={styles.guideIconBox}><Cpu size={32} /></div>
-                   <h3>ECU Pinout</h3>
-                   <p>Detailed technical mapping of all ECU connectors, sensor inputs, and programmable output pins.</p>
-                   <button className={styles.guideBtn}>VIEW PINOUT MAP</button>
-                </div>
-             </motion.div>
-
-             <motion.div 
-              className={styles.guideCard}
-              initial={{ opacity: 0, scale: 0.9 }}
-              whileInView={{ opacity: 1, scale: 1 }}
-              viewport={{ once: true }}
-              transition={{ delay: 0.4 }}
-             >
-                <div className={styles.cardBg}>
-                   <Image src="https://images.unsplash.com/photo-1549411210-613d9061df8d?q=80&w=1200" alt="O2 Sensors" fill className={styles.bgImg} />
-                   <div className={styles.cardOverlay}></div>
-                </div>
-                <div className={styles.guideContent}>
-                   <div className={styles.guideIconBox}><Zap size={32} /></div>
-                   <h3>O2 Sensor Types</h3>
-                   <p>In-depth analysis of PRA vs PRB sensor differences, compatibility notes, and custom wiring diagrams.</p>
-                   <button className={styles.guideBtn}>WIRING DIAGRAMS</button>
-                </div>
-             </motion.div>
           </div>
         </div>
       </section>
@@ -431,44 +401,26 @@ export default function KPro() {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
           >
-            <h2>SOFTWARE <span className={styles.red}>HUB</span></h2>
+            <h2>SUPPORTED <span className={styles.red}>SOFTWARE</span></h2>
           </motion.div>
-
-          
           
           <div className={styles.dlDashboard}>
-            <motion.div 
-              className={styles.dlCard}
-              initial={{ opacity: 0, scale: 0.95 }}
-              whileInView={{ opacity: 1, scale: 1 }}
-              viewport={{ once: true }}
-            >
-              <div className={styles.dlIconBox}><ShieldAlert size={32} /></div>
-              <h3>Security & Tools</h3>
-              <p>False virus detections may occur. If you have trouble downloading, temporarily disable your antivirus and Windows Defender.</p>
-              
-              <div className={styles.passwordBox} style={{ marginTop: 'auto' }}>
-                <span>Archive Password</span>
-                <div className={styles.passKey}>1234</div>
-              </div>
-
-              <p style={{ marginTop: '1.5rem', fontSize: '0.65rem' }}>
-                * Extract with <a href="https://www.rarlab.com/download.htm" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--primary)', fontWeight: 800, textDecoration: 'underline' }}>WinRAR</a> or <a href="https://www.7-zip.org/" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--primary)', fontWeight: 800, textDecoration: 'underline' }}>7-Zip</a> for best results.
-              </p>
-            </motion.div>
-
             <motion.div 
               className={styles.dlCard}
               initial={{ opacity: 0, scale: 0.95 }}
               whileInView={{ opacity: 1, scale: 1 }}
               viewport={{ once: true }}
               transition={{ delay: 0.1 }}
+              style={{ gridColumn: '1 / -1', maxWidth: '600px', margin: '0 auto' }}
             >
               <div className={styles.dlIconBox}><Settings size={32} /></div>
               <h3>KPro Manager</h3>
-              <p>Get Latest KPro Manager + Service Utility Securely. Standard installation package for all K-Series platforms.</p>
               
-              <span className={styles.dlVersion} style={{ marginTop: 'auto' }}>V4.5.6 STABLE</span>
+              <div style={{ position: 'relative', width: '100%', height: '300px', margin: '2rem 0', borderRadius: '8px', overflow: 'hidden' }}>
+                <Image src="/kpro_manager.png" alt="KPro Manager Software" fill style={{ objectFit: 'contain' }} />
+              </div>
+
+              <p>Get Latest KPro Manager Software for live engine tuning and datalogging. Standard installation package for all K-Series platforms.</p>
               
               <a 
                 href="/files/KProSetup.rar" 
@@ -476,7 +428,7 @@ export default function KPro() {
                 download
               >
                 <Download size={18} />
-                DOWNLOAD INSTALLER
+                DOWNLOAD SOFTWARE
               </a>
             </motion.div>
           </div>
@@ -484,5 +436,5 @@ export default function KPro() {
       </section>
     </div>
   );
-
 }
+

src/components/KProHWInstall.module.css

@@ -0,0 +1,326 @@
+.wrapper {
+  background-color: var(--neutral);
+  min-height: 100vh;
+  padding-bottom: 100px;
+}
+
+.container {
+  max-width: 1400px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 4rem;
+}
+
+.red {
+  color: var(--primary);
+  font-style: italic;
+}
+
+/* HEADER */
+.header {
+  padding: 180px 0 80px;
+  background-color: var(--neutral);
+}
+
+.label {
+  font-size: 0.75rem;
+  font-weight: 900;
+  color: #555;
+  letter-spacing: 0.2rem;
+  display: block;
+  margin-bottom: 1.5rem;
+}
+
+.title {
+  font-size: clamp(3rem, 5vw, 4.5rem);
+  font-weight: 900;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  margin-bottom: 4rem;
+  text-transform: uppercase;
+}
+
+.warningBox {
+  background-color: rgba(255, 0, 0, 0.05);
+  border: 1px solid rgba(255, 0, 0, 0.3);
+  padding: 2.5rem;
+  border-radius: 8px;
+  display: flex;
+  gap: 2rem;
+  align-items: center;
+  max-width: 900px;
+}
+
+.warnIcon {
+  color: var(--primary);
+  flex-shrink: 0;
+}
+
+.warnText h4 {
+  font-size: 1rem;
+  font-weight: 900;
+  color: var(--primary);
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.warnText p {
+  font-size: 0.9rem;
+  color: #aaa;
+  line-height: 1.6;
+}
+
+/* OVERVIEW */
+.overview {
+  padding: 0 0 80px;
+}
+
+.overviewBox {
+  background-color: var(--secondary);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  display: grid;
+  grid-template-columns: 1fr 1.5fr;
+  overflow: hidden;
+}
+
+.overviewContent {
+  padding: 4rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.overviewContent h3 {
+  font-size: 1.2rem;
+  font-weight: 900;
+  margin-bottom: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+}
+
+.overviewContent p {
+  color: #888;
+  font-size: 0.9rem;
+  line-height: 1.6;
+  margin-bottom: 2rem;
+}
+
+.componentsList {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.componentsList li {
+  background-color: rgba(255,255,255,0.05);
+  border: 1px solid var(--border);
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  font-family: monospace;
+  font-weight: 900;
+  color: #fff;
+}
+
+.overviewImageWrapper {
+  position: relative;
+  min-height: 400px;
+  background-color: #111;
+  border-left: 1px solid var(--border);
+  cursor: pointer;
+  transition: opacity 0.3s;
+}
+.overviewImageWrapper:hover {
+  opacity: 0.8;
+}
+
+.imagePlaceholder {
+  position: absolute;
+  inset: 0;
+}
+
+/* STEPS GRID */
+.steps {
+  padding: 40px 0;
+}
+
+.stepsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 2rem;
+}
+
+.stepCard {
+  background-color: var(--secondary);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.stepImageWrapper {
+  position: relative;
+  height: 250px;
+  background-color: #000;
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+  transition: opacity 0.3s;
+}
+.stepImageWrapper:hover {
+  opacity: 0.8;
+}
+
+.stepNumber {
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  width: 40px;
+  height: 40px;
+  background-color: var(--primary);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 900;
+  font-size: 1.2rem;
+  border-radius: 4px;
+  box-shadow: 0 4px 10px rgba(255,0,0,0.3);
+  z-index: 10;
+}
+
+.stepContent {
+  padding: 2rem;
+  flex-grow: 1;
+}
+
+.stepContent h3 {
+  font-size: 1.1rem;
+  font-weight: 900;
+  margin-bottom: 0.8rem;
+  text-transform: uppercase;
+}
+
+.stepContent p {
+  font-size: 0.85rem;
+  color: #888;
+  line-height: 1.6;
+}
+
+/* FIRST UPLOAD */
+.firstUpload {
+  padding: 80px 0;
+}
+
+.uploadBox {
+  background-color: var(--secondary);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 4rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4rem;
+  align-items: center;
+}
+
+.uploadText h2 {
+  font-size: 2.5rem;
+  font-weight: 900;
+  margin-bottom: 1.5rem;
+}
+
+.uploadText p {
+  color: #888;
+  font-size: 1rem;
+  line-height: 1.6;
+  margin-bottom: 2.5rem;
+}
+
+.instructionList {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.instItem {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.instItem span {
+  font-size: 0.9rem;
+  color: #ddd;
+}
+
+.instItem strong {
+  color: #fff;
+}
+
+.uploadImageWrapper {
+  position: relative;
+  height: 350px;
+  background-color: #000;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  overflow: hidden;
+  cursor: pointer;
+  transition: opacity 0.3s;
+}
+.uploadImageWrapper:hover {
+  opacity: 0.8;
+}
+
+/* MODAL OVERLAY */
+.modalOverlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.9);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(5px);
+  padding: 2rem;
+}
+
+.modalContent {
+  position: relative;
+  width: 100%;
+  max-width: 1200px;
+  height: 90vh;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.closeBtn {
+  position: absolute;
+  top: 2rem;
+  right: 2rem;
+  background: transparent;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  z-index: 1001;
+  transition: transform 0.2s, color 0.2s;
+}
+
+.closeBtn:hover {
+  transform: scale(1.1);
+  color: var(--primary);
+}
+
+@media (max-width: 1024px) {
+  .overviewBox, .uploadBox {
+    grid-template-columns: 1fr;
+  }
+  .overviewImageWrapper {
+    min-height: 300px;
+    border-left: none;
+    border-top: 1px solid var(--border);
+  }
+}

src/components/KProHWInstall.tsx

@@ -0,0 +1,197 @@
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import Image from 'next/image';
+import { AlertTriangle, CheckCircle, Info, X } from 'lucide-react';
+import styles from './KProHWInstall.module.css';
+
+export default function KProHWInstall() {
+  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+  const steps = [
+    {
+      title: 'Modify R243',
+      desc: 'Install 22kΩ resistor in place of R243 jumper.',
+      image: '/hw_install_1.jpg',
+    },
+    {
+      title: 'Bridge J250',
+      desc: 'Bridge J250 with solder.',
+      image: '/hw_install_2.jpg',
+    },
+    {
+      title: 'Solder J270',
+      desc: 'Solder 1-pin connector at the J270 location.',
+      image: '/hw_install_3.jpg',
+    },
+    {
+      title: 'Solder CN2',
+      desc: 'Solder 5-pin connector at the CN2 location.',
+      image: '/hw_install_4.jpg',
+    },
+    {
+      title: 'Solder CN3',
+      desc: 'Solder 5-pin connector at the CN3 location.',
+      image: '/hw_install_5.jpg',
+    },
+    {
+      title: 'Jumper Wires',
+      desc: 'Solder 3 jumper wires between the points shown in the picture.',
+      image: '/hw_install_6.jpg',
+    },
+    {
+      title: 'Wire Soldering Example',
+      desc: 'Example of correct wire soldering execution.',
+      image: '/hw_install_7.jpg',
+    },
+    {
+      title: 'Physical Installation',
+      desc: 'Drill hole for USB. Install KPro board with supplied screws.',
+      image: '/hw_install_8.jpg',
+    },
+  ];
+
+  return (
+    <div className={styles.wrapper}>
+      {/* HEADER SECTION */}
+      <section className={styles.header}>
+        <div className={styles.container}>
+          <motion.div 
+            className={styles.titleBox}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+          >
+            <span className={styles.label}>TECHNICAL DOCUMENTATION</span>
+            <h1 className={styles.title}>K<span className={styles.red}>PRO</span> HARDWARE INSTALLATION GUIDE</h1>
+            
+            <div className={styles.warningBox}>
+              <AlertTriangle className={styles.warnIcon} size={32} />
+              <div className={styles.warnText}>
+                <h4>WARNING: PROFESSIONAL INSTALLATION REQUIRED</h4>
+                <p>Do not attempt to solder the ECU yourself unless you are a qualified and experienced technician. For professional assistance, please contact us. By attempting to modify the ECU, you assume full responsibility for any damage caused to the vehicle.</p>
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* OVERVIEW SECTION */}
+      <section className={styles.overview}>
+        <div className={styles.container}>
+          <motion.div 
+            className={styles.overviewBox}
+            initial={{ opacity: 0, scale: 0.95 }}
+            whileInView={{ opacity: 1, scale: 1 }}
+            viewport={{ once: true }}
+          >
+            <div className={styles.overviewContent}>
+              <h3><CheckCircle size={20} className={styles.red} /> MODIFICATION CHECKLIST</h3>
+              <p>Five components must be modified on the ECU PCB to properly install the daughterboard. Prepare your workstation and ensure you locate these exact points on the board.</p>
+              <ul className={styles.componentsList}>
+                <li>CN2</li>
+                <li>CN3</li>
+                <li>J270</li>
+                <li>J250</li>
+                <li>R243</li>
+              </ul>
+            </div>
+            <div className={styles.overviewImageWrapper}>
+               {/* OVERVIEW IMAGE SLOT */}
+               <div className={styles.imagePlaceholder} onClick={() => setSelectedImage("/hw_install_9.jpg")}>
+                 <Image src="/hw_install_9.jpg" alt="ECU Overview" fill style={{ objectFit: 'cover' }} />
+               </div>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* STEPS GRID SECTION */}
+      <section className={styles.steps}>
+        <div className={styles.container}>
+          <div className={styles.stepsGrid}>
+            {steps.map((step, index) => (
+              <motion.div 
+                key={index}
+                className={styles.stepCard}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ delay: index * 0.05 }}
+              >
+                <div className={styles.stepImageWrapper} onClick={() => setSelectedImage(step.image)}>
+                  {/* STEP IMAGE SLOT */}
+                  <Image src={step.image} alt={step.title} fill style={{ objectFit: 'cover' }} />
+                  <div className={styles.stepNumber}>{index + 1}</div>
+                </div>
+                <div className={styles.stepContent}>
+                  <h3>{step.title}</h3>
+                  <p>{step.desc}</p>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* FIRST UPLOAD SECTION */}
+      <section className={styles.firstUpload}>
+        <div className={styles.container}>
+          <motion.div 
+            className={styles.uploadBox}
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+          >
+            <div className={styles.uploadText}>
+              <h2>FIRST <span className={styles.red}>UPLOAD</span></h2>
+              <p>Before you can successfully upload a tune to the ECU for the first time, you must clear the security settings in the KPro Manager software.</p>
+              
+              <div className={styles.instructionList}>
+                <div className={styles.instItem}>
+                  <Info size={18} className={styles.red} />
+                  <span>Open <strong>KPro Manager</strong> on your connected PC.</span>
+                </div>
+                <div className={styles.instItem}>
+                  <Info size={18} className={styles.red} />
+                  <span>Navigate to the <strong>Online</strong> menu.</span>
+                </div>
+                <div className={styles.instItem}>
+                  <Info size={18} className={styles.red} />
+                  <span>Select <strong>Erase ECU (Clear Security)</strong>.</span>
+                </div>
+              </div>
+            </div>
+            
+            <div className={styles.uploadImageWrapper}>
+               {/* FIRST UPLOAD IMAGE SLOT */}
+               <div className={styles.imagePlaceholder} onClick={() => setSelectedImage("/hw_install_10.png")}>
+                 <Image src="/hw_install_10.png" alt="First Upload Instructions" fill style={{ objectFit: 'contain' }} />
+               </div>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
+      <AnimatePresence>
+        {selectedImage && (
+          <motion.div 
+            className={styles.modalOverlay}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={() => setSelectedImage(null)}
+          >
+            <button className={styles.closeBtn} onClick={() => setSelectedImage(null)}><X size={32} /></button>
+            <motion.div 
+              className={styles.modalContent}
+              initial={{ scale: 0.9 }}
+              animate={{ scale: 1 }}
+              exit={{ scale: 0.9 }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <Image src={selectedImage} alt="Full screen image" fill style={{ objectFit: 'contain' }} />
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}