implement About page and core UI components including Navbar and Contact section
This commit is contained in:
Alaguraj0361
parent
792a37cb10
commit
8cb0634936
BIN
public/about_hero.png
Normal file
BIN
public/about_hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
BIN
public/contact_hero.png
Normal file
BIN
public/contact_hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
@ -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; }
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
<main className={styles.main}>
|
||||
<Navbar />
|
||||
|
||||
{/* 1. INNER BANNER (UNIQUE HERO) */}
|
||||
{/* 1. ULTRA-CREATIVE HERO BANNER */}
|
||||
<section className={styles.hero}>
|
||||
<div className={styles.heroBg}>
|
||||
<Image
|
||||
src="/engine_bay.png"
|
||||
alt="Engineering Hub"
|
||||
src="/about_hero.png"
|
||||
alt="Engineering Lab"
|
||||
fill
|
||||
priority
|
||||
className={styles.bgImg}
|
||||
/>
|
||||
<div className={styles.heroOverlay}></div>
|
||||
<motion.div
|
||||
className={styles.scanLine}
|
||||
animate={{ top: ['0%', '100%', '0%'] }}
|
||||
transition={{ duration: 10, repeat: Infinity, ease: 'linear' }}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.container}>
|
||||
<motion.div
|
||||
className={styles.heroContent}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 1 }}
|
||||
>
|
||||
<span className={styles.label}>ESTABLISHED 2004</span>
|
||||
<h1 className={styles.title}>BEYOND TUNING. <br />WE <span className={styles.red}>ENGINEER</span> SOLUTIONS.</h1>
|
||||
<div className={styles.bracketGroup}>
|
||||
<span className={styles.label}>EST. 2004 // WARSAW LABS</span>
|
||||
<h1 className={styles.title}>
|
||||
WE ENGINEER <br />
|
||||
<span className={styles.outline}>PERFORMANCE</span> <br />
|
||||
<span className={styles.red}>INTELLIGENCE</span>
|
||||
</h1>
|
||||
</div>
|
||||
<p className={styles.desc}>
|
||||
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.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className={styles.heroStats}>
|
||||
<div className={styles.hStat}><span>UI_VER:</span> 4.0.2</div>
|
||||
<div className={styles.hStat}><span>HW_REV:</span> 4.3</div>
|
||||
<div className={styles.hStat}><span>STATUS:</span> ACTIVE</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 2. THE ENGINEERING STORY (UNIQUE LOOK) */}
|
||||
{/* 2. OVERLAPPING STORY SECTION WITH TECHNICAL LABELS */}
|
||||
<section className={styles.story}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.storyGrid}>
|
||||
<motion.div
|
||||
className={styles.storyText}
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<h2>OUR TECHNICAL <span className={styles.red}>LEGACY</span></h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<div className={styles.stats}>
|
||||
<div className={styles.statItem}>
|
||||
<strong>40+</strong>
|
||||
<span>COUNTRIES SUPPORTED</span>
|
||||
<div className={styles.sideLabel}>ENGINEERING DNA</div>
|
||||
|
||||
<motion.div
|
||||
className={styles.storyVisual}
|
||||
style={{ y: y1 }}
|
||||
>
|
||||
<div className={styles.imageStack}>
|
||||
<Image src="/blog_hardware.png" width={800} height={500} alt="Hardware Lab" className={styles.stackMain} />
|
||||
<div className={styles.stackBadge}>HARDWARE REV.4</div>
|
||||
|
||||
{/* TECHNICAL FLOATING LABELS */}
|
||||
<div className={`${styles.techLabel} ${styles.tl1}`}>
|
||||
<div className={styles.labelLine}></div>
|
||||
<span>MCU_CORE: ARM-CORTEX</span>
|
||||
</div>
|
||||
<div className={`${styles.techLabel} ${styles.tl2}`}>
|
||||
<div className={styles.labelLine}></div>
|
||||
<span>ISO_STABILITY: 100%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statItem}>
|
||||
<strong>100k+</strong>
|
||||
<span>LINE CODES WRITTEN</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className={styles.storyText}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
variants={variants}
|
||||
>
|
||||
<span className={styles.subLabel}>THE ARCHITECTURE</span>
|
||||
<h2>A LEGACY PRESERVED IN <span className={styles.red}>CODE</span></h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<div className={styles.statsRow}>
|
||||
<div className={styles.statBox}>
|
||||
<span className={styles.statNum}>40+</span>
|
||||
<span className={styles.statLab}>GLOBAL NODES</span>
|
||||
</div>
|
||||
<div className={styles.statBox}>
|
||||
<span className={styles.statNum}>100Hz</span>
|
||||
<span className={styles.statLab}>DA-LOGGING</span>
|
||||
</div>
|
||||
<div className={styles.statBox}>
|
||||
<span className={styles.statNum}>AES</span>
|
||||
<span className={styles.statLab}>ENCRYPTION</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statItem}>
|
||||
<strong>100Hz</strong>
|
||||
<span>DATALOGGING STANDARDS</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
className={styles.storyVisual}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<div className={styles.visualStack}>
|
||||
<Image src="/ecu_kpro.png" width={500} height={500} alt="ECU Engineering" className={styles.mainVisual} />
|
||||
<div className={styles.floatingTag}>REV.4 CORE</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 3. LABORATORY FOCUS (NEW SECTION) */}
|
||||
{/* 3. LABORATORY SUITE - BLUEPRINT STYLE */}
|
||||
<section className={styles.lab}>
|
||||
<div className={styles.container}>
|
||||
<motion.div
|
||||
className={styles.labHeader}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Cpu size={40} className={styles.redIcon} />
|
||||
<h2>THE <span className={styles.red}>LABORATORY</span></h2>
|
||||
<p>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.</p>
|
||||
<span className={styles.subLabel}>FACILITY OVERVIEW</span>
|
||||
<h2>THE <span className={styles.red}>TECHNICAL</span> SUITE</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className={styles.labGrid}>
|
||||
<div className={styles.labCard}>
|
||||
<div className={styles.labImgBox}>
|
||||
<Image src="https://images.unsplash.com/photo-1695653422718-97d25c1cb8ec?q=80&w=1200" fill alt="Lab 1" className={styles.labImg} />
|
||||
</div>
|
||||
<h3>PROTO-BOARDING</h3>
|
||||
<p>Rigorous multi-layer PCB testing for thermal stability and noise isolation.</p>
|
||||
</div>
|
||||
<div className={styles.labCard}>
|
||||
<div className={styles.labImgBox}>
|
||||
<Image src="https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=1200" fill alt="Lab 2" className={styles.labImg} />
|
||||
</div>
|
||||
<h3>FIRMWARE STABILITY</h3>
|
||||
<p>Real-time OKI/MCU emulation to eliminate communication lag.</p>
|
||||
</div>
|
||||
<div className={styles.labCard}>
|
||||
<div className={styles.labImgBox}>
|
||||
<Image src="https://images.unsplash.com/photo-1620288627223-53302f4e8c74?q=80&w=1200" fill alt="Lab 3" className={styles.labImg} />
|
||||
</div>
|
||||
<h3>CAN-BUS AUDITS</h3>
|
||||
<p>Ensuring 100% telemetry accuracy for diagnostic tools.</p>
|
||||
</div>
|
||||
<div className={styles.labCard}>
|
||||
<div className={styles.labImgWrapper}>
|
||||
<Image src="/blog_track.png" fill alt="Testing" className={styles.labImg} />
|
||||
<div className={styles.cardNumber}>01</div>
|
||||
</div>
|
||||
<div className={styles.labContent}>
|
||||
<div className={styles.labIconStrip}><Activity size={20} /> <Terminal size={14} /></div>
|
||||
<h3>PHYSICAL AUDITS</h3>
|
||||
<p>Thermal stability testing in simulated high-load environments up to 85°C ambient.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.labCard}>
|
||||
<div className={styles.labImgWrapper}>
|
||||
<Image src="/blog_can.png" fill alt="Firmware" className={styles.labImg} />
|
||||
<div className={styles.cardNumber}>02</div>
|
||||
</div>
|
||||
<div className={styles.labContent}>
|
||||
<div className={styles.labIconStrip}><Cpu size={20} /> <Layers size={14} /></div>
|
||||
<h3>FIRMWARE LAB</h3>
|
||||
<p>Low-level MCU programming for proprietary CAN-BUS bridge protocols.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.labCard}>
|
||||
<div className={styles.labImgWrapper}>
|
||||
<Image src="/contact_hero.png" fill alt="Quality" className={styles.labImg} />
|
||||
<div className={styles.cardNumber}>03</div>
|
||||
</div>
|
||||
<div className={styles.labContent}>
|
||||
<div className={styles.labIconStrip}><Shield size={20} /> <Zap size={14} /></div>
|
||||
<h3>QUALITY CONTROL</h3>
|
||||
<p>Each unit undergoes 18 unique signal continuity tests before regional dispatch.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 4. TIMELINE (NEW SECTION) */}
|
||||
<section className={styles.timelineSec}>
|
||||
<div className={styles.container}>
|
||||
<h2 className={styles.timelineTitle}>OUR <span className={styles.red}>JOURNEY</span></h2>
|
||||
<div className={styles.timeline}>
|
||||
{milestones.map((m, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className={styles.tlItem}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.1 }}
|
||||
>
|
||||
<span className={styles.tlYear}>{m.year}</span>
|
||||
<div className={styles.tlDot}></div>
|
||||
<h3>{m.title}</h3>
|
||||
<p>{m.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* 4. CIRCUIT-PATH TIMELINE (UNIQUE LOOK) */}
|
||||
<section className={styles.journey}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.journeyHeader}>
|
||||
<span className={styles.subLabel}>SYSTEM_EVOLUTION</span>
|
||||
<h2>THE <span className={styles.outline}>TIMELINE_NODES</span></h2>
|
||||
<div className={styles.circuitDecoration}>0x00A1 // 0x00F4</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.circuitTimeline}>
|
||||
{milestones.map((m, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className={`${styles.circuitNode} ${i % 2 === 0 ? styles.nodeLeft : styles.nodeRight}`}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.15 }}
|
||||
>
|
||||
<div className={styles.traceLine}></div>
|
||||
<div className={styles.chipBlock}>
|
||||
<div className={styles.chipHeader}>
|
||||
<span className={styles.chipRev}>REV_{m.year}</span>
|
||||
<Terminal size={14} className={styles.chipIcon} />
|
||||
</div>
|
||||
<div className={styles.chipBody}>
|
||||
<h3 className={styles.chipTitle}>{m.title}</h3>
|
||||
<p>{m.desc}</p>
|
||||
</div>
|
||||
<div className={styles.chipFooter}>
|
||||
<span>STATUS: VERIFIED</span>
|
||||
<span>CHK_SUM: {Math.random().toString(16).slice(2, 6).toUpperCase()}</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
{/* Decorative PCB Traces */}
|
||||
<div className={styles.pcbTrace1}></div>
|
||||
<div className={styles.pcbTrace2}></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 5. CTA SECTION */}
|
||||
{/* 5. MISSION CTA */}
|
||||
<section className={styles.cta}>
|
||||
<div className={styles.container}>
|
||||
<motion.div
|
||||
className={styles.ctaCard}
|
||||
className={styles.ctaSection}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<h2>READY TO UNLOCK YOUR ENGINE?</h2>
|
||||
<p>Our technical team is ready to support your next high-performance ECU upgrade.</p>
|
||||
<div className={styles.ctaActions}>
|
||||
<button className={styles.primaryBtn}>EXPLORE PRODUCTS <ChevronRight size={18} /></button>
|
||||
<button className={styles.secondaryBtn}>CONTACT SUPPORT</button>
|
||||
<div className={styles.ctaInner}>
|
||||
<div className={styles.ctaLabel}>TRANSMISSION_READY</div>
|
||||
<h2>ENGINEERING YOUR <span className={styles.red}>VICTORY</span></h2>
|
||||
<p>Are you ready to integrate the global standard in performance electronics into your build?</p>
|
||||
<div className={styles.ctaButtons}>
|
||||
<Link href="/products" className={styles.ctaMain}>
|
||||
ACCESS PROTOCOL <ChevronRight size={18} />
|
||||
</Link>
|
||||
<Link href="/contact" className={styles.ctaSecondary}>
|
||||
ESTABLISH CONTACT
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
@ -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; }
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
<section className={styles.section}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.header}>
|
||||
<motion.span
|
||||
className={styles.label}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
>
|
||||
GET IN TOUCH
|
||||
</motion.span>
|
||||
<motion.h2
|
||||
className={styles.title}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
>
|
||||
TECHNICAL <span className={styles.red}>SUPPORT</span> & SALES
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
className={styles.desc}
|
||||
{/* 1. CREATIVE INNER BANNER */}
|
||||
<div className={styles.hero}>
|
||||
<div className={styles.heroBg}>
|
||||
<Image
|
||||
src="/contact_hero.png"
|
||||
alt="Technical Hub"
|
||||
fill
|
||||
priority
|
||||
className={styles.bgImg}
|
||||
/>
|
||||
<div className={styles.heroOverlay}></div>
|
||||
</div>
|
||||
<div className={styles.container}>
|
||||
<motion.div
|
||||
className={styles.heroContent}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
Our specialized team is available for technical consultations, installation queries, and dealer network applications.
|
||||
</motion.p>
|
||||
<span className={styles.label}>ESTABLISHED 2004</span>
|
||||
<h1 className={styles.heroTitle}>TECHNICAL <br />SUPPORT <span className={styles.red}>HUB</span></h1>
|
||||
<p className={styles.heroDesc}>
|
||||
Our specialized team provides surgical-grade technical assistance for your ECU management and performance builds.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.grid}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.mainGrid}>
|
||||
{/* 2. CREATIVE INFO SECTION */}
|
||||
<motion.div
|
||||
className={styles.infoCol}
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<div className={styles.infoCard}>
|
||||
<div className={styles.infoIcon}><Mail size={24} /></div>
|
||||
<div className={styles.infoText}>
|
||||
<h4>EMAIL ENQUIRIES</h4>
|
||||
<p>support@hondavert.com</p>
|
||||
<p>sales@hondavert.com</p>
|
||||
<div className={styles.sideLabel}>COMMUNICATION LINE</div>
|
||||
|
||||
<div className={styles.infoGrid}>
|
||||
<div className={styles.infoBox}>
|
||||
<div className={styles.iconWrapper}><Mail size={20} /></div>
|
||||
<div className={styles.boxText}>
|
||||
<h4>EMAIL SYSTEMS</h4>
|
||||
<p>support@hondavert.com</p>
|
||||
<p>sales@hondavert.com</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.infoBox}>
|
||||
<div className={styles.iconWrapper}><Phone size={20} /></div>
|
||||
<div className={styles.boxText}>
|
||||
<h4>GLOBAL VOICE</h4>
|
||||
<p>+48 123 456 789 (EU)</p>
|
||||
<p>+1 800 555-JDM (US)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.infoBox}>
|
||||
<div className={styles.iconWrapper}><Clock size={20} /></div>
|
||||
<div className={styles.boxText}>
|
||||
<h4>LAB HOURS</h4>
|
||||
<p>MON - FRI: 09:00 - 18:00</p>
|
||||
<p>SAT: EMERGENCY ONLY</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.infoBox}>
|
||||
<div className={styles.iconWrapper}><Globe size={20} /></div>
|
||||
<div className={styles.boxText}>
|
||||
<h4>LOCATION</h4>
|
||||
<p>WARSAW HQ</p>
|
||||
<p>POLAND, EUROPE</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.infoCard}>
|
||||
<div className={styles.infoIcon}><Phone size={24} /></div>
|
||||
<div className={styles.infoText}>
|
||||
<h4>DIRECT LINE</h4>
|
||||
<p>+48 123 456 789 (EU Support)</p>
|
||||
<p>+1 (800) 555-JDM (US Support)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.infoCard}>
|
||||
<div className={styles.infoIcon}><Clock size={24} /></div>
|
||||
<div className={styles.infoText}>
|
||||
<h4>TECHNICAL HOURS</h4>
|
||||
<p>Mon - Fri: 09:00 - 18:00 (GMT+1)</p>
|
||||
<p>Saturday: Emergency Support Only</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.infoCard}>
|
||||
<div className={styles.infoIcon}><MapPin size={24} /></div>
|
||||
<div className={styles.infoText}>
|
||||
<h4>GLOBAL HUB</h4>
|
||||
<p>Precision Engineering HQ</p>
|
||||
<p>Warsaw, Poland. Europe</p>
|
||||
</div>
|
||||
<div className={styles.securityBox}>
|
||||
<Shield className={styles.shieldIcon} />
|
||||
<p>All technical data transmissions are secured using 256-bit industrial encryption standards.</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* 3. CREATIVE FORM SECTION */}
|
||||
<motion.div
|
||||
className={styles.formCol}
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<div className={styles.formHeader}>
|
||||
<h3>TRANSMIT <span className={styles.red}>DATA</span></h3>
|
||||
<p>Initialize a secure communication channel with our engineers.</p>
|
||||
</div>
|
||||
|
||||
<form className={styles.contactForm} onSubmit={(e) => e.preventDefault()}>
|
||||
<div className={styles.inputGroup}>
|
||||
<label>FULL NAME</label>
|
||||
<input type="text" placeholder="e.g. Mark Honda" />
|
||||
<div className={styles.formRow}>
|
||||
<div className={styles.inputBox}>
|
||||
<label>COMMANDER NAME</label>
|
||||
<input type="text" placeholder="ENTER FULL NAME" />
|
||||
<div className={styles.inputLine}></div>
|
||||
</div>
|
||||
<div className={styles.inputBox}>
|
||||
<label>EMAIL ADDRESS</label>
|
||||
<input type="email" placeholder="ENTER VALID EMAIL" />
|
||||
<div className={styles.inputLine}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.inputGroup}>
|
||||
<label>EMAIL ADDRESS</label>
|
||||
<input type="email" placeholder="mark@example.com" />
|
||||
</div>
|
||||
|
||||
<div className={styles.inputGroup}>
|
||||
<label>SUBJECT</label>
|
||||
<div className={styles.inputBox}>
|
||||
<label>SUBJECT PROTOCOL</label>
|
||||
<select>
|
||||
<option>Technical Support</option>
|
||||
<option>Hardware Installation</option>
|
||||
<option>Software Licensing</option>
|
||||
<option>Wholesale/Dealer Network</option>
|
||||
<option>TECHNICAL SUPPORT</option>
|
||||
<option>HARDWARE INSTALLATION</option>
|
||||
<option>SOFTWARE LICENSING</option>
|
||||
<option>DEALER APPLICATIONS</option>
|
||||
</select>
|
||||
<div className={styles.inputLine}></div>
|
||||
</div>
|
||||
|
||||
<div className={styles.inputGroup}>
|
||||
<label>MESSAGE</label>
|
||||
<textarea rows={5} placeholder="Explain your build or technical requirement..."></textarea>
|
||||
<div className={styles.inputBox}>
|
||||
<label>TECHNICAL MESSAGE</label>
|
||||
<textarea rows={6} placeholder="DESCRIBE YOUR SYSTEM OR TECHNICAL QUERY..."></textarea>
|
||||
<div className={styles.inputLine}></div>
|
||||
</div>
|
||||
|
||||
<button className={styles.submitBtn}>
|
||||
<span>TRANSMIT MESSAGE</span>
|
||||
<Send size={18} />
|
||||
</button>
|
||||
<div className={styles.buttonWrapper}>
|
||||
<button className={styles.submitBtn}>
|
||||
INITIATE TRANSMISSION <Send size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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}
|
||||
>
|
||||
<div className={styles.bgWrapper}>
|
||||
<Image src={slides[current].img} alt={slides[current].title} fill className={styles.bgImg} priority />
|
||||
<div className={styles.maskContainer}>
|
||||
<Image src={slides[current].img} alt={slides[current].title} fill className={styles.bgImg} priority />
|
||||
</div>
|
||||
<div className={styles.gridOverlay}></div>
|
||||
<motion.div
|
||||
className={styles.scanLine}
|
||||
animate={{ top: ['-10%', '110%'] }}
|
||||
transition={{ duration: 10, repeat: Infinity, ease: 'linear' }}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.overlay}></div>
|
||||
|
||||
<div className={styles.container}>
|
||||
<div className={styles.hudBrackets}>
|
||||
<div className={`${styles.corner} ${styles.topL}`}></div>
|
||||
<div className={`${styles.corner} ${styles.topR}`}></div>
|
||||
<div className={`${styles.corner} ${styles.botL}`}></div>
|
||||
<div className={`${styles.corner} ${styles.botR}`}></div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9, x: -30 }}
|
||||
animate={{ opacity: 1, scale: 1, x: 0 }}
|
||||
transition={{ duration: 1, delay: 0.2 }}
|
||||
className={styles.content}
|
||||
>
|
||||
<div className={styles.badgeLine}>
|
||||
<span className={styles.subtitle}>{slides[current].subtitle}</span>
|
||||
<div className={styles.statusIndicator}>
|
||||
<div className={styles.pulseDot}></div>
|
||||
<span>CALIBRATED // 100%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 className={styles.title}>
|
||||
{slides[current].title.split(' ').map((word, i) => (
|
||||
<span key={i} className={i % 2 !== 0 ? styles.outline : ''}>{word} </span>
|
||||
))}
|
||||
</h1>
|
||||
|
||||
<p className={styles.desc}>{slides[current].desc}</p>
|
||||
|
||||
<div className={styles.ctaWrapper}>
|
||||
<Link href={slides[current].link} className={styles.ctaBtn}>
|
||||
EXPLORE SYSTEM <Zap size={16} />
|
||||
</Link>
|
||||
<div className={styles.ctaDecorator}>SYS_ADDR: 0xFD42 // DATA_CH: 01</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* FLOATING METRICS */}
|
||||
<motion.div
|
||||
initial={{ y: 50, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ delay: 0.4 }}
|
||||
className={styles.content}
|
||||
className={styles.floatingMetric}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 1 }}
|
||||
>
|
||||
<span className={styles.subtitle}>{slides[current].subtitle}</span>
|
||||
<h1 className={styles.title}>{slides[current].title}</h1>
|
||||
<p className={styles.desc}>{slides[current].desc}</p>
|
||||
<Link href={slides[current].link} className={styles.ctaBtn}>
|
||||
EXPLORE SYSTEM <Zap size={18} />
|
||||
</Link>
|
||||
<div className={styles.metricVal}>100HZ</div>
|
||||
<div className={styles.metricLab}>DATA_RATE</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className={`${styles.floatingMetric} ${styles.m2}`}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 1.2 }}
|
||||
>
|
||||
<div className={styles.metricVal}>AES-256</div>
|
||||
<div className={styles.metricLab}>SEC_ACTIVE</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<div className={styles.sideCoordinates}>
|
||||
<div>LAT: 52.2297° N</div>
|
||||
<div>LON: 21.0122° E</div>
|
||||
<div className={styles.verTag}>V4.0 // STABLE</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
|
||||
@ -51,7 +51,7 @@ export default function Navbar() {
|
||||
|
||||
{/* Desktop Links */}
|
||||
<div className={styles.links}>
|
||||
<Link href="/about" className={pathname === '/about' ? styles.active : ''}>ABOUT</Link>
|
||||
<Link href="/about" className={isActive('/about') ? styles.active : ''}>ABOUT</Link>
|
||||
<div className={styles.navItemDropdown}>
|
||||
<Link href="/products" className={isActive('/products') ? styles.active : ''}>
|
||||
PRODUCTS <ChevronDown size={14} className={styles.chevron} />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user