diff --git a/public/s300_board.png b/public/s300_board.png new file mode 100644 index 0000000..a9c5627 Binary files /dev/null and b/public/s300_board.png differ diff --git a/src/app/blog/[slug]/PostPage.module.css b/src/app/blog/[slug]/PostPage.module.css new file mode 100644 index 0000000..12c039e --- /dev/null +++ b/src/app/blog/[slug]/PostPage.module.css @@ -0,0 +1,246 @@ +.main { + background-color: var(--neutral); + min-height: 100vh; +} + +.hero { + position: relative; + min-height: 80vh; + display: flex; + align-items: center; + padding: 100px 0; + overflow: hidden; +} + +.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(to bottom, transparent 40%, var(--neutral) 95%); +} + +.container { + max-width: 1200px; + width: 100%; + margin: 0 auto; + padding: 0 var(--container-padding); + position: relative; + z-index: 10; +} + +.heroContent { + max-width: 800px; +} + +.backBtn { + display: inline-flex; + align-items: center; + gap: 0.8rem; + font-size: 0.7rem; + font-weight: 900; + letter-spacing: 0.1rem; + color: var(--primary); + margin-bottom: 3.5rem; + transition: all 0.2s; +} + +.backBtn:hover { + color: #fff; + transform: translateX(-5px); +} + +.meta { + display: flex; + gap: 2rem; + margin-bottom: 3rem; +} + +.meta span { + display: flex; + align-items: center; + gap: 0.8rem; + font-size: 0.65rem; + font-weight: 800; + color: #555; + letter-spacing: 0.1rem; +} + +.meta span svg { + color: var(--primary); +} + +.title { + font-size: clamp(3rem, 6vw, 4.5rem); + font-weight: 900; + letter-spacing: -0.06em; + line-height: 1; + margin-bottom: 3.5rem; + text-transform: uppercase; +} + +.desc { + font-size: 1.25rem; + color: #999; + line-height: 1.6; + max-width: 700px; +} + +.contentSection { + padding: 100px 0; + background-color: var(--neutral); +} + +.contentGrid { + display: grid; + grid-template-columns: 1fr 320px; + gap: 8rem; +} + +.articleBody { + line-height: 1.8; + color: #888; +} + +.formattedText h2 { + font-size: 1.8rem; + font-weight: 900; + color: #fff; + letter-spacing: -0.03em; + margin-bottom: 2.5rem; + margin-top: 5rem; + text-transform: uppercase; + display: inline-block; +} + +.formattedText h2:first-child { + margin-top: 0; +} + +.formattedText h3 { + font-size: 1.1rem; + font-weight: 900; + color: var(--primary); + margin-bottom: 1.5rem; + margin-top: 3.5rem; + text-transform: uppercase; + letter-spacing: 0.1rem; +} + +.formattedText p { + margin-bottom: 2.5rem; + font-size: 1.1rem; +} + +.sidebarBox { + background-color: var(--secondary); + border: 1px solid var(--border); + padding: 2.5rem; + margin-bottom: 3rem; + border-top: 3px solid var(--primary); +} + +.sidebarBox h3 { + font-size: 0.85rem; + font-weight: 900; + letter-spacing: 0.1rem; + margin-bottom: 2rem; + color: #fff; +} + +.specItem { + display: flex; + justify-content: space-between; + padding-bottom: 1rem; + margin-bottom: 1rem; + border-bottom: 1px solid var(--border); +} + +.specItem span { + font-size: 0.6rem; + font-weight: 900; + color: #555; + letter-spacing: 0.1rem; +} + +.specItem strong { + font-size: 0.65rem; + font-weight: 800; + color: #fff; + font-family: monospace; +} + +.relatedBox h3 { + font-size: 0.85rem; + font-weight: 900; + letter-spacing: 0.1rem; + margin-bottom: 2.5rem; + color: #fff; + padding-left: 2.5rem; +} + +.relatedLink { + display: flex; + justify-content: space-between; + align-items: center; + padding: 2rem 2.5rem; + background-color: transparent; + border-bottom: 1px solid var(--border); + font-size: 0.85rem; + font-weight: 900; + letter-spacing: -0.01em; + color: #888; + transition: all 0.2s; +} + +.relatedLink:first-child { + border-top: 1px solid var(--border); +} + +.relatedLink:hover { + color: #fff; + background-color: rgba(255, 255, 255, 0.02); +} + +@media (max-width: 1024px) { + .contentGrid { grid-template-columns: 1fr; gap: 6rem; } + .sidebar { order: 2; } + .hero { min-height: 60vh; } +} + +@media (max-width: 768px) { + .title { font-size: 3rem; } + .meta { flex-direction: column; gap: 1rem; } + .formattedText h2 { font-size: 1.5rem; } +} + +.notFound { + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: var(--neutral); + color: #fff; + gap: 2rem; +} + +.notFound a { + color: var(--primary); + text-decoration: underline; + font-weight: 900; +} diff --git a/src/app/blog/[slug]/page.tsx b/src/app/blog/[slug]/page.tsx new file mode 100644 index 0000000..364634d --- /dev/null +++ b/src/app/blog/[slug]/page.tsx @@ -0,0 +1,107 @@ +'use client'; + +import { useParams } from 'next/navigation'; +import { blogPosts } from '@/lib/blog'; +import Navbar from '@/components/Navbar'; +import Footer from '@/components/Footer'; +import Image from 'next/image'; +import { motion } from 'framer-motion'; +import { Calendar, User, Clock, ChevronLeft } from 'lucide-react'; +import Link from 'next/link'; +import styles from './PostPage.module.css'; + +export default function BlogPostDetail() { + const params = useParams(); + const slug = params.slug as string; + const post = blogPosts.find((p) => p.slug === slug); + + if (!post) { + return ( +
+

POST NOT FOUND

+ RETURN TO HUB +
+ ); + } + + return ( +
+ + +
+
+ {post.title} +
+
+ +
+ + + BACK TO HUB + +
+ {post.date} + {post.author} + 5 MIN READ +
+

{post.title}

+

{post.desc}

+
+
+
+ +
+
+
+ +
') }} + /> + + + +
+
+
+ +
+ ); +} diff --git a/src/app/globals.css b/src/app/globals.css index eb74e78..c20609a 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -4,7 +4,7 @@ --secondary: #212121; --tertiary: #00808C; --neutral: #121212; - --background: #121212; + --background: #080808; --card-bg: #212121; --text-main: #FFFFFF; --text-muted: #A1A1A1; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index c60db24..3b7ccaf 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,6 @@ import type { Metadata } from "next"; import { Inter } from "next/font/google"; +import ScrollToTop from "@/components/ScrollToTop"; import "./globals.css"; const inter = Inter({ @@ -20,6 +21,7 @@ export default function RootLayout({ return ( + {children} diff --git a/src/components/About.module.css b/src/components/About.module.css index 260ad7e..2eadc9c 100644 --- a/src/components/About.module.css +++ b/src/components/About.module.css @@ -9,168 +9,248 @@ width: 100%; margin: 0 auto; padding: 0 var(--container-padding); + position: relative; +} + +.sideLabel { + position: absolute; + left: 0; + top: 50%; + transform: rotate(-90deg) translateX(-50%); + transform-origin: left top; + font-size: 0.65rem; + font-weight: 900; + letter-spacing: 0.6rem; + color: rgba(255, 255, 255, 0.05); + white-space: nowrap; + z-index: 0; + pointer-events: none; } .grid { display: grid; - grid-template-columns: 1fr 1.2fr; - gap: 10rem; + grid-template-columns: 1fr 1fr; + gap: 8rem; align-items: center; + position: relative; + z-index: 1; +} + +.labelWrapper { + display: flex; + align-items: center; + gap: 1.5rem; + margin-bottom: 2.5rem; +} + +.line { + width: 40px; + height: 1px; + background-color: var(--primary); } .label { font-size: 0.65rem; font-weight: 900; color: var(--primary); - letter-spacing: 0.15em; - margin-bottom: 2rem; - display: block; + letter-spacing: 0.2rem; } .title { - font-size: clamp(2rem, 4vw, 3.5rem); + font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 900; - line-height: 1; - letter-spacing: -0.05em; + line-height: 0.95; + letter-spacing: -0.06em; margin-bottom: 3.5rem; + text-transform: uppercase; +} + +.outline { + -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2); + color: transparent; +} + +.highlight { + color: var(--primary); + font-style: italic; + position: relative; +} + +.highlight::after { + content: ''; + position: absolute; + bottom: 5px; + left: 0; + width: 100%; + height: 8px; + background-color: rgba(255, 0, 0, 0.15); + z-index: -1; } .desc { font-size: 1.1rem; color: #888; line-height: 1.8; - margin-bottom: 4rem; + margin-bottom: 4.5rem; + max-width: 550px; } .stats { - display: flex; - flex-direction: column; + display: grid; + grid-template-columns: 1fr 1fr; gap: 3rem; - margin-bottom: 4rem; + margin-bottom: 4.5rem; + padding: 2.5rem; + background-color: rgba(255, 255, 255, 0.02); + border: 1px solid var(--border); + border-radius: 4px; } .statItem { display: flex; - gap: 2rem; + flex-direction: column; + gap: 1.5rem; } .statIcon { - width: 50px; - height: 50px; - background-color: var(--secondary); + width: 40px; + height: 40px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; - border-radius: 4px; color: var(--primary); + background-color: var(--secondary); } .statText h3 { - font-size: 0.85rem; + font-size: 0.75rem; font-weight: 900; - letter-spacing: 0.05em; + letter-spacing: 0.1rem; margin-bottom: 0.8rem; + color: #fff; } .statText p { - font-size: 0.85rem; + font-size: 0.8rem; color: #666; line-height: 1.6; } +.buttonWrapper { + position: relative; +} + .moreBtn { - background-color: transparent; - border: 1px solid var(--border); - padding: 1.2rem 2.8rem; + display: flex; + align-items: center; + gap: 2rem; + padding: 0; font-size: 0.75rem; font-weight: 900; - letter-spacing: 0.1em; + letter-spacing: 0.15rem; color: #fff; - border-radius: 4px; - transition: all 0.2s; + transition: all 0.3s; +} + +.btnArrow { + width: 40px; + height: 1px; + background-color: var(--primary); + position: relative; + transition: all 0.3s; +} + +.btnArrow::after { + content: ''; + position: absolute; + right: 0; + top: -3px; + width: 6px; + height: 6px; + border-right: 1px solid var(--primary); + border-top: 1px solid var(--primary); + transform: rotate(45deg); } .moreBtn:hover { - background-color: #fff; - color: #000; + color: var(--primary); +} + +.moreBtn:hover .btnArrow { + width: 60px; } .visual { position: relative; - padding-left: 5rem; } .imageOverlay { position: absolute; top: -2rem; - left: 0; - width: 300px; - height: 300px; - background-color: var(--primary); - opacity: 0.05; - z-index: 1; - border-radius: 50%; - filter: blur(80px); + right: -2rem; + width: 100%; + height: 100%; + border: 1px solid var(--primary); + opacity: 0.1; + z-index: -1; } .aboutImg { width: 100%; height: auto; - filter: saturate(0) brightness(0.7); - border-radius: 4px; + filter: saturate(0) brightness(0.6); + border-radius: 2px; } .founderBox { position: absolute; - bottom: -2rem; - left: 0; - max-width: 320px; - background-color: var(--secondary); + bottom: -3rem; + right: -3rem; + max-width: 300px; + background-color: #000; border: 1px solid var(--border); - padding: 3rem; - border-left: 4px solid var(--primary); + padding: 2.5rem; + z-index: 5; } .founderBox strong { - font-size: 0.65rem; + font-size: 0.6rem; font-weight: 900; color: var(--primary); display: block; margin-bottom: 1.2rem; - letter-spacing: 0.15rem; + letter-spacing: 0.2rem; } .founderBox p { - font-size: 0.95rem; + font-size: 0.9rem; color: #fff; font-style: italic; - font-family: serif; line-height: 1.6; } @media (max-width: 1200px) { .grid { gap: 5rem; } + .sideLabel { display: none; } } @media (max-width: 1024px) { .section { padding: 100px 0; } .grid { grid-template-columns: 1fr; gap: 6rem; } - .title { text-align: center; } - .desc { text-align: center; margin: 0 auto 4rem; } - .label { text-align: center; } - .visual { padding-left: 0; } + .title { text-align: left; } + .desc { text-align: left; } + .stats { grid-template-columns: 1fr; padding: 2rem; } .founderBox { position: relative; margin: 2rem auto 0; - left: 0; - text-align: center; - border-left: none; - border-top: 4px solid var(--primary); + right: 0; + bottom: 0; + max-width: none; } } @media (max-width: 768px) { - .statItem { flex-direction: column; align-items: center; text-align: center; gap: 1rem; } - .moreBtn { width: 100%; } + .title { font-size: 2.5rem; } + .statItem { flex-direction: row; align-items: flex-start; } } diff --git a/src/components/About.tsx b/src/components/About.tsx index e5bed28..44b2fad 100644 --- a/src/components/About.tsx +++ b/src/components/About.tsx @@ -2,6 +2,7 @@ import { motion } from 'framer-motion'; import Image from 'next/image'; +import Link from 'next/link'; import { Target, History, Globe } from 'lucide-react'; import styles from './About.module.css'; @@ -9,10 +10,17 @@ export default function About() { return (
+
ENGINEERING LEGACY
- ESTABLISHED 2004 -

PRECISION ENGINEERING FOR THE JDM COMMUNITY.

+
+ + ESTABLISHED 2004 +
+

+ PRECISION ENGINEERING
+ FOR THE JDM COMMUNITY. +

For over two decades, HondaVert has been at the forefront of aftermarket engine management solutions. Born from a passion for circuit racing and technical excellence, we develop hardware and software @@ -21,22 +29,26 @@ export default function About() {

-
+

OUR MISSION

-

To provide surgical-grade tuning tools that bridge the gap between amateur builds and professional racing teams.

+

Surgical-grade tuning tools that bridge the gap between amateur builds and pro racing.

-
+

GLOBAL NETWORK

-

Supported by a world-wide network of certified tuners and distributors across 40+ countries.

+

Supported by certified tuners across 40+ countries.

- +
+ + EXPLORE OUR HISTORY + +
diff --git a/src/components/Blog.module.css b/src/components/Blog.module.css index 6e0e6b4..98a0f37 100644 --- a/src/components/Blog.module.css +++ b/src/components/Blog.module.css @@ -52,7 +52,7 @@ .grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } diff --git a/src/components/Blog.tsx b/src/components/Blog.tsx index 4d72db5..2ea6d67 100644 --- a/src/components/Blog.tsx +++ b/src/components/Blog.tsx @@ -2,34 +2,12 @@ import { motion } from 'framer-motion'; import Image from 'next/image'; +import Link from 'next/link'; import { Calendar, User, ArrowRight } from 'lucide-react'; +import { blogPosts } from '@/lib/blog'; import styles from './Blog.module.css'; export default function Blog() { - const posts = [ - { - title: 'OPTIMIZING THE K-SERIES FOR TRACK USE', - desc: 'Technical insights into fuel and ignition management for circuit racing environments.', - date: 'MARCH 15, 2026', - author: 'MARK H.', - img: '/ecu_kpro.png' - }, - { - title: 'S300 V3 FIRMWARE UPDATE RELEASED', - desc: 'Exploring the new link stability improvements and telemetry protocols in the latest release.', - date: 'MARCH 10, 2026', - author: 'ADMIN', - img: '/hondavert_hud_telemetry_1774593564690.png' - }, - { - title: 'PRECISION TUNING: THE FUTURE OF FLASHING', - desc: 'A look into how CANFlash is changing the speed of development for modern ECU platforms.', - date: 'MARCH 02, 2026', - author: 'MARK H.', - img: '/engine_bay.png' - } - ]; - return (
@@ -38,11 +16,10 @@ export default function Blog() { LATEST NEWS

ENGINEERING HUB

-
- {posts.map((item, i) => ( + {blogPosts.map((item, i) => ( -
+ {item.title} -
+
@@ -65,11 +42,13 @@ export default function Blog() { {item.author}
-

{item.title}

+ +

{item.title}

+

{item.desc}

- +
))} diff --git a/src/components/HomeHeroSlider.tsx b/src/components/HomeHeroSlider.tsx index 99a5ac3..5657a36 100644 --- a/src/components/HomeHeroSlider.tsx +++ b/src/components/HomeHeroSlider.tsx @@ -3,6 +3,7 @@ import { useState, useEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import Image from 'next/image'; +import Link from 'next/link'; import { ChevronRight, ChevronLeft, Zap } from 'lucide-react'; import styles from './HomeHeroSlider.module.css'; @@ -25,7 +26,7 @@ const slides = [ title: 'S300 CORE', subtitle: 'LEGACY REDEFINED', desc: 'Professional grade engine management for OBD1 Honda ECUs. Real-time data logging and track-ready metrics.', - img: '/hondavert_map_sensor_1774593624455.png', + img: '/s300_board.png', link: '/products/s300' } ]; @@ -69,9 +70,9 @@ export default function HomeHeroSlider() { {slides[current].subtitle}

{slides[current].title}

{slides[current].desc}

- +
diff --git a/src/components/HomeProducts.module.css b/src/components/HomeProducts.module.css index 276e710..94fa73e 100644 --- a/src/components/HomeProducts.module.css +++ b/src/components/HomeProducts.module.css @@ -48,15 +48,16 @@ .grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - gap: 2rem; + grid-template-columns: repeat(3, 1fr); + gap: 2.5rem; } @media (max-width: 1024px) { - .grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } + .grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } } @media (max-width: 768px) { + .grid { grid-template-columns: 1fr; } .header { flex-direction: column; align-items: center; text-align: center; gap: 2rem; } .title { font-size: 2.5rem; text-align: center; } } diff --git a/src/components/ScrollToTop.module.css b/src/components/ScrollToTop.module.css new file mode 100644 index 0000000..5e09593 --- /dev/null +++ b/src/components/ScrollToTop.module.css @@ -0,0 +1,42 @@ +.button { + position: fixed; + bottom: 3rem; + right: 3rem; + width: 55px; + height: 55px; + background-color: var(--secondary); + border: 1px solid var(--border); + border-radius: 4px; /* Industrial squared-off look */ + color: #fff; + display: flex; + align-items: center; + justify-content: center; + z-index: 9999; + cursor: pointer; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); + transition: background-color 0.3s, border-color 0.3s; +} + +.button:hover { + border-color: var(--primary); +} + +.progressRing { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: 1px solid transparent; + pointer-events: none; + opacity: 0.1; +} + +@media (max-width: 768px) { + .button { + bottom: 2rem; + right: 2rem; + width: 45px; + height: 45px; + } +} diff --git a/src/components/ScrollToTop.tsx b/src/components/ScrollToTop.tsx new file mode 100644 index 0000000..bc93611 --- /dev/null +++ b/src/components/ScrollToTop.tsx @@ -0,0 +1,50 @@ +'use client'; + +import { useState, useEffect } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { ChevronUp } from 'lucide-react'; +import styles from './ScrollToTop.module.css'; + +export default function ScrollToTop() { + const [isVisible, setIsVisible] = useState(false); + + useEffect(() => { + const toggleVisibility = () => { + if (window.scrollY > 500) { + setIsVisible(true); + } else { + setIsVisible(false); + } + }; + + window.addEventListener('scroll', toggleVisibility); + return () => window.removeEventListener('scroll', toggleVisibility); + }, []); + + const scrollToTop = () => { + window.scrollTo({ + top: 0, + behavior: 'smooth', + }); + }; + + return ( + + {isVisible && ( + + +
+
+ )} +
+ ); +} diff --git a/src/components/Testimonials.module.css b/src/components/Testimonials.module.css index 7110202..d4ea9c6 100644 --- a/src/components/Testimonials.module.css +++ b/src/components/Testimonials.module.css @@ -8,10 +8,13 @@ width: 100%; margin: 0 auto; padding: 0 var(--container-padding); + overflow: hidden; } .header { - text-align: center; + display: flex; + justify-content: space-between; + align-items: flex-end; margin-bottom: 80px; } @@ -31,20 +34,42 @@ letter-spacing: -0.05em; } -.grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - gap: 3rem; +.nav { + display: flex; + gap: 1rem; } -@media (max-width: 1024px) { - .grid { gap: 2rem; } +.navBtn { + width: 50px; + height: 50px; + border-radius: 50%; + background-color: var(--secondary); + border: 1px solid var(--border); + color: #fff; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s; } -@media (max-width: 768px) { - .grid { grid-template-columns: 1fr; } - .card { padding: 3rem 2rem; } - .quote { font-size: 1rem; } +.navBtn:hover { + background-color: var(--primary); + border-color: var(--primary); +} + +.sliderWrapper { + width: 100%; + overflow: visible; +} + +.sliderTray { + display: flex; + width: 100%; +} + +.cardWrapper { + flex: 0 0 33.333%; + padding: 0 1rem; } .card { @@ -56,6 +81,21 @@ flex-direction: column; justify-content: space-between; transition: all 0.2s; + height: 100%; +} + +/* ... middle content ... */ + +@media (max-width: 1024px) { + .cardWrapper { flex: 0 0 50%; } + .header { flex-direction: column; align-items: center; text-align: center; gap: 2rem; } + .nav { display: none; } +} + +@media (max-width: 768px) { + .cardWrapper { flex: 0 0 100%; } + .card { padding: 3rem 2rem; } + .quote { font-size: 1rem; } } .card:hover { diff --git a/src/components/Testimonials.tsx b/src/components/Testimonials.tsx index bde2ab0..c153e2a 100644 --- a/src/components/Testimonials.tsx +++ b/src/components/Testimonials.tsx @@ -1,64 +1,119 @@ 'use client'; -import { motion } from 'framer-motion'; -import { Quote, Star } from 'lucide-react'; +import { useState, useEffect } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Quote, Star, ChevronLeft, ChevronRight } from 'lucide-react'; import styles from './Testimonials.module.css'; +const reviews = [ + { + name: 'ALEX R.', + role: 'TIME ATTACK DRIVER', + quote: 'Switched to HondaVert V4.0 last season. The data fidelity and zero-latency logging changed how we approach our setup. Unmatched precision.', + stars: 5, + }, + { + name: 'KEVIN L.', + role: 'MASTER TUNER', + quote: 'As a tuner, I need reliability. HondaVert consistently delivers hardware that doesn\'t crash, software that is intuitive, and support that actually knows their stuff.', + stars: 5, + }, + { + name: 'SARAH M.', + role: 'DRAG RACING SPECIALIST', + quote: 'From real-time telemetry to custom launch control, the S300 Core has been rock solid for my turbo setup. Highly recommend for any serious build.', + stars: 5, + }, + { + name: 'MARCO S.', + role: 'ENDURANCE RACER', + quote: 'Our testing revealed zero heat-soak issues with the Hondavert platform. It handles 12-hour sessions with perfect consistency.', + stars: 5, + }, + { + name: 'DAVID K.', + role: 'STREET TUNER', + quote: 'The Bluetooth integration makes mobile datalogging incredibly simple. I can diagnose issues without even opening my laptop.', + stars: 5, + }, + { + name: 'YUKI T.', + role: 'DRIFT MASTER', + quote: 'The rapid response of the 4BAR MAP sensor combined with KPro precision gives me the exact throttle response I need for high-angle transitions.', + stars: 5, + } +]; + export default function Testimonials() { - const reviews = [ - { - name: 'ALEX R.', - role: 'TIME ATTACK DRIVER', - quote: 'Switched to HondaVert V4.0 last season. The data fidelity and zero-latency logging changed how we approach our setup. Unmatched precision.', - stars: 5, - }, - { - name: 'KEVIN L.', - role: 'MASTER TUNER', - quote: 'As a tuner, I need reliability. HondaVert consistently delivers hardware that doesn\'t crash, software that is intuitive, and support that actually knows their stuff.', - stars: 5, - }, - { - name: 'SARAH M.', - role: 'DRAG RACING SPECIALIST', - quote: 'From real-time telemetry to custom launch control, the S300 Core has been rock solid for my turbo setup. Highly recommend for any serious build.', - stars: 5, - } - ]; + const [current, setCurrent] = useState(0); + const [isMobile, setIsMobile] = useState(false); + + useEffect(() => { + const checkMobile = () => { + setIsMobile(window.innerWidth < 768); + }; + checkMobile(); + window.addEventListener('resize', checkMobile); + return () => window.removeEventListener('resize', checkMobile); + }, []); + + useEffect(() => { + const timer = setInterval(() => { + const max = isMobile ? reviews.length - 1 : reviews.length - 3; + setCurrent((prev) => (prev >= max ? 0 : prev + 1)); + }, 5000); + return () => clearInterval(timer); + }, [isMobile]); + + const next = () => { + const max = isMobile ? reviews.length - 1 : reviews.length - 3; + setCurrent((prev) => (prev >= max ? 0 : prev + 1)); + }; + const prev = () => { + const max = isMobile ? reviews.length - 1 : reviews.length - 3; + setCurrent((prev) => (prev === 0 ? max : prev - 1)); + }; return (
- CLIENT FEEDBACK -

VOICES OF THE COMMUNITY

+
+ CLIENT FEEDBACK +

VOICES OF THE COMMUNITY

+
+
+ + +
-
- {reviews.map((item, i) => ( - -
- {[...Array(item.stars)].map((_, i) => ( - - ))} -
-
-

"{item.quote}"

-
-
- {item.name} - {item.role} -
-
-
- ))} +
+ + {reviews.map((item, i) => ( +
+
+
+ {[...Array(item.stars)].map((_, j) => ( + + ))} +
+
+

"{item.quote}"

+
+
+ {item.name} + {item.role} +
+
+
+
+ ))} +
diff --git a/src/components/WhyChooseUs.module.css b/src/components/WhyChooseUs.module.css index 2955254..2e29ff9 100644 --- a/src/components/WhyChooseUs.module.css +++ b/src/components/WhyChooseUs.module.css @@ -76,6 +76,32 @@ margin-bottom: 1rem; } +.ctaBox { + margin-top: 3rem; + padding: 2rem; + background-color: rgba(255, 255, 255, 0.02); + border: 1px solid var(--border); + border-radius: 4px; + display: flex; + justify-content: center; +} + +.ctaBtn { + display: flex; + align-items: center; + gap: 1.5rem; + color: var(--primary); + font-size: 0.75rem; + font-weight: 900; + letter-spacing: 0.15rem; + transition: all 0.3s; +} + +.ctaBtn:hover { + color: #fff; + transform: translateX(10px); +} + .cardContent p { font-size: 0.85rem; color: #666; diff --git a/src/components/WhyChooseUs.tsx b/src/components/WhyChooseUs.tsx index 56fc98f..21b7e03 100644 --- a/src/components/WhyChooseUs.tsx +++ b/src/components/WhyChooseUs.tsx @@ -1,7 +1,8 @@ 'use client'; import { motion } from 'framer-motion'; -import { ShieldCheck, Zap, Cpu, Award } from 'lucide-react'; +import Link from 'next/link'; +import { ShieldCheck, Zap, Cpu, Award, ChevronRight } from 'lucide-react'; import styles from './WhyChooseUs.module.css'; export default function WhyChooseUs() { @@ -57,6 +58,18 @@ export default function WhyChooseUs() {
))} + + + + EXPLORE ALL SYSTEMS + +
diff --git a/src/lib/blog.ts b/src/lib/blog.ts new file mode 100644 index 0000000..c78b50c --- /dev/null +++ b/src/lib/blog.ts @@ -0,0 +1,66 @@ +export interface BlogPost { + slug: string; + title: string; + desc: string; + date: string; + author: string; + img: string; + content: string; +} + +export const blogPosts: BlogPost[] = [ + { + slug: 'optimizing-k-series-track', + title: 'OPTIMIZING THE K-SERIES FOR TRACK USE', + desc: 'Technical insights into fuel and ignition management for circuit racing environments.', + date: 'MARCH 15, 2026', + author: 'MARK H.', + img: '/ecu_kpro.png', + content: ` + ## TRACK-READY CALIBRATION + Circuit racing demands more than just peak power. Sustained high-RPM loads and extreme lateral Gs require a calibration strategy focused on reliability and smooth power delivery. + + ### THERMAL MANAGEMENT + One of the critical factors we address in our Rev.4 firmware is the intelligent thermal trimming. By monitoring coolant and intake temperatures at 100Hz, our boards can make micro-adjustments to the ignition timing to prevent detonation during late-lap heat soak. + + ### STABILITY UNDER LOAD + Real-time data logging revealed that voltage drops during hard cornering can affect injector latency. HondaVert's proprietary hardware features improved power conditioning to stabilize these fluctuations, ensuring your AFR stays exactly where it belongs. + ` + }, + { + slug: 's300-v3-firmware-update', + title: 'S300 V3 FIRMWARE UPDATE RELEASED', + desc: 'Exploring the new link stability improvements and telemetry protocols in the latest release.', + date: 'MARCH 10, 2026', + author: 'ADMIN', + img: '/hud_telemetry.png', + content: ` + ## S300 EVOLUTION + The latest V3 firmware for the S300 Core daughterboard brings professional-grade telemetry to the OBD1 platform. + + ### USB STABILITY + We have completely rewritten the USB stack to improve connection speed by 40% when using modern Windows 11 environments. This eliminates the 'COM Port Busy' errors frequently seen with legacy hardware. + + ### BLUETOOTH LOW LATENCY + For Rev.3 board owners, the new firmware optimizes the Bluetooth data stream, allowing for real-time dashboard updates on mobile devices with virtually zero lag. This is critical for monitoring vitals during a drag pass. + ` + }, + { + slug: 'precision-tuning-future-flashing', + title: 'PRECISION TUNING: THE FUTURE OF FLASHING', + desc: 'A look into how CANFlash is changing the speed of development for modern ECU platforms.', + date: 'MARCH 02, 2026', + author: 'MARK H.', + img: '/engine_bay.png', + content: ` + ## THE CAN-BUS REVOLUTION + Traditional OBDII flashing has been slow and prone to failure if the connection is interrupted. CANFlash utilizes high-speed CAN-FD protocols to increase data throughput by 5x compared to standard K-Line protocols. + + ### ENCRYPTION AND SECURITY + Modern Bosch and Keihin ECUs require advanced security handshakes. Our CANFlash interface handles these handshakes locally, reducing the risk of a 'bricked' ECU during the write process. + + ### MOBILE DEVELOPMENT + With the rise of mobile tuning apps, CANFlash provides a standardized bridge for developers to build safe and fast flashing tools that run directly from a smartphone or tablet. + ` + } +];