1230 lines
37 KiB
HTML
1230 lines
37 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Powder Coating Logix — Shop Management, Reimagined</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300&family=Barlow+Condensed:wght@400;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
--black: #0a0a0a;
|
|
--dark: #111214;
|
|
--card: #161819;
|
|
--border: #2a2d30;
|
|
--orange: #f95d00;
|
|
--orange-dim: #c44800;
|
|
--orange-glow: rgba(249,93,0,0.18);
|
|
--white: #f2f0ec;
|
|
--muted: #7a7d82;
|
|
--text: #c8c5bf;
|
|
--font-display: 'Bebas Neue', sans-serif;
|
|
--font-body: 'Barlow', sans-serif;
|
|
--font-cond: 'Barlow Condensed', sans-serif;
|
|
}
|
|
|
|
html { scroll-behavior: smooth; }
|
|
|
|
body {
|
|
background: var(--black);
|
|
color: var(--text);
|
|
font-family: var(--font-body);
|
|
font-weight: 300;
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* ─── NOISE OVERLAY ─── */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
|
|
opacity: 0.03;
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
}
|
|
|
|
/* ─── NAV ─── */
|
|
nav {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0;
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 4rem;
|
|
background: rgba(10,10,10,0.85);
|
|
backdrop-filter: blur(14px);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.logo {
|
|
font-family: var(--font-display);
|
|
font-size: 1.55rem;
|
|
letter-spacing: 0.06em;
|
|
color: var(--white);
|
|
}
|
|
.logo img {
|
|
height: 125px;
|
|
width: auto;
|
|
display: block;
|
|
}
|
|
.logo span { color: var(--orange); }
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 2.5rem;
|
|
list-style: none;
|
|
font-family: var(--font-cond);
|
|
font-size: 0.9rem;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
}
|
|
.nav-links a {
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
transition: color 0.2s;
|
|
}
|
|
.nav-links a:hover { color: var(--orange); }
|
|
|
|
.nav-cta {
|
|
background: var(--orange);
|
|
color: #fff;
|
|
font-family: var(--font-cond);
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
font-size: 0.85rem;
|
|
padding: 0.65rem 1.6rem;
|
|
border: none;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition: background 0.2s, transform 0.15s;
|
|
clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
|
|
}
|
|
.nav-cta:hover { background: var(--orange-dim); transform: translateY(-1px); }
|
|
|
|
.nav-login {
|
|
color: var(--muted);
|
|
font-family: var(--font-cond);
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
font-size: 0.85rem;
|
|
padding: 0.65rem 1.2rem;
|
|
border: 1px solid var(--border);
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition: color 0.2s, border-color 0.2s;
|
|
}
|
|
.nav-login:hover { color: var(--white); border-color: var(--muted); }
|
|
|
|
.nav-actions { display: flex; align-items: center; gap: 0.75rem; }
|
|
|
|
/* ─── HERO ─── */
|
|
.hero {
|
|
min-height: 100vh;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: auto;
|
|
align-items: center;
|
|
column-gap: 4rem;
|
|
padding: 10rem 4rem 6rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
grid-column: 1;
|
|
}
|
|
|
|
.hero-video-wrap {
|
|
grid-column: 2;
|
|
grid-row: 1 / 3;
|
|
position: relative;
|
|
border: 1px solid var(--border);
|
|
overflow: hidden;
|
|
box-shadow: 0 0 80px rgba(249,93,0,0.12);
|
|
}
|
|
.hero-video-wrap::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border: 1px solid rgba(249,93,0,0.2);
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
.hero-video-wrap video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.hero-stats {
|
|
grid-column: 1;
|
|
}
|
|
|
|
.hero-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(ellipse 60% 50% at 70% 50%, rgba(249,93,0,0.12) 0%, transparent 70%),
|
|
radial-gradient(ellipse 40% 60% at 20% 80%, rgba(249,93,0,0.06) 0%, transparent 60%);
|
|
}
|
|
|
|
.hero-grid {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(var(--border) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--border) 1px, transparent 1px);
|
|
background-size: 60px 60px;
|
|
opacity: 0.25;
|
|
mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
|
|
}
|
|
|
|
.hero-tag {
|
|
font-family: var(--font-cond);
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--orange);
|
|
margin-bottom: 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
animation: fadeUp 0.8s ease both;
|
|
}
|
|
.hero-tag::before {
|
|
content: '';
|
|
display: block;
|
|
width: 32px;
|
|
height: 2px;
|
|
background: var(--orange);
|
|
}
|
|
|
|
.hero-title {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(4rem, 9vw, 9rem);
|
|
line-height: 0.92;
|
|
letter-spacing: 0.02em;
|
|
color: var(--white);
|
|
max-width: 900px;
|
|
animation: fadeUp 0.8s 0.15s ease both;
|
|
}
|
|
.hero-title em {
|
|
font-style: normal;
|
|
color: var(--orange);
|
|
position: relative;
|
|
}
|
|
|
|
.hero-sub {
|
|
margin-top: 2rem;
|
|
font-size: 1.2rem;
|
|
font-weight: 300;
|
|
color: var(--text);
|
|
max-width: 520px;
|
|
line-height: 1.7;
|
|
animation: fadeUp 0.8s 0.3s ease both;
|
|
}
|
|
|
|
.hero-actions {
|
|
margin-top: 3rem;
|
|
display: flex;
|
|
gap: 1.2rem;
|
|
align-items: center;
|
|
animation: fadeUp 0.8s 0.45s ease both;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--orange);
|
|
color: #fff;
|
|
font-family: var(--font-cond);
|
|
font-weight: 700;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
font-size: 0.95rem;
|
|
padding: 1rem 2.5rem;
|
|
border: none;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
transition: all 0.2s;
|
|
clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
|
|
box-shadow: 0 0 40px rgba(249,93,0,0.35);
|
|
}
|
|
.btn-primary:hover {
|
|
background: var(--orange-dim);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 0 60px rgba(249,93,0,0.5);
|
|
}
|
|
|
|
.btn-ghost {
|
|
color: var(--white);
|
|
font-family: var(--font-cond);
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
font-size: 0.9rem;
|
|
padding: 1rem 2rem;
|
|
border: 1px solid var(--border);
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
transition: all 0.2s;
|
|
background: transparent;
|
|
}
|
|
.btn-ghost:hover { border-color: var(--orange); color: var(--orange); }
|
|
|
|
.hero-stats {
|
|
margin-top: 5rem;
|
|
display: flex;
|
|
gap: 4rem;
|
|
animation: fadeUp 0.8s 0.6s ease both;
|
|
}
|
|
.stat-item { }
|
|
.stat-num {
|
|
font-family: var(--font-display);
|
|
font-size: 2.8rem;
|
|
color: var(--white);
|
|
line-height: 1;
|
|
}
|
|
.stat-num span { color: var(--orange); }
|
|
.stat-label {
|
|
font-family: var(--font-cond);
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
margin-top: 0.3rem;
|
|
}
|
|
|
|
/* ─── SECTION SHARED ─── */
|
|
section { padding: 7rem 4rem; }
|
|
|
|
.section-tag {
|
|
font-family: var(--font-cond);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
color: var(--orange);
|
|
margin-bottom: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
}
|
|
.section-tag::before {
|
|
content: '';
|
|
display: block;
|
|
width: 20px;
|
|
height: 2px;
|
|
background: var(--orange);
|
|
}
|
|
|
|
.section-title {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(2.8rem, 5vw, 5rem);
|
|
letter-spacing: 0.03em;
|
|
color: var(--white);
|
|
line-height: 0.95;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.section-body {
|
|
font-size: 1.05rem;
|
|
color: var(--text);
|
|
max-width: 520px;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
/* ─── FEATURES ─── */
|
|
#features { background: var(--dark); }
|
|
|
|
.features-intro {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 4rem;
|
|
align-items: end;
|
|
margin-bottom: 5rem;
|
|
}
|
|
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1.5px;
|
|
background: var(--border);
|
|
}
|
|
|
|
.feature-card {
|
|
background: var(--card);
|
|
padding: 2.5rem 2rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: background 0.3s;
|
|
}
|
|
.feature-card::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0; left: 0; right: 0;
|
|
height: 2px;
|
|
background: var(--orange);
|
|
transform: scaleX(0);
|
|
transition: transform 0.3s;
|
|
}
|
|
.feature-card:hover { background: #1a1c1e; }
|
|
.feature-card:hover::after { transform: scaleX(1); }
|
|
|
|
.feature-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
background: var(--orange-glow);
|
|
border: 1px solid rgba(249,93,0,0.3);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 1.5rem;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.feature-name {
|
|
font-family: var(--font-cond);
|
|
font-size: 1.05rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--white);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.feature-desc {
|
|
font-size: 0.92rem;
|
|
color: var(--muted);
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.feature-screenshot {
|
|
margin-top: 1.5rem;
|
|
border: 1px solid var(--border);
|
|
overflow: hidden;
|
|
height: 140px;
|
|
position: relative;
|
|
}
|
|
.feature-screenshot img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: top left;
|
|
opacity: 0.55;
|
|
transition: opacity 0.35s, transform 0.4s;
|
|
display: block;
|
|
}
|
|
.feature-card:hover .feature-screenshot img {
|
|
opacity: 1;
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
.feature-num {
|
|
position: absolute;
|
|
top: 1.5rem;
|
|
right: 1.5rem;
|
|
font-family: var(--font-display);
|
|
font-size: 3rem;
|
|
color: rgba(249,93,0,0.06);
|
|
line-height: 1;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
/* ─── HOW IT WORKS ─── */
|
|
#how {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.steps-wrap {
|
|
display: grid;
|
|
grid-template-columns: 1fr 2fr;
|
|
gap: 6rem;
|
|
align-items: start;
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
.steps-list { display: flex; flex-direction: column; gap: 0; }
|
|
|
|
.step {
|
|
padding: 2rem 0;
|
|
border-top: 1px solid var(--border);
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
position: relative;
|
|
}
|
|
.step:last-child { border-bottom: 1px solid var(--border); }
|
|
.step.active::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -4rem;
|
|
top: 0; bottom: 0;
|
|
width: 3px;
|
|
background: var(--orange);
|
|
}
|
|
|
|
.step-num {
|
|
font-family: var(--font-display);
|
|
font-size: 1.8rem;
|
|
color: var(--border);
|
|
line-height: 1;
|
|
transition: color 0.2s;
|
|
min-width: 2.5rem;
|
|
}
|
|
.step.active .step-num { color: var(--orange); }
|
|
|
|
.step-text h3 {
|
|
font-family: var(--font-cond);
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
margin-bottom: 0.5rem;
|
|
transition: color 0.2s;
|
|
}
|
|
.step.active h3 { color: var(--white); }
|
|
|
|
.step-text p {
|
|
font-size: 0.9rem;
|
|
color: var(--muted);
|
|
line-height: 1.6;
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.4s ease, opacity 0.3s;
|
|
opacity: 0;
|
|
}
|
|
.step.active p { max-height: 100px; opacity: 1; }
|
|
|
|
.step-visual {
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
aspect-ratio: 4/3;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mock-screen {
|
|
width: 85%;
|
|
height: 80%;
|
|
position: relative;
|
|
}
|
|
|
|
.step-screenshot {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: top left;
|
|
display: block;
|
|
transition: opacity 0.35s ease;
|
|
}
|
|
|
|
/* ─── TESTIMONIALS ─── */
|
|
#testimonials { background: var(--dark); }
|
|
|
|
.testimonials-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1.5px;
|
|
background: var(--border);
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
.testimonial {
|
|
background: var(--card);
|
|
padding: 2.5rem 2rem;
|
|
position: relative;
|
|
}
|
|
|
|
.quote-mark {
|
|
font-family: var(--font-display);
|
|
font-size: 5rem;
|
|
line-height: 0.7;
|
|
color: var(--orange);
|
|
opacity: 0.3;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.testimonial-text {
|
|
font-size: 0.98rem;
|
|
color: var(--text);
|
|
line-height: 1.75;
|
|
font-style: italic;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.testimonial-author {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.author-avatar {
|
|
width: 42px;
|
|
height: 42px;
|
|
background: var(--orange-glow);
|
|
border: 1px solid rgba(249,93,0,0.35);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: var(--font-display);
|
|
font-size: 1.1rem;
|
|
color: var(--orange);
|
|
}
|
|
|
|
.author-name {
|
|
font-family: var(--font-cond);
|
|
font-weight: 700;
|
|
font-size: 0.9rem;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--white);
|
|
}
|
|
.author-title {
|
|
font-size: 0.78rem;
|
|
color: var(--muted);
|
|
margin-top: 0.15rem;
|
|
}
|
|
|
|
.stars {
|
|
position: absolute;
|
|
top: 1.75rem;
|
|
right: 1.75rem;
|
|
color: var(--orange);
|
|
font-size: 0.75rem;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
/* ─── PRICING ─── */
|
|
#pricing { }
|
|
|
|
.pricing-header {
|
|
text-align: center;
|
|
max-width: 600px;
|
|
margin: 0 auto 4rem;
|
|
}
|
|
.pricing-header .section-tag { justify-content: center; }
|
|
.pricing-header .section-tag::before { display: none; }
|
|
|
|
.pricing-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 1.5px;
|
|
background: var(--border);
|
|
}
|
|
|
|
.pricing-card {
|
|
background: var(--card);
|
|
padding: 2.5rem 2rem;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: background 0.2s;
|
|
}
|
|
.pricing-card:hover { background: #1a1c1e; }
|
|
.pricing-card.featured {
|
|
background: #16191c;
|
|
border-top: 3px solid var(--orange);
|
|
margin-top: -3px;
|
|
}
|
|
|
|
.plan-badge {
|
|
position: absolute;
|
|
top: -1px; right: 1.5rem;
|
|
background: var(--orange);
|
|
color: #fff;
|
|
font-family: var(--font-cond);
|
|
font-size: 0.65rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
padding: 0.25rem 0.7rem;
|
|
}
|
|
|
|
.plan-name {
|
|
font-family: var(--font-cond);
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.plan-price {
|
|
font-family: var(--font-display);
|
|
font-size: 3.5rem;
|
|
color: var(--white);
|
|
line-height: 1;
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
.plan-price sup {
|
|
font-family: var(--font-cond);
|
|
font-size: 1.2rem;
|
|
vertical-align: super;
|
|
font-weight: 600;
|
|
}
|
|
.plan-period {
|
|
font-size: 0.8rem;
|
|
color: var(--muted);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.plan-divider {
|
|
height: 1px;
|
|
background: var(--border);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.plan-features {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.7rem;
|
|
flex: 1;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.plan-features li {
|
|
font-size: 0.88rem;
|
|
color: var(--text);
|
|
display: flex;
|
|
gap: 0.6rem;
|
|
align-items: flex-start;
|
|
}
|
|
.plan-features li::before {
|
|
content: '▸';
|
|
color: var(--orange);
|
|
font-size: 0.7rem;
|
|
margin-top: 0.18rem;
|
|
flex-shrink: 0;
|
|
}
|
|
.plan-features li.muted { color: var(--muted); }
|
|
.plan-features li.muted::before { color: var(--border); }
|
|
|
|
.plan-btn {
|
|
display: block;
|
|
text-align: center;
|
|
font-family: var(--font-cond);
|
|
font-weight: 700;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
font-size: 0.85rem;
|
|
padding: 0.85rem;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
border: 1px solid var(--border);
|
|
color: var(--white);
|
|
transition: all 0.2s;
|
|
background: transparent;
|
|
}
|
|
.plan-btn:hover, .featured .plan-btn {
|
|
background: var(--orange);
|
|
border-color: var(--orange);
|
|
color: #fff;
|
|
}
|
|
|
|
/* ─── FAQ ─── */
|
|
#faq { background: var(--dark); }
|
|
|
|
.faq-wrap {
|
|
display: grid;
|
|
grid-template-columns: 1fr 2fr;
|
|
gap: 6rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.faq-list { display: flex; flex-direction: column; }
|
|
|
|
.faq-item {
|
|
border-top: 1px solid var(--border);
|
|
padding: 1.5rem 0;
|
|
cursor: pointer;
|
|
}
|
|
.faq-item:last-child { border-bottom: 1px solid var(--border); }
|
|
|
|
.faq-q {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
font-family: var(--font-cond);
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
color: var(--white);
|
|
}
|
|
|
|
.faq-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
border: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--orange);
|
|
font-size: 1rem;
|
|
flex-shrink: 0;
|
|
transition: transform 0.3s;
|
|
}
|
|
.faq-item.open .faq-icon { transform: rotate(45deg); }
|
|
|
|
.faq-a {
|
|
font-size: 0.92rem;
|
|
color: var(--muted);
|
|
line-height: 1.7;
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.4s ease, padding 0.3s;
|
|
padding-top: 0;
|
|
}
|
|
.faq-item.open .faq-a { max-height: 200px; padding-top: 1rem; }
|
|
|
|
/* ─── CTA ─── */
|
|
#cta {
|
|
background: var(--dark);
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: 9rem 4rem;
|
|
}
|
|
|
|
#cta .bg-glow {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(249,93,0,0.12) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
#cta .section-title { font-size: clamp(3rem, 6vw, 6.5rem); max-width: 800px; margin: 0 auto 1.5rem; }
|
|
#cta .section-body { margin: 0 auto 3rem; text-align: center; }
|
|
|
|
/* ─── FOOTER ─── */
|
|
footer {
|
|
border-top: 1px solid var(--border);
|
|
padding: 3rem 4rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.footer-logo {
|
|
font-family: var(--font-display);
|
|
font-size: 1.2rem;
|
|
letter-spacing: 0.06em;
|
|
color: var(--white);
|
|
}
|
|
.footer-logo span { color: var(--orange); }
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
gap: 2rem;
|
|
list-style: none;
|
|
font-family: var(--font-cond);
|
|
font-size: 0.78rem;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
}
|
|
.footer-links a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
|
|
.footer-links a:hover { color: var(--orange); }
|
|
|
|
.footer-copy {
|
|
font-size: 0.78rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
/* ─── ANIMATIONS ─── */
|
|
@keyframes fadeUp {
|
|
from { opacity: 0; transform: translateY(24px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(28px);
|
|
transition: opacity 0.7s ease, transform 0.7s ease;
|
|
}
|
|
.reveal.visible { opacity: 1; transform: translateY(0); }
|
|
|
|
/* ─── RESPONSIVE ─── */
|
|
@media (max-width: 1024px) {
|
|
nav { padding: 1.2rem 2rem; }
|
|
.nav-links { display: none; }
|
|
section { padding: 5rem 2rem; }
|
|
.hero {
|
|
grid-template-columns: 1fr;
|
|
padding: 9rem 2rem 5rem;
|
|
}
|
|
.hero-content { grid-column: 1; }
|
|
.hero-video-wrap { grid-column: 1; grid-row: auto; margin-top: 2.5rem; }
|
|
.hero-stats { grid-column: 1; }
|
|
.features-intro { grid-template-columns: 1fr; }
|
|
.features-grid { grid-template-columns: 1fr 1fr; }
|
|
.pricing-grid { grid-template-columns: 1fr 1fr; }
|
|
.testimonials-grid { grid-template-columns: 1fr; }
|
|
.faq-wrap { grid-template-columns: 1fr; gap: 2rem; }
|
|
.steps-wrap { grid-template-columns: 1fr; }
|
|
.step-visual { display: none; }
|
|
footer { flex-direction: column; gap: 1.5rem; text-align: center; }
|
|
.hero-stats { gap: 2rem; flex-wrap: wrap; }
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.features-grid { grid-template-columns: 1fr; }
|
|
.pricing-grid { grid-template-columns: 1fr; }
|
|
.hero-actions { flex-direction: column; align-items: flex-start; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- NAV -->
|
|
<nav>
|
|
<div class="logo"><img src="images/PCL_Logo.gif" alt="PCL Logo" /></div>
|
|
<ul class="nav-links">
|
|
<li><a href="#features">Features</a></li>
|
|
<li><a href="#how">How It Works</a></li>
|
|
<li><a href="#pricing">Pricing</a></li>
|
|
<li><a href="#faq">FAQ</a></li>
|
|
</ul>
|
|
<div class="nav-actions">
|
|
<a href="https://app.powdercoatinglogix.com" target="_blank" rel="noopener" class="nav-login">Login</a>
|
|
<a href="https://app.powdercoatinglogix.com/Registration" target="_blank" rel="noopener" class="nav-cta">Start Free Trial</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- HERO -->
|
|
<section class="hero" id="home">
|
|
<div class="hero-bg"></div>
|
|
<div class="hero-grid"></div>
|
|
<div class="hero-content">
|
|
<div class="hero-tag">The All-In-One Shop Management Platform</div>
|
|
<h1 class="hero-title">Run Your Shop.<br><em>Own Your Results.</em></h1>
|
|
<p class="hero-sub">Powder Coating Logix is purpose-built for powder coating shops — not adapted from generic software. AI photo quoting, a 16-stage job workflow, real-time scheduling, inventory tracking, and full accounting, all in one platform designed around how your shop actually works.</p>
|
|
<div class="hero-actions">
|
|
<a href="https://app.powdercoatinglogix.com/Registration" target="_blank" rel="noopener" class="btn-primary">Start Free Trial</a>
|
|
<a href="#how" class="btn-ghost">See How It Works</a>
|
|
</div>
|
|
</div>
|
|
<div class="hero-video-wrap">
|
|
<video autoplay muted loop playsinline>
|
|
<source src="video/IntroVideo.mp4" type="video/mp4">
|
|
</video>
|
|
</div>
|
|
<div class="hero-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-num">3<span>x</span></div>
|
|
<div class="stat-label">Faster Quoting</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-num">40<span>%</span></div>
|
|
<div class="stat-label">Less Admin Time</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-num">14<span>day</span></div>
|
|
<div class="stat-label">Free Trial</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-num">99<span>%</span></div>
|
|
<div class="stat-label">Uptime SLA</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FEATURES -->
|
|
<section id="features">
|
|
<div class="features-intro">
|
|
<div>
|
|
<div class="section-tag">Everything You Need</div>
|
|
<h2 class="section-title">Built For<br>The Booth,<br>Not The<br>Boardroom.</h2>
|
|
</div>
|
|
<p class="section-body">Every feature in Powder Coating Logix was designed around one type of business — yours. AI-powered quoting, a workflow built around your actual stages, inventory that tracks powder by the pound, and accounting that doesn't require a CPA. No bloat. No workarounds. Just the tools your shop actually needs.</p>
|
|
</div>
|
|
<div class="features-grid">
|
|
<div class="feature-card reveal">
|
|
<div class="feature-num">01</div>
|
|
<div class="feature-icon">📸</div>
|
|
<div class="feature-name">AI Photo Quoting</div>
|
|
<p class="feature-desc">Snap a photo of any part and our AI instantly estimates surface area, complexity, and a recommended price. What used to take 20 minutes of back-and-forth now takes seconds — and impresses customers every time.</p>
|
|
<div class="feature-screenshot"><img src="images/screenshots/AI Photo Quote3.png" alt="AI Photo Quoting" /></div>
|
|
</div>
|
|
<div class="feature-card reveal">
|
|
<div class="feature-num">02</div>
|
|
<div class="feature-icon">🗂️</div>
|
|
<div class="feature-name">Customizable Job Tracking</div>
|
|
<p class="feature-desc">Every job moves through a purpose-built customizable workflow — from intake and sandblasting through coating, curing, quality check, and delivery. Every step is logged, timestamped, and visible to your whole team.</p>
|
|
<div class="feature-screenshot"><img src="images/screenshots/ShopDisplay.png" alt="Job Tracking" /></div>
|
|
</div>
|
|
<div class="feature-card reveal">
|
|
<div class="feature-num">03</div>
|
|
<div class="feature-icon">⚡</div>
|
|
<div class="feature-name">Quoting Engine</div>
|
|
<p class="feature-desc">Build detailed, multi-item quotes with automatic cost calculations covering materials, labor, equipment, overhead, and margin. Pricing tiers, customer discounts, and tax-exempt status applied without any manual math.</p>
|
|
<div class="feature-screenshot"><img src="images/screenshots/NewQuote.png" alt="Quoting Engine" /></div>
|
|
</div>
|
|
<div class="feature-card reveal">
|
|
<div class="feature-num">04</div>
|
|
<div class="feature-icon">📅</div>
|
|
<div class="feature-name">Schedule Management</div>
|
|
<p class="feature-desc">Visualize your full workload on a drag-and-drop calendar. Manage oven runs, booth capacity, and labor assignments without spreadsheets, whiteboards, or double-bookings.</p>
|
|
<div class="feature-screenshot"><img src="images/screenshots/Scheduler.png" alt="Schedule Management" /></div>
|
|
</div>
|
|
<div class="feature-card reveal">
|
|
<div class="feature-num">05</div>
|
|
<div class="feature-icon">📦</div>
|
|
<div class="feature-name">Inventory & Purchasing</div>
|
|
<p class="feature-desc">Track powder stock in real time, monitor usage per job, and set reorder points that alert you before you run out. Purchase orders, vendor bills, and accounts payable are all built in — no third-party add-ons needed.</p>
|
|
<div class="feature-screenshot"><img src="images/screenshots/Inventory.png" alt="Inventory Management" /></div>
|
|
</div>
|
|
<div class="feature-card reveal">
|
|
<div class="feature-num">06</div>
|
|
<div class="feature-icon">📊</div>
|
|
<div class="feature-name">Reporting & AI Insights</div>
|
|
<p class="feature-desc">24 built-in reports — P&L, AR aging, powder usage, job cycle time, and more. AI-powered cash flow forecasting, anomaly detection, and plain-English financial summaries so you always know where your business stands.</p>
|
|
<div class="feature-screenshot"><img src="images/screenshots/Reporting.png" alt="Reporting" /></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- HOW IT WORKS -->
|
|
<section id="how">
|
|
<div class="section-tag">Simple By Design</div>
|
|
<h2 class="section-title">Up & Running<br>In A Day.</h2>
|
|
<div class="steps-wrap">
|
|
<div class="steps-list" id="stepsList">
|
|
<div class="step active" data-screenshot="images/screenshots/SetupWizard.png" onclick="setStep(this)">
|
|
<div class="step-num">01</div>
|
|
<div class="step-text">
|
|
<h3>Set Up Your Shop</h3>
|
|
<p>Enter your pricing rules, services, and team. We walk you through setup in under 30 minutes — no IT required, no consultant needed.</p>
|
|
</div>
|
|
</div>
|
|
<div class="step" data-screenshot="images/screenshots/NewQuoteWizard.png" onclick="setStep(this)">
|
|
<div class="step-num">02</div>
|
|
<div class="step-text">
|
|
<h3>Quote & Win Jobs</h3>
|
|
<p>Generate smart, accurate quotes using your real cost data. Send professional PDFs to customers and convert them with one click.</p>
|
|
</div>
|
|
</div>
|
|
<div class="step" data-screenshot="images/screenshots/Scheduler.png" onclick="setStep(this)">
|
|
<div class="step-num">03</div>
|
|
<div class="step-text">
|
|
<h3>Manage Production</h3>
|
|
<p>Schedule work, track job status through your workflow, and keep your team aligned without endless phone calls or whiteboards.</p>
|
|
</div>
|
|
</div>
|
|
<div class="step" data-screenshot="images/screenshots/Dashboard.png" onclick="setStep(this)">
|
|
<div class="step-num">04</div>
|
|
<div class="step-text">
|
|
<h3>Get Paid & Grow</h3>
|
|
<p>Invoice customers, collect payment online, and use built-in reporting to spot your most profitable services and double down.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="step-visual">
|
|
<img id="stepScreenshot" class="step-screenshot" src="images/screenshots/SetupWizard.png" alt="Setup Wizard" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- PRICING -->
|
|
<section id="pricing">
|
|
<div class="pricing-header">
|
|
<div class="section-tag">Transparent Pricing</div>
|
|
<h2 class="section-title">Pick Your Plan.</h2>
|
|
<p class="section-body" style="text-align:center; margin: 0 auto;">No hidden fees. No long-term contracts. Cancel any time. Every plan includes a 14-day free trial.</p>
|
|
</div>
|
|
<div class="pricing-grid">
|
|
<!-- Starter -->
|
|
<div class="pricing-card reveal">
|
|
<div class="plan-name">Starter</div>
|
|
<div class="plan-price"><sup>$</sup>19<span style="font-size:1.8rem">.99</span></div>
|
|
<div class="plan-period">/ month · 1 user</div>
|
|
<div class="plan-divider"></div>
|
|
<ul class="plan-features">
|
|
<li>1 active job</li>
|
|
<li>25 customers</li>
|
|
<li>5 quotes / month</li>
|
|
<li>10 catalog items</li>
|
|
<li>2 photo per job</li>
|
|
<li>2 photo per quote</li>
|
|
<li>5 AI quotes / month</li>
|
|
<li class="muted">Online payments</li>
|
|
</ul>
|
|
<a href="https://app.powdercoatinglogix.com/Registration" target="_blank" rel="noopener" class="plan-btn">Start Free Trial</a>
|
|
</div>
|
|
<!-- Basic -->
|
|
<div class="pricing-card reveal">
|
|
<div class="plan-name">Basic</div>
|
|
<div class="plan-price"><sup>$</sup>69</div>
|
|
<div class="plan-period">/ month · 1 user</div>
|
|
<div class="plan-divider"></div>
|
|
<ul class="plan-features">
|
|
<li>5 active jobs</li>
|
|
<li>75 customers</li>
|
|
<li>10 quotes / month</li>
|
|
<li>50 catalog items</li>
|
|
<li>4 photos per job</li>
|
|
<li>4 photos per quote</li>
|
|
<li>10 AI quotes / month</li>
|
|
<li class="muted">Online payments</li>
|
|
</ul>
|
|
<a href="https://app.powdercoatinglogix.com/Registration" target="_blank" rel="noopener" class="plan-btn">Start Free Trial</a>
|
|
</div>
|
|
<!-- Pro -->
|
|
<div class="pricing-card featured reveal">
|
|
<div class="plan-badge">Most Popular</div>
|
|
<div class="plan-name">Pro</div>
|
|
<div class="plan-price"><sup>$</sup>149</div>
|
|
<div class="plan-period">/ month · up to 5 users</div>
|
|
<div class="plan-divider"></div>
|
|
<ul class="plan-features">
|
|
<li>20 active jobs</li>
|
|
<li>250 customers</li>
|
|
<li>50 quotes / month</li>
|
|
<li>150 catalog items</li>
|
|
<li>6 photos per job</li>
|
|
<li>6 photos per quote</li>
|
|
<li>50 AI quotes / month</li>
|
|
<li>Online payments</li>
|
|
<li>Accounting Module</li>
|
|
</ul>
|
|
<a href="https://app.powdercoatinglogix.com/Registration" target="_blank" rel="noopener" class="plan-btn">Start Free Trial</a>
|
|
</div>
|
|
<!-- Enterprise -->
|
|
<div class="pricing-card reveal">
|
|
<div class="plan-name">Enterprise</div>
|
|
<div class="plan-price"><sup>$</sup>349</div>
|
|
<div class="plan-period">/ month · unlimited users</div>
|
|
<div class="plan-divider"></div>
|
|
<ul class="plan-features">
|
|
<li>Unlimited active jobs</li>
|
|
<li>Unlimited customers</li>
|
|
<li>Unlimited quotes</li>
|
|
<li>Unlimited catalog items</li>
|
|
<li>Unlimited photos per job</li>
|
|
<li>Unlimited photos per quote</li>
|
|
<li>Unlimited AI quotes / month</li>
|
|
<li>Online payments</li>
|
|
<li>Accounting Module</li>
|
|
</ul>
|
|
<a href="https://app.powdercoatinglogix.com/Registration" target="_blank" rel="noopener" class="plan-btn">Start Free Trial</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FAQ -->
|
|
<section id="faq">
|
|
<div class="faq-wrap">
|
|
<div>
|
|
<div class="section-tag">Got Questions?</div>
|
|
<h2 class="section-title">We've Got<br>Answers.</h2>
|
|
<p class="section-body" style="margin-top:1rem">Can't find what you're looking for? Reach out to our team — we're real people who know the powder coating industry.</p>
|
|
<a href="mailto:info@powdercoatinglogix.com" class="btn-primary" style="margin-top:2rem; display:inline-block">Talk To Us</a>
|
|
</div>
|
|
<div class="faq-list" id="faqList">
|
|
<div class="faq-item open">
|
|
<div class="faq-q">How does the AI photo quoting work? <div class="faq-icon">+</div></div>
|
|
<div class="faq-a">Upload or snap a photo of the customer's parts and our AI analyzes them for surface area, complexity, and coating requirements — then generates a recommended price in seconds. You review, adjust if needed, and send. No measuring tape, no guesswork.</div>
|
|
</div>
|
|
<div class="faq-item">
|
|
<div class="faq-q">Do I need to be tech-savvy to get started? <div class="faq-icon">+</div></div>
|
|
<div class="faq-a">Not at all. The platform was designed for shop owners and managers, not IT departments. A guided 10-step setup wizard gets you configured and ready to take your first job in under 30 minutes — no consultant required.</div>
|
|
</div>
|
|
<div class="faq-item">
|
|
<div class="faq-q">How is this different from generic job shop software? <div class="faq-icon">+</div></div>
|
|
<div class="faq-a">Most shop software is built for general manufacturing and bolted onto powder coating use cases. Powder Coating Logix was built from the ground up for this industry — the 16-stage workflow, oven and batch pricing, powder usage tracking, and AI photo quoting are all native features, not workarounds.</div>
|
|
</div>
|
|
<div class="faq-item">
|
|
<div class="faq-q">Can I import my existing customer and job data? <div class="faq-icon">+</div></div>
|
|
<div class="faq-a">Yes. We support CSV imports for customers, job history, and inventory. Our onboarding team can assist with migration from spreadsheets or other systems at no extra charge.</div>
|
|
</div>
|
|
<div class="faq-item">
|
|
<div class="faq-q">What does the free trial include? <div class="faq-icon">+</div></div>
|
|
<div class="faq-a">Your 14-day free trial gives you full access to every feature in the plan you choose at signup — no credit card required. At the end of the trial, continue on your plan or cancel with no obligations.</div>
|
|
</div>
|
|
<div class="faq-item">
|
|
<div class="faq-q">Is my shop's data secure and private? <div class="faq-icon">+</div></div>
|
|
<div class="faq-a">Yes. We utilize enterprise-grade hosting with a 99% uptime SLA. Your data is never sold or shared.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section id="cta">
|
|
<div class="bg-glow"></div>
|
|
<div class="section-tag" style="justify-content:center"><span style="display:none">-</span>Start Today</div>
|
|
<h2 class="section-title">Stop Managing<br>Chaos.<br><em>Start Running<br>A Business.</em></h2>
|
|
<p class="section-body">Join hundreds of powder coating shops that have replaced spreadsheets, sticky notes, and guesswork with Powder Coating Logix.</p>
|
|
<div style="display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;">
|
|
<a href="https://app.powdercoatinglogix.com/Registration" target="_blank" rel="noopener" class="btn-primary">Start Free Trial — No Card Required</a>
|
|
<a href="mailto:info@powdercoatinglogix.com" class="btn-ghost">Contact Us</a>
|
|
</div>
|
|
<p style="margin-top:2rem; font-size:0.8rem; color:var(--muted)">14-day free trial · No credit card required · Cancel any time</p>
|
|
</section>
|
|
|
|
<!-- FOOTER -->
|
|
<footer>
|
|
<div class="footer-logo">Powder Coating <span>Logix</span></div>
|
|
<ul class="footer-links">
|
|
<li><a href="#features">Features</a></li>
|
|
<li><a href="#pricing">Pricing</a></li>
|
|
<li><a href="mailto:info@powdercoatinglogix.com">Contact</a></li>
|
|
</ul>
|
|
<div class="footer-copy">© 2026 Powder Coating Logix. All rights reserved.</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Scroll reveal
|
|
const reveals = document.querySelectorAll('.reveal');
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach((e, i) => {
|
|
if (e.isIntersecting) {
|
|
setTimeout(() => e.target.classList.add('visible'), i * 80);
|
|
}
|
|
});
|
|
}, { threshold: 0.1 });
|
|
reveals.forEach(el => observer.observe(el));
|
|
|
|
// Steps
|
|
function setStep(el) {
|
|
document.querySelectorAll('.step').forEach(s => s.classList.remove('active'));
|
|
el.classList.add('active');
|
|
const img = document.getElementById('stepScreenshot');
|
|
img.style.opacity = '0';
|
|
img.src = el.dataset.screenshot;
|
|
img.onload = () => { img.style.opacity = '1'; };
|
|
}
|
|
|
|
// FAQ
|
|
document.querySelectorAll('.faq-item').forEach(item => {
|
|
item.querySelector('.faq-q').addEventListener('click', () => {
|
|
const isOpen = item.classList.contains('open');
|
|
document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('open'));
|
|
if (!isOpen) item.classList.add('open');
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|