diff --git a/public/about_hero.png b/public/about_hero.png new file mode 100644 index 0000000..0182feb Binary files /dev/null and b/public/about_hero.png differ diff --git a/public/contact_hero.png b/public/contact_hero.png new file mode 100644 index 0000000..532cd88 Binary files /dev/null and b/public/contact_hero.png differ diff --git a/src/app/about/AboutPage.module.css b/src/app/about/AboutPage.module.css index 8a0244c..67a203c 100644 --- a/src/app/about/AboutPage.module.css +++ b/src/app/about/AboutPage.module.css @@ -1,377 +1,600 @@ .main { background-color: var(--neutral); - min-height: 100vh; + overflow-x: hidden; } -.container { - max-width: 1400px; - width: 100%; - margin: 0 auto; - padding: 0 4rem; -} - -/* 1. HERO */ .hero { position: relative; - min-height: 85vh; + height: 90vh; display: flex; align-items: center; overflow: hidden; - padding-top: 100px; +} + +.scanLine { + position: absolute; + left: 0; + width: 100%; + height: 2px; + background: linear-gradient(90deg, transparent, var(--primary), transparent); + z-index: 5; + opacity: 0.5; + box-shadow: 0 0 15px var(--primary); } .heroBg { position: absolute; inset: 0; - z-index: 1; } .bgImg { object-fit: cover; - filter: brightness(0.25) saturate(0.2) contrast(1.1); + filter: saturate(0) brightness(0.35); } .heroOverlay { position: absolute; inset: 0; - background: linear-gradient(to right, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.5) 100%); - z-index: 2; + background: radial-gradient(circle at 20% 50%, transparent 0%, rgba(0,0,0,0.8) 100%); } -.heroContent { +.container { + max-width: 1400px; + margin: 0 auto; + padding: 0 4rem; position: relative; - z-index: 3; - max-width: 800px; + z-index: 10; +} + +.bracketGroup { + border-left: 4px solid var(--primary); + padding-left: 3rem; + margin-bottom: 3.5rem; } .label { - font-size: 0.65rem; + font-size: 0.75rem; font-weight: 900; color: var(--primary); - letter-spacing: 0.3em; + letter-spacing: 0.5rem; display: block; margin-bottom: 2rem; -} - -.title { - font-size: clamp(3rem, 7vw, 5.5rem); - font-weight: 900; - line-height: 0.95; - letter-spacing: -0.05em; - margin-bottom: 2.5rem; text-transform: uppercase; } -.red { - color: var(--primary); - font-style: italic; +.title { + font-size: clamp(3.5rem, 8vw, 7.5rem); + font-weight: 900; + line-height: 0.85; + letter-spacing: -0.06em; + color: #fff; + text-transform: uppercase; } +.outline { + -webkit-text-stroke: 1px rgba(255, 255, 255, 0.15); + color: transparent; +} + +.red { color: var(--primary); } + .desc { - font-size: 1.2rem; - color: #888; + font-size: 1.25rem; + color: #777; + max-width: 500px; line-height: 1.6; - max-width: 600px; + margin-left: 3.4rem; +} + +.heroStats { + position: absolute; + bottom: 4rem; + left: 4rem; + display: flex; + gap: 4rem; + z-index: 10; +} + +.hStat { + font-size: 0.65rem; + font-weight: 900; + color: #fff; + letter-spacing: 0.1rem; +} + +.hStat span { + color: var(--primary); + margin-right: 1rem; } /* 2. STORY SECTION */ .story { - padding: 15rem 0; - border-bottom: 1px solid var(--border); + padding: 20rem 0; } .storyGrid { display: grid; grid-template-columns: 1.2fr 1fr; - gap: 10rem; + gap: 12rem; align-items: center; + position: relative; } -.storyText h2 { - font-size: 3rem; - font-weight: 900; - margin-bottom: 3rem; - letter-spacing: -0.05em; - text-transform: uppercase; -} - -.storyText p { - font-size: 1.1rem; - color: #888; - line-height: 1.8; - margin-bottom: 4rem; -} - -.stats { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 3rem; -} - -.statItem strong { - display: block; - font-size: 2.5rem; - font-weight: 900; - color: #fff; - margin-bottom: 0.5rem; -} - -.statItem span { +.sideLabel { + position: absolute; + top: 0; + left: -4rem; + writing-mode: vertical-rl; + transform: rotate(180deg); font-size: 0.6rem; - color: #555; font-weight: 900; - letter-spacing: 0.1em; - text-transform: uppercase; + color: #151515; + letter-spacing: 1rem; } .storyVisual { position: relative; - display: flex; - justify-content: center; + will-change: transform; } -.visualStack { +.imageStack { position: relative; - width: 100%; } -.mainVisual { - width: 100%; - height: auto; - filter: saturate(0.5) contrast(1.1); - border-radius: 8px; -} - -.floatingTag { - position: absolute; - bottom: -30px; - right: 20px; - background-color: var(--primary); - color: #fff; - padding: 1.5rem 2.5rem; - font-size: 0.7rem; - font-weight: 900; - letter-spacing: 0.1em; +.stackMain { + border: 1px solid var(--border); border-radius: 4px; - box-shadow: 0 20px 40px rgba(0,0,0,0.5); + filter: saturate(0.2) contrast(1.1); + transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); + width: 100%; +} + +.imageStack:hover .stackMain { + filter: saturate(1); + border-color: var(--primary); +} + +.techLabel { + position: absolute; + display: flex; + align-items: center; + gap: 1.5rem; + z-index: 10; +} + +.labelLine { + width: 60px; + height: 1px; + background-color: var(--primary); + position: relative; +} + +.labelLine::after { + content: ''; + position: absolute; + width: 6px; + height: 6px; + background-color: var(--primary); + border-radius: 50%; + right: -3px; + top: -3px; +} + +.techLabel span { + font-size: 0.6rem; + font-weight: 900; + color: var(--primary); + letter-spacing: 0.1rem; + background-color: rgba(0,0,0,0.8); + padding: 0.4rem 1rem; + border: 1px solid rgba(255,0,0,0.2); + border-radius: 2px; +} + +.tl1 { top: 20%; left: -80px; } +.tl2 { bottom: 20%; right: -80px; flex-direction: row-reverse; } + +.subLabel { + font-size: 0.65rem; + font-weight: 900; + color: var(--primary); + letter-spacing: 0.3rem; + margin-bottom: 2rem; + display: block; +} + +.storyText h2 { + font-size: 3.5rem; + font-weight: 900; + margin-bottom: 3.5rem; + line-height: 1; + letter-spacing: -0.04em; +} + +.storyText p { + font-size: 1.1rem; + color: #666; + line-height: 1.8; + margin-bottom: 5rem; +} + +.statsRow { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 4rem; +} + +.statNum { + font-size: 3.5rem; + font-weight: 900; + color: #fff; + line-height: 1; + margin-bottom: 1rem; +} + +.statLab { + font-size: 0.6rem; + color: #444; + font-weight: 900; + letter-spacing: 0.15rem; + text-transform: uppercase; } /* 3. LAB SECTION */ .lab { - padding: 15rem 0; - background-color: var(--secondary); + padding: 20rem 0; + background-color: #080808; + border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .labHeader { text-align: center; - max-width: 800px; - margin: 0 auto 8rem; -} - -.redIcon { - margin-bottom: 2rem; - filter: drop-shadow(0 0 10px var(--primary)); + margin-bottom: 12rem; } .labHeader h2 { - font-size: 3.5rem; + font-size: 4rem; font-weight: 900; - margin-bottom: 2rem; -} - -.labHeader p { - font-size: 1.1rem; - color: #888; - line-height: 1.6; + line-height: 0.9; } .labGrid { display: grid; grid-template-columns: repeat(3, 1fr); - gap: 2rem; + gap: 4rem; } .labCard { - background-color: var(--neutral); + background-color: transparent; border: 1px solid var(--border); - padding: 3rem; - border-radius: 8px; - transition: all 0.4s ease; + border-radius: 4px; + overflow: hidden; + transition: all 0.5s; + position: relative; } .labCard:hover { border-color: var(--primary); - transform: translateY(-10px); + transform: translateY(-15px); + background-color: rgba(255, 0, 0, 0.02); } -.labImgBox { +.labImgWrapper { + height: 350px; position: relative; - width: 100%; - height: 300px; - border-radius: 4px; overflow: hidden; - margin-bottom: 2.5rem; } .labImg { object-fit: cover; - filter: brightness(0.6) saturate(0.2); - transition: transform 0.6s ease; + filter: saturate(0) brightness(0.6); + transition: all 1s ease; } .labCard:hover .labImg { - filter: brightness(0.8) saturate(0.6); - transform: scale(1.1); + filter: saturate(1) brightness(0.9); + transform: scale(1.1) rotate(1deg); } -.labCard h3 { - font-size: 1.1rem; +.cardNumber { + position: absolute; + top: 2rem; + right: 2rem; + font-size: 4rem; font-weight: 900; - margin-bottom: 1rem; - color: #fff; - letter-spacing: 0.1em; + color: rgba(255, 255, 255, 0.05); + line-height: 1; + z-index: 10; } -.labCard p { - font-size: 0.85rem; - color: #777; - line-height: 1.6; +.labContent { + padding: 4rem 3rem; } -/* 4. TIMELINE SEC */ -.timelineSec { - padding: 15rem 0; - background-color: var(--neutral); -} - -.timelineTitle { - font-size: 3.5rem; - font-weight: 900; - text-align: center; - margin-bottom: 8rem; -} - -.timeline { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 2rem; - position: relative; -} - -.tlItem { - position: relative; - padding-top: 4rem; -} - -.tlYear { - font-size: 1rem; - font-weight: 900; +.labIconStrip { + display: flex; + align-items: center; + gap: 1.5rem; color: var(--primary); - letter-spacing: 0.1em; - display: block; - margin-bottom: 1.5rem; + margin-bottom: 3rem; } -.tlDot { - width: 16px; - height: 16px; - background-color: var(--primary); - border-radius: 50%; - position: absolute; - top: -8px; - left: 0; - box-shadow: 0 0 15px var(--primary); -} - -.timeline::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 1px; - background-color: var(--border); - z-index: 1; -} - -.tlItem h3 { - font-size: 1.2rem; +.labContent h3 { + font-size: 1.25rem; font-weight: 900; - margin-bottom: 1rem; + margin-bottom: 2rem; + color: #fff; } -.tlItem p { - font-size: 0.85rem; - color: #666; - line-height: 1.6; -} - -/* 5. CTA SECTION */ -.cta { - padding: 10rem 0 15rem; -} - -.ctaCard { - background-color: var(--secondary); - border: 1px solid var(--border); - padding: 8rem 5rem; - border-radius: 8px; - text-align: center; +/* 4. CIRCUIT-PATH JOURNEY */ +.journey { + padding: 15rem 0; position: relative; overflow: hidden; } -.ctaCard h2 { - font-size: 3.5rem; +.journeyHeader { + text-align: center; + margin-bottom: 12rem; + position: relative; +} + +.circuitDecoration { + position: absolute; + bottom: -4rem; + left: 50%; + transform: translateX(-50%); + font-size: 0.75rem; + color: #444; + letter-spacing: 0.4rem; + font-family: monospace; + font-weight: 700; +} + +.circuitTimeline { + max-width: 1200px; + margin: 0 auto; + position: relative; + padding: 10rem 0; +} + +/* THE MAIN PCB TRACE LINE */ +.circuitTimeline::before { + content: ''; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 2px; + height: 100%; + background: linear-gradient(180deg, + transparent 0%, + var(--border) 10%, + var(--border) 90%, + transparent 100%); + z-index: 1; +} + +.circuitNode { + position: relative; + width: 50%; + margin-bottom: 8rem; + z-index: 5; +} + +.nodeLeft { padding-right: 8rem; margin-right: 50%; text-align: right; } +.nodeRight { padding-left: 8rem; margin-left: 50%; text-align: left; } + +/* THE 45 DEGREE TRACE */ +.traceLine { + position: absolute; + top: 3rem; + width: 100px; + height: 100px; + border-bottom: 2px solid var(--primary); + z-index: 1; +} + +.nodeLeft .traceLine { + right: 0; + border-right: 2px solid var(--primary); + transform: skewY(-45deg); +} + +.nodeRight .traceLine { + left: 0; + border-left: 2px solid var(--primary); + transform: skewY(45deg); +} + +/* THE CHIP BLOCK */ +.chipBlock { + background-color: #0d0d0d; + border: 1px solid var(--border); + border-radius: 4px; + overflow: hidden; + position: relative; + transition: all 0.4s; + box-shadow: 0 10px 40px rgba(0,0,0,0.5); +} + +.chipBlock:hover { + border-color: var(--primary); + transform: translateY(-5px); + box-shadow: 0 0 30px rgba(255, 0, 0, 0.1); +} + +.chipHeader { + background-color: var(--secondary); + padding: 1rem 2rem; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid var(--border); +} + +.chipRev { + font-size: 0.85rem; + font-weight: 900; + color: var(--primary); + letter-spacing: 0.15rem; +} + +.chipIcon { color: #555; } + +.chipBody { + padding: 3rem 2rem; +} + +.chipTitle { + font-size: 1.25rem; + font-weight: 900; + color: #fff; + margin-bottom: 1.5rem; + letter-spacing: -0.01em; +} + +.chipBody p { + font-size: 0.9rem; + color: #888; + line-height: 1.8; +} + +.chipFooter { + padding: 1rem 2rem; + background-color: #0a0a0a; + display: flex; + justify-content: space-between; + font-size: 0.65rem; + font-weight: 900; + color: #444; + letter-spacing: 0.1rem; + border-top: 1px solid rgba(255,255,255,0.02); +} + +/* DECORATIVE TRACES */ +.pcbTrace1, .pcbTrace2 { + position: absolute; + background-color: rgba(255, 255, 255, 0.02); + z-index: 0; +} + +.pcbTrace1 { + width: 300px; + height: 1px; + top: 20%; + left: -10%; + transform: rotate(45deg); +} + +.pcbTrace2 { + width: 400px; + height: 1px; + bottom: 30%; + right: -10%; + transform: rotate(-45deg); +} + +@media (max-width: 1024px) { + .circuitTimeline::before { display: none; } + .circuitNode { width: 100%; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; text-align: left !important; } + .traceLine { display: none; } + .chipBlock { margin-bottom: 4rem; } +} + +/* 5. MISSION CTA */ +.cta { + padding: 10rem 0 20rem; +} + +.ctaSection { + background-color: var(--secondary); + border: 1px solid var(--border); + padding: 10rem 5rem; + border-radius: 4px; + text-align: center; + position: relative; +} + +.ctaLabel { + font-size: 0.6rem; + font-weight: 900; + letter-spacing: 0.4rem; + color: #333; + margin-bottom: 3rem; +} + +.ctaInner h2 { + font-size: 4rem; font-weight: 900; margin-bottom: 2rem; letter-spacing: -0.05em; } -.ctaCard p { - font-size: 1.2rem; +.ctaInner p { color: #888; - margin-bottom: 4rem; + margin-bottom: 5rem; + max-width: 600px; + margin-left: auto; + margin-right: auto; + font-size: 1.25rem; + line-height: 1.6; } -.ctaActions { +.ctaButtons { display: flex; justify-content: center; gap: 2rem; } -.primaryBtn { +.ctaMain { background-color: var(--primary); color: #fff; - padding: 1.5rem 3.5rem; + padding: 1.6rem 4rem; border-radius: 4px; - font-size: 0.75rem; + font-size: 0.85rem; font-weight: 900; display: flex; align-items: center; - gap: 1.2rem; - transition: all 0.3s ease; + gap: 2rem; + transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); + letter-spacing: 0.2rem; } -.secondaryBtn { - background-color: rgba(255, 255, 255, 0.02); +.ctaSecondary { border: 1px solid var(--border); color: #fff; - padding: 1.5rem 3.5rem; + padding: 1.6rem 4rem; border-radius: 4px; - font-size: 0.75rem; + font-size: 0.85rem; font-weight: 900; - transition: all 0.3s ease; + transition: all 0.4s; + letter-spacing: 0.2rem; } -.primaryBtn:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(255, 0, 0, 0.2); } -.secondaryBtn:hover { background-color: rgba(255, 255, 255, 0.05); transform: translateY(-3px); } +.ctaMain:hover { + background-color: #ff3333; + transform: translateY(-8px); + box-shadow: 0 30px 60px rgba(255, 0, 0, 0.25); +} + +.ctaSecondary:hover { + background-color: #fff; + color: #000; +} @media (max-width: 1024px) { - .storyGrid, .labGrid, .timeline { grid-template-columns: 1fr; gap: 4rem; } -} - -@media (max-width: 768px) { - .container { padding: 0 2rem; } + .storyGrid { grid-template-columns: 1fr; gap: 8rem; } + .labGrid { grid-template-columns: 1fr; } + .timelineContainer::before { left: 0; } + .timelineItem { width: 100%; padding-left: 4rem; padding-right: 0; } + .timelineItem:nth-child(even) { margin-left: 0; } + .yearBox { left: 0 !important; top: -4rem; font-size: 5rem; } + .ctaSection { padding: 6rem 2rem; } + .ctaButtons { flex-direction: column; } + .bracketGroup { padding-left: 2rem; } + .desc { margin-left: 2.2rem; } + .hero { height: auto; padding: 18rem 0 12rem; } + .heroStats { display: none; } } diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index 321bb45..6eb79f6 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -2,176 +2,254 @@ import Navbar from '@/components/Navbar'; import Footer from '@/components/Footer'; -import { motion } from 'framer-motion'; +import { motion, useScroll, useTransform } from 'framer-motion'; import Image from 'next/image'; -import { Shield, Target, Cpu, Globe, Zap, History, ChevronRight } from 'lucide-react'; +import Link from 'next/link'; +import { Shield, Target, Cpu, Globe, Zap, History, ChevronRight, Activity, Terminal, Layers } from 'lucide-react'; import styles from './AboutPage.module.css'; export default function AboutPage() { + const { scrollYProgress } = useScroll(); + const y1 = useTransform(scrollYProgress, [0, 1], [0, -200]); + const y2 = useTransform(scrollYProgress, [0, 1], [0, 200]); + const milestones = [ - { year: '2004', title: 'The Foundation', desc: 'Hondavert born from high-performance circuit racing needs.' }, - { year: '2010', title: 'CAN Interface Rev 1', desc: 'First universal CAN-Bus interface developed for K-Series.' }, - { year: '2018', title: 'Rev 4 Legacy', desc: 'Release of the Bluetooth-enabled daughterboard system.' }, - { year: '2026', title: 'Future of Flash', desc: 'Expanding platform diagnostics to modern direct-injection engines.' }, + { year: '2004', title: 'THE GENESIS', desc: 'Born in a private Warsaw circuit racing lab for high-spec k-swap builds.' }, + { year: '2010', title: 'CAN ARCHITECTURE', desc: 'Universal CAN-Bus communication pioneered for K-Series ECU integration.' }, + { year: '2018', title: 'REV.4 CORE RELEASE', desc: 'Bluetooth-active hardware suite set the new industry standard for mobile tuning.' }, + { year: '2026', title: 'FUTURE OF FLASH', desc: 'Expanding specialized diagnostics into the modern direct-injection era.' }, ]; + const variants = { + hidden: { opacity: 0, y: 20 }, + visible: { opacity: 1, y: 0 } + }; + return (
- {/* 1. INNER BANNER (UNIQUE HERO) */} + {/* 1. ULTRA-CREATIVE HERO BANNER */}
Engineering Hub
+
- ESTABLISHED 2004 -

BEYOND TUNING.
WE ENGINEER SOLUTIONS.

+
+ EST. 2004 // WARSAW LABS +

+ WE ENGINEER
+ PERFORMANCE
+ INTELLIGENCE +

+

- With over 20 years of technical intelligence, Hondavert is the global standard for Honda engine management hardware and software. + Hondavert is not a parts supplier. We are an advanced electronics laboratory dedicated to solving the communication barriers between modern computers and classic combustion engines.

+
+
UI_VER: 4.0.2
+
HW_REV: 4.3
+
STATUS: ACTIVE
+
- {/* 2. THE ENGINEERING STORY (UNIQUE LOOK) */} + {/* 2. OVERLAPPING STORY SECTION WITH TECHNICAL LABELS */}
- -

OUR TECHNICAL LEGACY

-

- From building prototype motherboards in a small Warsaw laboratory to supporting thousands of K-Swap projects worldwide, - our DNA has always been rooted in precision electronics. We don't just sell interfaces; we develop the bridges that connect - modern computational speed with classic performance automotive engines. -

-
-
- 40+ - COUNTRIES SUPPORTED +
ENGINEERING DNA
+ + +
+ Hardware Lab +
HARDWARE REV.4
+ + {/* TECHNICAL FLOATING LABELS */} +
+
+ MCU_CORE: ARM-CORTEX +
+
+
+ ISO_STABILITY: 100% +
-
- 100k+ - LINE CODES WRITTEN + + + + THE ARCHITECTURE +

A LEGACY PRESERVED IN CODE

+

+ Our trajectory has always been dictated by the pursuit of zero-latency. In the high-stakes world of competitive racing, + milli-seconds are the difference between victory and catastrophic failure. Our boards use proprietary power-filtering + logic that was developed on the Polish circuit series, ensuring your tuning data remains stable under extreme voltage oscillation. +

+
+
+ 40+ + GLOBAL NODES +
+
+ 100Hz + DA-LOGGING +
+
+ AES + ENCRYPTION +
-
- 100Hz - DATALOGGING STANDARDS -
-
- - -
- ECU Engineering -
REV.4 CORE
-
- +
- {/* 3. LABORATORY FOCUS (NEW SECTION) */} + {/* 3. LABORATORY SUITE - BLUEPRINT STYLE */}
- -

THE LABORATORY

-

Our in-house R&D facility utilizes specialized oscilloscope diagnostic tools and high-speed data acquisition - systems to ensure maximum stability on every board produced.

+ FACILITY OVERVIEW +

THE TECHNICAL SUITE
-
-
- Lab 1 -
-

PROTO-BOARDING

-

Rigorous multi-layer PCB testing for thermal stability and noise isolation.

-
-
-
- Lab 2 -
-

FIRMWARE STABILITY

-

Real-time OKI/MCU emulation to eliminate communication lag.

-
-
-
- Lab 3 -
-

CAN-BUS AUDITS

-

Ensuring 100% telemetry accuracy for diagnostic tools.

-
+
+
+ Testing +
01
+
+
+
+

PHYSICAL AUDITS

+

Thermal stability testing in simulated high-load environments up to 85°C ambient.

+
+
+ +
+
+ Firmware +
02
+
+
+
+

FIRMWARE LAB

+

Low-level MCU programming for proprietary CAN-BUS bridge protocols.

+
+
+ +
+
+ Quality +
03
+
+
+
+

QUALITY CONTROL

+

Each unit undergoes 18 unique signal continuity tests before regional dispatch.

+
+
- {/* 4. TIMELINE (NEW SECTION) */} -
-
-

OUR JOURNEY

-
- {milestones.map((m, i) => ( - - {m.year} -
-

{m.title}

-

{m.desc}

- - ))} -
-
+ {/* 4. CIRCUIT-PATH TIMELINE (UNIQUE LOOK) */} +
+
+
+ SYSTEM_EVOLUTION +

THE TIMELINE_NODES

+
0x00A1 // 0x00F4
+
+ +
+ {milestones.map((m, i) => ( + +
+
+
+ REV_{m.year} + +
+
+

{m.title}

+

{m.desc}

+
+
+ STATUS: VERIFIED + CHK_SUM: {Math.random().toString(16).slice(2, 6).toUpperCase()} +
+
+ + ))} + + {/* Decorative PCB Traces */} +
+
+
+
- {/* 5. CTA SECTION */} + {/* 5. MISSION CTA */}
-

READY TO UNLOCK YOUR ENGINE?

-

Our technical team is ready to support your next high-performance ECU upgrade.

-
- - +
+
TRANSMISSION_READY
+

ENGINEERING YOUR VICTORY

+

Are you ready to integrate the global standard in performance electronics into your build?

+
+ + ACCESS PROTOCOL + + + ESTABLISH CONTACT + +
diff --git a/src/components/Contact.module.css b/src/components/Contact.module.css index 67f7146..dc5bb86 100644 --- a/src/components/Contact.module.css +++ b/src/components/Contact.module.css @@ -1,17 +1,51 @@ .section { - padding: 15rem 0 10rem; background-color: var(--neutral); min-height: 100vh; + padding-bottom: 10rem; +} + +.hero { + position: relative; + height: 60vh; + display: flex; + align-items: center; + overflow: hidden; + margin-bottom: 10rem; +} + +.heroBg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.bgImg { + object-fit: cover; + filter: saturate(0) brightness(0.4); +} + +.heroOverlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(0deg, var(--neutral) 0%, rgba(0,0,0,0) 100%); } .container { max-width: 1400px; + width: 100%; margin: 0 auto; padding: 0 4rem; + position: relative; + z-index: 10; } -.header { - margin-bottom: 8rem; +.heroContent { + max-width: 800px; } .label { @@ -20,155 +54,244 @@ color: var(--primary); letter-spacing: 0.2rem; display: block; - margin-bottom: 1.5rem; -} - -.title { - font-size: 3.5rem; - font-weight: 900; margin-bottom: 2rem; - line-height: 1.1; +} + +.heroTitle { + font-size: clamp(3rem, 6vw, 5rem); + font-weight: 900; + line-height: 0.95; letter-spacing: -0.05em; - text-transform: uppercase; + margin-bottom: 2.5rem; } -.red { - color: var(--primary); - font-style: italic; -} +.red { color: var(--primary); } -.desc { - max-width: 600px; +.heroDesc { font-size: 1.1rem; color: #888; + max-width: 500px; line-height: 1.6; } -.grid { +.mainGrid { display: grid; grid-template-columns: 1fr 1.5fr; - gap: 8rem; - align-items: start; + gap: 10rem; } .infoCol { - display: grid; - grid-template-columns: 1fr; - gap: 3rem; + position: relative; } -.infoCard { +.sideLabel { + position: absolute; + top: 0; + left: -4rem; + writing-mode: vertical-rl; + transform: rotate(180deg); + font-size: 0.65rem; + font-weight: 900; + color: #222; + letter-spacing: 0.5rem; +} + +.infoGrid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; + margin-bottom: 4rem; +} + +.infoBox { display: flex; - gap: 2rem; - align-items: center; - padding: 2.5rem; + flex-direction: column; + gap: 1.5rem; +} + +.iconWrapper { + width: 44px; + height: 44px; background-color: var(--secondary); border: 1px solid var(--border); border-radius: 4px; - transition: all 0.3s ease; -} - -.infoCard:hover { - border-color: var(--primary); - transform: translateY(-5px); -} - -.infoIcon { - width: 60px; - height: 60px; - background-color: rgba(255, 0, 0, 0.05); - border: 1px solid rgba(255, 0, 0, 0.1); - border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary); } -.infoText h4 { - font-size: 0.75rem; - font-weight: 900; - margin-bottom: 0.8rem; - color: #fff; - letter-spacing: 0.1em; -} - -.infoText p { - font-size: 0.9rem; - color: #888; - line-height: 1.5; -} - -.contactForm { - background-color: var(--secondary); - border: 1px solid var(--border); - padding: 5rem; - border-radius: 4px; -} - -.inputGroup { - margin-bottom: 3rem; - display: flex; - flex-direction: column; - gap: 1.2rem; -} - -.inputGroup label { +.boxText h4 { font-size: 0.65rem; font-weight: 900; color: #555; + margin-bottom: 0.8rem; letter-spacing: 0.1em; } -.inputGroup input, -.inputGroup select, -.inputGroup textarea { - background-color: #0c0c0c; - border: 1px solid var(--border); - border-radius: 4px; - padding: 1.5rem; - color: #fff; +.boxText p { font-size: 0.9rem; - width: 100%; - transition: all 0.3s ease; + color: #fff; + font-weight: 700; + line-height: 1.5; } -.inputGroup input:focus, -.inputGroup select:focus, -.inputGroup textarea:focus { - outline: none; - border-color: var(--primary); - border-width: 2px; +.securityBox { + background-color: rgba(255, 0, 0, 0.02); + border: 1px solid rgba(255, 0, 0, 0.1); + padding: 2.5rem; + border-radius: 4px; + display: flex; + gap: 2rem; + align-items: flex-start; +} + +.shieldIcon { + color: var(--primary); + flex-shrink: 0; +} + +.securityBox p { + font-size: 0.85rem; + color: #666; + line-height: 1.6; +} + +.formCol { + background-color: var(--secondary); + border: 1px solid var(--border); + padding: 6rem; + border-radius: 4px; + position: relative; +} + +.formHeader { + margin-bottom: 5rem; +} + +.formHeader h3 { + font-size: 1.8rem; + font-weight: 900; + margin-bottom: 1rem; + letter-spacing: -0.02em; +} + +.formHeader p { + font-size: 0.9rem; + color: #666; +} + +.formRow { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; +} + +.inputBox { + margin-bottom: 3.5rem; + position: relative; +} + +.inputBox label { + font-size: 0.6rem; + font-weight: 900; + color: #555; + letter-spacing: 0.15rem; + display: block; + margin-bottom: 1rem; +} + +.inputBox input, +.inputBox textarea { + background: transparent; + border: none; + width: 100%; + color: #fff; + font-size: 1rem; + font-weight: 700; + padding: 0.8rem 0; + font-family: inherit; +} + +.inputBox select { + background: transparent; + border: none; + width: 100%; + color: #fff; + font-size: 1rem; + font-weight: 700; + padding: 0.8rem 0; + font-family: inherit; + appearance: none; + cursor: pointer; + background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); + background-repeat: no-repeat; + background-position: right center; + background-size: 1.2rem; +} + +.inputBox select option { + background-color: #111; + color: #fff; + padding: 1rem; +} + +.inputLine { + height: 1px; + background-color: var(--border); + width: 100%; + position: absolute; + bottom: 0; + left: 0; + transition: all 0.4s ease; +} + +.inputBox input:focus + .inputLine, +.inputBox select:focus + .inputLine, +.inputBox textarea:focus + .inputLine { + background-color: var(--primary); + height: 2px; +} + +.buttonWrapper { + margin-top: 2rem; } .submitBtn { - width: 100%; background-color: var(--primary); color: #fff; + width: 100%; padding: 1.5rem; - border-radius: 4px; font-size: 0.75rem; font-weight: 900; + letter-spacing: 0.15rem; display: flex; align-items: center; justify-content: center; - gap: 1.2rem; - letter-spacing: 0.1em; - transition: all 0.3s ease; + gap: 1.5rem; + border-radius: 4px; + transition: all 0.3s; } .submitBtn:hover { - background-color: #ff4444; - transform: translateY(-3px); - box-shadow: 0 10px 30px rgba(255, 0, 0, 0.2); + background-color: #ff3333; + transform: translateY(-5px); + box-shadow: 0 10px 40px rgba(255, 0, 0, 0.3); +} + +@media (max-width: 1200px) { + .mainGrid { gap: 5rem; } + .formCol { padding: 4rem; } } @media (max-width: 1024px) { - .grid { grid-template-columns: 1fr; gap: 4rem; } + .mainGrid { grid-template-columns: 1fr; gap: 8rem; } + .hero { height: 50vh; } + .sideLabel { display: none; } } @media (max-width: 768px) { .container { padding: 0 2rem; } - .title { font-size: 2.5rem; } - .contactForm { padding: 3rem 2rem; } + .formRow { grid-template-columns: 1fr; gap: 0; } + .formCol { padding: 3rem 2rem; } } diff --git a/src/components/Contact.tsx b/src/components/Contact.tsx index 8c85a9c..4eee6bb 100644 --- a/src/components/Contact.tsx +++ b/src/components/Contact.tsx @@ -1,119 +1,144 @@ 'use client'; import { motion } from 'framer-motion'; -import { Mail, Phone, MapPin, Send, MessageSquare, Clock } from 'lucide-react'; +import Image from 'next/image'; +import { Mail, Phone, MapPin, Send, Clock, Globe, Shield } from 'lucide-react'; import styles from './Contact.module.css'; export default function Contact() { return (
-
-
- - GET IN TOUCH - - - TECHNICAL SUPPORT & SALES - - +
+ Technical Hub +
+
+
+ - Our specialized team is available for technical consultations, installation queries, and dealer network applications. - + ESTABLISHED 2004 +

TECHNICAL
SUPPORT HUB

+

+ Our specialized team provides surgical-grade technical assistance for your ECU management and performance builds. +

+
+
-
+
+
+ {/* 2. CREATIVE INFO SECTION */} -
-
-
-

EMAIL ENQUIRIES

-

support@hondavert.com

-

sales@hondavert.com

+
COMMUNICATION LINE
+ +
+
+
+
+

EMAIL SYSTEMS

+

support@hondavert.com

+

sales@hondavert.com

+
+
+ +
+
+
+

GLOBAL VOICE

+

+48 123 456 789 (EU)

+

+1 800 555-JDM (US)

+
+
+ +
+
+
+

LAB HOURS

+

MON - FRI: 09:00 - 18:00

+

SAT: EMERGENCY ONLY

+
+
+ +
+
+
+

LOCATION

+

WARSAW HQ

+

POLAND, EUROPE

+
-
-
-
-

DIRECT LINE

-

+48 123 456 789 (EU Support)

-

+1 (800) 555-JDM (US Support)

-
-
- -
-
-
-

TECHNICAL HOURS

-

Mon - Fri: 09:00 - 18:00 (GMT+1)

-

Saturday: Emergency Support Only

-
-
- -
-
-
-

GLOBAL HUB

-

Precision Engineering HQ

-

Warsaw, Poland. Europe

-
+
+ +

All technical data transmissions are secured using 256-bit industrial encryption standards.

+ {/* 3. CREATIVE FORM SECTION */} +
+

TRANSMIT DATA

+

Initialize a secure communication channel with our engineers.

+
+
e.preventDefault()}> -
- - +
+
+ + +
+
+
+ + +
+
-
- - -
- -
- +
+ +
-
- - +
+ + +
- +
+ +
diff --git a/src/components/HomeHeroSlider.module.css b/src/components/HomeHeroSlider.module.css index d92d425..fd7db68 100644 --- a/src/components/HomeHeroSlider.module.css +++ b/src/components/HomeHeroSlider.module.css @@ -26,19 +26,44 @@ z-index: 1; } +.maskContainer { + position: absolute; + inset: 0; + clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%); + overflow: hidden; +} + .bgImg { object-fit: cover; - filter: saturate(0.2) contrast(1.2) brightness(0.4); + filter: saturate(0) contrast(1.1) brightness(0.3); +} + +.gridOverlay { + position: absolute; + inset: 0; + background-image: + radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), + linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px); + background-size: 50px 50px, 100px 100px, 100px 100px; + z-index: 2; +} + +.scanLine { + position: absolute; + left: 0; + width: 100%; + height: 150px; + background: linear-gradient(to bottom, transparent, rgba(255, 0, 0, 0.1), transparent); + border-top: 1px solid rgba(255, 0, 0, 0.3); + z-index: 2; } .overlay { position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(to right, rgba(18, 18, 18, 0.9) 0%, rgba(18, 18, 18, 0.45) 50%, rgba(18, 18, 18, 0.2) 100%); - z-index: 2; + inset: 0; + background: radial-gradient(circle at 10% 50%, transparent 0%, rgba(0,0,0,0.9) 100%); + z-index: 3; } .container { @@ -47,103 +72,209 @@ margin: 0 auto; padding: 0 var(--container-padding); position: relative; - z-index: 3; + z-index: 10; } +.hudBrackets { + position: relative; + padding: 6rem; + width: fit-content; +} + +.corner { + position: absolute; + width: 20px; + height: 20px; + border: 1px solid var(--primary); +} + +.topL { top: 0; left: 0; border-right: none; border-bottom: none; } +.topR { top: 0; right: 0; border-left: none; border-bottom: none; } +.botL { bottom: 0; left: 0; border-right: none; border-top: none; } +.botR { bottom: 0; right: 0; border-left: none; border-top: none; } + .content { - max-width: 800px; + max-width: 850px; +} + +.floatingMetric { + position: absolute; + right: 0; + top: 5rem; + background-color: rgba(255, 255, 255, 0.02); + border: 1px solid rgba(255, 255, 255, 0.05); + padding: 2rem; + backdrop-filter: blur(10px); + border-radius: 4px; + text-align: right; +} + +.m2 { top: 15rem; right: 5rem; } + +.metricVal { + font-size: 2rem; + font-weight: 900; + color: #fff; + line-height: 1; + margin-bottom: 0.5rem; +} + +.metricLab { + font-size: 0.6rem; + font-weight: 900; + color: var(--primary); + letter-spacing: 0.2rem; +} + +.badgeLine { + display: flex; + align-items: center; + gap: 3rem; + margin-bottom: 3rem; } .subtitle { font-size: 1rem; font-weight: 900; color: var(--primary); - letter-spacing: 0.3rem; - display: block; - margin-bottom: 2rem; + letter-spacing: 0.6rem; text-transform: uppercase; } +.statusIndicator { + display: flex; + align-items: center; + gap: 1.2rem; + font-size: 0.7rem; + font-weight: 900; + color: #444; + letter-spacing: 0.15rem; +} + +.pulseDot { + width: 8px; + height: 8px; + background-color: var(--primary); + border-radius: 50%; + box-shadow: 0 0 15px var(--primary); + animation: pulse 2s infinite; +} + .title { - font-size: clamp(3rem, 10vw, 9rem); + font-size: clamp(3rem, 10vw, 10rem); font-weight: 900; - line-height: 0.85; + line-height: 0.75; letter-spacing: -0.06em; margin-bottom: 4rem; - text-transform: uppercase; + color: #fff; +} + +.outline { + -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1); + color: transparent; } .desc { - font-size: 1.1rem; - color: #888; - line-height: 1.6; - margin-bottom: 4.5rem; - max-width: 650px; + font-size: 1.2rem; + color: #777; + line-height: 1.8; + margin-bottom: 6rem; + max-width: 500px; +} + +.ctaWrapper { + display: flex; + align-items: center; + gap: 4rem; } .ctaBtn { background-color: var(--primary); color: #fff; - padding: 1.5rem 3.5rem; - border-radius: 4px; - font-size: 0.9rem; + padding: 1.4rem 3.2rem; + border-radius: 2px; + font-size: 0.85rem; font-weight: 900; - letter-spacing: 0.15rem; + letter-spacing: 0.2rem; display: flex; align-items: center; - gap: 1.5rem; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + gap: 2rem; + transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); + width: fit-content; } -.ctaBtn:hover { - background-color: var(--primary-hover); - transform: translateY(-5px); - box-shadow: 0 15px 40px rgba(255, 0, 0, 0.3); +.ctaDecorator { + font-size: 0.6rem; + font-weight: 900; + color: #222; + letter-spacing: 0.2rem; +} + +.sideCoordinates { + position: absolute; + right: 4rem; + top: 50%; + transform: translateY(-50%) rotate(-90deg); + font-size: 0.65rem; + font-weight: 900; + color: #1a1a1a; + letter-spacing: 0.6rem; + display: flex; + flex-direction: column; + gap: 1.5rem; + z-index: 5; + text-align: right; +} + +.verTag { + color: #333; + margin-top: 2rem; } .nav { position: absolute; - bottom: 4rem; - right: var(--container-padding); + bottom: 6rem; + right: 6rem; display: flex; - gap: 1.5rem; + gap: 2rem; z-index: 10; } .navBtn { - background-color: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.1); + background-color: transparent; + border: 1px solid var(--border); color: #fff; - padding: 1.5rem; + width: 65px; + height: 65px; + display: flex; + align-items: center; + justify-content: center; cursor: pointer; - transition: all 0.2s; -} - -.navBtn:hover { - background-color: var(--primary); - border-color: var(--primary); + transition: all 0.4s; } .dots { position: absolute; - bottom: 5.5rem; - left: var(--container-padding); + bottom: 8rem; + left: 6rem; display: flex; - gap: 1.5rem; + gap: 3rem; z-index: 10; } .dot { - width: 60px; - height: 4px; - background-color: rgba(255, 255, 255, 0.1); - cursor: pointer; - transition: all 0.3s; + width: 50px; + height: 2px; + background-color: #222; } -.activeDot { - background-color: var(--primary); - width: 120px; +@media (max-width: 1024px) { + .maskContainer { clip-path: none; } + .hudBrackets { padding: 0; } + .corner, .floatingMetric, .sideCoordinates { display: none; } + .content { text-align: center; margin: 0 auto; } + .ctaWrapper { justify-content: center; } + .ctaDecorator { display: none; } } @media (max-width: 1024px) { diff --git a/src/components/HomeHeroSlider.tsx b/src/components/HomeHeroSlider.tsx index 5657a36..6399886 100644 --- a/src/components/HomeHeroSlider.tsx +++ b/src/components/HomeHeroSlider.tsx @@ -52,28 +52,86 @@ export default function HomeHeroSlider() { initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} - transition={{ duration: 0.8 }} + transition={{ duration: 1.2 }} className={styles.slide} >
- {slides[current].title} +
+ {slides[current].title} +
+
+
+
+
+
+
+
+ + +
+ {slides[current].subtitle} +
+
+ CALIBRATED // 100% +
+
+ +

+ {slides[current].title.split(' ').map((word, i) => ( + {word} + ))} +

+ +

{slides[current].desc}

+ +
+ + EXPLORE SYSTEM + +
SYS_ADDR: 0xFD42 // DATA_CH: 01
+
+ +
+ + {/* FLOATING METRICS */} - {slides[current].subtitle} -

{slides[current].title}

-

{slides[current].desc}

- - EXPLORE SYSTEM - +
100HZ
+
DATA_RATE
 + + +
AES-256
+
SEC_ACTIVE
+ +
+ +
+
LAT: 52.2297° N
+
LON: 21.0122° E
+
V4.0 // STABLE
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index e90d67c..62941e2 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -51,7 +51,7 @@ export default function Navbar() { {/* Desktop Links */}
- ABOUT + ABOUT
PRODUCTS